.net issue 231 sampler

issue 231 summer 2012 www.netmagazine.com

issue

231

Plus >

The pro’s guide to Adobe Edge

Create drag & drop features

Make your website printable

Build smoother JavaScript apps

CreatetheperfectportfolioRevampyouronline callingcardandget abetter job!

THEWORLD’S BEST-SELLINGMAG FORWEBDESIGNERS&DEVS

>CSSlayouts:the futureDiscovernewways tobuilddynamicsites thatworkonanydevice

>Make sitesload faster!Get a higher Google rankingwithour CSS and JavaScript techniques

Thecover’sinteractive!Tap to readanarticle

.net interview

40 .net summer2012

The web designer and creator of typemagazine 8 Faces hasjust launched his own product company, Viewport Industries.Elliot Jay Stocks talks to TomMay about redesigning SmashingMagazine, ‘typography out’ and how print informs the web

You’ve probably heard of ‘mobilefirst’ (netm.ag/first-231). You mayalso be familiar with ‘content first’ or

‘content out’ (netm.ag/out-231). But did youknow about ‘typography out’? If not, design guru,speaker, blogger and type expert extraordinaireElliot Jay Stocks is here to explain all …

“The basic idea is that, rather than throwingthings together in Photoshop or code or whatever,you focus on the details first and work outfrom there,” he explains. “So with ‘typographyout’, you’re deciding on your typeface and yourfont size, your leading or line-height, and yourmeasure (your width of the line) before you startto create your layout. All of these things are aboutproportions, and these proportions can then betaken out into other parts of the design; theyinform the design as a whole.

“For years I didn’t do that at all,” he adds. “Typeis almost an afterthought for a lot of people and itcertainly was for me for a long time. But once youstart doing it, it makes total sense.”

Smashing redesignOne of the first times Stocks put this approachinto practice was when he led the recent redesignof the popular design blog Smashing Magazine

(smashingmagazine.com). “I’d been doing somework for Smashing on their editorial board,” heexplains. “And when talk sprung up of a redesign Isaid I’d really love to do it.

“I felt Smashing’s content was getting betterand better: they’d gone from basic list features tosomething more intelligent. But the design of thesite didn’t reflect that. It was still kind of childish ina way, a little bit overly friendly. I wanted to comeup with a design that would reflect that growthinto something a bit more adult.”

Focus on type‘Typography out’ was a perfect fit for the project,Stocks explains. “It was obvious that we shouldfocus on the typesetting of an article first because,well, why are you there? You’re there to read anarticle – so everything else in a way is secondary.Yes, navigation is important; yes, the generaldesign of a thing is important. But the primary taskis to read an article, so that should be the thingthat then sets the tone for everything else.”

The whole process took a lot longer than heexpected, though. “That was partly because of theway we focused on these finer typesetting detailsbefore any other design happened. But it was alsobecause we wanted it to be responsive. With a

site like that, which has a lot of navigation, thatwas a challenge. The main thing was that therewere a lot of ads that were fixed width within afluid-width layout. It’s a fairly difficult thing to dealwith. Ben Bodien from Neutron Creations wasresponsible for a lot of the more complex CSS, toget all that working.” They were joined by regular.net writer Ryan Taylor (www.havocinspired.co.uk)and Smashing Magazine’s own Robin Schultz. “Andthen once we were done we handed it over to theSmashing team, who went into it again, refined it,did a lot of testing, and so on.

“I’m really happy with the way it’s come out,”Stocks smiles. “I think it fulfils the original idea: tomake everything look a bit more grown up.”

Web font revolutionTwo main factors have influenced Stocks’ thinkingon ‘typography out’. One was the process ofdesigning and producing the first edition of 8 Faces(8faces.com), his limited-edition print magazineabout typography. “And at the same time, the webtype revolution was starting to pick up steam,” heexplains. “Mark Boulton was talking about ‘contentout, not canvas in’. People were starting to thinkabout type on the web because it was coming ofage with services like Typekit and Fontdeck.

“So because we were thinking about type moreintelligently, and because I’d gone off and done aproject that forced me to think about type, thosetwo things married up. My current thinking is acombination of the great stuff that people likeTrent Walton, Mark Boulton, Tim Brown and othersare doing, mixed with the perspective ofdoing print stuff as well.”P

ho

tog

rap

hy/

Job

yS

ess

ion

s

“A large scale projectforces you out of yourcomfort zone. It scaresyou in a healthy way”Elliot Jay Stockselliotjaystocks.com

In 2012, developments in CSS aretaking the way we display websiteelements into a new dimension –

literally, in some cases. We can rotate andscale elements; animate and transition them;make pages that respond to the capabilitiesof the device they’re being viewed on. Andwe still can’t make a decent grid withoutunnecessary markup or a lot of trickery.

While the web has grown, expanded andmultiplied, the most fundamental aspects oflaying out a page using CSS haven’t changedsince CSS1.

But CSS3 is finally catching up. Now wehave dedicated work on making new ways toconstruct pages, to create rich, dynamic layoutsthat can take influence from, and improve upon,the best of print and graphic design.

This article is about those new layoutmethods. About properties that are wellimplemented and that you can use now;properties that are beginning to appear in

experimental builds; properties that are merelyproposed, highly subject to change, and may neverappear at all. Such is the rapid rate of change thatI expect there to be some updates to some specsby the time you read this (to see how much haschanged already, check out my post from lastAugust: netm.ag/layout-231).

Multi-column layoutStable and well-implemented, the Multi-columnLayout module (w3.org/TR/css3-multicol) isn’t themost flexible or powerful of the new layoutmodules, but it does one job very well: flowingcontent into multiple columns. It’s verystraightforward to use: you apply the rule to acontaining element, and all of the content withinwill be flowed into the generated columns:

E { column-count: 5; }

In this example I’ve set the content of elementE to flow into five columns, which will beautomatically and evenly spaced across its width.Using column-width is an alternative approach:

E { column-width: 10em; }

The futureof CSS layoutsCSS’s next big challenge is tomake flexible,dynamic page layouts that work across our

ever-broadening range of devices.Withsolutions proposed and under discussion,

Peter Gasston offers a snapshot of the future

