Cairns Web Developer

Download this show

Launch our podcast player

News

Remy Sharp talks about jQuery

Review: The Website Owners Manual

Similar Posts:

• Website Owner’s Manual
• Ignoring your instructions
• A client’s work is never done
• 158. Home
• d.construct: Full of questions

Did you like this post? Then Buy Paul’s book

The Website Owner’s Manual is a book for the thousands of marketers, IT managers, project leaders, and business owners who need to put a website in place and keep it running with a minimum of trouble.

It is also ideal for web designers who want to educate their clients about best practice. Why not add the cost of this book to your next project and avoid clients who just don’t ‘get it!’

Permalink |
No comment |
Add to
del.icio.us

This work is licensed by Paul Boag under a Creative Commons Attribution-Non-Commercial-No Derivative Works 2.0 UK: England & Wales License.

The prevailing wisdom within the web design community is that you should specialise. However, does that really make sense? Is that what website owners are looking for? I would argue it is not.

Website owners have an increasingly difficult job. Not only do they need to provide visitors with an engaging, usable and accessible website, they also have to interact with them through social media, great content and other online marketing channels.

Think about it for a moment. The most effective online strategies consist of at least the following elements…

• An effective website
• Email marketing
• Google Adsense
• Twitter
• Facebook
• RSS
• Youtube

Website owners also have to worry about…

• Business strategy
• User profiling
• Competition analysis
• Site promotion
• Site analytics
• Calls to action

The list could go on.

When faced with such a daunting task they do not want a specialist. What use is an expert in ruby on rails when faced with such a broad and complex set of issues?

The need for generalists

They need generalists. They need people who can advise them on the breadth of challenges they face.

The specialist argues that they can hire multiple specialists to handle these different areas. However, who brings the pieces of the puzzle together? The website owner? I would argue this is asking too much.

Large numbers of suppliers create serious logistical problems, not to mention the potential for shifting blame. Most website owners want a one stop provider who can advice them on the whole range of challenges they face.

Being a web designer in this new decade is about more than building websites. A web designer will need to have a good understanding of business practices, site analytics, marketing, copywriting, social media and more.

Admittedly those who advocate specialising encourage people to have a T shaped knowledge. In other words web designers should have a superficial knowledge of all areas and a deeper understanding of one.

Although I can see the value in this approach as a way to ensure you work well with other specialists, I do not think it will meet the needs of most website owners.

Web designers need a deeper understanding of a broader set of areas if we are to be of real value to their clients.

The alternative is that website owners themselves have to develop this level of knowledge and that is going to be difficult for anything other than a full time website owner.

How then can a web designer broaden his or her knowledge? The answer is simple – start exposing yourself to a great number of sources of information.

Broadening your knowledge

Web designers should of course be learning about the latest CSS techniques and jquery plugins. However, they should also be reading marketing blogs, business strategy books and even attending copywriting workshops.

Here are a few suggestions to start off the budding generalist…

• Read ‘Made to Stick‘ a brilliant book on how to make ideas sticky.
• Attend Relly Annett Bakers workshops on writing for the web
• Start reading a marketing blog like econsultancy or a blog on customer service.
• Read anything written by Malcolm Gladwell – it will broaden your mind.

I know what you are thinking – “I don’t have time for that.” Well I am sorry to break the news but you have picked the wrong job!

The web is one of the fastest moving industries on the planet and needs an incredibly broad set of skills. If you don’t have those skills or fail to keep them up-to-date then you will lose credibility. You need to make time.

At the end of the day it is simple. Our website owners are asking for advice on everything from design to facebook and if we don’t give it to them then somebody else will. That is the reality of a consumer culture.

Similar Posts:

• Round up of web copy posts
• Target, accessibility and opinions
• Why meetups matter
• ClickTale launches real time monitoring
• Website Owner’s Manual

Did you like this post? Then Buy Paul’s book

The Website Owner’s Manual is a book for the thousands of marketers, IT managers, project leaders, and business owners who need to put a website in place and keep it running with a minimum of trouble.

It is also ideal for web designers who want to educate their clients about best practice. Why not add the cost of this book to your next project and avoid clients who just don’t ‘get it!’

Permalink |
20 comments |
Add to
del.icio.us

This work is licensed by Paul Boag under a Creative Commons Attribution-Non-Commercial-No Derivative Works 2.0 UK: England & Wales License.

Subscribe to Boagworld Bitesize

Dave: Okay, with me here is Remy Sharp who is a jQuery expert. OS, Remy, you work for yourself – what sort of stuff do you do?

Remy: I work on a mix of things, I work on some client projects – if a client comes to me with an interesting idea, I’ll work for them for their project. I tend to work as a consultant, a hired hand to their project rather than delivering the whole project to a client – my client will have their own client, so they work through me.

Dave: Okay right, so you’re there to provide input and to keep things going, keep the skill level quite up, and to keep…

Remy: Yeah, I’m basically… I tend to try and be a hired expert in kind of front end but I do everything anyway so I get to cherry pick the work and I get my fingers stuck in all kinds of pies.

Dave: Cool. And how long have you been involved with jQuery for?

Remy: Since June 2006 when I posted pretty much my first article on the web and it was a JavaScript tutorial and I realised there was Prototype and script.aculo.us for effects and I discovered jQuery and, because I’m a bit of a lazy developer I prefer to kind of spend my time doing stuff rather than doing the donkey work. jQuery allowed me to skip all the difficult stuff and when I finished the article, I took that and just converted it to jQuery and it was 20 lines down to 2, and that was my first article.

Dave: That’s really cool because one of the things I like about jQuery is the fact that it allows us to do all the same things but doesn’t tell you how to do THE CODING WRONG OR RIGHT but just gives you the tools to not have to worry too much about the cross-browser stuff. What is that you think makes jQuery so popular, because as you can see from the graph I showed you earlier – 35% share across the JavaScript CATEGORIES.

