.net Issue 221 Preview

4 .net november2011

Build-off:Videogame sites 112

Gallery 72 Profile/Unit Interactive 84

“I think ofresponsive designas an alternativetomobile sites”

Ethan Marcotte interviewed by

Jeffrey Zeldman, page 40

.net content

Responsivewebdesign 44

Opinion/RobMills 82 Your first responsive project 52

Feed 16

.net content

.net november2011 5

Responsivewebdesign issue 221/november 2011

Specialsubscriptions

offer! >Turn topage10

Web Pro126 Social media How to

avoid work/life conflicts

128 Hosting Contentdistribution networks

129 Security Vulnerabilityscanning on a budget

130 Marketing The reachof Google+

132 Ecommerce Goingonline to shop offline

133 Search Addmorecontent to your site

134 Big Question HowwillGoogle+ affect businessesand brands?

articles >

7 The .net AwardsDiscover how you could win anAward of your own!

40 InterviewJeffrey Zeldman talks toEthanMarcotte, the guru ofresponsive web design

44 Responsiveweb designWith interest in mobilegrowing, responsive designis a hot topic. But it’s notjust about adaptive layouts,explains Stephen Hay

52 Your firstresponsiveprojectMairead Buchan explains howHead London used responsivetechniques for its new site

56 Google AdWords:pro tipsThe pay-per-click advertisingservice offers big rewards, buthow do you target your spendeffectively?Mark Buckinghamreveals all

64 Scaling onthe cloudIn part three of his series,Dan Frost explains yourscaling options

regulars >

6 Welcome

10 Subscriptions

12 Inbox

16 Feed

122 Expert advice

146 Next issue

showcase >

72 GalleryThe best newwebsites in thefollowing categories: CSS,HTML5, JavaScript, plug-ins,CMS and responsive

80 Focus_onThere are many differentimplementations of signupforms, but not all are createdequal. Let yours stand withthe best, saysMatthew Smith

82 OpinionGiving your site a personalitycan help it stand out from thecrowd. RobMills shares histhoughts on how to get thetone right – and wrong

84 ProfileUnit Interactive claims to haveuncompromising standardsand to always hit deadlines.Angela Conlon and AndyRutledge tell TomMay howtheymanage it

technique >

90 CSS/texturisingweb typeTrentWalton goes past theusual CSS properties andshows how you can addtexture to type

94 CoffeeScript/simplify yourJavaScriptJonathan Barrett demonstrateshow you can use CoffeeScriptto generate readable codequickly and easily

98 CSS/create imageswith code aloneTomGiannattasio explainswhy rendering images atrun-time is the way forward

104 ColdFusion/yourTwitter accountsMatt Gifford on using hisColdFusion Twitter API librarymonkehTweet to create a useraccess system

108 Drupal/create aresponsive themeTimMillwood explores how tomake your Drupal site appearat varying sizes on screensof different dimensions bycreating a responsive theme

112 Website build-offThis month, three designersput their spin on enticing,compelling homepages forvideo game sites

116 MakeoverAfter the El Toro windowcleaners put in a requestfor a pimped-up site, ScottBedford gets creative

118 Howwe builtFrench agency Pianofuzzon how they created ‘aromajockey’ Odo7’s website

.net contentGet thetutorialfilesonline!● CSS/texturisingweb typenetm.ag/texture-221● JavaScript/validatean online formnetm.ag/js-221● CSS/create imageswith code alonenetm.ag/css-221● ColdFusion/manageTwitter accountsnetm.ag/cold-221●Drupal/create aresponsive themenetm.ag/drupal-221

OR download thewhole lot atnetm.ag/files-221

.net feed/big_question

Andy BuddFounder of Clearleftclearleft.com

Web design and development hasmoved so fast in the last couple ofyears that we’ve become masters of thedomain.We’re experts at understandinguser needs, planning out complicatedsites, managing development processesand learning to build sites that scale.We understand the importance ofaccessibility and have mastered newtechnologies and techniques, suchas HTML5 and responsive design. Wecan build rounded applications in thebrowser that were hitherto impossible.As such, I believe that the single mostimportant factor affecting the state ofweb design today comes from the client.The level of professionalism and

complexity in the web design industryhas grown at pace, but client budgetshaven’t kept up. Most agencies don’thave the time and budget to do thingswell, so are forced by their clients tocut corners. This is especially true whenmost pitches are decided on budgetaryand deadline-related terms. So agenciesoffer clients a watered down service, andthen get blamed when what they endup with doesn’t match expectations.But I don’t just want to blame clients,

who mostly aren’t web design expertsand can only base prices on agencyquotes and what they’ve paid in thepast. 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 whichwe refuse to go, even if it means losingout on a potential contract.Andy is managing director of Clearleft

What’s the keyfactor affectingwebdesign today?

38 .net november2011

We’re seeing a revolutionin web design and

development acrossmany areas, from new

techniques to innovativeservices. But which

are uppermost in theminds of our experts?

Jonathan SmileyDesignerzurb.com

I’d say the biggest factor is thechanging landscape: new devicesand platforms, new presentationtechnology and new expectationsfor functional design. It takes energyto keep up with and take advantageof new options. Web designers willhave to work harder than beforeto do great things, even as the barlowers for web design in general.Jonathan is a design lead at ZURB

.net feed/big_question

.net november2011 39

Chris MillsWeb evangelistdev.opera.com

The most important factor affectingweb design is the explosion ofdifferent devices onto the scenethat we are called upon to support– phones, tablets and so on. Thisis requiring that web designers pickup a lot of new skills and attitudes,such as adaptive/responsive design,if they want to provide good userexperiences and stay efficient.Chris educates on open standards for Opera

Trent WaltonFounder of Paravelparavelinc.com

I’ve been thinking about the hazardsof the job. Office work doesn’t soundimmediately dangerous, but spendingeight or more hours a day hunched overa desk staring at a screen is bound tohave negative long-term effects.We need to look beyond our screens

