.net issue 231 sampler by Future PLC

THE WORLD’S BEST-SELLING MAG FOR WEB DESIGNERS & DEVS

Create the perfect portfolio

issue 231 summer 2012 www.netmagazine.com

issue

231

Revamp your online calling card and get a better job!

>Make sites load faster!

The cover’s intera ctive! Tap

Get a higher Google ranking with our CSS and JavaScript techniques

to re an artic ad le

> CSS

layouts: the future

Discover new ways to build dynamic sites that work on any device

Plus > The pro’s guide to Adobe Edge Create drag & drop features Make your website printable Build smoother JavaScript apps

.net interview

“A large scale project forces you out of your comfort zone. It scares you in a healthy way”

Elliot Jay Stocks elliotjaystocks.com

Photography/Joby Sessions

The web designer and creator of type magazine 8 Faces has just launched his own product company, Viewport Industries. Elliot Jay Stocks talks to Tom May about redesigning Smashing Magazine, ‘typography out’ and how print informs the web You’ve probably heard of ‘mobile first’ (netm.ag/first-231). You may also be familiar with ‘content first’ or ‘content out’ (netm.ag/out-231). But did you know about ‘typography out’? If not, design guru, speaker, blogger and type expert extraordinaire Elliot Jay Stocks is here to explain all … “The basic idea is that, rather than throwing things together in Photoshop or code or whatever, you focus on the details first and work out from there,” he explains. “So with ‘typography out’, you’re deciding on your typeface and your font size, your leading or line-height, and your measure (your width of the line) before you start to create your layout. All of these things are about proportions, and these proportions can then be taken out into other parts of the design; they inform the design as a whole. “For years I didn’t do that at all,” he adds. “Type is almost an afterthought for a lot of people and it certainly was for me for a long time. But once you start doing it, it makes total sense.”

Smashing redesign

One of the first times Stocks put this approach into practice was when he led the recent redesign of the popular design blog Smashing Magazine

.net summer 2012

(smashingmagazine.com). “I’d been doing some work for Smashing on their editorial board,” he explains. “And when talk sprung up of a redesign I said I’d really love to do it. “I felt Smashing’s content was getting better and better: they’d gone from basic list features to something more intelligent. But the design of the site didn’t reflect that. It was still kind of childish in a way, a little bit overly friendly. I wanted to come up with a design that would reflect that growth into something a bit more adult.”

Focus on type

‘Typography out’ was a perfect fit for the project, Stocks explains. “It was obvious that we should focus on the typesetting of an article first because, well, why are you there? You’re there to read an article – so everything else in a way is secondary. Yes, navigation is important; yes, the general design of a thing is important. But the primary task is to read an article, so that should be the thing that then sets the tone for everything else.” The whole process took a lot longer than he expected, though. “That was partly because of the way we focused on these finer typesetting details before any other design happened. But it was also because we wanted it to be responsive. With a

site like that, which has a lot of navigation, that was a challenge. The main thing was that there were a lot of ads that were fixed width within a fluid-width layout. It’s a fairly difficult thing to deal with. Ben Bodien from Neutron Creations was responsible for a lot of the more complex CSS, to get all that working.” They were joined by regular .net writer Ryan Taylor (www.havocinspired.co.uk) and Smashing Magazine’s own Robin Schultz. “And then once we were done we handed it over to the Smashing 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: to make everything look a bit more grown up.”

Web font revolution

Two main factors have influenced Stocks’ thinking on ‘typography out’. One was the process of designing and producing the first edition of 8 Faces (8faces.com), his limited-edition print magazine about typography. “And at the same time, the web type revolution was starting to pick up steam,” he explains. “Mark Boulton was talking about ‘content out, not canvas in’. People were starting to think about type on the web because it was coming of age with services like Typekit and Fontdeck. “So because we were thinking about type more intelligently, and because I’d gone off and done a project that forced me to think about type, those two things married up. My current thinking is a combination of the great stuff that people like Trent Walton, Mark Boulton, Tim Brown and others are doing, mixed with the perspective of doing print stuff as well.”

.net layouts

The future of CSS layouts CSS’s next big challenge is to make ﬂexible, dynamic page layouts that work across our ever-broadening range of devices. With solutions proposed and under discussion, Peter Gasston offers a snapshot of the future

Words Peter Gasston is a freelance web developer and author of The Book of CSS3: A Developer’s Guide to the Future of Web Design. He writes about ‘the web and web-related stuff’ at broken-links.com. Image Mike Brennan is art editor of .net twitter.com/ mike_brennan01

.net summer 2012

In 2012, developments in CSS are taking the way we display website elements into a new dimension – literally, in some cases. We can rotate and scale elements; animate and transition them; make pages that respond to the capabilities of the device they’re being viewed on. And we still can’t make a decent grid without unnecessary markup or a lot of trickery. While the web has grown, expanded and multiplied, the most fundamental aspects of laying out a page using CSS haven’t changed since CSS1. But CSS3 is finally catching up. Now we have dedicated work on making new ways to construct pages, to create rich, dynamic layouts that can take influence from, and improve upon, the best of print and graphic design. This article is about those new layout methods. About properties that are well implemented and that you can use now; properties that are beginning to appear in

