53 pages of practical web design tips designers and techniques! the world’s best-selling mag for web & DEVs
issue
Google’s guide to Analytics! 25 HTML5 speed tips
Tutorials > Create 3D graphics in CSS3 Use icon fonts in native apps Learn lessons from CoffeeScript Create a style prototype Build a chat app with Silex Get started with Git
The top 25 HTML5 speed tips Give your websites and apps the perfect performance boost
244
issue 244 summer 2013
issue 244 summer 2013 www.netmagazine.com
> Google’s
guide to Analytics
Expert tutorials o n RWD, PH P, icon fonts & more!
Google’s Justin Cutroni reveals everything you need to know
“You’re invited to jump into the bodies”
The best way to organise your code
> Discover the power of Git Get started with version control
£5.99
Master shading, animating & more!
> Improve your jQuery
Issue 244 summer 2013
www.netmagazine.com
> Dazzling 3D with CSS
Feed 12 25 HTML5 speed tips 48
Google’s Analytics guide 36
Build-off: tattoo sites 102 Q&A/Hannah Donovan 21
10 design concepts 44
Gallery 58
“It was like I was hit by a lightening bolt” Karen McGrane, page 32
4
Profile/AnalogFolk 70
.net summer 2013
NET244.contents.indd 4
6/28/13 11:57 AM
.net content
. net content Google’s guide to Analytics
Get the tutorial files!
28 .net Awards
OR download the whole lot at http://netm.ag/files244
76
See pics of this year’s .net Awards ceremony
We chat to content strategist Karen McGrane
36
oogle’s guide G to Analytics Make the best use of Google Analytics to measure your business data
81
82
84
25 HTML speed tips Microsoft’s Jatinder Mann shares his top 25 tips for high performance web apps
regulars >
90
94
Web Pro 114 Search Conversational search and SEO
116 Social Social media for the cause
Subscriptions 67 International subscriptions 110 Expert advice Columns from Allan McAvoy and Alastair Campbell plus your questions answered by panellists Inayaili de León, Matt Gifford, Luke Scanlon, Susan Hallam and Ben Dyer
117 Opinion Investing in animated video
118 Analytics Why care about attribution
119
Ecommerce Social enterprise?
130
Next issue
WD/create a R style prototype
onts/use icon F fonts in native apps jQuery/lessons from CoffeeScript
HP/build a chat P app with Silex
98
66 Focus_on Signup is where people get their first impression of your business. Gene Crawford explains how to make it good
68 Opinion Until RWD becomes the norm, we must stop viewing issues with a traditional mindset and accept that it’s hard, says Drew Thomas
70 Profile AnalogFolk’s Bill Brock, Matt Dyke and Simon Richings talk about man skills, augmented reality and the importance of remembering the world’s not digital
Special on subscripti offer! > Turn to page 54
Git/get started The fundamentals for proficiency and success, with Jordan McCullough
102
Website build-off
Three designers tackle sites for tattoo studios with HTML5, CSS3 and responsive design
106
How we built
Chris Olberding discusses responsively rejuvenating an art festival site using Modernizr, CSS and parallax effects
NET244.contents.indd 5
The best new websites in the following categories: responsive, CSS, HTML5, JavaScript, plug-ins and CMS
Lewis Baker explains how to use a PHP micro-framework to build a single-page app
12 Feed
54
Opinion/ Navigate success
Jed Schneider shows how CoffeeScript language features can help with jQuery
We answer your enquiries
This month’s news, Q&As, commentary and reviews
58 Gallery
Robert Brauer demonstrates how to use icon fonts for native mobile app development
6 Welcome 10 Inbox
SS/create 3D C graphics in CSS3
Sparkbox adopted style prototypes as its first-phase. Jeremy Loyd explains why
concepts for devs
48
showcase >
Create a good user experience to keep users coming back, says Sarah Watson
44 10 design
Kyle Fiedler introduces 10 basic design concepts and practices every developer should know
technique > Donovan Hutchinson explains how to use CSS transforms to create and animate a 3D object
32 Interview
l CSS/create 3D
graphics in CSS3 http://netm.ag/css-244 l RWD/create a style prototype http://netm.ag/style244 l Fonts/use icon fonts in native apps http://netm.ag/icon244 l jQuery/lessons from CoffeeScript http://netm.ag/ jquery-244 l PHP/build a chat app with Silex http://netm.ag/silex244
articles >
issue 244/summer 2013
.net summer 2013
5
6/28/13 11:57 AM
.net feed
feed
Choice cuts from across the web
shortcuts >
Make sure you don’t flick past any of this lot!
15
Big mouth Gary Marshall says the web can make you fitter – but asks who watches the watches
18
Brains behind Matthew Anderson talks about typography discovery, letterforms and type addition
Standards need devs Call for more devs to be immersed in standards — but to what degree?
21
Reader QA Hannah Donovan discusses the aesthetics behind music sharing service This Is My Jam
22
Books The latest releases include See What I Mean, and The Fundamentals of Interactive Design
12
Writing for The Pastry Box Project, developer Mat Marquis (@wilto) recently argued that despite frustrations he’d experienced with <picture> more developers must get involved with web standards. “There are more now than previously, but it’s still not equivalent in the least way,” he told .net. He admitted standards work had been “like a part-time unpaid job,” but said “once devs establish a presence in web standards, we won’t have to fight to be heard as much, and as we each take on battles, it’ll be easier for the next lot”. There’s certainly a feeling in the industry that difficulties in implementation within browsers can lead to making things harder
for developers. Indeed, Marquis said developers can be “regarded as pests”, that they’re told to “involve more browser representatives” in discussions, and yet there’s “no incentive to help”. W3C Technical Architecture Group (TAG) member and Google engineer Alex Russell told .net he sympathised, but said expectation that change would come from creating specs was unfounded. Russell thought those best placed to lobby for and enact change had both dev insight and also broader experience regarding the web platform, adding: “You have to differentiate between the one thing that really hurts right now but that will go away and issues that won’t get fixed if not addressed”.
On <picture>, which is a pain-point, Russell thought the lack of progress could be down to approach: “It’s not about creating a spec, but demanding change from vendors. Without a leverage point, devs must convince someone with that power to change shipping software.” Russell admitted this could be tough, especially if browser makers don’t feel that pain themselves. He said the TAG could act as a proxy for web devs and be reformed into a listening organisation to represent dev interests in a more forceful and structured way to the Working Groups. If so, Russell reckoned devs could “think more about ‘how can I get it?’ than ‘I want it’, and be more successful in getting what they want.” ●
.net summer 2013
NET244.feed_open.indd 12
7/1/13 10:25 AM
.net feed
Responsive images hit a wall
Overheard
Hi-res screens proliferate, but the industry’s no nearer a solution for responsive images Elsewhere in the standards debate, Opera web evangelist Bruce Lawson has written an ‘interim report’ on responsive images (www. brucelawson.co.uk/2013/responsive), which makes for grim reading. He explained that little progress had been made and no viable solution yet existed. Speaking to .net, Lawson called the situation “a mess”, said it “feels like there’s a misunderstanding regarding what devs are trying to do,” and expressed concern there “wasn’t enough interest, because it’s a tidy-up thing to save bandwidth, but lacks the sexiness of a brand new API for connecting to something exciting”. Lawson added that the seeming reluctance of browser vendors was at odds with developer needs – “I’ve never heard one say they don’t care about this” – and it’s easy to see why, with the average web page approaching 1.5MB, 60 per cent of which is images. Developer Mat Marquis spearheaded a <picture> solution (http://responsiveimages. org) based on Lawson’s ‘strawman’ suggestion from 2011. “Nothing’s really progressed of late,
despite devices marching on anyway. Hi-res screens proliferate but we lack tools that are built into browsers to deal with them,” he complained, adding that workarounds are “getting progressively scarier as the need gets greater”. It’s hard to see how the problem will be solved. Marquis revealed a Web Component version of <picture> has been requested by the ‘reformed’ TAG, but politics could still scupper any solution: adding additional logic to browser image prefetchers could impact performance, and vendors aren’t always keen to do something first in case others don’t follow suit. On the Extensible Web Manifesto (www.extensiblewebmanifesto.org), which aims to speed iteration by opening more browser hooks to JavaScript and rapidly iterating via scripting, Marquis was in two minds. “The EWM is a great idea, but we already pretty much did what they’re suggesting with <picture>, and I don’t see how a Web Component version of the same thing will be any more effective,” he said. Lawson, having been told his strawman was a “bad solution,” noted 18 months later that “no-one’s told me what a good one looks like”. ●
Industry news >> Going underground We’re pretty sure we never need to see another CSS MacBook Pro, but we’d welcome more genuinely useful CSS experiments such as http://csstubemap.co.uk, which apparently took about five weeks to create. It outperforms official PDFs in most browsers we’ve tried it in.
Most people waste most of their time doing stuff that doesn’t matter. I try to waste less time. It’s amazing how much is left over for productive endeavours then David Heinemeier Hansson, developer http://netm.ag/hansson-244
IT figures
Things you never knew you never knew >> 750 million The number of monthly active users of Chrome, according to Google, up from last year’s figure of 450 million. >> 8.8 million The number of lines of code removed from the WebKit repository by Google in its work on the Blink rendering engine. >> 50,000
>> “Siri, do you hate Google?”
>> Google Web Designer
It’s increasingly clear that Apple and Google aren’t best buddies. At WWDC 2013, Apple showed off Google searches in Safari for iOS, but the search giant was notable by its absence in a Siri demo. Instead, Apple’s Eddy Cue noted how you could search directly in Bing.
We doubt Adobe and Panic will, well, panic, but Google’s unveiled Google Web Designer. The product is integrated with DoubleClick Studio and AdMob to assist advertisers and publishers with creating HTML5 content to be served through Google platforms.
>> IE: less power! It’s not often you’ll see browser vendors crow over the use of ‘less power’, but that’s what Microsoft’s done in a report it commissioned on Windows 8 browsers. IE roundly beats Firefox and Chrome in terms of energy drain, using nearly 20 per cent less energy than its rivals.
The number of Singapore dollars websites pay if publishing content that “undermines racial or religious harmony”. >> 100 The number of hours of video now uploaded to YouTube per minute, up from 72 hours per minute a year ago.
.net summer 2013 13
NET244.feed_open.indd 13
7/1/13 10:25 AM
.net feed .net: How do the kids react? CS: The kids absolutely love it. A lot of the time our volunteers have to explain what coding is and that the computer games they play have been programmed. It blows their minds! It’s amazing to watch. When they realise that they can do a similar thing (albeit at a simpler level), they just light up. We have stand-out kids across the country, but the one that springs to my mind is Effie in London. She started Code Club in September aged 10 and she’s now confidently building her own static sites and loving it. I loved watching Adam remake Modern Warfare in Scratch (http://scratch.mit.edu) too. So much fun!
Clare Sutcliffe www.claresutcliffe.com The co-founder and CEO of Code Club talks about teaching school pupils to program, launching worldwide clubs and blowing minds .net: What’s Code Club’s story? What inspired you to start it? CS: Code Club (http://codeclub.org.uk) started out as an idea in April 2012. Linda Sandvik and I were in the process of planning a ‘useful hack day’ when we accidentally invented Code Club. We were inspired to start it when we realised that children weren’t being taught programming at school. We decided that sending programmers into school to teach what they know was a pretty simple idea and gathered a team of writers to write projects that we could give our volunteers. The idea was instantly very popular and we launched with 120 clubs in September. About 100 new clubs are born each month and we’ve just reached 800!
Clare Sutcliffe Job Co-founder and CEO Company Code Club URL www.claresutcliffe.com Twitter @ClareSutcliffe Education Foundation at Leeds College of Art, graphic design degree at Bath Spa University, lots of web conferences Previous career Trained in print design, went straight into creative advertising as the art director side of a team, switched to digital design and was most recently a user experience designer at Albion London until Code Club ‘happened’
14
.net: How did you catch the coding bug? CS: I’m not actually a programmer but Linda is, and she does some fantastic work. She’s currently in Oslo installing arduinos (www.arduino.cc) into public bins to make them talk when you put rubbish in them. I’m a web designer and learnt markup so that I would know what I was designing for. My work improved massively after I’d learnt it and it made me feel all-powerful (probably dangerous!). .net: How big is Code Club now? CS: Code Club has 800 clubs at the moment so we’re heading towards out first big milestone of 1,000 clubs. After that we hope to have clubs in 25 per cent of primary schools in the UK. We’ve also launched CodeClubWorld.org (http:// codeclubworld.org), which is a framework allowing people to start Code Club in their own country. (See .net’s article online: http://netm.ag/cc-244.) Each country will need to translate our materials (via GitHub) and then offer support to volunteers in their own country. We’re really excited to see what will happen!
.net: What would you say to somebody thinking of starting a club? CS: I’d say that they were an excellent human being and won’t regret it. Our volunteers say it’s very rewarding and the best part of their week. If you’re looking for fun outside of your comfort zone then 10 excited nine-year-olds all eager to learn to code will give you just that! Please visit www.codeclub.org.uk to find out more on how to get started. .net: What else are you working on right now? CS: I’m mainly working on Code Club World at the moment as it’s so new. I have a couple of other projects coming up but I have to keep quiet about them for now, sorry! .net: Which apps, sites and tools make your dayto-day life possible? CS: I can’t live without my iPhone. I very often need to be able to react quickly to email (journalists with tight deadlines etc!). I use Tweetbot (http://tapbots. com/software/tweetbot) constantly as Code Club is so active on Twitter. I absolutely couldn’t live without TeuxDeux (https://teuxdeux.com) for listing out my tasks each day and planning the week ahead – it keeps me on the straight and narrow! .net: Who inspires you? CS: Starting Code Club has been pretty intimidating at times but I love the scale of the effect we’re having. I’ve learnt that the people who inspire me most are those who take on the biggest problems because they care so much about it. They aren’t afraid of the obstacles or put off by the size of the problem, they just get stuck in. The web and the internet allow us to reach so many people as well as changing attitudes, changing behaviour and kick starting people into action. The people who use the web and internet well will change the world. l
“We realised that children weren’t being taught programming at school” Clare Sutcliffe
.net summer 2013
NET244.feed_qa.indd 14
6/28/13 12:54 PM
Gary Marshall’s big mouth
Fitter, happier, more productive The web can make you fitter – but who watches the watches, asks Gary Marshall intake and exercise, and even record whether they’re happy or sad. Their chosen services and/or apps then tell them how to make their lives better. On the face of it, this is a great idea. Who wouldn’t want to live a better life? However, there are some big questions hanging over all the data such monitoring creates. Who owns it? Who should have access to it?
Watch dogged When even Xboxes are capable of tracking users’ heart rates – something that every Xbox One will be capable of doing – and Apple’s supposedly working on wearable tech that includes some
9000
“Just wait until Google is able to serve ads based on your blood sugar levels”
NET244.feed_gary.indd 15
form of biosensing, it’s clear which direction we’re headed in. The question isn’t whether smart watches or wristbands will be recording lots of data about us. The question is what’ll happen to that data. Advertising is a given. If you think seeing ‘five foods you should never eat’ or ‘one trick of a tiny belly’ ads are annoying now, just wait until Google develops the ability to serve ads based on your blood sugar levels. But that’s the least of our worries. Insurers and even employers will fall on this like a glutton falls on a chocolate cake. In the US, the pharmacy chain CVS has already told 200,000 employees to submit their weight, body fat, glucose levels and other key health data or pay an extra $50 per month for health insurance. The scheme is voluntary, the firm says, but of course the fine is mandatory. For now, it’s a low-tech system, but it isn’t hard to imagine CVS (and similarly-minded employers: it isn’t the only firm doing this) demanding
their staff use devices such as the Jawbone UP. That’s interesting – because such devices don’t just monitor the steps you take or the beats your heart makes. These devices track your sleep patterns and activity levels – and if you want, or if you’re ordered to – they can also track your moods and your food and drink intake.
Bad habits I fear the worst because the same employers who currently screen job applicants by tracking their social media profiles would dearly love to get their hands on that stuff. No amount of self-motivated, team-playing blowing of your own trumpet on your CV is going to make up for a spreadsheet showing that you sit on the couch till three o’clock each morning, drinking like a fish and eating Wotsits. l Gary Marshall has been writing for .net since the Stone Age www.bigmouthstrikesagain.com
Photography/Iain McLean
So far I’ve managed to resist the lure of Wi-Fienabled scales, Fitbits and FuelBands. Rather than track or share my every step, the calories I consume and the quality of my sleep with faraway web services, I prefer a lower-tech approach to personal fitness. It’s simple and very effective: if I look in the mirror and see Jabba the Hutt looking back, I go to the gym. The smart money says that there’s a better way. Investors are funnelling billions into health monitoring and mapping technology, and devices such as the Jawbone UP have spawned a new movement called the Quantified Self (http://quantifiedself. com). QSers track their sleep, food
.net summer 2013 15
6/27/13 6:08 PM