Remy: Yeah, for me the reason it’s successful is the community behind it. I mean, it came at the right time and the CSS Expressions inside of jQuery make it very accessible. But it’s the community, the help, create all the documentation, create blogs and talk about it and actually implement it. The Evangelist team, they weren’t made to be evangelists – they’ve taken people who were blogging about it, and being passionate about teaching other people how quickly they can get up to speed with JavaScript using jQuery, upspeeding in creating effects and AJAX and so on, using jQuery. They then have been pulled in to be evangelists. But I’m absolutely convinced it’s all down to the community that have helped build us up and also about the IRC channel, it’s really heavily subscribed, something like 300, 400 people on there everyday, and there’s newbies and intermediates and advanced people going on there, asking questions. And there’s guys and girls wanting to answer questions just for the challenge of being able to solve these things. I think it’s a friendly community as well – I’ve been on some IRC channels where if the question is too easy for them, they’ll tell you to bugger off. They’re just rude to you and I don’t get that in the jQuery community at all, I haven’t seen that very much.

Dave: I guess it’s partly due to JQuery being a product people tend to get excited about. People tend to naturally think ‘this is incredible’ and they want to share it with friends and when they get someone who doesn’t know about it, I guess they want to, rather than push them away, encourage them and bring them along and teach them everything they know. That’s going to help a lot.

Remy: The other thing for me is the CSS Expressions, the actual CSS part of it. I run jQuery for designers because I think that web designers like the front end people who just know CSS and know how to cut a mock into HTML but haven’t really touched JavaScript, they can take a CSS Expression and go ‘oh yeah, I understand if I can style it using this CSS, I can do something like add a class or add a click event using that CSS as well’. And people instantly get that. Once they understand they can use CSS to get into that particular area of the DOM and just manipulate it a little bit, they get it. I think the kind of ‘click’, the eureka moment is really, really early on with JQuery. JavaScript takes a little bit longer to understand how to navigate down to that specific point and some of the other libraries, they do more things… like Prototype is very good for extending the JavaScript language whereas jQuery is very much find something and do something to it.

Dave: Find something and do something to it is like a mantra people hold on to – I guess it’s quite a powerful way to think about it because it just makes sense to people. I think one of the areas I’ve noticed particularly with designers is they see the CSS Selectors and think it’s brilliant but WITH SUPPORT you’ve got to get across that message that it’s not a CSS engine you’re thinking about, it’s the JavaScript engine. How’s that work? What’s going on there?

Remy: In terms of the support?

Dave: Yes, because what they see is not CSS, it’s not CSS that’s going on is it?

Remy: No, underneath jQuery is an engine called Sizzle which is by John Resig and it’s completely stand alone piece of software that can be ported to any library if you want to, or write your own. What that’s doing is deconstructing that CSS selector and finding the right DOM nodes but is also detecting native functionality inside the browser. Safari 4 for instance has Query Selector and Query Selector All which are methods on the DOM that you can pass the CSS selector in and the browser will natively go and grab that content and give it back to you. So, inside of Sizzle, it detects that functionality and doesn’t bother with all the code that does all the searching inside of Sizzle. It just says ‘I will defer to the native functionality’. With IE 6, it’ll say ‘right, there’s no Sizzle here, I’m going to deconstruct this CSS selector and search through the DOM nodes and try and do it in the most optimised way’. I know there have been lots of speed tests as each library releases each selector engine they all go through this Slick Speed thing. Sizzle is currently running the lead with that and it’s the latest, one of the last releases of selector engines. One my pet things is to try and think about how you’re writing a CSS selector, it should be treated like CSS but CSS is native to the browser so in IE6 if you do .header it’s quick because it’s native but in IE6 and JavaScript selectors it means ‘search every single DOM node for this class’. It’s looking at every DOM node – if your DOMs very big, like 2000 elements, you can narrow that down by just doing div.header. So, it’s still down to the browsers and browser support but Sizzle will even the playing field and you won’t have to worry about the support but the browser is going to be faster, depending on how new it is.

Dave: So there’s two real benefits here. First, you don’t have to worry about ??? anything in the jQuery documentation, any kind of selector that you can imagine will happen across all browsers but it will be faster in a faster browser. So there’s a two-fold benefit there, you don’t have to worry about older browsers like IE6 but you can get all the performance benefits of say IE8.

Remy: Yeah, I mean for a small application or a even a medium size application you’re not going to notice the difference of speed of selection in IE6 compared to Safari. It’s unlikely you’re going to be able to spot that. If you’ve got a client web site or a portfolio website, you’re not going to see that difference, but if you’re working on a very complicated website that has a huge amount of JavaScript behind the scenes, you’re trying to save milliseconds all the time. You think about optimising, just as you would cache variables, you’d optimise all the code as well as your CSS selectors but from a developer’s point of view working on an average range of portfolio work, project work, the selectors are going to be quick and they won’t need to worry about that kind of performance difference. But jQuery, yeah like I said, completely evens out the playing field for that kind of thing.

Dave: Cool. So, one of the things that we tend to find is that you get a project and you use one tiny bit of jQuery, so you’re writing a nice hacky bit of jQuery that does a nice sort of thing – something slides up and down. Then over the course of six months suddenly you get a huge amount of things sliding down, across and up and all over the place, and you go back to it and you think ‘if only I’d thought about organising all this stuff earlier…’. What kind of tips can you give for making sure you write code, because obviously jQuery is quite concise but you can easily end up with a mess. Are they any ways you can help overcome this?

Remy: Yeah, I mean, it comes down to planning, for one, but some of things I would do is… Paul Irish blogged about a pretty straightforward technique – what you do is look for an ID on the Body element and use that as your READY function. You have one start up file and it’s an object that has the ID of the Body as its key and it has a function associated with that. So if you’re on the landing page, the home page, it’ll run a certain kind of start up block of code and if you’re on maybe the search page it’ll only execute a different set of code on start up.

Dave: Oh, so you get a different set of jQuery functions happening depending on what page you’re on and what stuff needs to happen. That’s quite clever.