experimental builds; properties that are merely proposed, highly subject to change, and may never appear at all. Such is the rapid rate of change that I expect there to be some updates to some specs by the time you read this (to see how much has changed already, check out my post from last August: netm.ag/layout-231).

Multi-column layout

Stable and well-implemented, the Multi-column Layout module (w3.org/TR/css3-multicol) isn’t the most flexible or powerful of the new layout modules, but it does one job very well: flowing content into multiple columns. It’s very straightforward to use: you apply the rule to a containing element, and all of the content within will be flowed into the generated columns: E { column-count: 5; } In this example I’ve set the content of element E to flow into five columns, which will be automatically and evenly spaced across its width. Using column-width is an alternative approach: E { column-width: 10em; }

.net layouts

.net summer 2012 45

next>

.net portfolio

Make the perfect portfolio If you don’t have a portfolio, you should – and if you do, perhaps you ought to take a fresh look at it, reckons Gary Marshall

Words Gary Marshall is a freelance journalist and author, and longtime contributor to .net. You can read his musings on the internet, technology and music at bigmouthstrikesagain.com

Image Steven Bonner is a Stirling-based designer and illustrator working for clients such as Nike, Diesel, Penguin and Cadbury. stevenbonner.com

If, like us, you tend to read the newspapers from behind terrified fingers, you’ll know that it’s a tough world out there. The creative industries may have weathered the financial storms better than many older sectors, but they haven’t been unaffected: competition is fiercer than ever, and it’s harder and harder to stand out from the crowd. If you don’t have a portfolio, it’s even more difficult. At its simplest, a portfolio is an online advert. Here I am, it says. Look at the stuff I can do! But there’s more to it than that. Your portfolio is your calling card and your art gallery, the place where you showcase your skills and the stories behind your most impressive projects, where you show not just what you’ve done, but what you want to do next. In many cases, it’s also the only thing

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

Story time

Portfolios come in three main flavours. They can be an online CV, designed to impress potential employers, a brochure, designed to bring in new clients, or a showcase, designed to impress and/or intimidate your peers. All three kinds have plenty of things in common. Like any other kind of website, portfolios must fulfil multiple criteria. They need to be accessible and easy to navigate. They have to work properly across different browsers and devices. They need to be executed perfectly to meet the brief. With the exception of those portfolios that are designed solely to impress your peers, that brief will usually be ‘get me some work’. Scott Belsky is CEO of the creative showcase Behance (behance.net), which offers a range of portfolio building and promotion tools. “In aggregate, a collection of projects showcases your style and breadth of talent,” he says, arguing that there’s no reason why that collection shouldn’t include personal projects – “they show your passion and initiative for your craft.” No matter what projects you decide to feature,

.net summer 2012 55

next>

.net showcase gallery

highlights… 63

Responsive > Contents, SVT Nyheter and Readlists ﬂex their responsive muscles

Our experts reveal this month’s hottest new websites Paul Lloyd Responsive Paul is an interaction designer based in Brighton, England. He’s happiest when crafting simple yet engaging interfaces that are native to the web. He currently works at user experience agency Clearleft (clearleft.com). paulrobertlloyd.com

Rich Clark HTML5 Rich is head of interactive at KMP Digitata, a digital agency based in Manchester. He’s the founder and curator of HTML5 Gallery (www.html5gallery. com) and editor and author of HTML5 Doctor (www.html5doctor.com). richclarkdesign.com

Paul Wyatt Plug-ins Paul is an awardwinning digital designer and writer. He’s produced websites, print and animated creative for clients such as Adobe, Virgin Media, PlayStation, 2Entertain, D&AD, the BBC, Smirnoff and British Airways. paulwyatt.co.uk

.net summer 2012

CSS > Ricardo Vazquez, The COOP and DMDN are the stars in this issue’s CSS ﬁrmament

Jenn Lukas CSS Jenn loves structural semantic markup and CSS and is the interactive development director at Happy Cog (happycog.com). She also blogs regularly about web development at The Nerdary (thenerdary.net). jennlukas.com

HTML5 delights come courtesy of The Space, Lois Jeans and Schnaydermans

JavaScript > JS joy from ÜberConference, CanvasDropr and Bitly

Rey Bango JavaScript Rey is a JavaScript, HTML and CSS evangelist for Microsoft. In addition, he is the director of community for the jQuery JavaScript project, writer for ajaxian. com and editor of scriptjunkie.com, a resource for web development articles. blog.reybango.com

HTML5 >

Plug-ins > Our Flash highlights are The Stella Artois Chalice Factory, Insanely Driven and Heart Rescue Now

Ryan Taylor CMS Ryan is a freelance designer and frontend developer. He’s obsessed with clean, efficient and semantic HTML, CSS and jQuery, and has a special interest in making design and CMSes work well together. havocinspired.co.uk

CMS > The cream of content management from Skins, Red Moon Catering and WorkFu

.net showcase gallery