Words Peter Gasston is afreelance web developerand author of The Book ofCSS3: A Developer’s Guide tothe Future of Web Design.He writes about ‘the weband web-related stuff’ atbroken-links.com.

Image Mike Brennanis art editor of .nettwitter.com/mike_brennan01

44 .net summer2012

.net layouts

.net layouts

.net summer2012 45 next>

.net portfolio

If, like us, you tend to read thenewspapers from behind terrifiedfingers, you’ll know that it’s a tough

world out there. The creative industries mayhave weathered the financial storms betterthan many older sectors, but they haven’tbeen unaffected: competition is fiercer thanever, and it’s harder and harder to stand outfrom the crowd.

If you don’t have a portfolio, it’s evenmore difficult. At its simplest, a portfolio is anonline advert. Here I am, it says. Look at thestuff I can do! But there’s more to it than that.Your portfolio is your calling card and yourart gallery, the place where you showcaseyour skills and the stories behind your mostimpressive projects, where you show not justwhat you’ve done, but what you want to donext. In many cases, it’s also the only thing

somebody will see before deciding whether tocontact you with a job offer or a project proposal.

Story timePortfolios come in three main flavours. They canbe an online CV, designed to impress potentialemployers, a brochure, designed to bring in newclients, or a showcase, designed to impress and/orintimidate your peers. All three kinds have plentyof things in common.

Like any other kind of website, portfolios mustfulfil multiple criteria. They need to be accessibleand easy to navigate. They have to work properlyacross different browsers and devices. They needto be executed perfectly to meet the brief. Withthe exception of those portfolios that are designedsolely to impress your peers, that brief will usuallybe ‘get me some work’.

Scott Belsky is CEO of the creative showcaseBehance (behance.net), which offers a rangeof portfolio building and promotion tools. “Inaggregate, a collection of projects showcases yourstyle and breadth of talent,” he says, arguing thatthere’s no reason why that collection shouldn’tinclude personal projects – “they show yourpassion and initiative for your craft.” Nomatter what projects you decide to feature,

Words Gary Marshallis a freelance journalistand author, and longtimecontributor to .net. Youcan read his musings onthe internet, technologyand music atbigmouthstrikesagain.com

Image Steven Bonner is aStirling-based designer andillustrator working forclients such as Nike, Diesel,Penguin and Cadbury.stevenbonner.com

.net summer 2012 55 next>

.net portfolio

Makethe perfectportfolio

If you don’t have a portfolio, youshould – and if you do, perhapsyou ought to take a fresh look

at it, reckonsGaryMarshall

62 .net summer2012

.net showcase gallery

Responsive >Contents, SVTNyheter andReadlists flex theirresponsivemuscles

63

HTML5 >HTML5 delightscome courtesy ofThe Space, Lois Jeansand Schnaydermans

65

Plug-ins >Our Flash highlightsare The Stella ArtoisChalice Factory,Insanely Driven andHeart Rescue Now

67

CSS >Ricardo Vazquez,The COOP andDMDN are the starsin this issue’sCSS firmament

64

JavaScript >JS joy fromÜberConference,CanvasDroprand Bitly

66

CMS >The cream ofcontentmanagementfrom Skins, RedMoon CateringandWorkFu

68

PaulWyattPlug-insPaul is an award-winning digitaldesigner andwriter.He’s producedwebsites, print andanimated creative for

clients such as Adobe, VirginMedia,PlayStation, 2Entertain, D&AD, theBBC, Smirnoff and British Airways.paulwyatt.co.uk

JennLukasCSSJenn loves structuralsemanticmarkupand CSS and isthe interactivedevelopmentdirector at Happy

Cog (happycog.com). She also blogsregularly about web development atThe Nerdary (thenerdary.net).jennlukas.com

Ryan TaylorCMSRyan is a freelancedesigner and front-end developer. He’sobsessedwith clean,efficient and semanticHTML, CSS and jQuery,and has a specialinterest inmaking

design and CMSesworkwell together.havocinspired.co.uk

Paul LloydResponsivePaul is an interactiondesigner based inBrighton, England.He’s happiest whencrafting simple yetengaging interfaces

that are native to theweb. He currentlyworks at user experience agencyClearleft (clearleft.com).paulrobertlloyd.com

Rey BangoJavaScriptRey is a JavaScript,HTML and CSSevangelist forMicrosoft.In addition, he is thedirector of communityfor the jQuery

JavaScript project, writer for ajaxian.com and editor of scriptjunkie.com, aresource forwebdevelopment articles.blog.reybango.com

Rich ClarkHTML5Rich is head ofinteractive at KMPDigitata, a digitalagency based inManchester. He’s thefounder and curator

of HTML5 Gallery (www.html5gallery.com) and editor and author of HTML5Doctor (www.html5doctor.com).richclarkdesign.com

Our experts reveal this month’s hottest new websites

highlights…


.net showcase gallery

3

21

3

Paul Lloyd

Contents(1) Contents (contentsmagazine.com) is anonline magazine covering content strategy, onlinepublishing and editorial work. Issues roll out overa six to eight week period, and with site design byEthan Marcotte it warrants closer inspection.

Articles are beautifully typeset and easy to read,each issue featuring bespoke background imagerythat provides a subtle frame for the text. The use oflarger type on the desktop layout is also welcome.

David Bushell’s article ‘The restriction of type’(netm.ag/bushell-231), suggests that “with so muchfocus on pure content, we’re in danger of losingour license to design”; we asked Ethan for his take.

“Maybe Contents isn’t the best rebuttal toDavid’s points,” he says. “But I wonder whathe’d consider a successfully ‘branded’ mobileexperience. The emphasis on content doesn’texclude an attention to brand: it just forces us to

pages show the same number of stories, featuresand photos, which can result in downloads ofaround 1MB. “There are always compromiseson the way to making technology and contentambitions work together,” reckons Hallberg.Homepage size: 1.05MB mobile, 1.05MB desktop

Readlists(3) Readlists (readlists.com) is a service from thesmart folk at Arc90 (arc90.com) and Readability(readability.com). It helps you collect web articlesand bundle them into an e-book for reading later(for more on Readlists see page 14).

While not directly related to Readability,Readlists shares a similar vernacular with its highlycrafted aesthetic – check the custom scrollbars!“The design process on Readlists was veryiterative,” Tyler Gaw, frontend developer at Arc90reveals. “I went through three or four full designs,markup and CSS included, before landing on theone that’s live.”