Remy: And I would take all my plugins and separate them out into separate files where I know they’re going to be reused either across the web site or other projects. But personally, I would also, for production, release that all into one file so it would be unified anyway, but during development, certainly plugins would be separated in separate files or maybe one file that would contain my plugins. I would have boot up code, start up code, in one separate file with the key value pair for a kind of ‘home page runs this code, search page runs this code, article page runs this code…’ and so on. And one of the other things I’ve had people ask me about is having a lot of markup inside of your jQuery which is something… the chap I was speaking to was saying, we’re trying to separate content from code and I see this process happening where they know they want to dynamically create something on the page where it slides out and something happens. So it’s like shifting markup into JavaScript. I mean, you can immediately see the problems with that because your markup changes five years down the line or even six months down the line and you’ve forgotten about this piece of JavaScript that contains markup. You can use templating systems to get around that kind of thing. You can inject it using AJAX hits or you can have it embedded on the web page already and reveal it as you’re going along. But you need to think about how it’s tucked away. Those are the kinds of things I try and use when I’m building a project.

Dave: Well that sounds like pretty good advice. On the subject of plug-ins. I mean, the idea of creating a plug-in probably seems daunting if someone has come from a design background and they’re you’re just getting their hands dirty with jQuery and they’re quite comfortable with taking and finding something and doing something with it if you know your selectors and you know a few of your actions. At what point should you start thinking ‘this could be a plug-in, I should be doing something that’s reusable’? How would you make that decision?

Remy: The most obvious one for me is if you’re working on two different websites where you’re copying and pasting the code. That’s the first point at which you should say this should be a plug-in here. But typically you’re working within one project and you’re finding you’re re-using a bit of code all the time. My rule of thumb is if my code that’s a candidate for a plug-in, if it doesn’t need to know exactly how it’s marked up and exactly how the action should happen and how it should be styled, then that would be a plug-in. For instance, if I have a link that always reveals a particular type of content, like a Terms and Conditions link would maybe make the content slide down and I have another link somewhere else and it’s making some other content show – having a reveal link is a fairly common pattern for instance. So I would have a plug-in called ‘Reveal’ which would say ‘look at the link I’ve just clicked on, take the hash off the URL, go find that hash in the document somewhere and animate it into the page using the passed in effect’. So I could now do ‘search through all the anchors with the class Reveal on it and here’s… so I do .reveal open brackets slide down. Or maybe I could have that as part of a class or a metadata on the actual link itself so it could read that piece of metadata out in my plug-in to reveal this ID on the page somewhere. So it’s really, it’s when you start repeating code, that’s the rule of thumb. If you repeat code a lot it’s probably going to be a good plug-in. If you’ve got a friend who you think would use it, that’s a plug-in as well. Developers should probably talk to each other more than they do already (laugh from Dave), and that will give you an idea of these kinds of things.

Dave: Yeah, definitely we do see certain common functions that you do tend to re-use quite a lot. I guess, as you briefly mentioned there, it comes to a point when you want to make a nice re-usable function. How do you translate it into something very specific that can be re-used, what’s the secret there?

Remy: It’s looking, it’s trying to be able to foresee not all of the possible uses for this piece of code, but the common uses for this code. I’ve been in enough projects where you’re told to make something so generic and so flexible that it ends up being so generic a piece of software that nobody knows how to use it anymore because they don’t know what all the arguments are. But, when I’m looking at a piece of code and thinking this looks like a good candidate for a plug-in I try and think about how else it will be used, like for instance, when I’m sliding down like in that previous example, what if slide down isn’t the only animation effect I want. What if I want to be able to pass in the duration of the effect, maybe an ease in as well? So, if I think about those kinds of aspects of the design of my little piece of code, that’ll help me actually write the piece of code, because I strip out the things that are specific to this particular effect or this particular interaction. I’ll strip those away and also I’ll try and think about, if I have specific selectors inside my function that are targeting specific areas in the DOM, how do I make that more generic? Can I have some passed in or should I be creating those DOM nodes on the fly? That kind of thing. You have to make a judgement as to how far you’re going to re-use it basically and I’d strongly recommend don’t try to make a plug-in that can be re-used for everything because (laugh from Dave) it’ll end up in the bin.

Dave: Alright, cool. So what’s the future for jQuery? It seems to be growing massively. I mean, a couple of years ago no one would have heard it and now you can’t move without seeing the guides and the tutorials on the internet, and every one seems to be talking about it. Where’s it going, what’s the next stage?

Remy: Well, the next stage are … the mobile version of jQuery which I assume is going to be released around the same time as 1.4. I don’t really know, I mean it’s ending up on a lot of websites, I mean the EDM that Google offer – I’m not sure if everyone knows about that, I met someone today who didn’t know about it – Google have a CDN for all the large JavaScript libraries so it means that, for instance, Stack overflow has the Google-hosted version of jQuery and it means that if you had it on your website and you use the same link, it’ll already be hot cached inside of the browser so it will load faster. So I was being asked whether or not browsers should be preloading jQuery into the browser – you can just kind of enable it and start using it. At the moment we have Google CDN which is kind of close to actually having that. In terms of the far future, I think the adoption is going to carry on, they’re going to keep growing the community. There’s four conferences for jQuery next year, one in London, Boston and San Francisco and then an online conference where people can actually do live Q&A. Just keep telling people about it (laugh from Dave) and sharing how easy it is. I mean there’s always beginners to every single industry so if we show them what the options are…

Dave: I was having a look into the jQTouch plug-in for jQuery which seems to be heavily optimised for iPhone or mobile Safari browsers. What’s all that about, what’s going on there?

Remy: As in the optimisation?

Dave: As far as I can tell, it’s doing more than just animating. It seems to be using this built-in to…

Remy: Yeah, so what jQTouch is doing is – because Safari 4 and particularly the iPhone WebKit have native animations built in, they have CSS animations basically. So what jQTouch is doing is converting your request for animation, in fact it’s not… I wrote that (laugh from Dave)… I’m working on a project that is using jQTouch and I’ve been hacking the bits of it to do what I wanted to do so there’s a bit of crossover there… It’s translating, basically saying ‘we want to animate left to right’ so it’s writing in the CSS expressions, giving the DOM node the CSS properties to actually trigger the animation to go.

Dave: Right.

Remy: So, it’ll prep it with ‘WebKit transition should be this’, it needs to translate to nought pixels to 320 or whatever it is and then it will actually apply it. WebKit actually also has a WebKit transition end that you can bind on to say the transition is now finished, trigger this call back and maybe you can do your piece of AJAX or whatever you do. But it’s using native CSS animations and applying them bit by bit against the DOM nodes.