gallery Responsive

Contents

(1) Contents (contentsmagazine.com) is an online magazine covering content strategy, online publishing and editorial work. Issues roll out over a six to eight week period, and with site design by Ethan Marcotte it warrants closer inspection. Articles are beautifully typeset and easy to read, each issue featuring bespoke background imagery that provides a subtle frame for the text. The use of larger type on the desktop layout is also welcome. David Bushell’s article ‘The restriction of type’ (netm.ag/bushell-231), suggests that “with so much focus on pure content, we’re in danger of losing our license to design”; we asked Ethan for his take. “Maybe Contents isn’t the best rebuttal to David’s points,” he says. “But I wonder what he’d consider a successfully ‘branded’ mobile experience. The emphasis on content doesn’t exclude an attention to brand: it just forces us to

Responsive site of the month

Paul Lloyd

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

SVT Nyheter

(2) Last issue we looked at the BBC’s responsive news site, designed specifically for mobiles and tablets (at least for now). Sweden’s national broadcaster SVT (svt.se/nyheter) has also recently redesigned its news website; unlike its BBC peer, it works on all devices. “We want to create sites that are user friendly and technically scalable,” says SVT’s lead interaction designer Johan Hallberg. “Responsive design is a step in that direction.” The design is clean and smart, but having stories open in place can be a little disorientating. While the SVT site one-ups the BBC with a responsive site that works across devices, there seems to be little optimisation for mobile. On narrower screens,

pages show the same number of stories, features and photos, which can result in downloads of around 1MB. “There are always compromises on the way to making technology and content ambitions work together,” reckons Hallberg. Homepage size: 1.05MB mobile, 1.05MB desktop

Readlists

(3) Readlists (readlists.com) is a service from the smart folk at Arc90 (arc90.com) and Readability (readability.com). It helps you collect web articles and 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 highly crafted aesthetic – check the custom scrollbars! “The design process on Readlists was very iterative,” Tyler Gaw, frontend developer at Arc90 reveals. “I went through three or four full designs, markup and CSS included, before landing on the one that’s live.” The site adapts beautifully to different devices; note how the ‘Read Now/Later’ action appears on hover, but on touch displays is ever-present. “It’s been a playground for things I’m hoping to introduce to Readability and a responsive design is high on that list,” says Gaw. “I’m not sure I know how to make a fixed-width site any more.” Homepage size: 420kB mobile, 381kB desktop

“Readlists’ design process was very iterative – I went through three or four designs”

Tyler Gaw

.net summer 2012 63

next>

.net showcase proﬁle

profile

Telegraph Hill Barry Pilling, Garret Keogh and Jack Simcock of social television production company Telegraph Hill share their experiences of working on some of UK TV’s biggest brands with Tom May

wearetelegraphhill.com Agency location Shoreditch Team 16 Expertise Social TV production company Established 2011 Clients BBC One, BBC Three, BBC Asian Networks, Channel 4, Wall 2 Wall, Mentorn, Lime Pictures, London Pleasure Gardens, Zeebox Ethos Make, Share, Talk

technology without scaring non-technical partners. We treat social media as a creative process – we get great writers to create our tweets and FB posts. .net: What’s the secret to a successful web-based campaign for a TV show? BP: Understanding your audience and their relationship with your show. What do they need between episodes? What do they want to see after the show? What content best suits which platform? Thinking like a fan is key. We’re fans of our shows as well as part of the production!

Q&A .net: How did Telegraph Hill come about? GK: The traditional TV industry wasn’t reacting fast enough to changes in how users were watching and using social products. We felt there was an opportunity, so set up Telegraph Hill to take advantage. Barry and I worked on Being Human at RDF/Zodiak and were responsible for making it a massive online brand. Barry and Jack had been together at Mentorn and the BBC on TV development and the three of us had aspirations about working where social media, digital content and TV programming come together. We started talking early last year but didn’t get up and running until autumn 2011. We’re now 10-strong and doing the biggest TV social media campaigns in the UK.

.net: You tripled Hollyoaks’ website audience with a pioneering live TV event – tell us about that GK: We joined with 4Music on #Wretch32Invasion: a free exclusive gig featuring rapper Wretch 32. Hundreds turned up, not realising the stage was about to be crashed ... by Bart from Hollyoaks! He played out a scene from the show, confessing his love to Sinead as Wretch played along as if it were real. Bart was bundled off by security before Wretch revealed to the audience they were part of a new Hollyoaks storyline and would be in Friday’s episode. Online it exploded. We published photos and videos, adding to the buzz around #Wretch32Invasion until it trended globally on Twitter. Viewing figures rose by a third and Wretch 32’s album jumped three places up the chart. The event reminded fans that Hollyoaks can still take them by surprise, even after 16 years.

.net: What is the ‘special sauce’ that makes Telegraph Hill stand out from other agencies? JS: We understand TV as well as social media so when we talk to broadcasters and production companies we speak their language. We’re at home talking to a range of clients and can explain