The site adapts beautifully to different devices;note how the ‘Read Now/Later’ action appearson hover, but on touch displays is ever-present.“It’s been a playground for things I’m hoping tointroduce to Readability and a responsive designis high on that list,” says Gaw. “I’m not sure I knowhow to make a fixed-width site any more.”Homepage size: 420kB mobile, 381kB desktop

“Readlists’ designprocesswas veryiterative – Iwentthrough three orfour designs” Tyler Gaw

gallery Responsive

Responsive siteof themonth

reinvest attention in the content. A typographically-driven identity doesn’t sound a bad thing.”Homepage size: 550kB mobile, 808kB desktop

SVT Nyheter(2) Last issue we looked at the BBC’s responsivenews site, designed specifically for mobiles andtablets (at least for now). Sweden’s nationalbroadcaster SVT (svt.se/nyheter) has also recentlyredesigned its news website; unlike its BBC peer,it works on all devices. “We want to create sitesthat are user friendly and technically scalable,” saysSVT’s lead interaction designer Johan Hallberg.“Responsive design is a step in that direction.”

The design is clean and smart, but having storiesopen in place can be a little disorientating. Whilethe SVT site one-ups the BBC with a responsivesite that works across devices, there seems to belittle optimisation for mobile. On narrower screens,

.net showcase profile

76 .net summer2012

8Broadcasting loud and clear: (from left) Barry Pilling, Garret Keogh and Jack Simcock of the Telegraph Hill team

Q&A.net: How did Telegraph Hill come about?GK: The traditional TV industry wasn’t reacting fastenough to changes in how users were watchingand using social products. We felt there wasan opportunity, so set up Telegraph Hill to takeadvantage. Barry and I worked on Being Humanat RDF/Zodiak and were responsible for makingit a massive online brand. Barry and Jack hadbeen together at Mentorn and the BBC on TVdevelopment and the three of us had aspirationsabout working where social media, digital contentand TV programming come together. We startedtalking early last year but didn’t get up and runninguntil autumn 2011. We’re now 10-strong and doingthe biggest TV social media campaigns in the UK.

.net: What is the ‘special sauce’ that makesTelegraph Hill stand out from other agencies?JS:We understand TV as well as social media sowhen we talk to broadcasters and productioncompanies we speak their language. We’re athome talking to a range of clients and can explain

Barry Pilling, Garret Keogh and Jack Simcock of social televisionproduction company Telegraph Hill share their experiences ofworking on some of UK TV’s biggest brandswith TomMay

technology without scaring non-technical partners.We treat social media as a creative process – we getgreat writers to create our tweets and FB posts.

.net: What’s the secret to a successful web-basedcampaign for a TV show?BP: Understanding your audience and theirrelationship with your show. What do they needbetween episodes? What do they want to see afterthe show? What content best suits which platform?Thinking like a fan is key. We’re fans of our showsas well as part of the production!

.net: You tripled Hollyoaks’ website audience witha pioneering live TV event – tell us about thatGK:We joined with 4Music on #Wretch32Invasion:a free exclusive gig featuring rapper Wretch 32.Hundreds turned up, not realising the stage wasabout to be crashed ... by Bart from Hollyoaks!He played out a scene from the show, confessinghis love to Sinead as Wretch played along as if itwere real. Bart was bundled off by security beforeWretch revealed to the audience they were partof a new Hollyoaks storyline and would be inFriday’s episode. Online it exploded. We publishedphotos and videos, adding to the buzz around#Wretch32Invasion until it trended globally onTwitter. Viewing figures rose by a third and Wretch32’s album jumped three places up the chart. Theevent reminded fans that Hollyoaks can still takethem by surprise, even after 16 years.

.net: How did you win the contract to work on TheVoice, and how’s it been working with the BBC?JS:We were hired by The Voice UK’s productioncompany Wall to Wall after being recommendedby the BBC. Our five full-timers are based in theproduction office, so they’re part of that teamand can be responsive and on-message. We workclosely with our team, Wall to Wall and BBC ongetting the tone right, and ensure our schedule isin tune with audience habits and moods. It’s beenincredible to work on such a big show and we’reproud of what we’ve achieved; the numbers on allplatforms have been massive.

.net: What’s been your proudest moment?GK: It’s great to see The Voice breaking records, butwe knew it was going to be big! A smaller projectwe’re proud of is BBC Three’s Free Speech. Workingwith Mentorn Media, we’ve built a community ofpolitical activists who debate topics daily online,as well as contributing massively to the monthlylive TV show. We were blown away when Sway(a former guest) namechecked the show and hisTwitter trending experience in a song: how manysocial media campaigns get a rap mention?!

wearetelegraphhill.comAgency location ShoreditchTeam 16Expertise Social TV production companyEstablished 2011Clients BBC One, BBC Three, BBC Asian Networks,Channel 4, Wall 2 Wall, Mentorn, Lime Pictures,London Pleasure Gardens, ZeeboxEthos Make, Share, Talk

profile

TelegraphHill

.net showcase profile

.net summer2012 77

end of 2011 deliveringsocial media and excitingcontent. We didn’t havemuch say over the website,but developing digitalstrategy we were able tohave big impact on trafficto the site and the FB andTwitter numbers. (3-5) Wedeveloped all of the digitalcontent for The Voice UK(netm.ag/voice-231). Thebest thing about workingwith the BBC on a bigproject like this is that youget a lot of support. Youalso don’t have to worryabout hosting and thingslike music licensing. Thereis a lot of form filling butit unlocks an incredible setof resources and a teamthat works around theclock to deliver. We wereable to set site and projectstrategy early on and workwith the BBC team andproduction company Wallto Wall. A lot of content

(1) With BBC Three dramaThe Fades (netm.ag/fades-231), we were hired to planonline content and createa conversation, turninga cautious audience intohardcore fans. The showhas since won a BAFTAfor Best Drama Series.We worked with theBBC on the website andsocial media platformssupporting the series. Webuilt a new audience bymaking our tone attractiveto fans and our voice onTwitter and Facebooksomething they’d wantto get involved with. Wehad three topics trendingon Twitter in the firstepisode, and the show hadthe highest multichannelaudience at launch. Fanslaunched Facebook andTwitter campaigns to bringthe series back. (2) Weworked with Hollyoaks(e4.com/hollyoaks) at the