for inspiration and leave our chairs forthe sake of our wellbeing. If our bodieswere meant for just sitting and workingon the web we’d all look like blobs ofsilly putty with eyes and one arm with20 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 reallyhope we’re all still around to do it.Trent is founder of Paravel

Chip HaynerDeveloper and designercentresource.com

The prevalence of multiple viewinginterfaces. Everything is needing to bedesigned to look good on both a hugemonitor and a tiny handheld screen.While devices are becoming smarter

in their abilities to view the ‘normal’, or‘desktop’ version of the site (using smartzooming, for example), users are startingto expect optimised experiences for thedevice that they are on (desktop, tablet,mobile, TV box). This requires one singlesite to be designed and built multipletimes – sometimes requiring only simpleCSS tweaks and adjustments, other timesnecessitating an entirely different layout,custom-built for the platform.Chip is a consultant, developer and designerspecialising in PHP development

Jeff CroftDesignerjeffcroft.com

The biggest factor affecting the stateof web design today is the fact thatmore and more, the ‘web’ is APIs andservices, rather than sites, apps, andpages rendered in web browsers.Take Instagram: one of the web’s most

popular services, the entire experienceis controlled not by HTML pages, but byan iPhone app. Twitter and Facebook areas popular – if not more so – via nativeapps for various platforms as they are onthe browser-based web. Web designershave to realise that our job is no longerjust to produce sites, apps, and pagesbuilt in HTML, CSS, and JavaScript.Increasingly the web is not a platform,it’s a service with clients on manyplatforms.Wiredmagazine called it the“death” of the web. I call it evolution.Jeff is a designer, author, speaker and blogger

Whitney HessUX designerwhitneyhess.com

The lack of regulation of what we doand how we do it is far and away thegreatest factor affecting the state ofweb design today.Design and development are our

occupations (a way of spendingtime) – but not yet our professions(requiring prolonged training and aformal qualification). Until certificationis required for us as it is for a doctor,lawyer, accountant, architect or realestate broker, there will always be amillion opinions flying around aboutthe appropriate way to do things, andabsolutely no basis for demandingconsistency and fluency.Regulation may thwart creativity

and innovation to an extent, but it alsoraises the expectation of quality – and Idefinitely think we could use a bit moreof that.Whitney is an independent user experience designer

Dan MallArt director/designerdanielmall.com

This is an exciting time to be in webdesign. Typography choices on the webare getting better. Devices are givingus improved access to the web. HTML5,CSS3 and other such technologies areproviding us with more ways in whichto express ideas.However, especially when great

technologies are available, there’s alwaysa risk that the solution gets lost beneaththe method. Parallax, responsive design,QR codes, web fonts, geolocation: all areincredibly useful tools and methods, butoften end up benefiting designers’ ordevelopers’ portfolios more than auser’s experience.The single most important factor

affecting the state of web design today– it has been and will continue to be – isremembering the people who use thestuff that we’re making.Dan is art director at Big Spaceship

Chris CoyierWeb designerchriscoyier.net

Web design is what happens in webbrowsers, therefore the state of webdesign equates to current browsercapabilities blended with what webdesigners are doing with thosecapabilities. So it’s really all aboutwhat those browser vendors chooseto implement, how they choose toimplement it, and how us web designersreact to those changes.Chris is a web designer working at Wufoo

Elliot Jay StocksDesignerelliotjaystocks.com

The ‘responsive web design’ movementhas finally heralded a fundamentalshift in the way many of us think aboutdesigning for the web.We’ve had fluidlayouts for years, but only now are weunderstanding that websites should beproperly flexible. I think that’s the mostimportant factor: widespread adoptionof this idea by our community. We’redesigning truly interactive experiencesand the days of fixed, flat Photoshopmock-ups are almost over. As are thedays of designers who can’t code.Elliot is a designer and illustrator

Robert MillsStudio managerbluegg.co.uk

Bad content! It’s an obvious answerand not something that’s new, but theweb being what it is, almost anyonecan create and publish content, and theresult is a never-ending list of websiteswhere the content isn’t appropriate forthe audience, doesn’t have the righttone of voice for the brand or is simplypoorly written. With content strategyseemingly at the forefront of everyone’sminds at the moment, this looks set tochange – but it won’t happen overnight.Rob is studio manager for creative agency Bluegg

>> more Big Question onlineIf you want to read the full versions of ourexperts’ opinions, and perhaps add your own,visit us online at www.netmagazine.com

.net interview


The godfather of web standards, Jeffrey Zeldman, is our guestinterviewer this month. He talks to EthanMarcotte, guru ofresponsive web design, about what it means, how it fits intothe big picture and the best ways to put it into practice

JZ: Briefly, without getting too technical,please explain what you mean by theterm ‘responsive web design’. What is it,

what problems does it address, how does it solvethem, and why is it important now?EM: It’s fair to say that the web’s moved beyondthe desktop, and it’s not looking back. Mobiletraffic has exploded over the past few years, andthe number of devices we’re designing for – fromphones to laptops to tablets, even game consolesand e-readers – is growing just as quickly.

One way we’ve dealt with transition is byestablishing some constraints: building mobile-specific sites, or perhaps apps tied to a specificdevice’s OS, each distinct from the traditional‘desktop’ experience. And at the risk of soundingSeinfeldian, there’s absolutely nothing wrong withthat! Each offers elegant solutions to the verydifficult problem of designing beyond the desktop.But the one characteristic they share is that theyrequire fragmentation of our designs, our contentacross different contexts, different devices.

Responsive web design offers an alternative. Bymarrying fluid, grid-based layouts and CSS3 mediaqueries, we can create one design, that, well,responds to the shape of the display renderingit. It’s a more unified, more holistic approach to

design, one that doesn’t see the web’s inherentflexibility as a constraint to be limited. Instead, wecan finally design for the “ebb and flow of things”,as John Allsopp once put it.