.net: How did you win the contract to work on The Voice, and how’s it been working with the BBC? JS: We were hired by The Voice UK’s production company Wall to Wall after being recommended by the BBC. Our five full-timers are based in the production office, so they’re part of that team and can be responsive and on-message. We work closely with our team, Wall to Wall and BBC on getting the tone right, and ensure our schedule is in tune with audience habits and moods. It’s been incredible to work on such a big show and we’re proud of what we’ve achieved; the numbers on all platforms have been massive.

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

.net summer 2012

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

.net showcase proﬁle

.net: How do you source talent, and do you rely mainly on freelancers or employees? JS: We are always looking for great people. In the office we have the Wall of Awesome: a board with names of everyone we want to work with on it. If clients want us to put together a team, we use it to help us assign individuals. We also work with Canterbury Christ Church University on finding digital and media students to work for us. .net: What are you excited about at the moment? BP: The way the industry is heading; building our own company at the heart of it – and bringing the social media conversation into live events. Whether it’s a TV show or a sports event, what does social media activity look like at the event and beyond? And live TV is exciting again ... who knew? .net: UK TV formats are popular around the world now; do you see the company expanding abroad? GK: We’ve started talking to agencies in Singapore and beyond as well as a few secret projects that could see us developing technology around big sporting 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 a place for a curated schedule. If a company with such an amazing heritage as the BBC can adapt and deliver some of the most socially enabled programming, then all broadcasters can. .net: What’s the most bizarre request you’ve ever had from a client? JS: On live TV show days, people sometimes think our team is responsible for everything ‘digital’ – even internet connections and cabling. Actually, we often can help – and do have a lot of cables! l

(1) With BBC Three drama The Fades (netm.ag/fades231), we were hired to plan online content and create a conversation, turning a cautious audience into hardcore fans. The show has since won a BAFTA for Best Drama Series. We worked with the BBC on the website and social media platforms supporting the series. We built a new audience by making our tone attractive to fans and our voice on Twitter and Facebook something they’d want to get involved with. We had three topics trending on Twitter in the first episode, and the show had the highest multichannel audience at launch. Fans launched Facebook and Twitter campaigns to bring the series back. (2) We worked with Hollyoaks (e4.com/hollyoaks) at the

end of 2011 delivering social media and exciting content. We didn’t have much say over the website, but developing digital strategy we were able to have big impact on traffic to the site and the FB and Twitter numbers. (3-5) We developed all of the digital content for The Voice UK (netm.ag/voice-231). The best thing about working with the BBC on a big project like this is that you get a lot of support. You also don’t have to worry about hosting and things like music licensing. There is a lot of form filling but it unlocks an incredible set of resources and a team that works around the clock to deliver. We were able to set site and project strategy early on and work with the BBC team and production company Wall to Wall. A lot of content

had to be created, with weekly updates as artists came and went. (6-7) Designed by our friend Daddison (daddisonish. com), the London Pleasure Gardens site (londonpleasuregardens. com) has been a challenge – because there’s so much to say. It’s a massive space in the heart of Olympic East London with a series of upcoming events and put together by the crew behind Shangri-La at Glastonbury who have a track record of creating amazing places. We’re blogging and updating from the site as it’s cleared and promoting the events over the next two years as they come online. We want to give the space context within the city in this Olympic year. A big ask but we really like this site design, which

we think will continue evolving as the project grows. (8) Our favourite project, Free Speech (netm. ag/free-speech-231) is a community for young politically engaged people around a BBC Three show. We post daily discussion points to FB and Twitter and run a blog on the BBC Three site. The community is wide-reaching and really engaged around the show and topics discussed. (9) With our own website (wearetelegraphhill.com), we wanted to keep it simple: apart from listing us and our projects we didn’t want too much on there. The clean retro look and black-and-white logo (designed by urban artist Wreckage) set the tone for the website, again by Daddison. Our challenge is to keep the website updated and vibrant.

.net summer 2012 77

.net technique frontend

CSS build a basic C responsive site

Download the ﬁles! >u

All the ﬁles yo torial need for this tu can be found at 1 netm.ag/resp-23

Responsive design is much misunderstood. Jason Michael lays to rest some myths, and then walks us through building a simple responsive website Knowledge needed Basic CSS and HTML Requires Text editor Project time 1-2 hours Everyone’s talking about responsive web design. But does everyone understand what it’s for? I’m not sure. Many web designers and developers 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’ve got that out of the way, I’ll walk you through building a website that scales perfectly on both large and small screens. Responsive web design has mainly become a hot topic because more and more people are using mobile devices such as iPhones, iPads, and BlackBerrys to access the internet. So it’s becoming increasingly important to understand that a website should not be specifically about either the desktop or the mobile device, but about building 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’ preference becomes an indispensable and highly valuable commodity. One of the main reasons media queries have become more popular is the fact that websites are unusable on devices they weren’t considered for during

design and build phases. They become fiddly to navigate around – or maybe the 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 these websites should have been built in such a fashion that they scale down to fit any viewport size. Many sites using media queries strip out information, hiding certain aspects of the site that they deem less important. So the user with a smaller device gets an easier to use website, but with stripped-down content. But why should I, on a mobile device, not get the same benefits from a website as a desktop user? With the help of media queries we can completely customise the layout of our website dependent on screen size. Which is great, but do we really need to supply several adaptations of our site? And why should we settle for a site that’s so badly designed or built that it can’t scale gracefully?