had to be created, withweekly updates as artistscame and went. (6-7)Designed by our friendDaddison (daddisonish.com), the LondonPleasure Gardens site(londonpleasuregardens.com) has been a challenge– because there’s so muchto say. It’s a massive spacein the heart of OlympicEast London with a seriesof upcoming events andput together by the crewbehind Shangri-La atGlastonbury who have atrack record of creatingamazing places. We’reblogging and updatingfrom the site as it’s clearedand promoting the eventsover the next two yearsas they come online. Wewant to give the spacecontext within the cityin this Olympic year. Abig ask but we really likethis site design, which

we think will continueevolving as the projectgrows. (8) Our favouriteproject, Free Speech (netm.ag/free-speech-231) isa community for youngpolitically engaged peoplearound a BBC Three show.We post daily discussionpoints to FB and Twitterand run a blog on the BBCThree site. The communityis wide-reaching and reallyengaged around the showand topics discussed. (9)With our own website(wearetelegraphhill.com),we wanted to keep itsimple: apart from listingus and our projects wedidn’t want too much onthere. The clean retro lookand black-and-white logo(designed by urban artistWreckage) set the tonefor the website, again byDaddison. Our challengeis to keep the websiteupdated and vibrant.

.net: How do you source talent, and do you relymainly on freelancers or employees?JS:We are always looking for great people. In theoffice we have the Wall of Awesome: a board withnames of everyone we want to work with on it. Ifclients want us to put together a team, we use itto help us assign individuals. We also work withCanterbury Christ Church University on findingdigital and media students to work for us.

.net: What are you excited about at the moment?BP: The way the industry is heading; building ourown company at the heart of it – and bringing thesocial media conversation into live events. Whetherit’s a TV show or a sports event, what does socialmedia activity look like at the event and beyond?And live TV is exciting again ... who knew?

.net: UK TV formats are popular around the worldnow; do you see the company expanding abroad?GK:We’ve started talking to agencies in Singaporeand beyond as well as a few secret projects thatcould see us developing technology around bigsporting events and concerts on a global level.

.net: Where do you think the future of TV lies?BP: Platforms may change but there’s always aplace for a curated schedule. If a company withsuch an amazing heritage as the BBC can adaptand deliver some of the most socially enabledprogramming, then all broadcasters can.

.net: What’s the most bizarre request you’ve everhad from a client?JS: On live TV show days, people sometimes thinkour team is responsible for everything ‘digital’ –even internet connections and cabling. Actually, weoften can help – and do have a lot of cables! l

1

5

7 8 9

6

2

3 4

.net technique frontend

88 .net summer2012

Knowledge needed Basic CSS and HTML

Requires Text editor

Project time 1-2 hours

Everyone’s talking about responsive web design. But does everyoneunderstand what it’s for? I’m not sure. Many web designers anddevelopers seem to me to have misunderstood the problem

it’s trying to solve.Put simply, it’s not about making sites for mobile devices, it’s about adapting

layouts to viewport sizes.Over the next few pages, I’ll look at the principles behind responsive web

design in detail, so we’re sure to understand the concepts correctly. Once we’vegot that out of the way, I’ll walk you through building a website that scalesperfectly on both large and small screens.

Responsive web design has mainly become a hot topic because more andmore people are using mobile devices such as iPhones, iPads, and BlackBerrysto access the internet.

So it’s becoming increasingly important to understand that a website shouldnot be specifically about either the desktop or the mobile device, but aboutbuilding in such a way that its layout adapts to varying viewport sizes.

If you think about the new inventions we will inevitably see in the future,then an adaptive layout that can automatically respond to the users’ preferencebecomes an indispensable and highly valuable commodity.

One of the main reasons media queries have become more popular is thefact that websites are unusable on devices they weren’t considered for during

Responsive design is much misunderstood. JasonMichael lays to rest somemyths, and then walks us through building a simple responsive website

design and build phases. They become fiddly to navigate around – or maybethe fixed width is wider than the user’s viewport, making it difficult to zoom in,pan, zoom out and find what they are looking for.

Frustrating? For sure. But more frustrating as a developer is that thesewebsites should have been built in such a fashion that they scale down to fitany viewport size.

Many sites using media queries strip out information, hiding certain aspectsof the site that they deem less important. So the user with a smaller device getsan easier to use website, but with stripped-down content.

But why should I, on a mobile device, not get the same benefits from awebsite as a desktop user?

With the help of media queries we can completely customise the layout ofour website dependent on screen size. Which is great, but do we really need tosupply several adaptations of our site?

And why should we settle for a site that’s so badly designed or built that itcan’t scale gracefully?

User frustrationSome people believe that it’s okay to cut features and eliminate content theybelieve is non-essential to the user. But how can you be sure that theinformation you are cutting or pushing to a secondary page is not the contentthat is most important to me? You can’t.

As an example, I was on the Nike Football website on my MacBook andreading about the football academy they are running with the PremierLeague, which I found really interesting – it’s one of the main features as youget to the website.

Downloadthefiles! >All thefiles you

need for this tutorial

canbe foundat

netm.ag/resp-231

CSSC build abasicresponsive site

Desktop delights Nike Football’s full site features main navigation offering all available options – including the feature onthe company’s football academy that’s visible in the image above

Scaled back But view the site on an iPhone andthe academy feature’s nowhere to be seen



However, when I tried to show a friend of mine on my iPhone, I discoveredNike has its own mobile site, and Nike Football consists of just two options: oneabout the latest Mercurial Vapor boots (not interested), and one about the newtechnology used on Nike’s football shirts (not interested).

I tried my iPad and it was completely different again – and still no sign of theacademy information I was looking for.

It’s not just Nike that’s guilty of this – it’s hundreds of sites. And I find ithighly frustrating that I should get penalised for using a different device. I feelthat if content isn’t worth showing to smaller device user, then it probably isn’tworth showing to anybody.

The first thing we need to understand is that responsive web design isn't justabout mobile – it considers all viewport sizes. And secondly, developing a good

responsive website requires more time and effort than just using media queriesWith a vast and growing number of web-enabled devices, it’s important to giveyour website the best possible chance to facilitate a solid user experience.

