.net content
Feed 16
Responsive web design 44 Opinion/Rob Mills 82
Your first responsive project 52
Build-off: Video game sites 112
Gallery 72
“I think of responsive design as an alternative to mobile sites” Ethan Marcotte interviewed by Jeffrey Zeldman, page 40
4
.net november 2011
Profile/Unit Interactive 84
.net content
.net content Responsive web design
Get the tutorial files online! ● CSS/texturising
web type netm.ag/texture-221 ● JavaScript/validate an online form netm.ag/js-221 ● CSS/create images with code alone netm.ag/css-221 ● ColdFusion/manage Twitter accounts netm.ag/cold-221 ● Drupal/create a responsive theme netm.ag/drupal-221 OR download the whole lot at netm.ag/files-221
126 128 129 130 132 133 134
Web Pro
40
44
52
56
scanning on a budget
6
Welcome
10
Search Add more
12
Subscriptions Inbox
Big Question How will
16
Feed
122
Expert advice
146
Next issue
Google+ affect businesses and brands?
104
ColdFusion/your Twitter accounts
Matt Gifford on using his ColdFusion Twitter API library monkehTweet to create a user access system
108
72
80
82
84
Gallery
The best new websites in the following categories: CSS, HTML5, JavaScript, plug-ins, CMS and responsive
Focus_on
There are many different implementations of signup forms, but not all are created equal. Let yours stand with the best, says Matthew Smith
Opinion
Giving your site a personality can help it stand out from the crowd. Rob Mills shares his thoughts on how to get the tone right – and wrong
Profile
Unit Interactive claims to have uncompromising standards and to always hit deadlines. Angela Conlon and Andy Rutledge tell Tom May how they manage it
Drupal/create a responsive theme
Tim Millwood explores how to make your Drupal site appear at varying sizes on screens of different dimensions by creating a responsive theme
112
showcase >
CSS/create images with code alone Tom Giannattasio explains why rendering images at run-time is the way forward
Website build-off
This month, three designers put their spin on enticing, compelling homepages for video game sites
regulars >
Security Vulnerability
content to your site
98
Scaling on the cloud
In part three of his series, Dan Frost explains your scaling options
CoffeeScript/ simplify your JavaScript
Jonathan Barrett demonstrates how you can use CoffeeScript to generate readable code quickly and easily
Google AdWords: pro tips The pay-per-click advertising service offers big rewards, but how do you target your spend effectively? Mark Buckingham reveals all
64
94
Your first responsive project
Mairead Buchan explains how Head London used responsive techniques for its new site
CSS/texturising web type
Trent Walton goes past the usual CSS properties and shows how you can add texture to type
Responsive web design
With interest in mobile growing, responsive design is a hot topic. But it’s not just about adaptive layouts, explains Stephen Hay
distribution networks
Ecommerce Going online to shop offline
90
Interview Jeffrey Zeldman talks to Ethan Marcotte, the guru of responsive web design
Hosting Content
Marketing The reach
The .net Awards Discover how you could win an Award of your own!
Social media How to avoid work/life conflicts
of Google+
technique >
articles > 7
issue 221/november 2011
116
Makeover
118
How we built
Special subscriptions offer! > Turn to page 10
After the El Toro window cleaners put in a request for a pimped-up site, Scott Bedford gets creative
French agency Pianofuzz on how they created ‘aroma jockey’ Odo7’s website
.net november 2011
5
.net feed/big_question
What’s the key factor affecting web design today?
Andy Budd
Founder of Clearleft clearleft.com
Web design and development has moved so fast in the last couple of years that we’ve become masters of the domain. We’re experts at understanding user needs, planning out complicated sites, managing development processes and learning to build sites that scale. We understand the importance of accessibility and have mastered new technologies and techniques, such as HTML5 and responsive design. We can build rounded applications in the browser that were hitherto impossible. As such, I believe that the single most important factor affecting the state of web design today comes from the client. The level of professionalism and complexity in the web design industry has grown at pace, but client budgets haven’t kept up. Most agencies don’t have the time and budget to do things well, so are forced by their clients to cut corners. This is especially true when most pitches are decided on budgetary and deadline-related terms. So agencies offer clients a watered down service, and then get blamed when what they end up with doesn’t match expectations. But I don’t just want to blame clients, who mostly aren’t web design experts and can only base prices on agency quotes and what they’ve paid in the past. We need to charge appropriately, not underquote simply to win business. We need to state that, as professionals, there is a level of quality below which we refuse to go, even if it means losing out on a potential contract. Andy is managing director of Clearleft
We’re seeing a revolution in web design and development across many areas, from new techniques to innovative services. But which are uppermost in the minds of our experts?
Jonathan Smiley
Designer zurb.com
I’d say the biggest factor is the changing landscape: new devices and platforms, new presentation technology and new expectations for functional design. It takes energy to keep up with and take advantage of new options. Web designers will have to work harder than before to do great things, even as the bar lowers for web design in general. Jonathan is a design lead at ZURB
38
.net november 2011
.net feed/big_question Trent Walton
Whitney Hess
paravelinc.com
whitneyhess.com
Founder of Paravel
I’ve been thinking about the hazards of the job. Office work doesn’t sound immediately dangerous, but spending eight or more hours a day hunched over a desk staring at a screen is bound to have negative long-term effects. We need to look beyond our screens for inspiration and leave our chairs for the sake of our wellbeing. If our bodies were meant for just sitting and working on the web we’d all look like blobs of silly putty with eyes and one arm with 20 fingers for typing. No one wants that. I’m interested in the kind of work we’ll be putting out in 20 years, and I really hope we’re all still around to do it. Trent is founder of Paravel
Chip Hayner
Developer and designer centresource.com
The prevalence of multiple viewing interfaces. Everything is needing to be designed to look good on both a huge monitor and a tiny handheld screen. While devices are becoming smarter in their abilities to view the ‘normal’, or ‘desktop’ version of the site (using smart zooming, for example), users are starting to expect optimised experiences for the device that they are on (desktop, tablet, mobile, TV box). This requires one single site to be designed and built multiple times – sometimes requiring only simple CSS tweaks and adjustments, other times necessitating an entirely different layout, custom-built for the platform. Chip is a consultant, developer and designer specialising in PHP development
Jeff Croft Designer
jeffcroft.com
The biggest factor affecting the state of web design today is the fact that more and more, the ‘web’ is APIs and services, rather than sites, apps, and pages rendered in web browsers. Take Instagram: one of the web’s most popular services, the entire experience is controlled not by HTML pages, but by an iPhone app. Twitter and Facebook are as popular – if not more so – via native apps for various platforms as they are on the browser-based web. Web designers have to realise that our job is no longer just to produce sites, apps, and pages built in HTML, CSS, and JavaScript. Increasingly the web is not a platform, it’s a service with clients on many platforms. Wired magazine called it the “death” of the web. I call it evolution. Jeff is a designer, author, speaker and blogger
UX designer
The lack of regulation of what we do and how we do it is far and away the greatest factor affecting the state of web design today. Design and development are our occupations (a way of spending time) – but not yet our professions (requiring prolonged training and a formal qualification). Until certification is required for us as it is for a doctor, lawyer, accountant, architect or real estate broker, there will always be a million opinions flying around about the appropriate way to do things, and absolutely no basis for demanding consistency and fluency. Regulation may thwart creativity and innovation to an extent, but it also raises the expectation of quality – and I definitely think we could use a bit more of that. Whitney is an independent user experience designer
Dan Mall
Art director/designer
danielmall.com
This is an exciting time to be in web design. Typography choices on the web are getting better. Devices are giving us improved access to the web. HTML5, CSS3 and other such technologies are providing us with more ways in which to express ideas. However, especially when great technologies are available, there’s always a risk that the solution gets lost beneath the method. Parallax, responsive design, QR codes, web fonts, geolocation: all are incredibly useful tools and methods, but often end up benefiting designers’ or developers’ portfolios more than a user’s experience. The single most important factor affecting the state of web design today – it has been and will continue to be – is remembering the people who use the stuff that we’re making. Dan is art director at Big Spaceship
Chris Coyier
Web designer
chriscoyier.net
Web design is what happens in web browsers, therefore the state of web design equates to current browser capabilities blended with what web designers are doing with those capabilities. So it’s really all about what those browser vendors choose to implement, how they choose to implement it, and how us web designers react to those changes. Chris is a web designer working at Wufoo
Chris Mills
Web evangelist
dev.opera.com
The most important factor affecting web design is the explosion of different devices onto the scene that we are called upon to support – phones, tablets and so on. This is requiring that web designers pick up a lot of new skills and attitudes, such as adaptive/responsive design, if they want to provide good user experiences and stay efficient. Chris educates on open standards for Opera
Elliot Jay Stocks
Designer
elliotjaystocks.com
The ‘responsive web design’ movement has finally heralded a fundamental shift in the way many of us think about designing for the web. We’ve had fluid layouts for years, but only now are we understanding that websites should be properly flexible. I think that’s the most important factor: widespread adoption of this idea by our community. We’re designing truly interactive experiences and the days of fixed, flat Photoshop mock-ups are almost over. As are the days of designers who can’t code. Elliot is a designer and illustrator
Robert Mills
Studio manager bluegg.co.uk
Bad content! It’s an obvious answer and not something that’s new, but the web being what it is, almost anyone can create and publish content, and the result is a never-ending list of websites where the content isn’t appropriate for the audience, doesn’t have the right tone of voice for the brand or is simply poorly written. With content strategy seemingly at the forefront of everyone’s minds at the moment, this looks set to change – but it won’t happen overnight. Rob is studio manager for creative agency Bluegg
>> more Big Question online
If you want to read the full versions of our experts’ opinions, and perhaps add your own, visit us online at www.netmagazine.com
.net november 2011 39
.net interview
“The web’s moved beyond the desktop, and it’s not looking back”
Ethan Marcotte interviewed by Jeffrey Zeldman unstoppablerobotninja.com
Photography/John Morrison
The godfather of web standards, Jeffrey Zeldman, is our guest interviewer this month. He talks to Ethan Marcotte, guru of responsive web design, about what it means, how it fits into the big picture and the best ways to put it into practice JZ: Briefly, without getting too technical, please explain what you mean by the term ‘responsive web design’. What is it, what problems does it address, how does it solve them, and why is it important now? EM: It’s fair to say that the web’s moved beyond the desktop, and it’s not looking back. Mobile traffic has exploded over the past few years, and the number of devices we’re designing for – from phones to laptops to tablets, even game consoles and e-readers – is growing just as quickly. One way we’ve dealt with transition is by establishing some constraints: building mobilespecific sites, or perhaps apps tied to a specific device’s OS, each distinct from the traditional ‘desktop’ experience. And at the risk of sounding Seinfeldian, there’s absolutely nothing wrong with that! Each offers elegant solutions to the very difficult problem of designing beyond the desktop. But the one characteristic they share is that they require fragmentation of our designs, our content across different contexts, different devices. Responsive web design offers an alternative. By marrying fluid, grid-based layouts and CSS3 media queries, we can create one design, that, well, responds to the shape of the display rendering it. It’s a more unified, more holistic approach to
40
.net november 2011
design, one that doesn’t see the web’s inherent flexibility as a constraint to be limited. Instead, we can finally design for the “ebb and flow of things”, as John Allsopp once put it. JZ: You introduced the world to responsive design in a brief A List Apart article in 2010 (alistapart. com/articles/responsive-web-design). It spawned a great deal of attention in our community and was soon being put into practice. What are some of your favourite examples? EM: Wow. Not sure I have enough space for this, but here are a few off the top of my head: l The fine folks at Paravel (paravelinc.com) have gotten responsive fever, and in a good way. Trent Walton’s art-directed blog (trentwalton. com/2011/05/10/fit-to-scale) showcases some beautiful thinking on his part, but Paravel’s client work has been tending toward the responsive as well: check out thedolectures.co.uk or the ATX Web Show (atxwebshow.com). l A bevy of designers have made their sites beautifully responsive: Jon Hicks (hicksdesign. co.uk) was one of the first, and Dan Cederholm (simplebits.com), Stephen Caver (stephencaver. com), Mark Boulton (markboulton.co.uk), and Meagan Fisher (owltastic.com) soon followed.
l The painfully smart people at yiibu.com have neatly married their responsive design to the ‘mobile first’ philosophy. l I could stare at designmadeingermany.de/ magazin/5 all day. Responsive or not, it is lovely. JZ: You next wrote a book on the topic (abook apart.com/products/responsive-web-design). What does it address that the article didn’t? EM: It covers the three frontend components in more detail, showing how fluid grids, flexible images and media queries can be layered together to create a proper responsive design. Most importantly, the final chapter talks about how we might adapt our design processes to fit this more flexible methodology, and how to determine if a responsive approach is right for your project. JZ: Let’s talk more about big-picture stuff. You’ve challenged designers to think differently. It’s the kind of challenge that comes up every 10 years or so – one that appeals to the best in us, but that also contradict years of learned behaviour and practice. What do you say to designers who came up using traditional methods from the world of print, and who only recently became excited about the web because they could finally impose rigid grids and ‘real’ fonts on this medium? EM: Well, I’d start by saying I don’t think the pixel’s going away any time soon. Heck, some designers have applied media queries to their fixed-width sites, with designers like Oliver Reichenstein (informationarchitects.jp) or Simon Collison (colly.com) shuttling between multiple pixeldriven layouts at different screen widths.
.net interview
“The unique thing about web design is the amount of control we surrender to the people who view our work� .net november 2011 41
next>
.net interview
“We can create one design that responds to the shape of the display rendering it” And these adaptive sites are beautiful, even though the approach isn’t responsive per se. Still, that idea of ‘control’ is an interesting one. Take the font case you mentioned: what happens if a user doesn’t have a device that understands @font-face, or can’t download the file? Whether it’s layout or typefaces, the constraints we apply to our designs are much less rigid than in any other medium. The unique thing about web design is the amount of control we surrender to the people who view our work, and to the capabilities of their browsers. And in the age of mobile browsers, layout is another potential liability. I believe a fluid grid, coupled with media queries, can give us the perfect measure of accessibility and control we crave. That said, responsive designs can still flourish under a measure of pixel-driven constraint. Take the sites for Andersson-Wise Architects (anderssonwise.com) or dConstruct 2011 (2011. dconstruct.org), which both incorporate fixedwidth elements within an otherwise fluid layout. Additionally, designers such as Dan Cederholm or the people at Happy Cog (cognition.happycog. com) might apply a max-width to their responsive work, applying a kind of ceiling to a site’s flexibility. JZ: There’s a new generation of designers who excel at both print and web and who have to some extent ‘tamed’ the web and made it safe for traditional design methods. How do you
<prev
42
.net november 2011
persuade those designers that you’re not just throwing them back to square one? EM: The next time you’re sitting down to produce a fixed-width layout, start with the container. Set it in pixels as you might normally, but when it comes to the internal columns, hold off for a moment: instead, make them percentages. The math is fairly easy (www.alistapart.com/articles/fluidgrids), believe me. So now, you’re left with a fixed-width design, but its internal workings are perfectly proportional. That wasn’t so bad, was it? But now, let’s change our container from a fixed width to a percentage – say, from ‘width: 960px’ to something like ‘width: 80%’. Congratulations! You’ve just built your first flexible grid. As aesthetically rigorous as its fixedwidth counterpart, but now it adapts to the size of the viewport rendering it. And as it does so, the pixel values of those columns will change, true – but the proportions you designed remain intact. And that’d make Müller-Brockmann proud. Of course, as you’re giddily resizing your browser window, despair might set in: maybe a particular line’s length is getting too long, or certain elements compress in an unappealing manner. This is where non-fixed layouts tend to get their reputation for being more chaotic than their fixed-width counterparts, for being less than ideal for capital-D ‘design’ on the web. But with media queries, we can correct some of these
issues. Instead of simply constraining the width of our design, we can set rules to tweak our copy’s leading at certain resolutions, or perhaps revise the layout for dramatically smaller (or wider) screens. JZ: So does responsive design replace mobile, or is mobile a component of responsive design? EM: A replacement for mobile-specific websites? Oh, not at all. Basically, I think of responsive design as an alternative to mobile sites, as another option to be weighed when beginning a project. Historically, we’ve treated ‘mobile’ and ‘desktop’ as synonyms for ‘less’ and ‘more’. Now we’re realising the picture’s much more complicated (see mark-kirby.co.uk/2011/the-mobile-context). Ultimately, it’s about pairing the approach you take to the content you’re designing to the needs of the audience. After all, dogma doesn’t pay the bills. l l Responsive Web Design by Ethan Marcotte is published by A Book Apart (abookapart.com) l Ethan writes about his favourite responsive designs for the .net website at netm.ag/ethan-221
Ethan Marcotte Job Web designer & developer Education Middlebury College in Vermont, English Literature Twitter @beep Online unstoppablerobot ninja.com
.net layout
52
.net november 2011
.net responsive
Your first responsive project
How are agencies putting responsive web design principles into practice? Mairead Buchan explains how Head London used responsive techniques in designing its new website Words Mairead Buchan has been building websites for 10 years and is still excited by new technologies. She won’t be satisfied until she’s a next-level ninja wizard. headlondon.com Image Mike Chipperfield is a member of Brightonbased collective Magictorch. www.magictorch.com
I was fresh in through the doors of London digital agency Head just after it had started rebranding and was delighted when I was told that my first project would be building the company’s new website. To be given a project that you have total free rein over is a developer’s holy grail, so this was the perfect beginning. Being new to the company, I was fairly determined to showcase the best frontend technology that I could master and get my hands dirty experimenting with as much CSS3 or HTML5 as possible. The latest kid on the web block is responsive design. It’s predicated on the fact that our users are no longer bound to a desktop computer, because a range of mobile phones and tablets has been released onto the market in recent years. Now you can even browse the internet on your television. A web design has to service many different needs, not just in terms of screen size but also in terms of what content is to be served and what interaction is available to the user. It’s important to understand your audience and the range of devices you’re aiming at before you start designing. Unless you have unlimited time and resources, you can’t create a perfect experience for the ever-expanding range of platforms out there. You have to draw a line in the sand.
Use media queries with Drupal Check out Tim rial Millwood’s tuto 8 10 ge pa on
desktop and smartphone users as our priority. We also felt that our peers in the digital industry would be excited by tablets and, although usage is still low, the platform is important to us as a company. Finally, we wanted our site to have a consistent feel across these platforms, so creating a responsive layout was something the design team really wanted to achieve. The CSS3 specification has recognised the need for responsive design by introducing the concept of media queries. These enable you to detect what the user’s device is capable of and then use different styling where appropriate. The functionality to detect media types has been around for years without us realising it. All print style sheets are served by detecting the print media type, and the new CSS3 recommendations are just an extension of this built-in feature detection. You can test for a number of attributes, but the most commonly employed are width/height, device-width/height, orientation and resolution. We tried to apply our own design theory to the problem. In early discussions we agreed that normally we’d break out a 960 grid for structuring a page. We designed in Photoshop and prototyped in HTML at the same time to experiment with how the responsive mechanics would
Head start Breaking down the design process into phases enabled Head to spend time considering its responsive design strategy
Phased approach
At Head, we take a phased approach to all our projects, making sure we have enough time for research and thinking things through. During our ‘understand’ phase we interviewed our potential audience, including our peers, existing clients and potential clients, to gain an understanding of who we were aiming at. We concluded that we wanted to concentrate on
.net november 2011 53
next>
.net responsive
Just the job Mairead Buchan’s first project at Head was building its new site as part of the company’s rebranding
work in the real world, using a mock-up of our case study page. You can see our media queries in action by taking a look at one of our current case studies at headlondon.com/our-work/ igniting-shoe-lovers-passion-across-everytouchpoint. If you resize your browser window using the resize functionality in the bottom right, you can see how the content rearranges itself into a more suitable layout depending on the screen width available.
Percentage widths
We discovered that trying to implement a responsive layout using a grid system poses a fundamental question. For devices with less display space, do you shrink the width of your columns or do you reduce the number of columns? We looked into other sites out in the wild, including Simon Collison’s (colly.com), Hicksdesign (hicksdesign.co.uk) and information architects (www.informationarchitects.jp/en), to see how they had implemented their layouts. There was a range of techniques, mostly with media queries, but we also came across other sites using percentages.
Column inches A percentage-controlled design could encounter problems once the screen width went below a certain size, so the team opted to remove columns instead
<prev
54
.net november 2011
Multiple choice Head needed a site that would provide an excellent user experience for visitors using smartphones and tablets as well as desktop computers, so cross-platform consistency was a key consideration during the design process
Percentage widths are surprisingly effective and have the added benefit of being fully supported across the entire browser landscape (including old IE). However, there’s something oddly 1995 about them. After having insisted that fixed-width designs were the only way to go for so many years, it’s strange to step back into the world of fluid designs. A percentage-controlled design (where you’re effectively shrinking the width of your columns) is more responsive and reduces the risk of a poor experience for a user trying to view your site on a screen width you haven’t optimised for. You can see a treatment using percentage widths on the current Full Frontal conference website (2011.full-frontal.org/speakers). The margins between columns and column widths have both been set to percentages. This is very successful until you resize the site down below 500 pixels. At this point the guttering between columns becomes too cramped and text over-runs into other columns.
You lose the clarity and the form that a designer works so hard to create. After a couple of rounds of basic wireframe prototyping during the explore phase of our design process, we opted for removing columns. We produced a number of fixed-width designs for each layout, based on our target devices: 1,280px (desktop), 1,024px (iPad landscape), 768px (iPad portrait), 480px (iPhone landscape) and 320px (iPhone portrait). This gave the design team much greater control to create compelling flow for the content. It also gave us a visible set of grids and dimensions to build from, and that really took away the headache of theorising the geometry of what we were trying to make. There are drawbacks to this approach as well. There’s an excellent illustration of this issue in Bryan Rieger’s slideshow at www.slideshare.net/ bryanrieger/rethinking-the-mobile-web-by-yiibu (slides 62-70), where he examines Simon Collison’s site over a number of mobile screens to show how a fixed-width design can perform badly on other mobile devices. Ideally, you want to take a mixture of both techniques and use them to their best advantage in your designs. When it came to build, we based our initial media queries on Andy Clarke’s Hardboiled CSS3 Media Queries (stuffandnonsense.co.uk/blog/ about/hardboiled_css3_media_queries), but in the end we had to customise them heavily. We decided to use max-width as well as max-device-width. This way, the responsive effect can be viewed on a desktop by resizing the browser window. This caused confusion at first because we needed to alter the media queries to detect the width at which the design changed, rather than the width of the target device. However, it did have an unexpected side effect of significantly speeding up testing times, since it meant that we could debug layout issues on a desktop machine before taking the site onto different mobile devices for testing. Also, there’s something strangely satisfying
.net responsive Design in sync
Crop factor In order to preserve an image’s width and height but reduce its visible dimensions on-screen, the team used a CSS layer with an overflow value. This cropped the image to the required size for each different device and orientation
about watching the layout shift around as the screen size decreases. You can’t have fluid containers without having fluid content. Text will wrap inside any container you set, but images and video need to have more consideration. We started with Ethan Marcotte’s suggestion of setting all images to have a width and max-width of 100 per cent, to stretch to the width of their container (unstoppablerobotninja. com/entry/fluid-images). This has a performance impact because you can no longer set explicit dimensions on the image in the HTML and it didn’t go far enough in giving us the control we wanted. On many of the images we wanted to preserve the width and height but still reduce the visible dimensions of the image on screen, so instead of shrinking the image we’ve added a CSS layer over
make a request for the wrong sized image. You also have to be able to serve an image to users who have JavaScript switched off, so a full JavaScript solution isn’t acceptable. We came across an idea created by the Filament Group (filamentgroup.com/lab/responsive_images_ experimenting_with_context_aware_image_sizing) based on Apache rewrites. Using JavaScript, a <base> tag is inserted in the page, which prompts a check on all relevant image tags to determine which is the device-appropriate image. Sadly, it doesn’t support Internet Explorer 7 or under, or Firefox 3.6, and in these cases both versions of the file were downloaded. So we started experimenting with our own ideas. We added an image into a <noscript> tag and then enhanced the site for JavaScript users by
You can’t have fluid containers without fluid content. Text will wrap, but images and video need more consideration the top with an overflow value to crop the image beneath. For images such as the homepage carousel we also adjusted the image’s relative position, so the image would always appear centred in the viewport.
Getting the images right
Finally, in a lot of cases we decided to hide the image altogether from mobile. The major disadvantage here with CSS is your site will still download anything referenced in the HTML, so your mobile users are getting a big hit from content they aren’t even using. The difficulty with this situation is that it can’t be handled entirely on the server side. You have to make contact with the user’s device before you can determine how much screen width is available. Therefore the solution has to involve JavaScript. The feature detection has to intercept the server request before the entire DOM has loaded into place, otherwise the page could
removing the <noscript> tag and creating a new image element with a dynamic source attribute. Using the WebKit developer tools, HttpWatch for Internet Explorer and HttpFox for Firefox, we were surprised to discover that removing the element with JavaScript prevented the request being made to the server. From a quick Google we discovered that children of the <noscript> tag aren’t added to the DOM. This appears to work in all the browsers we’ve tested, even IE6, with the exception of Opera’s Dragonfly, which crashed repeatedly when we tried to test it. You can check out our GitHub repo at github. com/futurechimp/responsive_image_tag. It’s still not a perfect solution. It has the elegance of a wading hippo and it’s causing a page reflow as your page is loading, which could potentially impact performance if over-used. As with rounded corners, mark-up hacks such as this are an indication that we’re missing some tools.
We started our build with the desktop site and then worked inwards, removing elements as we went. In hindsight we’d recommend going in the opposite direction, particularly with regard to how you structure your CSS, but also in terms of asset creation. It’s a case of creating your code with progressive enhancement rather than graceful degradation. Andy Clarke has produced a useful set of boilerplate code called 320 And Up (stuffandnonsense.co.uk/ projects/320andup), which provides a good starting point. Head’s advice on how to approach the creation of a responsive website would be to design for the lightest and richest experiences simultaneously. From an experience and build point of view, you want to think about mobile first, only adding screen elements that are truly necessary. From a visual design perspective, you need to think about the visual direction as a whole. Designing from the mobile site upwards could be like attaching a pair of virtual blinkers to you, stifling your creative ideas and leaving you with a concept that runs the risk of being dull and uninspiring. You want your final product to engage and delight your users. Our process at Head is very much an agile one, allowing for simultaneous streams of UX design, visual design and build work. We collaborate, sketch up ideas and quickly prototype them to see if they’re successful. Working in this way gives you a lot of freedom and also enables you to validate your ideas quickly. This works particularly well when designing a responsive site because things can get quite complex and trying out working prototypes as you design can bring clarity to your work. This allows you to either refine your design or take a new direction without getting too far down the line.
Ideally, we need an addition to the HTML5 specification to allow some kind of device recognition for device-specific assets.
In summary:
1 You need to think about which devices you want to target and the difference in user interaction, as well as the difference in screen real estate. Consider swiping and touchscreen gestures vs joystick or mouse navigation. 2 Decide what content is essential for smaller screens and consider your users’ network connections and download times. Images and video need to be scaled/cropped/optimised or hidden from view. You can’t just hide content with CSS – you need to prevent it being sent if it’s not going to be viewed. 3 Media queries give you a lot of fine detail control, but they’re only one tool in your toolset. Content strategy and UX have to drive the responsive design process.
.net november 2011 55
.net adwords
Google AdWords: pro tips
Google’s pay-per-click advertising service offers big rewards, but how do you target your spend effectively? Mark Buckingham reveals the best ways to advance your AdWords campaign Words Mark Buckingham is a freelance writer and proprietor of NetSeek, a Surreybased consultancy specialising in AdWords management, SEO, copywriting and training. www.netseek.co.uk Image The Ronin is Rob Chui’s motion graphics and design studio in London. theronin.co.uk
With over one million advertisers in 190 countries, AdWords just keeps growing. Now 11 years old, last year it generated revenues of $28billion. And for good reason. Whereas SEO can take months to generate search engine prominence, pay-per-click (PPC) advertising offers the savvy advertiser a quick fix. And Google isn’t sitting on its laurels. In this new era of local search and Google Maps integration, AdWords has become ever more sophisticated, with new features and ways of reaching your target audience. But many businesses are still wary of the perceived complexity and cost of creating and managing pay-per-click campaigns. In this feature, I’ll look at how to best go about your AdWords campaign. We’ll hear insights and advice from the experts, and there’ll be tips and tricks for optimising your AdWords spend.
Core proposition
Of the billion worldwide searches that Google receives daily, a significant percentage will be loaded with intent – and that’s the core
proposition at the heart of AdWords. As Peter Fitzgerald, Google UK’s director of retail, explains: “It affords advertisers important and immediate ways to get people into their site then their stores, or to pick up the phone and place an order, so it’s quite powerful. People are showing intent, and businesses have the opportunity to become part of a consideration set. Some of our advertisers will now also set up with our conversion optimiser tools, enabling them to effectively manage by conversion, not even by click, but by how many people are actually purchasing on your site.”
New interface
If you haven’t used AdWords in a while, it might be time to have another look. You’ll see a cleaner, faster and more intuitive interface with new tools and features that present new opportunities you may not have considered. There’s also been a proliferation of new formats and ways of presenting the ads, not least with the addition of Ad Sitelinks. This is designed to enhance top-performing ads with additional relevant information, including extra links to other content within your site. More than 100,000 advertisers are using Sitelinks and the format has increased clickthrough rates, on average, by over 30 per cent. AdWords is easier on the eye now, too, particularly the platform interface, as
.net november 2011 57
next>
.net adwords
Opportunity knocks Use the Opportunities tab in AdWords to get a quick overview of Google’s customised keyword and budget ideas for your campaigns and ad groups
Simulator The Bid simulator lets you explore what could have happened if you had set different keyword-level bids
David Deutsch, online marketing course, leader at Search Titans (searchtitans.co.uk), points out. “When you made a report in AdWords before it was a pretty clunky process,” he says. “But now, all of the reporting you could possibly want is integrated within the interface itself, which is a massive shift since the beginning.” Display advertising is another evolution, though be warned: to tackle it effectively you’ll need to create a display advertising marketing plan, create banner ads, a message, landing pages, a proper medium, and target one site at a time, with a good
Pitfalls
understanding of contextual targeting. “There’s a world of work before you even spend one penny on the display network,” says Deutsch. “It’s not the same as standard search engine marketing.” Despite these recent innovations, though, AdWords has not fundamentally changed. Key to success is predictability, and the core features of AdWords make it more predictable to know where and when your site is showing up, including the ability to refine existing campaigns with positive and negative keywords. It also means tweaking which publishers you show up on over time.
“Start with analysis. Is the creative/actual ad really relevant to the keywords? Also, make it clear about what you do” Peter Fitzgerald
Unfortunately, Google AdWords is not an exact science. You might be doing everything right – decent budget, bidding reasonable amounts, getting clicks – but the phone just isn’t ringing, real-life conversions aren’t happening, sufficient returns aren’t materialising. So what can you do? “Start with analysis,” Fitzgerald advises. “Is the creative really relevant to the keywords? If your keywords are ‘digital SLR camera’, do you have a great selection of digital SLR cameras? Also, make it clear about what you do: is that showing up in the keyword creative? And keep testing: the companies who really succeed are always trying to do that. “Also, you can get much better conversion rates if you have a sound landing page strategy. Sometimes it can be hard to navigate through a site, so Google Analytics enables you to find out the top 10 landing pages that you have, and see how you’re doing. Look at bounce rate, which tells
Optimise your AdWords campaign As an experienced search engine marketing consultant, I help clients optimise their AdWords campaigns. Primarily, I look for logical structure and organisation. The following pointers could work in your favour:
Plan and organise
Give Analytics time
First off, if you’re not using Google Analytics, or that of a third party, hang your head in shame: it’s vital. It’s also important to be patient when first using the service. Once you’ve inserted your tracking code and created conversion goals, wait a few weeks to accrue a reliable spread of data.
A well-organised campaign will be easier to manage and amend as you go. Ensure every ad group is as targeted and granular as it possibly can be. Keep your campaigns tidy and check for broken links, monitor your account to identify what’s working and what isn’t, and where your ads are pointing to. This will help you optimise your campaigns and ensure their smooth running. Do this and your Quality Score [QS] is likely to be higher, too, which could lower the cost of sustaining your intended ad position.
The fact that AdWords gives you an insight into real-time search trends can be used to augment your SEO across your website, enhancing your conversions rate and driving traffic, as well as potentially boosting your site’s rankings. However, steer clear of spurious, ‘black-hat’ SEO techniques, and consider employing an expert copywriter to ensure that the depth and quality of your website’s content is up to scratch.
Learn the Layout
Laser targeting
Spend time getting to know, and customising, the display interface. Take the many help tutorials and understand exactly what each facet of AdWords means. Familiarity mean you can hone and manage your campaign, or those of your clients, more effectively.
<prev
58
.net november 2011
Use AdWords to inform your SEO
Take advantage of Google’s flexible targeting functionality. Try testing different regions, or towns closer to home, and not just the whole of the UK. Unless you run a nationwide or international service, this could mean you enjoy a greater number of conversions and save money, too.
Split-test your ad creative
Try testing different advert text, or creative, for each group. You’ll soon see which ads perform better. A subtle change in syntax may be all that’s needed to appeal to searchers.
Data gathering
While every advertiser wants to reap quick conversions, the time it takes to attain them can prove invaluable for gathering data. Cast your net wide to see what’s popular; scale back once you know what’s working, and designate each type of key phrase into its own campaign or group. If a keyword or phrase is generating scores of impressions but few clicks, try upping your bid prices or move them to another group.
Understand your keywords
While every advertiser wants coverage for their most popular keywords, it can quickly use up your budget. By focusing on the niche keywords and phrases that your customers will use, you can still ensure a healthy conversion rate. It’s vital you understand the differences between broad match, phrase match and exact match, and negative match, too.
.net adwords Six tips Economise on AdWords Andrew Goodman Job title President Company Page Zero Media URL pagezero.com
Central hub The Campaigns tab is where you set up and manage your ads within AdWords
“General keywords and a general mindset prevent you being more effective” Andrew Goodman
you that people are coming to this page but are leaving quickly. This gives you insight into the ways that presenting information makes it difficult for that consumer to make it onto the next step.”
Tooled up
All too often, a new client approaches me, keen to sharpen their AdWords arsenal, but unaware of the range of free tools Google offers. Doing your homework is the first step to success; determined trial and experimentation a close second. A little digital elbow grease goes a long way. Google’s Website Optimizer, for example, allows you to split test or multi-variant test landing pages. Analytics, Google’s free analytics software tool, is also a must if you want true long-term returns. Here’s one example. I’ve seen so companies with wonderful ads and a healthy budget, but that don’t deliver (or even stock) the goods once they get the click. Typically, a user will get to the landing page and search for other types of products, but the search lets them down, they don’t find what they want and they leave. There’s a function in
1 Average ad position as reported can be misleading. As George Michie of RKG recently showed in a study of clicks and ad positions, a reported average ad position of, say, 3.2, could actually have you in first and second place much more often than you might realise. 2 Google statistics and estimates such as ‘first page bid’, ‘impression share’, ‘top vs. side’, and so on, can be rhetorical flourishes intended to whip up your desire to ego-bid. Focus instead on real metrics like clickthrough rates, conversion rates and total revenue. 3 New channels in the display network might still send you too many clicks from one or two sources – even sources such as YouTube that are owned and operated by Google. If one publisher source is greedy for your 60 cent clicks, chances are they’re having trouble getting that much money from other advertisers. Move that publisher into ‘managed placements’ and test lower bid levels to see if you can still drive clicks in that channel for rock-bottom prices. 4 Do you know what goes up significantly when you add image ads to your text ads when using the display network? CTRs (clickthrough rates) and effective CPMs (cost per thousand
Analytics called Search Exit, to see how many people are leaving your site. Using this and making improvements can make a huge difference. Tools such as Insights for Search give you invaluable insights into the types of products that you’re selling, telling you competitor intensity, including real-time average cost per click. Fitzgerald also recommends Global Market Finder: “Type in something like ‘jeans’ if you’re a fashion business and want to go international. You can see where the demand is, so if you want to sell in Japan, our tool helps you.” Despite the advent of new tools, a word of advice from experience: like all things, get the basics right first. If your website or offering is poor, it doesn’t matter how many visitors you get – you will struggle to close sales. And of course, the popular Google Keyword tool gives you a sense of the volume of searches, because you just don’t know sometimes how much these things are sparking interest. A lot of businesses now are using these tools to make buying and merchandising decisions too.
Testing
Power tool AdWords Editor is a free, downloadable application for managing your account
Test and iteration is imperative. When looking at results, a key area to consider is your conversion rate and cost per sale/cost per acquisition, as
impressions)! If you’re paying per click, the publishers and the middleman love it! But should you? Ensure your financial performance is commensurate with the increase in clicks. If it isn’t, tinker with bids or stick with text ads. 5 If you’re aggressively seeking more volume, it’s only natural to run ‘volume tests’ to see if higher bids can drive more total profit. Now, though, you don’t have to guess at whether such tests have been fully scientific. Enable a feature called AdWords Campaign Experiments (ACE) to help you split the high-bid and normalbid traffic evenly as an experimental and control group. If you get the results you desire, great! But you may find not only that the increased sales don’t warrant the increased cost, but that total revenues in the high-bid stream are actually lower than the normal-bid stream. 6 Tools such as the Bid simulator can offer fantastic data that can help you understand the auction for a particular keyword. But don’t let them whip you up into a bidding frenzy. Also use them to find opportunities to lower bids! In some cases, the tool might show you there is much more volume ‘out there’ for that keyword, at bid levels much higher than you’re sitting at, even though you thought you were already in a high ad position. This can sometimes be true, in part because Quality Score determines not just position but eligibility for top (premium) position, and general eligibility in the auction based on user personalisation and more. Other times, by bidding much higher on broad match variants of your terms, you’re gaining nothing but a lot of watered-down, less relevant clicks on “related” terms and concepts.
well as the keyword rate on ads. Advertisers shouldn’t have to care about your clickthrough rate – it should be just bottom line numbers – but clickthrough rate is something Google rewards. Andrew Goodman, president of Page Zero Media (pagezero.com) and author of Winning Results with Google AdWords, reveals: “We might test three or four different pieces of ad creative for a set of keywords. By doing a good job of that, we’d be looking for the best compromise between clickthrough rate and cost per acquisition to select the winning ad. Companies that don’t test will start out with £40 cost per sale and at end of year they’ll still be £40, but someone who’s nibbling away will soon cut it down to £20. This is the difference between profit and loss.” The main pitfall is not making your campaign granular enough. “It’s about being specific,” warns Goodman. “Fairly general keywords and a general mindset simply prevent you being more effective.” It pays to do your homework, and to be aware of the four main keyword matching options: broad match, phrase match, exact match, broad match modifier, not to mention that you can add negative keywords. The default is called broad match, but what advertisers may not know is that they may be bundling a bunch of less relevant
.net november 2011 59
next>
.net adwords
Insight-full With Insights for Search, you can compare search volume patterns across regions, properties and more
Split testing Google’s Website Optimizer allows you to split test or multi-variant test landing pages, so you can try one completely different layout, look and feel, or make slight variations to see what changes there will be
queries and users in with the more targeted ones, and again, this simply makes the difference in the cost of the sale.
Deutsh. “For example, ‘Airport Parking Gatwick’, ‘Airport Parking in Heathrow’ and ‘Airport Parking Birmingham’ will all be in the same groups. That’s a terrible mistake to make – they should be separated into different campaigns, and should be geotargeting those locations.” Quality Score is AdWords’ measure of the quality of the landing page relating to a given keyword you’re bidding for. Broadly speaking, a high Score means your keyword will trigger ads in a higher position, and at a lower cost-per-click. I find the largest source of money in my pocket is making individual landing pages that really convert for specific ad groups, going the extra mile so that when people click on one of my ads, they go straight to the landing page. Website Optimizer can help improve conversion rates too. Deutsch warns against tunnel vision, though. “When the advertiser finally realises they should use Website Optimizer, they focus all their effort into one perfect landing page. They miss the point of A/B testing: you’re not necessarily supposed to get it right. The point is to try every variation that comes into your brain, and test them all.”
Good housekeeping
Success on AdWords means being laser-focused. You need to find out which keywords (or key phrases) are most valuable and separate those out from the pack, changing from broad match to exact match specifically for that group of keywords. Then, consider creating a landing page for said phrases; and then going through to the very end to ensure you’re converting every single click from every keyword from every campaign. Well, at least in theory! Keyword optimisation can be labour intensive, but a meticulous approach should pay dividends. Separate the best performing keywords into their own ad groups, then create ad copy and landing pages specifically for those keywords. Follow up daily after you’ve done that to see what people are actually typing in through your search queries “It’s a common mistake to bundle in all the keywords you can think of into one group,” says
Get imaginative Run an AdWords Campaign Experiment AdWords Campaign Experiments lets you split traffic in your AdWords account, much like an A/B test with a landing page. Instead of different landing pages, though, you can split a keyword between one bid and another, or try an ad group with or without several keywords added with a new match type. Andrew Goodman, author of Winning Results with Google AdWords, says: “This allows you to test theories about which version of your campaign is better, without any skew due to sampling methodology. It’s a great antidote to guessing at ‘best practices’ – you truly let the data show you which version of an ad group or campaign worked best. (You could even let someone ‘go to town’ in a campaign with a whole bunch of uncoordinated changes, placed in the ‘experiment’ group, and label the test ‘Mark’s crazy theories’ to see whether Mark’s campaign outperforms the control campaign on a given metric.) “A handy feature is that it
<prev
60
.net november 2011
provides notations for statistical significance next to a statistic like clickthrough rate,” adds Goodman. Three little blue arrows means that the result is not due to chance 99.9 per cent of the time; two arrows, 99 per cent of the time; one arrow, 95 per cent of the time; greyed-out arrows, not yet statistically significant.”
Start experimenting You can execute an experimental campaign alongside your original campaign
7 Top AdWords Tools Google Analytics Website Optimizer Global Market Finder Insights for search Google AdWords Keyword tool AdWords Campaign Experiments AdWords Editor Other challenges relate to budget. The more complex and the bigger your budget, the more pitfalls there are. “Just because you set budget at £200 a day, doesn’t mean you’re going to spend that in a day,” cautions Deutsch. “A campaign might not spend all of its allocated budget, and that’s really hard to gauge.
Automating bid management
A common question is whether to trust Google or manage your own bids. “You’d better be good at managing bids manually first before you use automated bid management,” advises Goodman. “Here’s what can happen. You’re asked to enter a number of parameters when you want to raise or lower bids based on some target you’re shooting for; you’re usually also asked to enter a minimum amount that you don’t want the bids to be lower than. If you do this wrong, you don’t realise that you’re already bidding below that minimum you just specified – you could inadvertently go through the whole account and actually raise a bunch of bids when you were only intending to lower the bid amounts as non performers. “The worst thing you can do is have these infrequent catastrophes come up,” says Goodman. “It doesn’t matter if it only comes up once – if you do that big screw-up once in three years it could ruin the account. Being less risky and focusing on the fundamentals, rather than getting too fancy, seems to be the best course of action.” Overall, there’s a lot of work involved in getting Google AdWords to work for you, but I believe neglecting the power of paid search advertising can be a costly mistake for businesses, while the opportunities it offers are limited only by budget, time and imagination. Test and optimise, and you’ll soon fast-track your way to profitability.
.net showcase focus_on
ffocus_on
Signupforms
There are many different implementations of signup forms, but not all are created equal. Let yours stand with the best
1
A normal form is made up of a clear call to action, required and/or optional fields for user details, and a final submission. How those elements are laid out, presented, labelled, explained and otherwise delivered has a big impact on growing your site or business.
Clear call
Methods of acquiring new users differ. Some put the golden content behind a login wall. Others opt for lazy login and let users browse or create content before taking the plunge. Regardless, you’ll want a clear space to sign up or log in. Convention puts this call to action top-right of a website when viewing internal pages, or in a banner or sidebar when it’s strong enough to claim the hierarchy over competing content. Choose your approach intuitively at first, based on your knowledge of the audience and product. Back that up with usability testing and research to evaluate your ideas.
Choose your flow
2
Most usability specialists suggest a vertical, topdown flow for your form, as well as keeping fields to one column, with a clear submit button at the end. Sites such as Groupon have had some success with a horizontal stepped flow. Longer or more complex forms may require some progressive disclosure to avoid seeming insurmountable.
A word on labels
Keep labels close to fields, and use white space or rules to clearly differentiate them. Labels on the left are best left-aligned for scanning, but if you prefer inline labels be sure to only grey the label on:focus so users don’t forget what they’re doing. ● Obsessed with creative inspiration (see his site patterntap.com) and attention to detail (see his work at squaredeye. com), Matthew Smith loves helping designers capture what inspires them.
Most usability specialists suggest a vertical, top-down flow for your form 80
.net november 2011
3
(1) The lack of distraction and focus on simplicity at social geotagging site Gowalla (gowalla.com) is laudable. I love how it gets everything out of the way here. (2) Leading the field in clean, simple signup and form design, Wufoo (wufoo.com) showcases a persistent ‘sign up for free’ on almost every page of its site. (3) A new professional profile and networking site on the scene is Zerply (zerply.com). It implements a simple form to get people on board, with a threepart button for normal or social signups. I’m curious
to see how well this works in practice. (4) Deal-ofthe-day kingpin Groupon (groupon.com) implements a three-stepped process for its signup, which kicks off by asking for your city. Conceivably this allows users to jump in without expending much effort. (5) Not actually a signup form, but a great example of progressive disclosure in forms is this stacked select list from JavaScript developer Awesome* (awesomejs.com). It uses colour, icons and good copy to help users make a decision.
4
5
Trial offer: three issues for just ÂŁ5!
The worldâ&#x20AC;&#x2122;s best-selling magazine for web designers and developers
Subscribe now!