User frustration

Some people believe that it’s okay to cut features and eliminate content they believe is non-essential to the user. But how can you be sure that the information you are cutting or pushing to a secondary page is not the content that is most important to me? You can’t. As an example, I was on the Nike Football website on my MacBook and reading about the football academy they are running with the Premier League, which I found really interesting – it’s one of the main features as you get to the website.

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

.net summer 2012

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

.net technique frontend

Further reading (1)

There’s a wealth of great articles and tutorials out there for anyone wishing to learn more about responsive design. Here are just a few …

Responsive Web Design

The article by Ethan Marcotte for A List Apart that started it all. “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design,” he writes. “But it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.” l www.alistapart.com/articles/responsive-web-design

5 really useful responsive web design patterns

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

However, when I tried to show a friend of mine on my iPhone, I discovered Nike has its own mobile site, and Nike Football consists of just two options: one about the latest Mercurial Vapor boots (not interested), and one about the new technology used on Nike’s football shirts (not interested). I tried my iPad and it was completely different again – and still no sign of the academy information I was looking for. It’s not just Nike that’s guilty of this – it’s hundreds of sites. And I find it highly frustrating that I should get penalised for using a different device. I feel that if content isn’t worth showing to smaller device user, then it probably isn’t worth showing to anybody. The first thing we need to understand is that responsive web design isn't just about mobile – it considers all viewport sizes. And secondly, developing a good

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

CSS Regions

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

Why should I, on a mobile device, not get the same beneﬁts as a desktop user? responsive website requires more time and effort than just using media queries With a vast and growing number of web-enabled devices, it’s important to give your 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. This is great in that it means we needn’t adjust our content for each device. But many websites hide content deemed unnecessary to mobile users, and there are two issues with this. Firstly, it effectively penalises mobile users browsing the website. And secondly, including a hidden style in our CSS doesn’t mean the content doesn’t get downloaded. This can massively affect performance, especially for those on poor connections. So perhaps the best way to go about designing a website is to consider mobile, or smaller devices, first. This way you can focus on the most important information your site needs to give. And then, if necessary, you can use conditional loading techniques where your layout grid, large images and media queries are applied on top of the pre-existing small-screen design. The real reason many full websites are unusable on mobile devices is because they are unusable on any device. If it’s designed well enough in the first place and built correctly, then it should scale up or down gracefully and effectively. A responsive site doesn’t necessarily have to be targeted at mobile devices; if it’s built correctly it doesn’t have to be targeted to any particular device. It will just work. And Ethan Marcotte sums it up well in his article “Responsive Web Design” from A List Apart: “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience,” he writes. “We can design for an optimal viewing experience, but embed standards-based technologies into our

New tricks Chris Coyier’s article (www.css-tricks.com/content-folding) explores CSS Regions, which enables content to flow through multiple elements designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.” With the vast evolution of devices, responsive web design won’t fully prevent us from making changes for new devices, but it should eliminate the need to make viewport related changes. We’ve all been through it – building websites that don’t quite work in IE6. It’s an issue that drove us all crazy and we spent hours applying hacks to fix it. However, there has never really been that much of an issue with IE6, it’s just we were building our sites wrong. With a vastly growing number of web-enabled devices it is important that we build our sites in a way that allows it to adapt to change

The walkthrough

For the purpose of this tutorial I have put together a website that scales beautifully between large and small screens. You keep all the content on all sizes. And with the use of media queries I have switched the navigation from a horizontal display to vertical display for smaller devices, and given the user enough padding on the realigned adaptation to work well on touch screens. One thing that I especially like, when you view smaller-screen versions of sites where the main navigation fills the screen area, is the ability to skip to the content you really want using page anchors. Having this appear at the top of the page helps prevent mobile users from having to scroll down to get to the main body of content.

.net summer 2012

next>

.net technique frontend

JJavaScript ip make your apps smoother

A growing amount of real-time content is being written in JavaScript. Ashley Gullen shows how to avoid pauses caused by garbage collection for a smoother experience 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 and interactivity – anything from simple roll-over effects, Flash-like banners and animations implemented in HTML5 to complete games. JavaScript is faster than ever thanks to modern JIT compilers in browsers, but there’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’t count: it’s for removing properties on objects). Instead, objects are deleted automatically when no longer used. If you create 1,000 objects but only keep references to 500 of them, at some point the browser will decide to clean up. It will see 500 are not referenced anywhere and are therefore no longer used, so it cleans them up. Some browsers 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 spends a 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 or more. A smooth animation has to run at 60 frames per second, with just 16ms per frame, so this can create a noticeable pause. If lots of objects are created the browser 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 than a boss appearing, you charge up energy, time the perfect move … then the browser seizes up for a second, you miss your moment, and lose the game!

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

.net summer 2012