We know that by having a responsive site we can use a single codebase. Thisis great in that it means we needn’t adjust our content for each device. Butmany websites hide content deemed unnecessary to mobile users, and thereare two issues with this.

Firstly, it effectively penalises mobile users browsing the website. Andsecondly, including a hidden style in our CSS doesn’t mean the content doesn’tget downloaded. This can massively affect performance, especially for those onpoor connections.

So perhaps the best way to go about designing a website is to considermobile, or smaller devices, first. This way you can focus on the most importantinformation your site needs to give. And then, if necessary, you can useconditional loading techniques where your layout grid, large images and mediaqueries are applied on top of the pre-existing small-screen design.

The real reason many full websites are unusable on mobile devices isbecause they are unusable on any device. If it’s designed well enough in thefirst place and built correctly, then it should scale up or down gracefully andeffectively. A responsive site doesn’t necessarily have to be targeted at mobiledevices; if it’s built correctly it doesn’t have to be targeted to any particulardevice. It will just work. And Ethan Marcotte sums it up well in his article“Responsive Web Design” from A List Apart: “Rather than tailoring disconnecteddesigns to each of an ever-increasing number of web devices, we can treatthem as facets of the same experience,” he writes. “We can design for anoptimal viewing experience, but embed standards-based technologies into our

designs to make them not only more flexible, but more adaptive to the mediathat renders them. In short, we need to practice responsive web design.”

With the vast evolution of devices, responsive web design won’t fully preventus from making changes for new devices, but it should eliminate the need tomake viewport related changes. We’ve all been through it – building websitesthat don’t quite work in IE6. It’s an issue that drove us all crazy and we spenthours applying hacks to fix it. However, there has never really been that muchof an issue with IE6, it’s just we were building our sites wrong. With a vastlygrowing number of web-enabled devices it is important that we build our sitesin a way that allows it to adapt to change

The walkthroughFor the purpose of this tutorial I have put together a website that scalesbeautifully between large and small screens. You keep all the content on allsizes. And with the use of media queries I have switched the navigation froma horizontal display to vertical display for smaller devices, and given the userenough padding on the realigned adaptation to work well on touch screens.

One thing that I especially like, when you view smaller-screen versions ofsites where the main navigation fills the screen area, is the ability to skip to thecontent you really want using page anchors. Having this appear at the top ofthe page helps prevent mobile users from having to scroll down to get tothe main body of content.

Why should I, on amobiledevice, not get the samebenefits as a desktop user?

Just padding The iPad version of Nike’s site says ‘train like a pro’, but the desktopversion’s football academy article can’t be found here at all

Further reading (1)There’s a wealth of great articles and tutorials out there for anyonewishing to learn more about responsive design. Here are just a few …

Responsive Web DesignThe article by Ethan Marcotte for A List Apart that started it all. “Fluidgrids, flexible images, and media queries are the three technicalingredients for responsive web design,” he writes. “But it also requiresa different way of thinking. Rather than quarantining our content intodisparate, device-specific experiences, we can use media queries toprogressively enhance our work within different viewing contexts.”l www.alistapart.com/articles/responsive-web-design

5 really useful responsive web design patternsSome interesting responsive design patterns that are beingimplemented by talented designers all over the web.l www.designshack.net/articles/css/5-really-useful-responsive-web-design-patterns

CSS RegionsAdobe’s proposal seeks to enable magazine-style layouts to be createdon the web. Find out more at:l http://dev.w3.org/csswg/css3-regionsl www.css-tricks.com/content-foldingl www.broken-links.com/2011/11/07/introducing-css-regions

New tricks Chris Coyier’s article (www.css-tricks.com/content-folding) exploresCSS Regions, which enables content to flow through multiple elements


94 .net summer2012

Knowledge needed Intermediate JavaScript

Requires A modern browser with a fast JavaScript engine

Project time A few hours to make simple changes

Modern web applications often involve real-time animation andinteractivity – anything from simple roll-over effects, Flash-likebanners and animations implemented in HTML5 to complete games.

JavaScript is faster than ever thanks to modern JIT compilers in browsers, butthere’s still one problem: garbage collection (GC). This can cause pauses,stuttering and poor performance, ruining the smooth real-time experience.

But what is garbage collection? JavaScript enables you to easily create objects.However, there’s no way to delete a given object (the delete operator doesn’tcount: it’s for removing properties on objects). Instead, objects are deletedautomatically when no longer used.

If you create 1,000 objects but only keep references to 500 of them, at somepoint the browser will decide to clean up. It will see 500 are not referencedanywhere and are therefore no longer used, so it cleans them up. Somebrowsers implement clever techniques to make collection as quick as possible,such as generational collectors. But if you create a lot of objects in JavaScript,sooner or later the browser will have to clean up: execution is paused, it spendsa while figuring out which objects are still used, and then deletes the rest.

This could take hundreds of milliseconds, or in some cases a full second ormore. A smooth animation has to run at 60 frames per second, with just 16msper frame, so this can create a noticeable pause. If lots of objects are created thebrowser may have to collect several times per second, making animation choppy.If you’re playing an action game in HTML5, few things are more annoying thana boss appearing, you charge up energy, time the perfect move … then thebrowser seizes up for a second, you miss your moment, and lose the game!

A growing amount of real-time content is being written in JavaScript. Ashley Gullenshows how to avoid pauses caused by garbage collection for a smoother experience

The perfect solution is to make sure nothing is allocated in the code runfor each frame. But this is surprisingly difficult since many innocent lookingstatements create garbage. Generally the aim is to keep the rate of garbagecreation low so that collections are infrequent and don’t have much to clean up[see Performance Analysis, next page top right].

The main technique to avoid garbage creation is to recycle objects. Thatmeans instead of creating lots of objects and throwing them away, create a fewobjects on startup and re-use them as long as possible. That also means keepingpermanent references to objects you would have otherwise thrown away. Cachesare important too, since multiple objects can be collected for recycling.

Minimising numbers of objects created also helps improve your JavaScript'sperformance. Allocations and de-allocations take time; eliminating these byre-using objects can reduce the overall amount of work the browser needs to do,