Dave: So you get to use all the built in animations to make it really smooth and cool and you’re still using jQuery.

Remy: Yep. Yeah. What I’ve been doing on recent projects that I hope to kind of open source as well is create a plug-in that sits in between the two, that says ‘is there native WebKit animations and if there is take whatever animation data you gave me, if you want me to animate left or the opacity, use the native ones, if it’s not then use jQuery’s built-in animation functions’. So it can be smoother and faster and easier on a browser if it’s native than if it were actually run through JavaScript. That’s what I really want to see, I’d like to see jQTouch move in that direction and create a library that isn’t specifically for iPhones but a library for any kind of mobile device and you can still use it and it’s not dependant on WebKit transitions and I suspect it will end up going that way, the same as HTML 5. I’m kind of digressing a little bit but the Web forms 2.0, all the kind of built-in validation into the forms and the input types – I’d like to see a jQuery library, in fact the jQuery Validation library, detect that functionality and if it’s there let it just happen and if it’s not, plug it. So we can start making use of native functionality inside browsers when it’s available.

Dave: …it’ll just then happen…

Remy: Yeah, I mean, there’s’ still discussion as to whether or not the way the validation is happening inside the browser is absolutely correct and whether it should be mirrored or not but that’s what I ‘m kind of excited to see. Plugging native functionality if it’s not there and using native functionality if it is there and just making it easier for the user to get there.

Dave: It sounds really exciting. And I gather you’ve got a conference coming up next month?

Remy: Yes, I’m running a conference for JavaScript developers, not focussed on libraries such as jQuery and so on but getting underneath the skin of JavaScript and how it all works. Conference called ‘Full Frontal’. It’s in Brighton on 20th November and it’s being held in the world’s first or UK’s first purpose-built cinema, its a hundred years old this year. We have speakers from Yahoo!, well not specifically from Yahoo But I cherry picked all the speakers before I even announced the conference, Christian Heilmann, Simon Willison, PPK (Peter-Paul Koch). Talks on accessible JavaScript, JavaScript in mobile devices, in HTML 5, mashups … the dictionary definition of Full Frontal is ‘nothing held back or concealed’ so the idea is really getting to the guts of JavaScript. After @media AJAX finished last year I really wanted to see a JavaScript conference in the UK.

Dave: I guess for people who want to do more than just use the tools but really understand what’s going on, how they can make full use of it and get deeper into it.

Remy: Yep, I mean I see the JavaScript community as two sets of people. People who use CSS and understand that, and don’t particularly want to understand JavaScript and what’s happening inside of jQuery and the other group of people who know JavaScript well and are using jQuery to just kind of skip the donkey work. My conference is for beginners, intermediates – advanced people are going to know this stuff as well they’re going to get to learn a few edge technologies but Full Frontal is aimed at people who want to understand JavaScript and see what we can do with it. It’s a great language, it’s in every single browser, across the world all over the place so I think it’s worth looking at basically.

Dave: Cool. Very exciting. Right, well thanks very much, it’s been a pleasure.

Remy: You’re welcome. Cheers.

Thanks goes to Wendy Phillips for transcribing this interview.

Similar Posts:

• Creating a Draggable Sitemap with JQuery
• 135. Libraries
• 134. Chrome
• 103. Bargain basement
• Question: Headscape tabs

Did you like this post? Then Buy Paul’s book

The Website Owner’s Manual is a book for the thousands of marketers, IT managers, project leaders, and business owners who need to put a website in place and keep it running with a minimum of trouble.

It is also ideal for web designers who want to educate their clients about best practice. Why not add the cost of this book to your next project and avoid clients who just don’t ‘get it!’

Permalink |
No comment |
Add to
del.icio.us

This work is licensed by Paul Boag under a Creative Commons Attribution-Non-Commercial-No Derivative Works 2.0 UK: England & Wales License.

Some of the changes at Google are more visible than others, and some more useful than others, but it goes to show that Google aren’t quite ready to let things stagnate just yet after the launch of Microsoft’s Bing.

Realtime results

OK, so maybe you have to be using another search engine to miss it, but a list of recent search result changes would be incomplete without mentioning this big one.

For some search terms Google are now displaying realtime results: effectively results from Twitter, Facebook, and other social networks. Undoubtedly this will have an effect on search engine optimisation, but whether that means more up to date (and more relevant) results are being returned or simply people will spam Twitter to be featured at the top of Google’s search results remains to be seen.

Site owners might also start registering their search keywords as a Twitter account, in the same vein of buying web site URLs with keywords to get their keywords at the top of the search engine results pages. If this happens, this could drastically change the way Twitter (and Twitter username choices) is seen.

Breadcrumbs

For those web site pages that contain breadcrumbs, Google are starting to show them underneath the search result listings. It’s not available just yet with every site, but for those listings that do contain them I can see this feature being particularly useful to the end user, showing for example direct links to a product’s category for an online shop’s listing.

Web site owners can take advantage of this now by introducing breadcrumbs to their sites on any relevant pages. It’s always worth adding them to pages, as even if Google don’t add them to your site’s listing, it’s good practice to add them anyway because breadcrumbs not only improve usability but they could also help with your search engine ranking.

Personalised search for everybody

Google Personalised Search now works even for people who aren’t logged in. This is a big one for search ranking, as this might result in your site getting a different ranking for each visitor who performs a search.

If a result has been clicked a number of times, then that site will start to appear higher up in the search rankings for that visitor, with the user’s search and click activity being stored for 180 days. This will mean that you don’t need to be logged in and have search history enabled for search results to be tailored to your habits and preferred sites, which will result in more more relevant searches in the long term for more people.

But this is bad news for web site owners who care about search engine optimisation: you can no longer be certain where your site will rank. You can have an idea, but if searchers click on other sites, your link might be pushed from page one to page two without you knowing about it.

Region

Another useful one for users if they want to know at a glance which country a web site is based. Web site owners that are registered with Google Webmaster Tools can now set their geographical location, which is displayed next to the page URL.