The perfect solution is to make sure nothing is allocated in the code run for each frame. But this is surprisingly difficult since many innocent looking statements create garbage. Generally the aim is to keep the rate of garbage creation 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. That means instead of creating lots of objects and throwing them away, create a few objects on startup and re-use them as long as possible. That also means keeping permanent references to objects you would have otherwise thrown away. Caches are important too, since multiple objects can be collected for recycling. Minimising numbers of objects created also helps improve your JavaScript's performance. Allocations and de-allocations take time; eliminating these by re-using objects can reduce the overall amount of work the browser needs to do,

JavaScript’s design makes it hard to use vector objects without creating garbage speeding up execution. To avoid garbage creation we need to understand which statements allocate objects – it’s obvious that the new operator creates a new object. However, there are some common shortcuts that also create new objects you should beware of: {} // same as: new Object() [] // same as: new Array()

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

.net technique frontend

Performance analysis

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

Risky business Particle effects are animated effects with the potential to create large amounts 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 or elements, 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 simple change to make is clearing arrays, where setting the length to 0 is better than assigning a new array: // BAD: garbage old array, create // new one, and reference that my_array = []; // BETTER: re-use same array object my_array.length = 0; Functions can also catch you out. You may know functions also act like objects in JavaScript – but did you think that they also count as garbage? Most functions aren’t a problem, since you simply create or assign them on startup and re-use them. However, functions that return other functions (such as in closures) can be more of a problem than you think. Consider the following example using requestAnimationFrame to call a game’s tick function on an object (the vendorspecific extensions and workarounds have been omitted for clarity): // BAD: create a whole new function // (which is garbage collected) // and call that for the next frame requestAnimationFrame((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);

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

The top example used the Box2D physics engine, which is not very well optimised for GC – it creates a huge amount of garbage. Notice how quickly the memory usage jumps up and down. There are several collections per second, making a choppy animation likely. Compare it with the bottom graph, which is an HTML5 game heavily optimised to minimise GC. It only builds up memory slowly, and the collection events are few and far between. This is much more likely to provide a smooth experience than the other example.

// When requesting the next call: requestAnimationFrame(this.tick_function); Not heard of requestAnimationFrame before? Look it up, it’s better than setInterval 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 a function every frame. The same can be applied to objects. You can re-use an object by deleting its properties and adding them from scratch again, instead of assigning a new object. However, this is not generally a good idea. Modern browsers optimise for objects staying the same. Deleting properties causes many JavaScript engines to de-optimise and start running slower. You should definitely avoid deleting properties in general. However, it’s a trade-off – if deleting properties saves enough garbage to reduce pauses, and it’s worth it for the lower execution speed in accessing that object, you might be able to get away with it. Bear in mind though that wherever possible, it’s better to re-use an object with the same properties and not delete anything. Moving on, things become a little more difficult. Many library functions in JavaScript return new objects, which can make it difficult to avoid allocations. For example, the Array object’s slice function returns a new

.net summer 2012

next>

.net technique/backend

Speed make yyour sites load faster

Your website’s visitors care whether or not it loads quickly. Tom Gullen shows you how to make sites render faster, and runs down why you should be doing this 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 fact that 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 (see useit.com/papers/responsetime.html); although the research is old by internet standards, 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 perceived as instantaneous, while responses faster than one second enable the user’s thought flow to remain uninterrupted. Having a web page load in 0.1 seconds is probably impossible; around 0.34 seconds represents Google UK’s best load time so this serves as a more realistic (albeit ambitious) benchmark. A page load somewhere in the region of 0.34 to 1 second is achievable and important.

The price of slowing down

One of the first things to look at is the size of your HTML code. This is probably one of the most overlooked areas, perhaps because people assume it’s no longer so relevant with modern broadband connections. Some content management systems are fairly liberal with the amount they churn out – one reason why it can be better to handcraft your own sites. As a guideline you should easily be able to fit most pages in <50KB of HTML code, and if you’re under 20KB then you’re doing very well. There are obviously exceptions, but this is a fairly good rule of thumb. It’s also important to bear in mind that people are browsing full websites more frequently on mobile devices now. Speed differences between sites viewed from a mobile are often more noticeable, owing to them having

Content delivery networks can signiﬁcantly improve load times for your website

These sorts of targets have real world implications for your website and business. Google’s Marissa Mayer spoke in 2006 about an experiment in which the number of results returned by the search engine was increased to 30. This slowed down the page load time by around 500ms, with a 20% drop in traffic being attributed to this. Amazon, meanwhile, artificially delayed the page load in 100ms increments and found that “even very small delays would result in substantial and costly drops in revenue”. Other adverse associations linked with slow websites include lessened credibility, lower perceived quality and the site being seen as less interesting and attractive (see netm.ag/webpsychology-231). Increased user frustration and increased blood pressure are two other effects we probably have all experienced at some point! But how can we make sure our websites load speedily enough to avoid these issues?