speeding up execution. To avoid garbage creation we need to understand whichstatements allocate objects – it’s obvious that the new operator creates a newobject. However, there are some common shortcuts that also create new objectsyou should beware of:

{} // same as: new Object()[] // same as: new Array()

Cleanup operation Long-running JS applications such as HTML5 games can benefitmost from garbage-collection optimisations, preventing animation from pausing regularly

Find out The Mozilla Developer Network (MDN) is the best place to look up JavaScriptfunctions and find out whether they create new objects – potential garbage problems

JavaScriptJ makeyour apps smoother

ip

JavaScript’s designmakes ithard to use vector objectswithout creating garbage



Risky business Particle effects are animated effects with the potential to create largeamounts of garbage. To make sure the animation is smooth, try to recycle objects

// also creates a new function!function () { ... }

Don’t forget new allocations are made even when specifying properties orelements, which is common in JavaScript:

// Creates new object with a property{ "foo": "bar" }// Creates new array with 3 elements[1, 2, 3]// Creates 4 new arrays![[1, 2], [3, 4], [5, 6]]

Avoid all these in any code that is called frequently, especially every frame.Instead try to create the object once and permanently reference it. A simplechange to make is clearing arrays, where setting the length to 0 is better thanassigning a new array:

// BAD: garbage old array, create// new one, and reference thatmy_array = [];// BETTER: re-use same array objectmy_array.length = 0;

Functions can also catch you out. You may know functions also act like objectsin JavaScript – but did you think that they also count as garbage? Most functionsaren’t a problem, since you simply create or assign them on startup and re-usethem. However, functions that return other functions (such as in closures) canbe more of a problem than you think. Consider the following example usingrequestAnimationFrame to call a game’s tick function on an object (the vendor-specific extensions and workarounds have been omitted for clarity):

// BAD: create a whole new function// (which is garbage collected)// and call that for the next framerequestAnimationFrame((function (self) {return function () {

self.tick();};

})(this));// BETTER: re-use the same tick function!// On startup:this.tick_function = (function (self) {return function () {

self.tick();};

})(this);

PerformanceanalysisYou can get an overview of your JavaScript’s garbage collectionperformance by using Google Chrome’s developer tools. Open thetools with Ctrl+Shift+J, then switch to the Timeline tab. Make sure theMemory box is selected, then click the circular record button in thebottom left (indicated with an arrow in the image below).

The top example used the Box2D physics engine, which is not verywell optimised for GC – it creates a huge amount of garbage. Noticehow quickly the memory usage jumps up and down. There are severalcollections per second, making a choppy animation likely. Compare itwith the bottom graph, which is an HTML5 game heavily optimised tominimise GC. It only builds up memory slowly, and the collection eventsare few and far between. This is much more likely to provide a smoothexperience than the other example.

// When requesting the next call:requestAnimationFrame(this.tick_function);

Not heard of requestAnimationFrame before? Look it up, it’s better thansetInterval or setTimeout for animations!

Anyway, notice how the first example creates a new function to call every tick.The second creates one on startup and re-uses it, which avoids throwing away afunction every frame.

The same can be applied to objects. You can re-use an object by deletingits properties and adding them from scratch again, instead of assigning a newobject. However, this is not generally a good idea. Modern browsers optimise forobjects staying the same. Deleting properties causes many JavaScript engines tode-optimise and start running slower.

You should definitely avoid deleting properties in general. However, it’s atrade-off – if deleting properties saves enough garbage to reduce pauses, andit’s worth it for the lower execution speed in accessing that object, you might beable to get away with it. Bear in mind though that wherever possible, it’s betterto re-use an object with the same properties and not delete anything.

Moving on, things become a little more difficult. Many library functionsin JavaScript return new objects, which can make it difficult to avoidallocations. For example, the Array object’s slice function returns a new

Once recording, get your JavaScript running (play the animation orgame, or run the effect) and watch the graph. The way JavaScript worksis that the memory will keep increasing as more objects are allocated.Then, on a garbage collection event, the line will drop down. This makesa ‘sawtooth’ memory usage pattern. Two example graphs are shownbelow, covering a period of about 12 seconds:

98 .net/summer 2012

.net technique/backend

Knowledge needed Intermediate CSS and JavaScript, basic HTML

Requires A website to speed up

Project time Highly dependent on website

Speed should be important to every website. It’s a well-known factthat Google uses site speed as a ranking metric for search results.This tells us that visitors prefer fast websites – no surprise there!

Jakob Nielsen wrote in 1993 about the three limits of response times (seeuseit.com/papers/responsetime.html); although the research is old by internetstandards, our psychology hasn’t changed much in the intervening 19 years.He states that if a system responds in under 0.1 seconds it will be perceivedas instantaneous, while responses faster than one second enable the user’sthought flow to remain uninterrupted. Having a web page load in 0.1 secondsis probably impossible; around 0.34 seconds represents Google UK’s best loadtime so this serves as a more realistic (albeit ambitious) benchmark. A pageload somewhere in the region of 0.34 to 1 second is achievable and important.

The price of slowing downThese sorts of targets have real world implications for your website andbusiness. Google’s Marissa Mayer spoke in 2006 about an experiment in whichthe number of results returned by the search engine was increased to 30. Thisslowed down the page load time by around 500ms, with a 20% drop in trafficbeing attributed to this. Amazon, meanwhile, artificially delayed the page loadin 100ms increments and found that “even very small delays would result insubstantial and costly drops in revenue”.

Other adverse associations linked with slow websites include lessenedcredibility, lower perceived quality and the site being seen as less interestingand attractive (see netm.ag/webpsychology-231). Increased user frustrationand increased blood pressure are two other effects we probably have allexperienced at some point! But how can we make sure our websites loadspeedily enough to avoid these issues?

Speed make yoursites load faster

ysites load faster

y

Your website’s visitors care whether or not it loads quickly. Tom Gullen shows youhow to make sites render faster, and runs down why you should be doing this

One of the first things to look at is the size of your HTML code. This isprobably one of the most overlooked areas, perhaps because people assumeit’s no longer so relevant with modern broadband connections. Some contentmanagement systems are fairly liberal with the amount they churn out – onereason why it can be better to handcraft your own sites.

As a guideline you should easily be able to fit most pages in <50KB ofHTML code, and if you’re under 20KB then you’re doing very well. There areobviously exceptions, but this is a fairly good rule of thumb.