JZ: You introduced the world to responsive designin a brief A List Apart article in 2010 (alistapart.com/articles/responsive-web-design). It spawneda great deal of attention in our community andwas soon being put into practice. What are someof 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) havegotten responsive fever, and in a good way.Trent Walton’s art-directed blog (trentwalton.com/2011/05/10/fit-to-scale) showcases somebeautiful thinking on his part, but Paravel’s clientwork has been tending toward the responsive aswell: check out thedolectures.co.uk or the ATXWeb Show (atxwebshow.com).l A bevy of designers have made their sitesbeautifully 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), andMeagan Fisher (owltastic.com) soon followed.

l The painfully smart people at yiibu.com haveneatly 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 (abookapart.com/products/responsive-web-design).What does it address that the article didn’t?EM: It covers the three frontend components inmore detail, showing how fluid grids, flexibleimages and media queries can be layered togetherto create a proper responsive design. Mostimportantly, the final chapter talks about how wemight adapt our design processes to fit this moreflexible methodology, and how to determine if aresponsive approach is right for your project.

JZ: Let’s talk more about big-picture stuff. You’vechallenged designers to think differently. It’s thekind of challenge that comes up every 10 years orso – one that appeals to the best in us, but thatalso contradict years of learned behaviour andpractice. What do you say to designers who cameup using traditional methods from the worldof print, and who only recently became excitedabout the web because they could finally imposerigid grids and ‘real’ fonts on this medium?EM:Well, I’d start by saying I don’t think the pixel’sgoing away any time soon. Heck, some designershave applied media queries to their fixed-widthsites, with designers like Oliver Reichenstein(informationarchitects.jp) or Simon Collison(colly.com) shuttling between multiple pixel-driven layouts at different screen widths.P

ho

tog

rap

hy/

Joh

nM

orr

iso

n

“The web’s moved beyondthe desktop, and it’s notlooking back”Ethan Marcotte interviewedby Jeffrey Zeldmanunstoppablerobotninja.com

.net interview

“The unique thing aboutweb design is the amount ofcontrol we surrender to thepeople who view our work”

.net november2011 41 next>

And these adaptive sites are beautiful, eventhough the approach isn’t responsive per se.

Still, that idea of ‘control’ is an interesting one.Take the font case you mentioned: what happens ifa user doesn’t have a device that understands@font-face, or can’t download the file? Whetherit’s layout or typefaces, the constraints we apply toour designs are much less rigid than in any othermedium. The unique thing about web design isthe amount of control we surrender to the peoplewho view our work, and to the capabilities of theirbrowsers. And in the age of mobile browsers, layoutis another potential liability. I believe a fluid grid,coupled with media queries, can give us the perfectmeasure of accessibility and control we crave.

That said, responsive designs can still flourishunder a measure of pixel-driven constraint.Take the sites for Andersson-Wise Architects(anderssonwise.com) or dConstruct 2011 (2011.dconstruct.org), which both incorporate fixed-width elements within an otherwise fluid layout.Additionally, designers such as Dan Cederholmor the people at Happy Cog (cognition.happycog.com) might apply a max-width to their responsivework, applying a kind of ceiling to a site’s flexibility.

JZ: There’s a new generation of designers whoexcel at both print and web and who have tosome extent ‘tamed’ the web and made it safefor traditional design methods. How do you

persuade those designers that you’re not justthrowing them back to square one?EM: The next time you’re sitting down to producea fixed-width layout, start with the container. Set itin pixels as you might normally, but when it comesto the internal columns, hold off for a moment:instead, make them percentages. The math isfairly easy (www.alistapart.com/articles/fluidgrids),believe me. So now, you’re left with a fixed-widthdesign, but its internal workings are perfectlyproportional. That wasn’t so bad, was it?

But now, let’s change our container from a fixedwidth to a percentage – say, from ‘width: 960px’ tosomething like ‘width: 80%’.

Congratulations! You’ve just built your firstflexible grid. As aesthetically rigorous as its fixed-width counterpart, but now it adapts to the sizeof the viewport rendering it. And as it does so, thepixel 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 yourbrowser window, despair might set in: maybea particular line’s length is getting too long, orcertain elements compress in an unappealingmanner. This is where non-fixed layouts tend toget their reputation for being more chaotic thantheir fixed-width counterparts, for being less thanideal for capital-D ‘design’ on the web. But withmedia queries, we can correct some of these

Ethan MarcotteJob Web designer & developerEducation Middlebury Collegein Vermont, English LiteratureTwitter @beepOnline unstoppablerobotninja.com

issues. Instead of simply constraining the width ofour design, we can set rules to tweak our copy’sleading at certain resolutions, or perhaps revise thelayout for dramatically smaller (or wider) screens.

JZ: So does responsive design replace mobile, oris mobile a component of responsive design?EM: A replacement for mobile-specific websites?Oh, not at all. Basically, I think of responsive designas an alternative to mobile sites, as another optionto be weighed when beginning a project.

Historically, we’ve treated ‘mobile’ and ‘desktop’as synonyms for ‘less’ and ‘more’. Now we’rerealising the picture’s much more complicated(see mark-kirby.co.uk/2011/the-mobile-context).Ultimately, it’s about pairing the approach you taketo the content you’re designing to the needs of theaudience. After all, dogma doesn’t pay the bills. ll Responsive Web Design by Ethan Marcotte ispublished by A Book Apart (abookapart.com)l Ethan writes about his favourite responsive designsfor the .net website at netm.ag/ethan-221

.net interview

<prev 42 .net november2011

“We can create one designthat responds to the shapeof the display rendering it”

.net layout



.net responsive

How are agencies putting responsive webdesign principles into practice?Mairead Buchan

explains howHead London used responsivetechniques in designing its newwebsite

I was fresh in through the doors ofLondon digital agency Head just afterit had started rebranding and was

delighted when I was told that my first projectwould be building the company’s new website.To be given a project that you have total free reinover is a developer’s holy grail, so this was theperfect beginning. Being new to the company,I was fairly determined to showcase the bestfrontend technology that I could master andget my hands dirty experimenting with as muchCSS3 or HTML5 as possible.