The region is only shown for results that don’t have country top level domains (for example .com and .net), and the region you are searching from isn’t shown (so if you’re searching from the UK, web sites set as being from there won’t show the UK region name).

This feature, however, could also be confusing if it doesn’t work properly. If a site owner sets their site to be based in the United States but it’s got worldwide appeal, potential visitors from other countries might be turned away before they even visit. So this is a great feature, but it’s certainly one to be used wisely, to ensure you get the right target audience and don’t turn anybody away who might otherwise be interested in your site.

If you want to set your web site’s region, you can do this in Google Webmaster Tools by selecting Site Configuration > Settings > Geographic Target.

Search features in search bar

Those handy search features that Google provide are now available in the search bar of the google.com homepage.

Search for “london weather” and get the weather in London for the next four days. Enter for “diaphanous” and find out what it means. Type in a unit conversion or maths sum and get the answer. All displayed at the top of the auto-suggest box without having to wait for the results page. You can also type some site names such as “Twitter” and the twitter homepage is suggested at the top of the list.

This update is only available on google.com, so if you’re not based in the United States you’ll have to click on the “go to google.com” link before this works.

In addition to this, the “Google Search” and “I’m Feeling Lucky” buttons are now displayed inside the auto-suggest box. This is a tiny update you barely notice, but it’s also an update which makes usability that little bit better. For those who don’t press the return key to perform a search, the buttons are now visible and selectable straight away, rather than hidden underneath a drop down box that needs to be closed before they can be clicked.

Anchor links in results

For those pages with internal anchor links, Google have started to show these on search result pages. In addition to this, a “Jump to” link is also shown in the result if the relevant area of the page is after an anchor.

It’s hard to say how Google decides which listings to show these with, but chances of having them for your site’s listings are higher if you use semantic anchor names, show a table of contents, and logically split the sections.

Local public transit next to location

For major attractions, the location and map details are starting to show nearest public transit details.

There probably isn’t much you can do to influence your business or premises containing these details, obviously it’s very location specific. But it wouldn’t harm to submit your site and business details to Google Maps and ensure your full location details are completed.

Bigger image results thumbnails

This is a small change to the image thumbnails that appear on the main search results page. There’s now a new layout which includes larger images, depending on the quality of the thumbnails.

About the author

Becky Jones is a freelance web developer with an interest in php, Wordpress, mobile, and pretty much anything that might be new

Similar Posts:

• How google ranks your site
• Non hierarchical navigation
• Statstastic! Jakob loves his stats
• Podcast 51: Better Google Listings
• Creating a great search facility

Did you like this post? Then Buy Paul’s book

The Website Owner’s Manual is a book for the thousands of marketers, IT managers, project leaders, and business owners who need to put a website in place and keep it running with a minimum of trouble.

It is also ideal for web designers who want to educate their clients about best practice. Why not add the cost of this book to your next project and avoid clients who just don’t ‘get it!’

Permalink |
13 comments |
Add to
del.icio.us

This work is licensed by Paul Boag under a Creative Commons Attribution-Non-Commercial-No Derivative Works 2.0 UK: England & Wales License.

Download this show.

Launch our podcast player

News

Feature: Increase your ecommerce sales

Reviews

Similar Posts:

• Ecommerce 101
• Web Design Podcast (11) – Benefits of blogging
• Podcast 53: Ecommerce Usability
• How much to blog?
• Lessons to be learnt from the new Google homepage

Did you like this post? Then Buy Paul’s book

The Website Owner’s Manual is a book for the thousands of marketers, IT managers, project leaders, and business owners who need to put a website in place and keep it running with a minimum of trouble.

It is also ideal for web designers who want to educate their clients about best practice. Why not add the cost of this book to your next project and avoid clients who just don’t ‘get it!’

Permalink |
One comment |
Add to
del.icio.us

This work is licensed by Paul Boag under a Creative Commons Attribution-Non-Commercial-No Derivative Works 2.0 UK: England & Wales License.

My name is Ezequiel Bruni, and I’m a Canadian designer based in Mexico.

I just wanted to let you all know about a tool which is pretty awesome (and will make your life easier).

Zen Coding is set of plugins for various text editors that enable you to code much faster than I bet you normally do.

For example, let’s say you want a div, with a heading, and three paragraphs inside. In each paragraph element, you want a span element as well. Each element needs classes and ids, you get the picture. It’s tedious, even with copy and paste.

What if I told you that you could do all of that with just one line of code? Sound interesting?

Zen coding allows you to do that, and it’s pretty darn awesome.

To see how it works, go to http://code.google.com/p/zen-coding/

Zen Coding supports:

• TextMate, Mac
• Aptana, crossplatform
• Coda, Mac
• NetBeans, crossplatform
• Espresso, Mac
• Web IDE, crossplatform
• TopStyle, Windows
• Sublime Text, Windows
• Dreamweaver, crossplatform

And there is partial support for:

• IntelliJ IDEA, crossplatform
• SciTE, crossplatform
• gedit, *nix
• SlickEdit, crossplatform

I’ve personally tried the Aptana plugin, as well as the gedit plugin on Linux, and I’ve gotta say, it’s beautiful. The way I code is certain to change, and I recommend Zen Coding to anyone who does a lot of HTML/CSS development.

I hope you check it out, it’s awesome.

Similar Posts:

• Make your website go viral
• Coda
• Is Google Chrome Frame the right approach?
• 5 ways to give your site a speed boost in less than 30 minutes.
• 4 ways to bring new life to old Wordpress blog posts

Did you like this post? Then Buy Paul’s book

The Website Owner’s Manual is a book for the thousands of marketers, IT managers, project leaders, and business owners who need to put a website in place and keep it running with a minimum of trouble.

It is also ideal for web designers who want to educate their clients about best practice. Why not add the cost of this book to your next project and avoid clients who just don’t ‘get it!’

Permalink |
13 comments |
Add to
del.icio.us

This work is licensed by Paul Boag under a Creative Commons Attribution-Non-Commercial-No Derivative Works 2.0 UK: England & Wales License.

First. Who is the book for?

The book states that it’s for “anybody with a basic knowledge of HTML and CSS” and experts. I’d say it’s more for the first case, but I’ll expand on that later.