It’s also important to bear in mind that people are browsing full websitesmore frequently on mobile devices now. Speed differences between sitesviewed from a mobile are often more noticeable, owing to them having

slower transfer rates than wired connections. Two competing websites witha 100KB size difference per page can mean more than one second load timedifference on some slow mobile networks – well into the ‘interrupted thoughtflow’ region specified by Jakob Nielsen. The trimmer, faster website is goingto be a lot less frustrating to browse, giving a distinct competitive edge overfatter websites and going a long way towards encouraging repeat visits.

One important feature of most web servers is the ability to serve the HTMLin a compressed format. As HTML by nature contains a lot of repeating data itmakes it a perfect candidate for compression. For example, one homepage’s18.1KB HTML is reduced to 6.3KB when served in compressed format. That’sa 65 per cent saving! Compression algorithms increase in efficiency thelarger the body of text they have to work from, so you will see larger savings

Free speed Open source web page performance grading browser plug-in YSlow (yslow.org) is based on the Yahoo Developer Network’s website performance recommendations

Tooled up There are alternative high quality resources for measuring performance,such as Google’s free web based PageSpeed Online tool

Content delivery networkscan significantly improveload times for yourwebsite


.net technique/backend

with larger HTML pages. A 138.1K page on a popular forum is reduced to25.7K when served compressed, a saving of over 80 per cent – which cansignificantly improve total transfer times of resources.

There are virtually no negatives to serving HTML in this form; everyoneshould be enabling it for all their HTML content. Some web servers havedifferent settings for compressing static and dynamically generated content,so it’s worth ensuring you’re serving compressed content for both if possible.

Content delivery networksContent delivery networks (known as CDNs) can also significantly improveload times for your website. CDNs are a collection of servers distributedacross the globe that all hold copies of your content. When a user requestsan image from your website that’s hosted on a CDN, the server in the CDNgeographically closest to the user will be used to serve the image.

There are a lot of CDN services available. Some of these are very costly butadvertise that they will offer better performance than cheaper CDNs. Free CDNservices have also started cropping up, and may be worth experimenting withto see if they can improve performance on your website.

One important consideration when using a CDN is to ensure that you setit up correctly so you don’t lose any SEO value. You may be receiving a lot oftraffic from images hosted on your domain, depending on the nature of yourwebsite, and by moving them to an external domain it might adversely affectyour traffic. The Amazon S3 service enables you to point a subdomain to itsCDN, which is a highly preferable feature in a CDN.

Serving content on a different domain (such as a CDN) or a subdomainon your own domain name that doesn’t set cookies has another key benefit.When a cookie is set on a domain, the browser sends cookie data with eachrequest to every resource on that same domain. More often than not, cookiedata is not required for static content such as images, CSS or JavaScript files.Web users’ upload rates are often much slower than the available downloadrates, which in some cases can cause significant slowdown in page load times.By using a different domain name to serve your static content, browsers willnot send this unnecessary cookie data, because they have strict cross domainpolicies. This can speed up the request times significantly for each resource.

Cookies on websites can also take up most of an HTTP request; 1,500 bytesis around the most commonly used single-packet limit for large networks soif you are able to keep your HTTP requests under this limit the entire HTTPrequest should be sent in one packet. This can offer improvements on pageload times. Google recommends that your cookies should be less than 400bytes in size – this goes a long way towards keeping your websites HTTPrequests under the one-packet/1,500 bytes limit.

Further techniquesThere are other, easier to implement techniques that can offer great benefitsto your site’s speed. One is to put your JavaScript files at the end of your HTMLdocument, just before the closing body tag, because browsers have limits onhow many resources they can download in parallel from the same host.

The original HTTP 1.1 specification written in 1999 recommends browsersshould only download up to two resources in parallel from eachhostname. But modern browsers by default have a limit of around six.

Testing time Pingdom’s free tool for analysing the ‘waterfall’ of your web page helpsbreak down each resource’s load time, which can help point out bottlenecks

One-piece Sprite sheets are easy to implement and can offer significant improvementson page performance by reducing the total number of HTTP requests

The free Pingdom (pingdom.com) tool for measuring website load times isa valuable resource for measuring the impact your changes have on yourwebsite load time. It can be accessed at tools.pingdom.com.

The tool calculates your page’s ‘waterfall’ – this is simply the list ofrequests done to load the page you are testing. It helps you to quicklyidentify the most costly resources on your page in regards to loading time.

Every individual resource in the waterfall is broken down into segmentsshowing you exactly how long it takes to fetch each one. The resourceload times are broken down into the sections DNS, SSL, Connect, Send,Wait and Receive, which represent a chronological overview of how eachresource is resolved.

DNS describes how long it takes the browser to look up the DNSinformation to begin resolving the request. If your page uses SSL, theSSL segment shows you how long it takes to perform an SSL handshake.After this information is obtained the browser will attempt to establisha connection to the web server, which is represented with the Connectsegment. With many requests information is sent from the browser tothe server (such as cookie information), and the time it takes to do this isrepresented with the Send segment.

After all these actions, all that’s left is for the web server to send thedata to the browser – represented by the Receive segment. The Wait timeis simply the gap between the send and wait. Requests to resources onweb servers are a lot more involved than they might seem, and a toollike Pingdom is useful for identifying specific bottlenecks in requests forresources such as a slow DNS.

Each time you run the performance test Pingdom will save the result,so they can be viewed historically – this is extremely useful for observingyour changes over time.

Pingdom Chasing waterfalls

On your marks Pingdom’s speed-testing interface couldn’t be simpler, andresults are stored so that you can review changes in loading time

.net techniquemakeover

118 .net summer2012

search and multiple sub-scrolling segments. It washard to find any salient information.

To make matters worse, the site felt off-brand.Imagery didn’t map to other marketing efforts, itwasn’t customer focused – and it felt inconsistentwith the rest of Scion’s messaging. Black cars ona black background were hard to see; smallreversed text on black proved difficult to read.Tiny thumbnails crammed next to descriptionsalso made for a poor browsing experience.

The challengeATTIK had plenty to overcome but our relationshipwith Scion made us confident we could deliver.One main tenet of the Scion brand is makingthings easier for owners and prospective buyers,so the site had to be a simple, useful tool for theaudience – who need the facility to researchmodels via a user interface that makes sense.