The latest kid on the web block is responsivedesign. It’s predicated on the fact that our users areno longer bound to a desktop computer, becausea range of mobile phones and tablets has beenreleased onto the market in recent years. Now youcan 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 ofwhat content is to be served and what interaction isavailable to the user.

It’s important to understand your audience andthe range of devices you’re aiming at before you

start designing. Unless you have unlimited timeand resources, you can’t create a perfectexperience for the ever-expanding rangeof platforms out there. You have to drawa line in the sand.

Phased approachAt Head, we take a phased approach toall our projects, making sure we have

enough time for research and thinkingthings through. During our ‘understand’ phase

we interviewed our potential audience, includingour peers, existing clients and potential clients, togain an understanding of who we were aiming at.We concluded that we wanted to concentrate on

desktop and smartphone users as our priority. Wealso felt that our peers in the digital industry wouldbe excited by tablets and, although usage is stilllow, the platform is important to us as a company.Finally, we wanted our site to have a consistent feelacross these platforms, so creating a responsivelayout was something the design team reallywanted to achieve.

The CSS3 specification has recognised the needfor responsive design by introducing the concept ofmedia queries. These enable you to detect what theuser’s device is capable of and then use differentstyling where appropriate. The functionality todetect media types has been around for yearswithout us realising it. All print style sheets areserved by detecting the print media type, and thenew CSS3 recommendations are just an extensionof this built-in feature detection. You can test fora number of attributes, but the most commonlyemployed are width/height, device-width/height,orientation and resolution.

We tried to apply our own design theory tothe problem. In early discussions we agreed thatnormally we’d break out a 960 grid for structuringa page. We designed in Photoshop and prototypedin HTML at the same time to experimentwith how the responsive mechanics would

Your firstresponsiveproject

Words Mairead Buchan hasbeen building websites for10 years and is still excitedby new technologies. Shewon’t be satisfied until she’sa next-level ninja wizard.headlondon.com

Image Mike Chipperfieldis a member of Brighton-based collective Magictorch.www.magictorch.com

Head start Breaking downthe design process intophases enabled Head tospend time considering itsresponsive design strategy

UsemediaquerieswithDrupalCheckoutTim

Millwood’s tutorial

onpage108


.net responsive

work in the real world, using a mock-up ofour case study page. You can see our media

queries in action by taking a look at one of ourcurrent case studies at headlondon.com/our-work/igniting-shoe-lovers-passion-across-every-touchpoint. If you resize your browser windowusing the resize functionality in the bottom right,you can see how the content rearranges itself intoa more suitable layout depending on the screenwidth available.

Percentage widthsWe discovered that trying to implement aresponsive layout using a grid system poses afundamental question. For devices with less displayspace, do you shrink the width of your columns ordo 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 theyhad implemented their layouts. There was a rangeof techniques, mostly with media queries, but wealso came across other sites using percentages.

Percentage widths are surprisingly effective andhave the added benefit of being fully supportedacross the entire browser landscape (including oldIE). However, there’s something oddly 1995 aboutthem. After having insisted that fixed-width designswere the only way to go for so many years, it’sstrange to step back into the world of fluid designs.A percentage-controlled design (where you’reeffectively shrinking the width of your columns)is more responsive and reduces the risk of a poorexperience for a user trying to view your site ona screen width you haven’t optimised for.

You can see a treatment using percentagewidths on the current Full Frontal conferencewebsite (2011.full-frontal.org/speakers). Themargins between columns and column widths haveboth been set to percentages. This is very successfuluntil you resize the site down below 500 pixels. Atthis point the guttering between columns becomestoo cramped and text over-runs into other columns.

You lose the clarity and the form that a designerworks so hard to create.

After a couple of rounds of basic wireframeprototyping during the explore phase of our designprocess, we opted for removing columns. Weproduced a number of fixed-width designs foreach layout, based on our target devices: 1,280px(desktop), 1,024px (iPad landscape), 768px (iPadportrait), 480px (iPhone landscape) and 320px(iPhone portrait). This gave the design team muchgreater control to create compelling flow for thecontent. It also gave us a visible set of grids anddimensions to build from, and that really took awaythe headache of theorising the geometry of whatwe were trying to make.

There are drawbacks to this approach as well.There’s an excellent illustration of this issue inBryan Rieger’s slideshow at www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu(slides 62-70), where he examines Simon Collison’ssite over a number of mobile screens to show howa fixed-width design can perform badly on othermobile devices.

Ideally, you want to take a mixture of bothtechniques and use them to their best advantage inyour designs. When it came to build, we based ourinitial media queries on Andy Clarke’s HardboiledCSS3 Media Queries (stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries), but in theend we had to customise them heavily. We decidedto use max-width as well as max-device-width. Thisway, the responsive effect can be viewed on adesktop by resizing the browser window.

This caused confusion at first because weneeded to alter the media queries to detect thewidth at which the design changed, rather thanthe width of the target device. However, it did havean unexpected side effect of significantly speedingup testing times, since it meant that we coulddebug layout issues on a desktop machine beforetaking the site onto different mobile devices fortesting. Also, there’s something strangely satisfying

Just the jobMairead Buchan’s first project at Head wasbuilding its new site as part of the company’s rebranding

Multiple choice Head needed a site that would provide an excellent user experience for visitors using smartphones andtablets as well as desktop computers, so cross-platform consistency was a key consideration during the design process

Column inches A percentage-controlleddesign could encounter problems once thescreen width went below a certain size, sothe team opted to remove columns instead

.net responsive

.net november2011 55

about watching the layout shift around as thescreen size decreases.

You can’t have fluid containers without havingfluid content. Text will wrap inside any containeryou set, but images and video need to have moreconsideration. We started with Ethan Marcotte’ssuggestion of setting all images to have a widthand max-width of 100 per cent, to stretch to thewidth of their container (unstoppablerobotninja.com/entry/fluid-images). This has a performanceimpact because you can no longer set explicitdimensions on the image in the HTML and it didn’tgo far enough in giving us the control we wanted.