There are lots of useful tips and tricks, that I’m sure you’ll use over and over, explained in a solid and easy to understand way. The fact that the examples can be seen online and that there are files that can be downloaded is great.

Second. It’s a second edition.

When I read the first edition, I was just starting to work with CSS, and CSS was still a bit of a mystery to me. I remember reading some things that I thought to be pure magic and that seemed very complicated, but now I realise they are used by any good CSS coder. So, at the time, the book opened my eyes to those techniques and to the possibilities of what could be done with CSS.

Content.

The book covers subjects from the beginning to a more advanced level.

It starts with the importance of semantic HTML, how to set good foundations. It takes a very brief look into microformats and HTML5 as well.

Then it moves onto selectors, with some more advanced and CSS3 ones — but it doesn’t go very deep into that area to be honest.

It explains the box model, which is rather important, very well. Liquid and elastic layouts.

Some more advanced techniques, like sliding doors and even multiple backgrounds, which is quite refreshing. Opacity and rgba colours.

There are some clever uses for the :target pseudo-class and attribute selectors. Some webkit proprietary code like gradients and reflections.

It also explains how to style lists and navigation. I would have liked to see a larger section for definition lists, because there’s only a small section and it sounds a bit negative (or even dismissive) and I don’t think it makes them justice.

There are some negative comments on CSS frameworks. Which I frankly agree with.

A good introduction to the IE layout issue. Some common browser bugs and how to fix them. And how to work with graded browser support.

Then on the examples, at certain points they can be a little repetitive, but there’s an interesting discussion about website widths, a brief example of using jQuery, which is rather nice.

Conclusion.

In conclusion, as someone who had already read the book, reading it again was good, as there are always things that you forget or that you weren’t aware of, even though my experience now is completely different, and I can be a little more critical about it.

If I could change something in the book, I think I’d change the naming of CSS3 — in the specs it’s always mentioned with no spaces, and in the book it has a space between the second “S” and the number “3″. I know it sounds nitpicky, but it’s rather annoying for me, for some reason…

Also, there are some mentions to browsers that are already dated, even though the book is fairly recent (like “Safari 4 beta”, which is already out of Beta). But that’s just something that happens in our industry — things move too quickly. I’m just being nitpicky again.

So, have I learned anything from this second edition? I did learn a few things, but not much. I already use or know most of the techniques. But would someone starting to work with CSS learn anything from the book? Definitely yes. I used to always recommend the first edition whenever someone asked me for book recommendations, and I will keep recommending it with the second edition. It’s a must-have.

Similar Posts:

• Book recommendations
• Effective browser support
• 161. In or Out
• Show 76: Clients and Agency
• Vital first impressions

Did you like this post? Then Buy Paul’s book

The Website Owner’s Manual is a book for the thousands of marketers, IT managers, project leaders, and business owners who need to put a website in place and keep it running with a minimum of trouble.

It is also ideal for web designers who want to educate their clients about best practice. Why not add the cost of this book to your next project and avoid clients who just don’t ‘get it!’

Permalink |
5 comments |
Add to
del.icio.us

This work is licensed by Paul Boag under a Creative Commons Attribution-Non-Commercial-No Derivative Works 2.0 UK: England & Wales License.

First. Who is the book for?

The book states that it’s for “anybody with a basic knowledge of HTML and CSS” and experts. I’d say it’s more for the first case, but I’ll expand on that later.

There are lots of useful tips and tricks, that I’m sure you’ll use over and over, explained in a solid and easy to understand way. The fact that the examples can be seen online and that there are files that can be downloaded is great.

Second. It’s a second edition.

When I read the first edition, I was just starting to work with CSS, and CSS was still a bit of a mystery to me. I remember reading some things that I thought to be pure magic and that seemed very complicated, but now I realise they are used by any good CSS coder. So, at the time, the book opened my eyes to those techniques and to the possibilities of what could be done with CSS.

Content.

The book covers subjects from the beginning to a more advanced level.

It starts with the importance of semantic HTML, how to set good foundations. It takes a very brief look into microformats and HTML5 as well.

Then it moves onto selectors, with some more advanced and CSS3 ones — but it doesn’t go very deep into that area to be honest.

It explains the box model, which is rather important, very well. Liquid and elastic layouts.

Some more advanced techniques, like sliding doors and even multiple backgrounds, which is quite refreshing. Opacity and rgba colours.

There are some clever uses for the :target pseudo-class and attribute selectors. Some webkit proprietary code like gradients and reflections.

It also explains how to style lists and navigation. I would have liked to see a larger section for definition lists, because there’s only a small section and it sounds a bit negative (or even dismissive) and I don’t think it makes them justice.

There are some negative comments on CSS frameworks. Which I frankly agree with.

A good introduction to the IE layout issue. Some common browser bugs and how to fix them. And how to work with graded browser support.

Then on the examples, at certain points they can be a little repetitive, but there’s an interesting discussion about website widths, a brief example of using jQuery, which is rather nice.

Conclusion.

In conclusion, as someone who had already read the book, reading it again was good, as there are always things that you forget or that you weren’t aware of, even though my experience now is completely different, and I can be a little more critical about it.

If I could change something in the book, I think I’d change the naming of CSS3 — in the specs it’s always mentioned with no spaces, and in the book it has a space between the second “S” and the number “3″. I know it sounds nitpicky, but it’s rather annoying for me, for some reason…

Also, there are some mentions to browsers that are already dated, even though the book is fairly recent (like “Safari 4 beta”, which is already out of Beta). But that’s just something that happens in our industry — things move too quickly. I’m just being nitpicky again.

So, have I learned anything from this second edition? I did learn a few things, but not much. I already use or know most of the techniques. But would someone starting to work with CSS learn anything from the book? Definitely yes. I used to always recommend the first edition whenever someone asked me for book recommendations, and I will keep recommending it with the second edition. It’s a must-have.

Similar Posts:

• Book recommendations
• Effective browser support
• 161. In or Out
• Show 76: Clients and Agency
• Vital first impressions

Did you like this post? Then Buy Paul’s book