slower transfer rates than wired connections. Two competing websites with a 100KB size difference per page can mean more than one second load time difference on some slow mobile networks – well into the ‘interrupted thought flow’ region specified by Jakob Nielsen. The trimmer, faster website is going to be a lot less frustrating to browse, giving a distinct competitive edge over fatter websites and going a long way towards encouraging repeat visits. One important feature of most web servers is the ability to serve the HTML in a compressed format. As HTML by nature contains a lot of repeating data it makes it a perfect candidate for compression. For example, one homepage’s 18.1KB HTML is reduced to 6.3KB when served in compressed format. That’s a 65 per cent saving! Compression algorithms increase in efficiency the larger 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

.net/summer 2012

.net technique/backend

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

with larger HTML pages. A 138.1K page on a popular forum is reduced to 25.7K when served compressed, a saving of over 80 per cent – which can significantly improve total transfer times of resources. There are virtually no negatives to serving HTML in this form; everyone should be enabling it for all their HTML content. Some web servers have different settings for compressing static and dynamically generated content, so it’s worth ensuring you’re serving compressed content for both if possible.

Content delivery networks

Content delivery networks (known as CDNs) can also significantly improve load times for your website. CDNs are a collection of servers distributed across the globe that all hold copies of your content. When a user requests an image from your website that’s hosted on a CDN, the server in the CDN geographically 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 but advertise that they will offer better performance than cheaper CDNs. Free CDN services have also started cropping up, and may be worth experimenting with to see if they can improve performance on your website. One important consideration when using a CDN is to ensure that you set it up correctly so you don’t lose any SEO value. You may be receiving a lot of traffic from images hosted on your domain, depending on the nature of your website, and by moving them to an external domain it might adversely affect your traffic. The Amazon S3 service enables you to point a subdomain to its CDN, which is a highly preferable feature in a CDN. Serving content on a different domain (such as a CDN) or a subdomain on 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 each request to every resource on that same domain. More often than not, cookie data is not required for static content such as images, CSS or JavaScript files. Web users’ upload rates are often much slower than the available download rates, which in some cases can cause significant slowdown in page load times. By using a different domain name to serve your static content, browsers will not send this unnecessary cookie data, because they have strict cross domain policies. 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 bytes is around the most commonly used single-packet limit for large networks so if you are able to keep your HTTP requests under this limit the entire HTTP request should be sent in one packet. This can offer improvements on page load times. Google recommends that your cookies should be less than 400 bytes in size – this goes a long way towards keeping your websites HTTP requests under the one-packet/1,500 bytes limit.

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

Pingdom Chasing waterfalls The free Pingdom (pingdom.com) tool for measuring website load times is a valuable resource for measuring the impact your changes have on your website load time. It can be accessed at tools.pingdom.com. The tool calculates your page’s ‘waterfall’ – this is simply the list of requests done to load the page you are testing. It helps you to quickly identify the most costly resources on your page in regards to loading time. Every individual resource in the waterfall is broken down into segments showing you exactly how long it takes to fetch each one. The resource load times are broken down into the sections DNS, SSL, Connect, Send, Wait and Receive, which represent a chronological overview of how each resource is resolved. DNS describes how long it takes the browser to look up the DNS information to begin resolving the request. If your page uses SSL, the SSL segment shows you how long it takes to perform an SSL handshake. After this information is obtained the browser will attempt to establish a connection to the web server, which is represented with the Connect segment. With many requests information is sent from the browser to the server (such as cookie information), and the time it takes to do this is represented with the Send segment. After all these actions, all that’s left is for the web server to send the data to the browser – represented by the Receive segment. The Wait time is simply the gap between the send and wait. Requests to resources on web servers are a lot more involved than they might seem, and a tool like Pingdom is useful for identifying specific bottlenecks in requests for resources 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 observing your changes over time.

Further techniques

There are other, easier to implement techniques that can offer great benefits to your site’s speed. One is to put your JavaScript files at the end of your HTML document, just before the closing body tag, because browsers have limits on how many resources they can download in parallel from the same host. The original HTTP 1.1 specification written in 1999 recommends browsers should only download up to two resources in parallel from each hostname. But modern browsers by default have a limit of around six.

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

.net summer 2012

next>

.net technique makeover

makeover

Scion.com

Scion’s old site was cumbersome and hard to navigate. ATTIK’s senior copywriter Mike Brennerr explains how his agency helped Toyota relaunch the brand online The brief Site scion.com Site owner Toyota Motor Sales USA, Inc Brief Create an intuitive, brand-focused site that would load quickly and provide a good user experience – driving users to build a Scion or find a dealer.

search and multiple sub-scrolling segments. It was hard to find any salient information. To make matters worse, the site felt off-brand. Imagery didn’t map to other marketing efforts, it wasn’t customer focused – and it felt inconsistent with the rest of Scion’s messaging. Black cars on a black background were hard to see; small reversed text on black proved difficult to read. Tiny thumbnails crammed next to descriptions also made for a poor browsing experience.

The challenge

The team

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

ATTIK helped to launch the Scion brand and has been responsible for the majority of the creative work since the brand’s inception. While ATTIK has guided the marketing strategy as well as broadcast, print, outdoor and digital work for Scion, we have never held the reins for the brand’s principal website. As a result, it didn’t quite reflect the simple, inviting, and engaging image that we have developed for the brand as a whole.