On many of the images we wanted to preservethe width and height but still reduce the visibledimensions of the image on screen, so instead ofshrinking the image we’ve added a CSS layer over

the top with an overflow value to crop the imagebeneath. For images such as the homepagecarousel we also adjusted the image’s relativeposition, so the image would always appearcentred in the viewport.

Getting the images rightFinally, in a lot of cases we decided to hide theimage altogether from mobile. The majordisadvantage here with CSS is your site will stilldownload anything referenced in the HTML, soyour mobile users are getting a big hit fromcontent they aren’t even using. The difficulty withthis situation is that it can’t be handled entirely onthe server side. You have to make contact with theuser’s device before you can determine how muchscreen width is available. Therefore the solution hasto involve JavaScript. The feature detection has tointercept the server request before the entire DOMhas loaded into place, otherwise the page could

make a request for the wrong sized image. You alsohave to be able to serve an image to users whohave JavaScript switched off, so a full JavaScriptsolution isn’t acceptable.

We came across an idea created by the FilamentGroup (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 promptsa check on all relevant image tags to determinewhich is the device-appropriate image. Sadly, itdoesn’t support Internet Explorer 7 or under, orFirefox 3.6, and in these cases both versions of thefile were downloaded.

So we started experimenting with our ownideas. We added an image into a <noscript> tagand then enhanced the site for JavaScript users by

removing the <noscript> tag and creating a newimage element with a dynamic source attribute.Using the WebKit developer tools, HttpWatch forInternet Explorer and HttpFox for Firefox, we weresurprised to discover that removing the elementwith JavaScript prevented the request being madeto the server. From a quick Google we discoveredthat children of the <noscript> tag aren’t added tothe DOM. This appears to work in all the browserswe’ve tested, even IE6, with the exception ofOpera’s Dragonfly, which crashed repeatedly whenwe tried to test it.

You can check out our GitHub repo at github.com/futurechimp/responsive_image_tag. It’s stillnot a perfect solution. It has the elegance of awading hippo and it’s causing a page reflow asyour page is loading, which could potentiallyimpact performance if over-used.

As with rounded corners, mark-up hacks such asthis are an indication that we’re missing some tools.

Ideally, we need an addition to the HTML5specification to allow some kind of devicerecognition for device-specific assets.

In summary:1 You need to think about which devices you wantto target and the difference in user interaction, aswell as the difference in screen real estate.Consider swiping and touchscreen gestures vsjoystick or mouse navigation.

2 Decide what content is essential for smallerscreens and consider your users’ networkconnections and download times. Images andvideo need to be scaled/cropped/optimised orhidden from view. You can’t just hide content withCSS – you need to prevent it being sent if it’s notgoing to be viewed.

3 Media queries give you a lot of fine detailcontrol, but they’re only one tool in your toolset.Content strategy and UX have to drive theresponsive design process.

Crop factor In order to preserve an image’s width and height but reduce its visible dimensions on-screen, the team useda CSS layer with an overflow value. This cropped the image to the required size for each different device and orientation

You can’t have fluid containerswithoutfluid content. Textwill wrap, but imagesand video needmore consideration

Design in syncWe started our build with the desktopsite and then worked inwards, removingelements as we went. In hindsight we’drecommend going in the opposite direction,particularly with regard to how youstructure your CSS, but also in terms ofasset creation. It’s a case of creating yourcode with progressive enhancement ratherthan graceful degradation. Andy Clarke hasproduced a useful set of boilerplate codecalled 320 And Up (stuffandnonsense.co.uk/projects/320andup), which provides a goodstarting point.

Head’s advice on how to approach thecreation of a responsive website would be todesign for the lightest and richest experiencessimultaneously. From an experience andbuild point of view, you want to think aboutmobile first, only adding screen elementsthat are truly necessary. From a visualdesign perspective, you need to think aboutthe visual direction as a whole. Designingfrom the mobile site upwards could be likeattaching a pair of virtual blinkers to you,stifling your creative ideas and leaving youwith a concept that runs the risk of being dulland uninspiring. You want your final productto engage and delight your users.

Our process at Head is very much an agileone, allowing for simultaneous streams ofUX design, visual design and build work.We collaborate, sketch up ideas and quicklyprototype them to see if they’re successful.Working in this way gives you a lot offreedom and also enables you to validateyour ideas quickly. This works particularly wellwhen designing a responsive site becausethings can get quite complex and trying outworking prototypes as you design can bringclarity to your work. This allows you to eitherrefine your design or take a new directionwithout getting too far down the line.


.net adwords

Google’s pay-per-click advertising service offers big rewards, buthow do you target your spend effectively?Mark Buckingham

reveals the best ways to advance your AdWords campaign

With over one million advertisers in 190countries, 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 generatesearch engine prominence, pay-per-click (PPC)advertising offers the savvy advertiser a quick fix.

And Google isn’t sitting on its laurels. In thisnew era of local search and Google Mapsintegration, AdWords has become ever moresophisticated, with new features and ways ofreaching your target audience. But many businessesare still wary of the perceived complexity and costof creating and managing pay-per-click campaigns.

In this feature, I’ll look at how to best go aboutyour AdWords campaign. We’ll hear insights andadvice from the experts, and there’ll be tips andtricks for optimising your AdWords spend.

Core propositionOf the billion worldwide searches that Googlereceives daily, a significant percentage will beloaded with intent – and that’s the core

Words Mark Buckinghamis a freelance writer andproprietor of NetSeek, a Surrey-based consultancy specialisingin AdWords management, SEO,copywriting and training.www.netseek.co.uk

Image The Ronin is RobChui’s motion graphics anddesign studio in London.theronin.co.uk

proposition at the heart of AdWords. As PeterFitzgerald, Google UK’s director of retail, explains:“It affords advertisers important and immediateways to get people into their site then their stores,or to pick up the phone and place an order, so it’squite powerful. People are showing intent, andbusinesses have the opportunity to become part ofa consideration set. Some of our advertisers willnow also set up with our conversion optimisertools, enabling them to effectively manage byconversion, not even by click, but by how manypeople are actually purchasing on your site.”

New interfaceIf you haven’t used AdWords in a while, it mightbe time to have another look. You’ll see a cleaner,faster and more intuitive interface with new toolsand features that present new opportunitiesyou may not have considered. There’s also beena proliferation of new formats and ways ofpresenting the ads, not least with the additionof Ad Sitelinks. This is designed to enhancetop-performing ads with additional relevantinformation, including extra links to other contentwithin your site. More than 100,000 advertisersare using Sitelinks and the format has increasedclickthrough rates, on average, by over 30 per cent.

AdWords is easier on the eye now,too, particularly the platform interface, as

GoogleAdWords:pro tips

understanding of contextual targeting. “There’s aworld of work before you even spend one pennyon the display network,” says Deutsch. “It’s not thesame as standard search engine marketing.”

Despite these recent innovations, though,AdWords has not fundamentally changed. Key tosuccess is predictability, and the core features ofAdWords make it more predictable to know whereand when your site is showing up, including theability to refine existing campaigns with positiveand negative keywords. It also means tweakingwhich publishers you show up on over time.

PitfallsUnfortunately, Google AdWords is not an exactscience. 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, sufficientreturns aren’t materialising. So what can you do?

“Start with analysis,” Fitzgerald advises. “Is thecreative really relevant to the keywords? If yourkeywords are ‘digital SLR camera’, do you have agreat selection of digital SLR cameras? Also, make itclear about what you do: is that showing up in thekeyword creative? And keep testing: the companieswho really succeed are always trying to do that.

“Also, you can get much better conversionrates if you have a sound landing page strategy.Sometimes it can be hard to navigate through asite, so Google Analytics enables you to find outthe top 10 landing pages that you have, and seehow you’re doing. Look at bounce rate, which tells

Optimise your AdWords campaign

As an experienced search engine marketingconsultant, I help clients optimise theirAdWords campaigns. Primarily, I look forlogical structure and organisation. Thefollowing pointers could work in your favour:

Plan and organiseA well-organised campaign will be easier tomanage and amend as you go. Ensure every adgroup is as targeted and granular as it possiblycan be. Keep your campaigns tidy and check forbroken links, monitor your account to identifywhat’s working and what isn’t, and where yourads are pointing to. This will help you optimiseyour campaigns and ensure their smoothrunning. Do this and your Quality Score [QS] islikely to be higher, too, which could lower thecost of sustaining your intended ad position.

Learn the LayoutSpend time getting to know, and customising,the display interface. Take the many helptutorials and understand exactly what each facetof AdWords means. Familiarity mean you canhone and manage your campaign, or those ofyour clients, more effectively.

Give Analytics timeFirst off, if you’re not using Google Analytics, orthat of a third party, hang your head in shame:it’s vital. It’s also important to be patient whenfirst using the service. Once you’ve inserted yourtracking code and created conversion goals, wait afew weeks to accrue a reliable spread of data.

Use AdWords to inform your SEOThe fact that AdWords gives you an insight intoreal-time search trends can be used to augmentyour SEO across your website, enhancing yourconversions rate and driving traffic, as well aspotentially boosting your site’s rankings. However,steer clear of spurious, ‘black-hat’ SEO techniques,and consider employing an expert copywriter toensure that the depth and quality of your website’scontent is up to scratch.

Laser targetingTake advantage of Google’s flexible targetingfunctionality. Try testing different regions, or townscloser to home, and not just the whole of theUK. Unless you run a nationwide or internationalservice, this could mean you enjoy a greaternumber of conversions and save money, too.

Split-test your ad creativeTry testing different advert text, or creative, foreach group. You’ll soon see which ads performbetter. A subtle change in syntax may be allthat’s needed to appeal to searchers.

Data gatheringWhile every advertiser wants to reap quickconversions, the time it takes to attain themcan prove invaluable for gathering data. Castyour net wide to see what’s popular; scale backonce you know what’s working, and designateeach type of key phrase into its own campaignor group. If a keyword or phrase is generatingscores of impressions but few clicks, try uppingyour bid prices or move them to another group.

Understand your keywordsWhile every advertiser wants coverage for theirmost popular keywords, it can quickly use upyour budget. By focusing on the niche keywordsand phrases that your customers will use, youcan still ensure a healthy conversion rate. It’svital you understand the differences betweenbroad match, phrase match and exact match,and negative match, too.


David Deutsch, online marketing course,leader at Search Titans (searchtitans.co.uk),

points out. “When you made a report in AdWordsbefore it was a pretty clunky process,” he says. “Butnow, all of the reporting you could possibly wantis integrated within the interface itself, which is amassive shift since the beginning.”

Display advertising is another evolution, thoughbe warned: to tackle it effectively you’ll need tocreate a display advertising marketing plan, createbanner ads, a message, landing pages, a propermedium, and target one site at a time, with a good

“Startwith analysis. Is the creative/actualad really relevant to the keywords? Also,make it clear aboutwhat you do” Peter Fitzgerald

Opportunity knocks Use the Opportunities tab in AdWords to get a quick overview of Google’s customised keyword andbudget ideas for your campaigns and ad groups

Simulator The Bid simulator lets you explore what couldhave happened if you had set different keyword-level bids

.net adwords


.net adwords

you that people are coming to this page but areleaving quickly. This gives you insight into the waysthat presenting information makes it difficult forthat consumer to make it onto the next step.”

Tooled upAll too often, a new client approaches me, keento sharpen their AdWords arsenal, but unaware ofthe range of free tools Google offers. Doing yourhomework is the first step to success; determinedtrial and experimentation a close second. A littledigital elbow grease goes a long way.

Google’s Website Optimizer, for example, allowsyou to split test or multi-variant test landing pages.Analytics, Google’s free analytics software tool, isalso a must if you want true long-term returns.

Here’s one example. I’ve seen so companieswith wonderful ads and a healthy budget, but thatdon’t deliver (or even stock) the goods once theyget the click. Typically, a user will get to the landingpage and search for other types of products, butthe search lets them down, they don’t find whatthey want and they leave. There’s a function in

Analytics called Search Exit, to see how manypeople are leaving your site. Using this and makingimprovements can make a huge difference.

Tools such as Insights for Search give youinvaluable insights into the types of products thatyou’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 fashionbusiness and want to go international. You cansee where the demand is, so if you want to sell inJapan, our tool helps you.” Despite the advent ofnew tools, a word of advice from experience: likeall things, get the basics right first. If your websiteor offering is poor, it doesn’t matter how manyvisitors you get – you will struggle to close sales.

And of course, the popular Google Keywordtool gives you a sense of the volume of searches,because you just don’t know sometimes howmuch these things are sparking interest. A lot ofbusinesses now are using these tools to makebuying and merchandising decisions too.

TestingTest and iteration is imperative. When looking atresults, a key area to consider is your conversionrate and cost per sale/cost per acquisition, as

well as the keyword rate on ads. Advertisersshouldn’t have to care about your clickthroughrate – it should be just bottom line numbers – butclickthrough rate is something Google rewards.

Andrew Goodman, president of Page ZeroMedia (pagezero.com) and author ofWinningResults with Google AdWords, reveals: “We mighttest three or four different pieces of ad creativefor a set of keywords. By doing a good job of that,we’d be looking for the best compromise betweenclickthrough rate and cost per acquisition to selectthe winning ad. Companies that don’t test willstart out with £40 cost per sale and at end of yearthey’ll still be £40, but someone who’s nibblingaway will soon cut it down to £20. This is thedifference between profit and loss.”

The main pitfall is not making your campaigngranular enough. “It’s about being specific,” warnsGoodman. “Fairly general keywords and a generalmindset simply prevent you being more effective.”

It pays to do your homework, and to be awareof the four main keyword matching options: broadmatch, phrase match, exact match, broad matchmodifier, not to mention that you can add negativekeywords. The default is called broad match, butwhat advertisers may not know is that theymay be bundling a bunch of less relevant

Six tips Economise on AdWords

1 Average ad position as reported can bemisleading. As George Michie of RKG recentlyshowed in a study of clicks and ad positions, areported average ad position of, say, 3.2, couldactually have you in first and second place muchmore often than you might realise.

2 Google statistics and estimates such as ‘firstpage bid’, ‘impression share’, ‘top vs. side’, andso on, can be rhetorical flourishes intendedto whip up your desire to ego-bid. Focusinstead on real metrics like clickthrough rates,conversion rates and total revenue.

3 New channels in the display network mightstill send you too many clicks from one or twosources – even sources such as YouTube that areowned and operated by Google. If one publishersource is greedy for your 60 cent clicks, chancesare they’re having trouble getting that muchmoney from other advertisers. Move thatpublisher into ‘managed placements’ and testlower bid levels to see if you can still drive clicksin that channel for rock-bottom prices.

4 Do you know what goes up significantlywhen you add image ads to your text ads whenusing the display network? CTRs (clickthroughrates) and effective CPMs (cost per thousand

impressions)! If you’re paying per click, thepublishers and the middleman love it! Butshould you? Ensure your financial performanceis commensurate with the increase in clicks. If itisn’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 ifhigher bids can drive more total profit. Now,though, you don’t have to guess at whethersuch tests have been fully scientific. Enable afeature called AdWords Campaign Experiments(ACE) to help you split the high-bid and normal-bid traffic evenly as an experimental and controlgroup. If you get the results you desire, great!But you may find not only that the increasedsales don’t warrant the increased cost, butthat total revenues in the high-bid stream areactually lower than the normal-bid stream.

6 Tools such as the Bid simulator can offerfantastic data that can help you understand theauction for a particular keyword. But don’t letthem whip you up into a bidding frenzy. Alsouse them to find opportunities to lower bids! Insome cases, the tool might show you there ismuch more volume ‘out there’ for that keyword,at bid levels much higher than you’re sitting at,even though you thought you were already ina high ad position. This can sometimes be true,in part because Quality Score determines notjust position but eligibility for top (premium)position, and general eligibility in the auctionbased on user personalisation and more. Othertimes, by bidding much higher on broad matchvariants of your terms, you’re gaining nothingbut a lot of watered-down, less relevant clickson “related” terms and concepts.

Andrew GoodmanJob title PresidentCompany Page Zero MediaURL pagezero.com

“General keywordsand a generalmindset preventyou beingmoreeffective” Andrew Goodman

Central hub The Campaigns tab is where you set up andmanage your ads within AdWords

Power tool AdWords Editor is a free, downloadableapplication for managing your account


queries and users in with the more targetedones, and again, this simply makes the

difference in the cost of the sale.

Good housekeepingSuccess on AdWords means being laser-focused.You need to find out which keywords (or keyphrases) are most valuable and separate thoseout from the pack, changing from broad matchto exact match specifically for that group ofkeywords. Then, consider creating a landing pagefor said phrases; and then going through to thevery end to ensure you’re converting every singleclick 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 theirown ad groups, then create ad copy and landingpages specifically for those keywords. Follow updaily after you’ve done that to see what peopleare actually typing in through your search queries

“It’s a common mistake to bundle in all thekeywords you can think of into one group,” says

Deutsh. “For example, ‘Airport Parking Gatwick’,‘Airport Parking in Heathrow’ and ‘Airport ParkingBirmingham’ will all be in the same groups.That’s a terrible mistake to make – they should beseparated into different campaigns, and should begeotargeting those locations.”

Quality Score is AdWords’ measure of thequality of the landing page relating to a givenkeyword you’re bidding for. Broadly speaking, ahigh Score means your keyword will trigger adsin a higher position, and at a lower cost-per-click.I find the largest source of money in my pocketis making individual landing pages that reallyconvert for specific ad groups, going the extramile so that when people click on one of my ads,they go straight to the landing page. WebsiteOptimizer can help improve conversion rates too.

Deutsch warns against tunnel vision, though.“When the advertiser finally realises they shoulduse Website Optimizer, they focus all their effortinto one perfect landing page. They miss the pointof A/B testing: you’re not necessarily supposed toget it right. The point is to try every variation thatcomes into your brain, and test them all.”

Other challenges relate to budget. The morecomplex and the bigger your budget, the morepitfalls there are. “Just because you set budget at£200 a day, doesn’t mean you’re going to spendthat in a day,” cautions Deutsch. “A campaignmight not spend all of its allocated budget, andthat’s really hard to gauge.

Automating bid managementA common question is whether to trust Googleor manage your own bids. “You’d better be goodat managing bids manually first before you useautomated bid management,” advises Goodman.“Here’s what can happen. You’re asked to enter anumber of parameters when you want to raise orlower bids based on some target you’re shootingfor; you’re usually also asked to enter a minimumamount that you don’t want the bids to be lowerthan. If you do this wrong, you don’t realise thatyou’re already bidding below that minimum youjust specified – you could inadvertently go throughthe whole account and actually raise a bunch ofbids when you were only intending to lower thebid amounts as non performers.

“The worst thing you can do is have theseinfrequent catastrophes come up,” says Goodman.“It doesn’t matter if it only comes up once – if youdo that big screw-up once in three years it couldruin the account. Being less risky and focusing onthe fundamentals, rather than getting too fancy,seems to be the best course of action.”

Overall, there’s a lot of work involved in gettingGoogle AdWords to work for you, but I believeneglecting the power of paid search advertisingcan be a costly mistake for businesses, while theopportunities it offers are limited only by budget,time and imagination. Test and optimise, and you’llsoon fast-track your way to profitability.

Insight-fullWith Insights for Search, you can compare searchvolume 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 onecompletely different layout, look and feel, or make slight variations to see what changes there will be

7 Top AdWords ToolsGoogle AnalyticsWebsite OptimizerGlobal Market FinderInsights for searchGoogle AdWords Keyword toolAdWords Campaign ExperimentsAdWords Editor

Get imaginative Run an AdWords Campaign Experiment

AdWords Campaign Experiments lets you splittraffic in your AdWords account, much likean A/B test with a landing page. Instead ofdifferent landing pages, though, you can splita keyword between one bid and another, or tryan ad group with or without several keywordsadded with a new match type.

Andrew Goodman, author ofWinning Resultswith Google AdWords, says: “This allows youto test theories about which version of yourcampaign is better, without any skew due tosampling methodology. It’s a great antidote toguessing at ‘best practices’ – you truly let thedata show you which version of an ad groupor campaign worked best. (You could even letsomeone ‘go to town’ in a campaign with awhole bunch of uncoordinated changes, placedin the ‘experiment’ group, and label the test‘Mark’s crazy theories’ to see whether Mark’scampaign outperforms the control campaignon a given metric.) “A handy feature is that it

provides notations for statistical significancenext to a statistic like clickthrough rate,” addsGoodman. Three little blue arrows means thatthe result is not due to chance 99.9 per cent ofthe time; two arrows, 99 per cent of the time;one arrow, 95 per cent of the time; greyed-outarrows, not yet statistically significant.”

Start experimenting You can execute an experimentalcampaign alongside your original campaign

.net adwords

A normal form is made up of a clear callto action, required and/or optional fieldsfor user details, and a final submission.

How those elements are laid out, presented,labelled, explained and otherwise delivered hasa big impact on growing your site or business.

Clear callMethods of acquiring new users differ. Some putthe golden content behind a login wall. Othersopt for lazy login and let users browse or createcontent before taking the plunge. Regardless, you’llwant a clear space to sign up or log in. Conventionputs this call to action top-right of a website whenviewing internal pages, or in a banner or sidebarwhen it’s strong enough to claim the hierarchyover competing content. Choose your approachintuitively at first, based on your knowledge of theaudience and product. Back that up with usabilitytesting and research to evaluate your ideas.

Choose your flowMost usability specialists suggest a vertical, top-down flow for your form, as well as keeping fieldsto one column, with a clear submit button at theend. Sites such as Groupon have had some successwith a horizontal stepped flow. Longer or morecomplex forms may require some progressivedisclosure to avoid seeming insurmountable.

A word on labelsKeep labels close to fields, and use white space orrules to clearly differentiate them. Labels on the leftare best left-aligned for scanning, but if you preferinline labels be sure to only grey the label on:focusso users don’t forget what they’re doing. ●

Most usabilityspecialists suggesta vertical, top-downflow for your form

focusf _on_on_

Signupforms

(1) The lack of distractionand focus on simplicityat social geotagging siteGowalla (gowalla.com) islaudable. I love how it getseverything out of the wayhere. (2) Leading the fieldin clean, simple signupand form design, Wufoo(wufoo.com) showcases apersistent ‘sign up for free’on almost every page of itssite. (3) A new professionalprofile and networkingsite on the scene is Zerply(zerply.com). It implementsa simple form to get peopleon board, with a three-part button for normal orsocial signups. I’m curious

to see how well this worksin practice. (4) Deal-of-the-day kingpin Groupon(groupon.com) implementsa three-stepped processfor its signup, which kicksoff by asking for your city.Conceivably this allowsusers to jump in withoutexpending much effort.(5) Not actually a signupform, but a great exampleof progressive disclosurein forms is this stackedselect list from JavaScriptdeveloper Awesome*(awesomejs.com). It usescolour, icons and goodcopy to help users makea decision.

1

2

3

There are many different implementations of signup forms,but not all are created equal. Let yours stand with the best

.net showcase focus_on


Obsessed with creative inspiration (seehis site patterntap.com) and attentionto detail (see his work at squaredeye.com), Matthew Smith loves helpingdesigners capture what inspires them.

4

5

Theworld’s best-sellingmagazine for webdesigners and developers

Trial offer: threeissues for just £5!

Subscribe now!

.net Issue 221 Preview

Documents

Transcript of .net Issue 221 Preview