The Website Owner’s Manual is a book for the thousands of marketers, IT managers, project leaders, and business owners who need to put a website in place and keep it running with a minimum of trouble.

It is also ideal for web designers who want to educate their clients about best practice. Why not add the cost of this book to your next project and avoid clients who just don’t ‘get it!’

Permalink |
No comment |
Add to
del.icio.us

This work is licensed by Paul Boag under a Creative Commons Attribution-Non-Commercial-No Derivative Works 2.0 UK: England & Wales License.

Now imagine you are an agency with 12 designers who all need (want!) to move to the latest version of Creative Suite. Even more expense.

Now imagine you are a looking to learn web design and don’t have pots of cash to spend on the industry standard software. How can you get your hands on a suite of software tools that will help you plan, design, build, debug and deliver a website without spending a penny?

Here’s how.

We’ve compiled a list of free software, mostly for the Mac, but with a few exceptions where absolutely necessary! We’ll take you through the process of planning, completing and delivering a project, and what free software is available to you at those stages.

Be sure to add your comments below and let us know of anything we have missed.

Messaging & Communication

For email on a Mac, Apple’s Mail application is pretty faultless. Good alternatives are out there for free such as Thunderbird from Mozilla, but the trainable Junk Mail filter in Mail and recent improvements in handling multiple accounts keep it head and shoulders above any competition here. Integration with iCal and Apple’s Contacts application add up a pretty solid messaging suite.

Apple’s Mail is also great at handling RSS feeds, but if you prefer a separate RSS reader then try NewsFire RSS. Designed squarely with the Mac in mind it allows you to organise multiple feeds into neat, manageable views and label your feeds according to pre-determined criteria.

If you need an instant messaging client then look no further than Adium. With support for a wide choice of account types, regular nightly builds and the latest release being optimised for Snow Leopard, this really is the best IM for the Mac. Don’t forget that Skype still offers a free service and so cost need not be a worry when keeping in touch with clients.

Lastly I’m going to mention DropBox. Not that it needs further plugging, but it is still a fabulous free service that simplifies not only file synchronisation across multiple computers but file delivery as a whole. 2 GB of free cloud storage gets you up and running and the ‘Public’ folder system allows you to provide large files for clients to download, rather than clogging up email with large attachments.

Project Planning & GTD (Getting Things Done)

If your clients are working on PC’s then the chances are you will be receiving emails with Microsoft Office attachments. Fine if you run iLife, but if you don’t you will need NeoOffice. Much like Microsoft Office, this equips you with applications for Word Processing, Spreadsheets and Presentations, but vitally the ability to open, edit and save back to the common .doc, .xls and .ppt format. The latest build even supports the .docx, .xlsx and .pptx formats.

Wireframing page layouts and even the creation of site maps can be handled in the brilliant Go Mockingbird. This online app allows for site mockups to be created with page hierarchies that link to each other, and for completed projects to be shared online. My advice is to secure an account for this app while it is still free.

To keep you focused on tasks and deadlines we’d recommend a look at TaskMate. It is refreshingly simple to use and its devotees (of which there are many) tend to stick with it despite the increased uptake of more feature-rich, paid-for applications such as Omnifocus.

Another name that keeps cropping up is Xpad. This hugely popular app allows you to create ‘drawers’ for each new project, into which you drag and drop files of any type to keep them organised against pre- defined categories.

If you are on the move and have an iPhone then free apps such as Evernote and Remember the Milk allow for note-taking, as well as images and audio files (in the case of Evernote) to be stored in the cloud for reference later on.

Keeping track of time while you work is made easier with Lumina (recently renamed from iClockr) So simple it barely warrants explanation, but essential if you are to keep track of resource on each project and bill for time accurately and efficiently.

Image Editing & Design

This was probably the trickiest area historically to source really good software for nothing. Not least due to licensing issues surrounding some of the proprietary file formats within design. That said there are still some great products out there if you know where to look.

First off, a free equivalent to Photoshop.

Due to its support online, large community of developers producing regular nightly builds, and not forgetting its feature rich tool set, GIMP (the GNU Image Manipulation Project) is head and shoulders above the rest for image manipulation. Running on the X11 windowing system (be sure to install this first) GIMP offers layers, colour correction, filters and support for a wide array of file formats. Cinepaint, Chocoflop and Paint.NET (Windows) are all also popular options, some perhaps with a more satisfactory GUI, but they all fall short of GIMP’s impressive feature list.

For vector graphics we’d recommend a look at Inkscape. Inkscape is an open source project that supports the W3C standard SVG (scalable vector graphic) file format. Thanks to the dedication of its community its latest release already supports Snow Leopard happily.

Two other useful additions to your arsenal would also be Smush IT and Sprite Me. Smush IT from Yahoo is a lossless online image optimiser which is fast gaining popularity. Image optimisation is an art form few wish to master, and with Smush IT at hand there is no need. It analyses images and uses the most appropriate algorithm based on the pixel data, outputting very small file sizes without loss of quality. Bundled with YSlow, a plug-in that analyses the speed a page loads, its one to watch. Sprite Me is a bookmarklet that aims to reduce http requests to your server for images, by suggesting where multiple images may be combined into sprites.

Coding & CSS

Interestingly enough, two of the most popular coding suites (Coda and Espresso) are very cheap to purchase, compared with the industry ‘standard’ Dreamweaver for example. Coda weighs in at around £60.00 and Espresso £50.00, compared with Dreamweaver at around £420.00 for a full version. Good free options are around though, and Text Wrangler is up there as our key recommend. From the people who brought you BBEdit, Text Wrangler features syntax coloring for most popular programming languages, integrates with Python, Perl and even Xcode. You can compare two files and integrate changes, and even FTP to remote hosts. Not at all bad, and with the reputation of Bare Bones software behind them, you can be sure this is a robust and user friendly programme.

You might also consider Smultron as a solution. Though no longer developed, this app has a beautifully simple interface which has the benefit of both a low barrier to entry for newcomers, as well as not being off-putting to veteran programmers.