The problem

Scion needed a website that would cater to the most contemporary target audience; the existing site presented a number of challenges ATTIK had to overcome. A Flash shell makes a site hard to update, requires the latest plug-in on any browser and isn’t compatible with many tablets; users also face a long load time. The old scion.com was big and processor-heavy with pixellated transitions. It also had a confusing navigation structure featuring a hidden carousel, no sitemap, no

118

.net summer 2012

ATTIK had plenty to overcome but our relationship with Scion made us confident we could deliver. One main tenet of the Scion brand is making things easier for owners and prospective buyers, so the site had to be a simple, useful tool for the audience – who need the facility to research models via a user interface that makes sense. We felt the site should load quickly, be scalable to grow as the brand develops new models and be flexible enough to adapt to different marketing

sections. We created rotating marquees and promotional units so the site can reflect Scion’s marketing plan as the company develops new models and promotions. As mentioned above, making a car your own with optional accessories has always been a big part of the Scion buying process – base models come with many preloaded features, but often owners like to personalise things. An accessories grid-view structure on the new site gives users more control, enabling them to browse easily through an array of products. Featured marketing areas developed by ATTIK help enhance this experience. Build a Scion enables users to create their own Scion and know exactly how much it will cost when they get to the dealer, while Find a Dealer helps a potential owner locate a nearby dealership in two clicks. The buying process couldn’t be made simpler. This ease of use was extended via a clearly displayed search tool, so site users can quickly find whatever they need. Redundant sections

“The site felt off-brand: imagery didn’t map to other marketing efforts and it wasn’t customer focused” Mike Brenner

efforts. Scion is also known for accessorisation and personalisation. Users should be able to build their own Scion easily and instantly know its exact price, helping to generate practical leads for dealers and turn browsing into real sales.

The solution

ATTIK chose to give scion.com a more flexible, fluid set-up. Quick access and ever-present navigation enables users to easily jump to any section of the site within one or two clicks. We created a layout structure that would adjust for a variety of browser dimensions – facilitated by a shift away from Flash. Developing in HTML5 and CSS3 meant we could enable the site to automatically adapt to different browser windows on desktop monitors and laptops. The shift in authoring language also made for a much lighter load and a swifter browsing experience – and one that is tablet- and touch-friendly. The website is designed to be flexible and fully scalable – so administrators can quickly and easily replace content and images, or reorganise entire

were consolidated and eliminated to make the entire experience more efficient and rewarding. Scion brand fonts were integrated into the architecture of the site to cut load times, sharpen text appearance throughout the site and maintain a look consistent with Scion’s marketing. To keep cars bold and spectacular, we utilised a prominent full-bleed display, providing a standout showcase for models and gallery images. Scion is also known for its limited edition Release Series vehicles, so we also devoted a section to an overview of these cars. Finally, to ensure an end-to-end customer experience, we embraced social interaction, linking to Scion social pages, site-wide social sharing and video incorporation from our YouTube channel.

Wrap up

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

.net technique makeover

Navigation

Quick access and everpresent navigation enable users to find any section of the site within one or two clicks. ATTIK chose to give the site a more flexible, fluid navigation to make the experience more pleasant for the user. Scion promotes straightforward interaction with its audience, and finding one’s way around the site had to be just as convenient. It was also important to deliver a site with more efficient structure to convert browsing into real sales.

Marquees

Marquees and promotional units mean the site can change with Scion’s marketing plan. Each model developed has its own campaign with a distinct look and feel, and deserves an online home with an appearance that reflects the other marketing efforts. These promotional units facilitate bringing all Scion models together at one online location, with no need for dedicated micro sites, and marketing for any one model can help drive consideration of others.

Configurator

Scion is known for accessorisation and personalisation. Build Your Scion enables visitors to do exactly that – and instantly know its exact price. Users can select from interior and exterior features, colour and performance and get a 360° view of their car. With our configurator, buyers are able to add spoilers, wheel covers or lowering springs and know just what to expect when they arrive at their local dealer. An online itemised price list shows how much they’ll get for what price.

Scalability

Two years ago, Scion offered three models. Now there are five. The organisation we have developed allows the site to be modular over time. We wanted it to be flexible enough to be able to quickly add new models, messages or promotions. This is a site that can grow easily with the brand and adapt to all of Scion’s current and future needs.

A prominently displayed search tool helps users find anything they want to know about the brand quickly and simply. They can find direct links to each of the models, prices and available accessories. This search is not limited to features about the cars. Scion supports owners’ communities and racing teams in addition to music and visual artists. The search tool covers all aspects of Scion lifestyle. Anything users wants to know about Scion is right at their fingertips, available in just a click or two.

Tell us about your redesign!

Has your site recently had a makeover? Let us know what’s changed and why! feedback@netmagazine.com

Pimp my site!

Does your site lack lustre? Could it benefit from a few tweaks? To get an expert opinion, email your URL to feedback@netmagazine.com

.net summer 2012

119