We felt the site should load quickly, be scalableto grow as the brand develops new models andbe flexible enough to adapt to different marketing

efforts. Scion is also known for accessorisationand personalisation. Users should be able to buildtheir own Scion easily and instantly know its exactprice, helping to generate practical leads fordealers and turn browsing into real sales.

The solutionATTIK chose to give scion.com a more flexible,fluid set-up. Quick access and ever-presentnavigation enables users to easily jump to anysection of the site within one or two clicks.

We created a layout structure that wouldadjust for a variety of browser dimensions –facilitated by a shift away from Flash. Developingin HTML5 and CSS3 meant we could enable thesite to automatically adapt to different browserwindows on desktop monitors and laptops. Theshift in authoring language also made for a muchlighter load and a swifter browsing experience –and one that is tablet- and touch-friendly.

The website is designed to be flexible and fullyscalable – so administrators can quickly and easilyreplace content and images, or reorganise entire

sections. We created rotating marquees andpromotional units so the site can reflect Scion’smarketing plan as the company develops newmodels and promotions.

As mentioned above, making a car your ownwith optional accessories has always been a bigpart of the Scion buying process – base modelscome with many preloaded features, but oftenowners like to personalise things. An accessoriesgrid-view structure on the new site gives usersmore control, enabling them to browse easilythrough an array of products.

Featured marketing areas developed by ATTIKhelp enhance this experience. Build a Scionenables users to create their own Scion and knowexactly how much it will cost when they get to thedealer, while Find a Dealer helps a potentialowner locate a nearby dealership in two clicks.The buying process couldn’t be made simpler.

This ease of use was extended via a clearlydisplayed search tool, so site users can quicklyfind whatever they need. Redundant sections

were consolidated and eliminated to make theentire experience more efficient and rewarding.

Scion brand fonts were integrated into thearchitecture of the site to cut load times, sharpentext appearance throughout the site and maintaina look consistent with Scion’s marketing. To keepcars bold and spectacular, we utilised a prominentfull-bleed display, providing a standout showcasefor models and gallery images.

Scion is also known for its limited editionRelease Series vehicles, so we also devoted asection to an overview of these cars. Finally, toensure an end-to-end customer experience, weembraced social interaction, linking to Scion socialpages, site-wide social sharing and videoincorporation from our YouTube channel.

Wrap upScion values a friendly, easy engagement withits audience – its website was anything but that.ATTIK chose to create a robust solution that’s easyto navigate and adaptable to different devices, butstill flexible enough to grow with the brand. ●

The briefSite scion.comSite owner Toyota Motor Sales USA, IncBrief Create an intuitive, brand-focused sitethat would load quickly and provide a gooduser experience – driving users to build aScion or find a dealer.

The team

ATTIK helped to launch the Scionbrand and has been responsible for themajority of the creative work since the

brand’s inception. While ATTIK has guided themarketing strategy as well as broadcast, print,outdoor and digital work for Scion, we havenever held the reins for the brand’s principalwebsite. As a result, it didn’t quite reflect thesimple, inviting, and engaging image that wehave developed for the brand as a whole.

The problemScion needed a website that would cater to themost contemporary target audience; the existingsite presented a number of challenges ATTIK hadto overcome. A Flash shell makes a site hard toupdate, requires the latest plug-in on any browserand isn’t compatible with many tablets; users alsoface a long load time. The old scion.com was bigand processor-heavy with pixellated transitions.

It also had a confusing navigation structurefeaturing a hidden carousel, no sitemap, no

“The site felt off-brand: imagery didn’tmap to othermarketing efforts and itwasn’t customer focused” Mike Brenner

makeoverScion.comScion’s old site was cumbersome and hard to navigate. ATTIK’s senior copywriterMike Brenner explains how his agency helped Toyota relaunch the brand onliner

The Scion team: Gabe Nguyen, Jacob Ford,Andy McCoy, Natalie Kuo and David Ziganay

.net techniquemakeover

.net summer2012 119

1 NavigationQuick access and ever-present navigation enableusers to find any section ofthe site within one or twoclicks. ATTIK chose to givethe site a more flexible,fluid navigation to make theexperience more pleasantfor the user. Scion promotesstraightforward interactionwith its audience, andfinding one’s way aroundthe site had to be just asconvenient. It was alsoimportant to deliver asite with more efficientstructure to convertbrowsing into real sales.

2 MarqueesMarquees and promotionalunits mean the site canchange with Scion’smarketing plan. Each modeldeveloped has its owncampaign with a distinctlook and feel, and deservesan online home with anappearance that reflectsthe other marketing efforts.These promotional unitsfacilitate bringing all Scionmodels together at oneonline location, with noneed for dedicated microsites, and marketing for anyone model can help driveconsideration of others.

3 ConfiguratorScion is known foraccessorisation andpersonalisation. Build YourScion enables visitors to doexactly that – and instantlyknow its exact price. Userscan select from interior andexterior features, colourand performance and get a360° view of their car. Withour configurator, buyers areable to add spoilers, wheelcovers or lowering springsand know just what toexpect when they arrive attheir local dealer. An onlineitemised price list showshow much they’ll get forwhat price.

4 ScalabilityTwo years ago, Scionoffered three models.Now there are five. Theorganisation we havedeveloped allows the siteto be modular over time.We wanted it to be flexibleenough to be able toquickly add new models,messages or promotions.This is a site that can groweasily with the brand andadapt to all of Scion’scurrent and future needs.

5 SearchA prominently displayedsearch tool helps usersfind anything they wantto know about the brandquickly and simply. Theycan find direct links toeach of the models, pricesand available accessories.This search is not limitedto features about the cars.Scion supports owners’communities and racingteams in addition tomusic and visual artists.The search tool covers allaspects of Scion lifestyle.Anything users wants toknow about Scion is right attheir fingertips, available injust a click or two.

Pimp my site!Does your site lack lustre?Could it benefit from a fewtweaks? To get an expertopinion, email your URL [email protected]

Tell us aboutyour redesign!Has your site recently hada makeover? Let us knowwhat’s changed and [email protected]

2

4

13 5

.net issue 231 sampler

Documents

Transcript of .net issue 231 sampler