If you prefer a separate environment for producing CSS then Simple CSS might be for you. Currently only supporting CSS2, Simple CSS provides either a guided interface for CSS creation, or if you prefer you can code by hand with colored syntax to highlight mistakes or invalid declarations.
Coding in the cloud has been much in the news recently due in no small part to the advent of HTML5 and AJAX. Web applications are now able to behave more like their desktop counterparts, and this in part explains the recent release of a number of exciting solutions to coding in the cloud. The collaborative nature of working this way is also appealing as the development community pool their knowledge on projects.

The two front runners seem to be Mozilla’s Bespin project and CodeRun. Both look very promising solutions indeed with the ability to create multiple projects, to preview, compile, debug and deploy projects all from within your browser.

Database developers should definitely give Sequel Pro a look as this app makes MySQL administration simple and quick. Aimed as a straight replacement to tools such as PHPMyAdmin, Sequel Pro supports
MySQL 5 and is fully customisable to suit your needs, from those favouring a simple interface, to more advanced users who wish to hand code SQL queries. An incredible product when you consider it is free.

FTP

Long the preserve of free software, with paid for apps being a relatively new occurrence. FTP applications, like the protocols which they serve have come on a pace in recent years. One of our favourites is Fire FTP, a free plug-in to Firefox which loads a neat little ftp client into a new tab in your browser. Supporting networked shares on your local machine, permissions changes, passive mode and SFTP, Fire FTP is a fantastic plug-in.

Another excellent candidate worth your attention is Filezilla. Built originally for Windows, this might not have the feel of a Mac app, but it has been cross platform for a number of years now and has some classy features that make it a great choice for someone administering FTP on across a variety of servers. Filezilla supports, FTP, FTPS and FTP over SSL so can handle most server requirements with ease.

And for those who might want an app which feels Mac through and through then Cyberduck is still there for you. With recent improvements covering connection protocols for Amazon S3, WebDAV and CloudFront as well as support for Quick Look and Spotlight searches, Cyberduck integrates seamlessly with Finder and is a stable candidate and a fun addition to anyone’s dock.

Debugging & Testing

Perhaps unsurprisingly, the top two plug-ins for debugging sites are Firebug and the Web Developer Toolbar for Firefox. If you don’t already have these, then where have you been?! A great find however is Q Emulator which is an open source, free of charge emulator for running Windows on a Mac. This is crucial for testing sites in IE on a PC and all the other Windows versions of browsers, not to mention the ability to run IIS as a web server if the need arises.

For your local web server there is MAMP. It is still unsurpassed as a local testing server running Apache, MySQL and PHP and now easier to install than ever. Previous releases were notoriously troublesome and required tweaking to get services running reliably)but not anymore. MAMP has a very small footprint at 165Mb, comes bundles with PHPMyAdmin supporting version 5.2 and Apache 2.0.63.

Site Promotion

Two good tips here are the Xenu Link Checker and the GSiteCrawler. Both sadly are not the most attractive of applications, and require Windows to run – that said, they do perform their respective jobs very well indeed. Xenu Link Checker is a simple application that crawls a web site from a URL, and reports back on any dead links it finds. It is a great labour saving tool if you are working on a large, link- intensive site, or if you inherit someone else’s project and need to check the integrity of the structure or why specific pages might not be indexing as well as others on search engines. Xenu generates a report of dead links and error codes received, allowing you to quickly correct and run the test again. GSiteCrawler does a similar job for creating XML based sitemap files for submission to Google, Yahoo and Bing. Direct the application at your URL and it will generate a sitemap file for you – simple as that. Apply the appropriate charset based on which search engine you are submitting it to and there you have it. Lastly it is worth mentioning the Webmaster Tools available from Google as a vital part of both monitoring your sites indexing, producing robot.txt, blocking folders, checking incoming links, and much much more besides. Coupled with Google Analytics and Google Intelligence and you can see why the world’s most popular search engine invokes such a fanatical following amongst the development community.

Billing / Invoicing

Show me the money. Surely this is the most important bit? From the list of possibilities we have drawn up two options. One an online solution, perhaps better suited to someone freelancing at client sites and not necessarily using their Mac at all times. The second is a desktop application for someone working from home, or at least from the same Mac. Our online solution is Freshbooks. This fully integrated suite of tools for creating customers, generating invoices, managing payments, and scheduling regular billings operates from within a browser or via an iPhone. Freshbooks offers a free startup account with a maximum of 3 clients allowable, which might just be enough if you are starting out. If you require more flexibility then Express Invoice is a desktop application that is certainly man enough to get you up and running as your own ‘accounts payable’ department. All without putting your hand in your pocket.

Thanks to Andy Wickes from Jellybean Creative Solutions for writing this post.

Similar Posts:

• Web Applications
• My Favourite iPhone Applications
• Copy and paste for the web
• 151. Budget
• Guide to CSS support in email clients

Did you like this post? Then Buy Paul’s book

The Website Owner’s Manual is a book for the thousands of marketers, IT managers, project leaders, and business owners who need to put a website in place and keep it running with a minimum of trouble.

It is also ideal for web designers who want to educate their clients about best practice. Why not add the cost of this book to your next project and avoid clients who just don’t ‘get it!’

Permalink |
29 comments |
Add to
del.icio.us

This work is licensed by Paul Boag under a Creative Commons Attribution-Non-Commercial-No Derivative Works 2.0 UK: England & Wales License.

Apologises for the rather unprofessional video (with the wife wandering around in the background). However, as this is not strictly about web design and so therefore not strictly a boagworld official post, I thought I could get away with it!

Install the Quix bookmarklet now

Download a demo of Launchbar

Similar Posts:

• Driving traffic vs. making the conversion
• Top design tip for designing in the browser
• Creating screencasts
• Website feeds explained
• Show 100: Live!

Did you like this post? Then Buy Paul’s book

The Website Owner’s Manual is a book for the thousands of marketers, IT managers, project leaders, and business owners who need to put a website in place and keep it running with a minimum of trouble.

It is also ideal for web designers who want to educate their clients about best practice. Why not add the cost of this book to your next project and avoid clients who just don’t ‘get it!’

Permalink |
7 comments |
Add to
del.icio.us

This work is licensed by Paul Boag under a Creative Commons Attribution-Non-Commercial-No Derivative Works 2.0 UK: England & Wales License.