You are on page 1of 116

Build apps with

ampersand.js
We introduce the best
new framework around

The INternet of
things in CSS
Adapt your code for
a plethora of devices

Design beautiful
work portfolios
Build case studies easily
on top of WordPress

The voice of web design

Issue 262 : January 2015 : net.creativebloq.com

SEmplice:
Save 50%

build
Mobile
apps

Exclusive offer on
this portfolio tool

the easy way

Issue 262 january 2015 

£5.99

Web vs mobile apps, native vs hybrid,
the top frameworks, distribution
tips & much more!

Speed up your
mobile apps

Make use of the GPU for
hardware acceleration
FEATURE

Why you
should use
scalable vector
graphics today

New york 17 April 2015
Featuring Mike Monteiro, Val Head, Pamela Pavliscak,
JoonYong Park, Anton Repponen, Irene Pereyra,
Dave Rupert... and lots more to be announced

tickets on sale now

www.generateconf.com

Welcome

Welcome

editor’s note

Can you believe it’s only been six years since
the launch of the Apple App Store? This year the
number of mobile app downloads worldwide (from all
the big app stores), will exceed 135bn, and worldwide
mobile app revenue is estimated to reach $35bn.
So think of apps what you like, but the market is
massive – and there are now so many approaches,
libraries and development environments it’s hard
to keep track. To make your life easier, this issue we
invited top agency AKQA – which has built several
innovative and award-winning apps – to explain
how to get started, what the different tools can offer
and how to recognise when an app might not be what
you want to build after all (page 68).

Tying in with our cover feature are tutorials
on how to improve your apps’ performance by
taking advantage of hardware acceleration and
the GPU, and an introduction to hot new JavaScript
framework Ampersand.js. And if you want to start
developing for the much-hyped Internet of Things
(or ‘Stuff That Talks to the Interwebs’ (STTTTI),
as Seb Lee-Delisle likes to call it), don’t miss the
article on page 94.
Now enjoy the issue!

Oliver Lindberg, editor
oliver.lindberg@futurenet.com
@oliverlindberg

Featured authors
Sara Soueidan

Jon Boydell

K amil Ogórek

Dan Tello

Sara is a self-employed
frontend web developer based
in Lebanon, focusing on
HTML5, SVG, CSS3 and
JavaScript. On page 76 she
tells us everything about SVG
w: sarasoueidan.com
t: @SaraSoueidan

Jon is a group technical
director at ideas and
innovation agency AKQA.
On page 68 he, with help
from two colleagues, explains
how to build mobile apps
w: akqa.com
t: @AKQA

Kamil is a senior client-side
engineer in X-Team and an
Ampersand.js core team
member. On page 84 he
introduces us to this powerful
new framework
w: kamilogorek.pl
t: @kamilogorek

Daniel is a senior frontend
developer at Viget, disc golf
enthusiast and bacon addict.
On page 28 he addresses
some of the common ‘mobilefirst’ hesitations
w: viget.com
t: @dantello5

january 2015 3

Luis Daniel Rodriguez.com Licensing International director Regina Erak regina.carter@futurenet. If you submit unsolicited material to us.304 A member of the Audited Bureau of Circulations Colophon 4 january 2015 Apps used Google Docs. correct at the time of going to press.com Acting group art director Simon Middleweek simon. Keir Whitaker. Tal Shoham.com/photos/netmag netmag@futurenet. Skype. Amatic SC. neither Future nor its employees. Donald Sutherland. The Ambury.constance@futurenet. including licensed editions worldwide and in any physical or digital format throughout the world.com Advertising Advertising sales director Suzanne Smith suzanne. Marc Roberts. certified forestry and chlorine-free manufacture.com Subscriptions Phone our UK hotline 0844 848 2852. You are advised to contact manufacturers and retailers directly with regard to the price and other details of products or services referred to in this publication. The ABC combined print.com Editorial Editor Oliver Lindberg oliver. Ben O’Brien management Content and marketing director Nial Ferguson nial. We are not responsible for their contents or any changes or updates to them. as far as we are aware. Art editor Mike Brennan mike.quilter@futurenet.com Group editor-in-chief Dan Oliver dan. BA1 1UA. Quay House. Dan Tello. Bradley Haynes. Leonard Teo. Paul Woods Art contributions Kyle Bean.com. GitHub. Commissioning editor Martin Cooper martin. Gene Crawford. international +44 (0)1604 251 045 Subscribe to net online at myfavouritemagazines. Illustrator. Evernote paper COVER PaceSetter Gloss 250gsm P3-82 Galerie Fine 100gsm P83-114 Grapholvent 70gsm Typefaces Antonio. Kamil Ogórek. Sam Kapila. photography. YouTube.com Designer Rich Carter richard. Jimmy Jacobson. Future cannot accept any responsibility for errors or inaccuracies in such information. All  rights reserved. Print 10.cooper@futurenet.hamilton@futurenet. Dave Arel. FutureSource. Sacha Greif. Ruth John. The Ambury. Merriweather. Photoshop.lindberg@futurenet.com Editorial contributions Nate Abele. Ben Mounsey.erak@futurenet.com Production manager Mark Constance mark. you automatically grant Future a licence to publish your submission in whole or in part in all editions of the magazine. All information contained in this publication is for information only and is.632 Digital 3. No part of this magazine may be reproduced. Tobias van Schneider. Mark Sadecki. Any material you submit is sent at your risk and.co.smith@futurenet. Future Publishing and its paper suppliers have been independently certified in accordance with the rules of the FSC (Forest Stewardship Council).com Commissioning editor Julia Sagar julia.creativebloq.evans@futurenet. Future Publishing Limited (company number 2008885) is registered in England and Wales. Titillium Web .com Staff writer Sammy Maine sammy.com.uk NEXT ISSUE ON SALE 23 December 2014 All contents copyright © 2014 Future Publishing Limited or published under licence.winyard@futurenet.672 We are committed to only using magazine paper which is derived from well managed.@netmag Future PLC.com Head of content & marketing. Johanna Kollmann. creative and design Matthew Pierce matthew. Apps and websites mentioned in this publication are not under our control. transmitted or  used in any way without the prior written permission of the publisher. agents or subcontractors shall be liable for loss or damage. Registered office: Registered office: Quay House. Bath. digital and digital publications circulation for Jan–Dec 2013 is 14.com Circulation Trade marketing manager Juliette Winyard juliette. stored. although every care is taken.maine@futurenet.com Production Production controller Marie Quilter marie.middleweek@futurenet. Sara Soueidan. Jon Boydell.com net. Peter Gasston. Bath.ferguson@futurenet.brennan@futurenet.com Production editor Ruth Hamilton ruth.oliver@futurenet. InDesign.pierce@futurenet. Matt Keas. Share Tech. BA1 1UA +44 (0)1225 442244 /netmag +netmagazine flickr.com Staff writer Gary Evans gary.sagar@futurenet.

.

about kicking his ‘view source’ addiction and why we should hang on the those ‘unsexy’ old tools SUBSCRIBE to net and save up to 61% Take advantage of the New Print and digital Bundle Turn to page 24 to find out more .. including a set of abstract new source code screenprints The Web Is . where slick glass and steel meet rustic.creativebloq.com FEED FEED SIDE PROJECT of the month 16 Donald Sutherland on the tool that makes adding Google Maps to sites much simpler clients from hell 17 BEYOND PIXELS 20 NEED list 21 EVENT report 23 Workspace 18 Events company Evolero has recently moved into a new coworking space in Tel Aviv. Founder Tal Shoham shows us around her team’s new home. explores what the web means to different people. and what to do next Desktop-last  28 Big Question 38 Q&A 40 Dan Tello considers why the industry is so afraid of embracing mobile-first design What’s your approach to prototyping? We spoke to the pros to hear their techniques Kutlu Çanlıoğlu chats about how he tackled the multi-platform BBC iPlayer redesign The myth of late nights 42 Paul Woods debunks the fallacy that you need to work overtime to be successful 6 january 2015 VOICES INTERVIEW 32 We chat to net’s Young Designer of the Year. Marc Roberts reports voices succeed with large clients 26 Leonard Teo explores how to bag a gig with a high-profile client. CSS wizard Harry Roberts.. salvaged furniture A business solutions specialist tackles a disobedient client with a connection issue Sacha Greif on how martial arts help him put work problems into perspective The web stuff we want.contents Issue 262 : January 2015 : net.

including a cheeryful creation dedicated to Pablo the flamingo Network 8 Exchange 10 The latest mail. posts and rants Sam Kapila. tweets.js. the new ‘non-frameworky’ framework Features Luis Daniel Rodriguez explains how to write the stylesheets of tomorrow today Build mobile apps 68 the easy way Discover The power of SVG AKQA’s Jon Boydell gives the lowdown on all the tools and frameworks you need to tackle mobile apps Sara Soueidan gives a crash course in the different effects you can create using scalable vector graphics 76 Johanna Kollmann pits agile against lean Matt Keas walks through how to create unique. Bradley Haynes. interactive web experiences web standards project Create beautiful case studies with semplice 90 Tobias van Schneider shows you how to use Semplice to build a top online portfolio Exclusive video tutorials! Look out for the video icon in the tutorials for exclusive screencasts created by authors Ruth John on device orientation events 103 3rd party content & RWD 104 Jimmy Jacobson uses iframes to add third party content to a responsive site improve app performance 108 Dave Arel on how hardware accelerated compositing can boost mobile app speed ACCESSibility Mark Sadecki on the canvas element 114 january 2015 7 .Contents regulars regular GALLERY 44 Peter Gasston picks out his favourite new sites. Nate Abele and Keir Whitaker share their tips Showcase design Challenge 52 Focus on 56 profile 58 how we built 64 Three designers create firework sites Gene Crawford on presenting your work Digital marketing agency Forward3D How Great Apes built a 3D design tool PROJECTS Build Modularised apps 84 The CSS of the IOT 94 Head to head 96 Build a custom UI 98 Kamil Ogórek introduces Ampersand.

who tweeted us this fab photo to help us celebrate net’s 20th birthday last issue . US Thanks. Steve Cowell. Espoo. Germany won the World Cup for the first time that year and also Let’s celebrate! Big thanks to Sergei Golubev (@sgolubev).ag/GMHW-262 Sam Kapila. This is about emailing: programming and design strategies.creativebloq.com says: “Hi Pedro. FI Well spotted! We blame the screen capture software that probably didn’t catch up in time when we took this shot. netmag@futurenet. UK You don’t need to have an Apple or Android device to read our digital edition. which supports PCs and Windows 8 devices: zinio. Email marketing is certainly alive and kicking. Mexico Dr Dave Chaffey of digital strategy advice site SmartInsights. it’s good to hear your enthusiasm.ag/donovan- net. With social media around.Mail. Texas. Many retailers get a far higher proportion of sales from email than social media. which 8 january 2015 /netmag +netmagazine has been essential with the increasing use of email on mobile devices.” World Cup error I think I found a little mistake in issue 258. particularly for marketing to existing customers. Benjamin Howarth (above).com 262) and Ed Finkler (netm. tweets. get in touch. with over a quarter of all opens! As with many aspects of marketing.com) and were thrilled to have some devs share their very personal stories. personalised content is the order of the day. He is still celebrating. Vargas. Of course the World Cup took place in 1954 in Switzerland. but I think it’s still an excellent way to contact potential customers. If you also want to share your story. Contextspecific. the main trend is the move to responsive design using media queries. Windows woes Are there any plans to support Windows devices with the digital editions? Having been a regular reader of the print edition. Sam. it is the strategic approach which makes the biggest difference. incidentally. On page 49 [a Showcase page of a World Cup history site] there should have been a circle around 1954.com. net is also available on Zinio. Christopher Murphy (netm. Mental Help Week Please read and get educated! RT @netmag #GeekMentalHelp Week: @benjaminhowarth on bipolar disorder: netm. ag/Murphy-262). We actively supported Geek Mental Help Week (geekmentalhelp. Pedro E. Editor Oliver Lindberg would like to remind everyone that. Steve. Everyone really came together to raise awareness of mental health problems that many of us are affected by.ag/stats262 – no surprise to find iOS in top position.com happened to bag the trophy again this summer.ag/Baugues-262). delivered by dynamic content insertion which is now available through many marketing automation systems. In terms of design. Hannah Donovan (netm. Check out the stats at netm. Curaçao and Greenville. not 1930. Farhad Eftekhari. posts and rants contact us @netmag Email marketing I have a question I hope you can help me with. Massive thanks go to Greg Baugues (netm. I’d also like to thank you for such an amazing magazine. maybe for some people this seems out of date. ag/finkler-262. best practices and new trends. it would be nice to go digital.com). but I don’t use either Apple or Android devices.

whereas the former are erasable and so gently provisional. with some unabashed fetishism of the Rotring 600 and its kin. but these are inadequate. That established. Microsoft might just be one of the most important players in tech today.ag/microsoft-262 january 2015 9 . a cheaper house. The latter are definite. netm. Rather than the evil empire of old. fabricland. write code that’s easy to read. @iandevlin Drink coffee. No greater brightener or leveller than taking a walk or going for a run. @mstoiber05 COOL Stuff We learned This month An ode to the mechanical pencil Pencil notes. @DaveThackeray However bleak things look. @pstephan1187 Think like a proton. Mozilla’s Christian Heilmann. the open source Firefox OS promises many great things Windows Phone 5% Microsoft’s slick successor to the much-maligned Windows Mobile iOS 25% Apple’s all-conquering mobile operating system for tablets and phones Android 22% Google is set to release version five of its Linuxbased juggernaut From our timeline When times are tough. Unixlike OS that combines gestures and touch for navigation Firefox OS 4% A relative newcomer.ag/pencil-262 Code’s cognitive load If you want to make code that’s efficient. tell a joke about Microsoft. a cheaper car. it’s always better to communicate. have more humility than those jotted in pen. we’re off on a tour of the mechanical pencil’s history. I can’t get replace my family.uk </sarcasm> @humedini Surrounding myself with positive and creative people usually helps a lot – positivity spreads like a virus. We need to look for more rigorous measures of readability.co. Things are never as bad as they seem! #exceptwhentheyare @nlisgo <sarcasm> I look at my favourite website. netm. I can get another job.Network THE POLL which mobile platforms do you develop for? HTML5 hybrid apps 40% Native might offer more power and flexibility. how do you describe code that is easy to understand? We reach for woolly words like clean and clever or ugly and cryptic. but it’ll be a cheap one – so says unlikely Microsoft advocate. Clippy would be proud. It inspires me to be the best I can be. this post’s author tells us. make lists and power on! @Jamesp0p The same thing I do when times are good: work hard and help others. It’ll get a laugh. @Tevko Adventure time.ag/read-262 Don’t mock Microsoft If you’re giving a talk and need some comic relief. every time! @thepixelgrid I grab some fresh air. what do you do to stay positive? I remind myself of what really matters: My family. but hybrid means one app works across many code bases BlackBerry 10 3% A propietary. netm. The problem is.

Sam Kapila Sam is a designer and design educator living in Austin.ag/timber262). To see how it is implemented in Shopify. Honestly. Texas w: samkapila. proportion and task flows of popular ones.com) offers one way for designers to connect with top local startups BH: With a few exceptions. universities have a really hard time keeping up with the latest methodologies for building great products.Send your questions to netmag@futurenet. UK KW: Absolutely – any structured data we can add to our product pages that helps search engines understand what they are 10 january 2015 parsing can only be a good thing.liquid in Timber (netm. schema. it seems like something we should be using as standard.com t: @samkap Practical advice from industry experts QUESTION OF THE MONTH How could design education better support prospective UX/product designers? Rob Whiting. JP and London.org is supported by Google...g. Osaka. . Copy design trends on Dribbble. Beverley Country. Given that schema. the best approach is to just do the work and immerse yourself in products. our open source theme framework.org/Product)? Christian Oliff.org (e. Microsoft and Yahoo and is fairly easy to implement.com t: @bradhaynes Nate Abele Nate is the founder of Radify and a member of the AngularUI team w: nateabele. go to product. but the number of experienced designers that set aside that time is unfortunately very low. UK Bradley Haynes Bradley has been designing experiences for the web for over 10 years w: bradleyhaynes. do it.com t: @nateabele KeiR WHITAKER Keir Whitaker works at Shopify in the role of designer advocate w: keirwhitaker. Some programmes bring in designers from product teams to help – this is a step in the right direction.org). Redesign apps and become comfortable with the balance. ecommerce marking products Do you recommend marking up products with schema. Get into design programmes like AIGA (aiga.com this month featuring. San Francisco-based Bridge (designerfund.com t: @keirwhitaker Connecting Hunt for resources to supplement your education – there are plenty around. And if an opportunity comes along to intern or freelance on an app.

Buffalo. Stockton-on-Tees. Pinnacle SEO @PinnacleSEOTwit Test. try to include the equivalent native element in your markup ● ARIA: While Angular does a lot for you. I  believe thicker line weights and details such as distinct letterform counters (the negative space) and serifs reveal information about a letter. Pinnacle SEO @PinnacleSEOTwit Ollie Barker. I think there are times when it’s OK to use a hamburger – such as for information that is secondary to the app’s main purpose. Consider the principles of typography while designing. with new devices like the iPhone 6 plus. One of the hardest things is to get a typeface that will look right and work correctly. AU SK: In my experience. how can typography be used to create a better experience for the user? Laurel Isaacs. First.ag/elements-262). the spacing was completely off. and read Elements of Typographic Style by Robert Bringhurst (netm. Accessibility guru Marcy Sutton (@marcysutton) gave an excellent talk on Angular and accessibility that you can see at netm.com. The ngAria module provides Angular bindings for ARIA roles Typography Older users When designing for 65-plus. product design SK: There’s a reason typefaces cost as much as they do. test Typography Managing Web type What is the best way to manage web typography within a team? Robbie Weeden. The bottom line is: present the information in a way that makes sense for the user. A more open line-height is a must in all typography. be sure to also enable ways to interact with those elements via the keyboard ● Native elements: When writing directives for custom UI elements. TX SK: The go-to solution for a lot of designers is to make the type larger. SC Pinnacle SEO @PinnacleSEOTwit Study typography Material design Angular’s Material Design module includes accessible element hints for the browser AngularJS Government guidelines What’s the best way to start to make sure I’m meeting government accessibility guidelines? Any best practices? Adrian Roselli. making it easier to read.Q&As 3 simple steps How would someone go about creating a custom typeface? Ian Crook. january 2015 11 . UK BH: I have two problems with the hamburger icon and accompanying slide-out drawer it triggers.ag/access-262. Hamburger issues What is your position on the hamburger icon? It has split our community in two.  Design the characters Use Illustrator or typeface design programs like Fontlab. Austin. Greenville. web typography management in teams has never been Once I worked meticulously to design a typeface. test. Here are some of the highlights: ● Keyboard bindings: If your interfaces use custom click handlers. but I think that should be up to the user. You’ll find plenty of helpful tutorials for doing so on creativebloq. Take time to program character-to-character spacing and ligatures. Designers should always strive to make their app focused and clean. US NA: There are few Angular-specific considerations. you still have to know your tools. Melbourne. Second. but then when I came to test the typeface in Illustrator. it has become a place for lazy designers to throw the stuff they didn’t think hard enough about to warrant a place within the task flows. Fontographer or Glyphs to design your characters. New York. That said. the top-left of the screen is too far away to reach easily (that can be addressed by moving the icon).

As with all tax matters. properties)... Via the Shopify admin they can then apply region-specific overrides for this collection. I look for excellent communication. they can be trusted with the big stuff. So. UK BH: The first thing I do is look for their work online. which I usually find on LinkedIn. Angular is not so much a framework as a library or toolkit. as this makes it easy to connect weights and styles to HTML elements.io) that you can use to crawl your apps in a way that takes JavaScript into account. hunger and likability. Does this person have any experience? Do they articulate their background in an interesting way? After those first points have been covered. This provides a highly fluent. anyway. io (prerender. function($scope) { angular.ag/ restangular-262). One approach is to create Angular ‘widgets’: applications that occupy a small section of the page that they can progressively enhance by dynamically replacing its content (the BBC handles tabular data on heavily-trafficked pages like this). configurable way to bind complex client-side logic to data coming from API endpoints. Newport. GoogleBot will take JavaScript fully into account when crawling applications. UK NA: Contrary to popular belief. MA NA: As with any context in which search engines meet JavaScript. which will take affect on 1 January 2015. since this allows for toggling of font weights and means everyone can use one kit for that one site. like so: function Widget(properties) { angular. for one search engine. you’re going to have to make some trade-offs. it’s worth seeking professional advice before making changes. Manchester. I’m constantly on the lookout for young people that just love solving problems – these have been some of my best hires. I move on to a phonecall.extend(Widget. The de-facto library for modeling data is probably Restangular (netm. 12 january 2015 VAT rules Shopify has a system in place to deal with the new VAT rules for ecommerce sytems Ecommerce Vat rules How will Shopify help retailers manage the new VAT rules being placed on the selling of digital products in Europe? TheGenieLab. AngularJS Modelling Angular doesn’t really provide a ‘model’ layer – how should I model my data? Stephen Fernandez. It’s also helpful to have a typographic style guide designed in HTML and CSS. As such it makes some assumptions about your API to keep your frontend decoupled and flexible. Rachel Andrew has written a post at netm. but how you compose them is up to you. bar: false }) }) }). Fortunately. Shopify has a feature called Tax Overrides which offers merchants the ability to specify certain taxes on a ‘per collection’ basis.prototype. humility. It’s hard to keep track of licensing and such. The second is their work history. which provides conveniences for binding UI logic to API endpoints. { custom: function() { /* .extend(this. Holmston. and aren’t expected to be indexed. it’s now possible to create a collection (a logical grouping of products) which contains all products that fall into the ‘e-service’ category.extend($scope. } angular. Finally. I consider culture to be as important – if not more so – than skill level. as well as some very powerful primitives to compose UIs and application logic. though much simpler library (netm. My company has published a similar. Your ‘data model’ is $scope . There are also services like Prerender. but is centred around hypermedia. It’s really that simple.. Stoughton. Product design New recruits What are product companies looking for in new design hires? Julia Lawrence. you have a number of options. myModule. so this problem will be obviated entirely . US KW: As a consequence of the new VAT rules. AngularJS App SEO How can I maximise SEO in my Angular app? Michael Wiley. Wales and Miami.ag/andrew-262).. ecommerce systems will need to have the ability to specify separate tax rules for products categorised as ‘e-services’ (for more. Services like TypeKit make it a lot easier.ag/radify-262). One is to box your objects in custom ‘classes’. It provides some generic ways to organise your code. { widget: new Widget({ foo: true. Often the dynamic parts of the apps I build live behind a login wall. For public-facing parts. I mark them up accordingly and keep dynamic content progressive. */ } }). which will be applied in place of their global tax rate setting when they enter their country during the checkout process. If someone proves they are capable of doing the little stuff.exchange Q&As organised. .controller(“WidgetsController”. Angular has announced that by the end of 2014.

.

CSS.com Co-founder and design director. Mule Designer and consultant Dave Rupert Irene Pereyra daverupert.com antonandirene.com . Paravel User experience director and designer tickets on sale now www.generateconf.com valhead. the Internet of Things.com Lead developer. how to present to clients and much more! Mike Monteiro Val Head muledesign. user experience.New york 17 April 2015 Learn responsive web design.

where glass and steel meet rustic furniture The Web Is . Marc Roberts reports january 2015 15 .... is an event dedicated to exploring what the web means to different people. Side PROJECT OF THE MONTH 16 We chat to Donald Sutherland about MapBuildr. including a set of screenprints that capture source code in a way never seen before Workspace 18 Event REPORT 23 Evolero founder Tal Shoham shows us around her team’s new Tel Aviv workspace.. projects & paraphernalia This month Featuring.People. the tool designed to take the pain out of adding Google Maps to sites BEYOND PIXELS Sacha Greif explains why practicing Luta Livre and Brazilian Jiu-Jitsu helps him put work problems into perspective 20 Clients FROM HELL 17 Need LIST 21 Exclusively for net: one business solutions specialist tackles a disobedient client with a big connection problem All the web stuff we’re after this month.

com t: @DonaldASuth net: Why did you decide to embark on the project? DS: Whenever I used to get asked to add a Google Map to a client’s website. in jQuery on a subdomain on my personal site. I’ll admit I’ve taken a long time to push small updates to the site but that’s because I like to go over my code time and time again until it feels right.com and the site activity boomed. and even had people asking to join MapBuildr. which was a request from a member of staff at the Guardian. Luke Beard posted MapBuildr on ProductHunt. I would spend a lot of time trying to find out how to do things like add position markers. The next phase will be to add accounts so you can keep your maps together. and the community of visitors has grown day by day. never be afraid to ask for help or feedback.FEED Side project MapBuildr How Donald Sutherland created a tool to take the trials out of adding Google Maps to websites Side project of the month net: Who are you and what do you do? DS: I’m a bearded and inked frontend developer from the north-east of Scotland. It received quite a bit of interest but it was very basic. Zach Inglis and Luke Beard. not realising it’s just little old me. and to roll out KML (netm.com) last year. . I’ve received emails notifying me about bugs. so I learned AngularJS and rebuilt the entire project. net: What’s the community feedback been like? DS: In the first month I had gained interest from people like David Walsh. 16 january 2015 who kindly retweeted the link to their Twitter followers. Info job: Frontend engineer w: mynameisdonald.ag/ KML-262). A side project keeps the creative juices flowing. chances are you’ll see it out to the very end (if there is one). I built MapBuildr (mapbuildr. net: Are you planning on extending MapBuildr? DS: Yes. I design and develop websites for a living and have been for six years. There needed to be a service that was effortless and gave the creator ownership over the source code. Don’t take criticism to heart either – sometimes your passion can get the better of you. because the chances are someone will see something you haven’t. net: Why do you think side projects are important for designers? DS: That’s easy – if you’re passionate about a side project. I’m planning on extending MapBuildr.

” he says. taking into account if he can reuse work. He then works out the maximum and minimum cost. You’ve really let us down! I make the one-hour drive to where they are. not the cards you’re dealt. Price the client not your time. which shows 66 per cent of freelancers vary rates from client to client. I have sent you a reminder each week. stick it in the air and see which way the wind is blowing. cost. The reception is not very good. well. but it will be enough for the tills. How do you work out how much to charge for your time? Client vs time @Falkowski was the first to show his hand: “Shuddering at a poker analogy. the tills will not work. Client: Your internet is not working again! Guess why ‘my’ internet wasn’t working. clientsfromhell. but you play the opponent.. which means I do everything from concept to the creation of their brand and website.. If one is fixed. there are some exceptions .” ‫@‏‬Mustafa_x agrees: “It depends on the client and what they are trying to do.” @bigrichardc is more flexible: “I lick my finger. “and out comes a figure. we have a queue of customers unable to pay. and warn the client once again not to use the internet.. Then I get a phonecall .. they’ve used up all the internet allowance on the SIM card. After a client’s business launches. but I put together something that will allow the company to manage until the telecom company gets to them.” @cole007 tweeted us his freelance rate survey (netm. so it’s far from an ideal solution. What do we do without the internet? Me: I told you to order the lines two months ago. Client: Our credit card machines are not working. Scope. and do not give out the Wi-Fi password. Illustration: Ben O’Brien huddleformation.” january 2015 17 .ag/survey-262). and the startup opens without incident. Three days later. Your credit card machines link to the bank via the internet.  Me: Didn’t I tell you not to use the internet? Client: Yes. One of them turns to me and says: Client: The internet is not working! Do something! Needless to say. timescale @DowsonCreative says it’s about finding a balance between your time and the client’s money: “I found the point where I was overwhelmed with work and the point where I struggled to land projects and stuck a pin in the middle!” @PiersShepherd uses the following equation: “Scope. The opening is in a matter of days. The first thing I notice is nearly a dozen people on laptops. You must fix this! I take stock and do the best I can.net As a freelancer. However. You will not be able to take payment.Feed How to Decide what to charge clients Staying connected Exclusively for net: the latest in a series of anonymous accounts of nightmare clients Clients from hell I offer complete business solutions for startups. cost. and only the tills. If you do. timescale. you walk a fine line between job satisfaction and not starving. with my personal SIM card. Client: This is not acceptable. Me: Okay. I rarely have much more to do with them. Me: I have installed a temporary 3G internet router. the other two must be flexible. that’s not the worst part.com Client: The telecom company told us the internet connection is not going to be installed before we open.” Answers in the wind @leemg has a minimum and maximum hourly rate. I get a phone call.prosite. but we needed it. “I chuck it in a spreadsheet. I sort the situation for the time being. I cannot stress this enough: do not use the Wi-Fi. Client: I’m not sure you did. A week goes by.

  PROFILE A breath of fresh air Evolero founder Tal (in the foreground) launched the business with a wealth of global experience in the event business behind her. None of us have desktop computers.com) is an event platform that runs and promotes recurring events and grows them into vibrant brands. Isn’t it great? Tel Aviv is a dusty city so it’s in active use almost every day. and my work goes with me everywhere – whether that’s a private meeting room at SOSA or a speaking gig in NYC. The space is all about bringing the innovators’ networks to life. is our whiteboard (3) – during product planning meetings we love to visualise things. Though very popular among tech startups.FEED from the web 3 4 6 2 5 1 In dusty Tel Aviv. Although I dream of powernaps on the comfy SOSA couch (6). to create a hub that grows with each event. In the middle of the room. SOSA offers a variety of mugs (5). a new shared workspace in Tel Aviv. I’ll climb a floor further to visit SOSA’s magnificent rooftop. from social engagement to speaker presentations. which come in handy. salvaged table is my super-fast. Tal Shoham gives a tour workSPACE Evolero (evolero. If I have enough time. It aims to throw a lasso around all event-generated content. and each of us has our own personal favourite. Evolero’s workspace is a haven of rustic furniture mixed with glass and steel. That funky green thing on my desk (2) is my African screen and keyboard cleaner. always present. What we do share with most startups is a love of coffee: the official startup juice. cups and ‘demitasse’. we climb up these gorgeous industrial stairs (high heels are tricky with these!) to the coffee shop and nibble on a muffin or chocolate cake. you can see the whole city and enjoy the breeze. we aren’t big fans of ‘stand up meetings’ so our team has this unbelievable vaulting horse (4) to lean against. In contrast to the rustic. Follow her at @tlshoham . It is around this long wooden table (1) that I share a workspace with some of my team members. Our team has an infinite supply of Nespresso capsules. It’s perfect for jump-starting your brain. From there. lightweight 18 january 2015 Ultrabook. The company recently moved its base to SOSA (‘South of Salame’). they never actually happen! When the lazy Mediterranean afternoons set in.

.

Who knew there were so many different ways to inflict pain on the human body? At the end of the day. Luta Livre. I’m talking about Brazilian Jiu-Jitsu and its closely related cousin. that client is asking you to rework their homepage at the last minute. practicing martial arts in his downtime helps put work conflicts into perspective beyond pixels Getting good requires a lot of discipline and hard work. and it’s a great community resource for anyone who wants to make stuff. almost single-handedly.com 20 january 2015 Brazilian Jiu-Jitsu This month … for Sacha Greif. and you wouldn’t trade it for anything else. and try to get in at least three or four sessions a week. Often. I also find that engaging in a contact sport makes everything else seem dramatically easier in comparison. you’re both after the same outcome. Luta Livre evolved from catch wrestling and is practiced without. I’ve trained in dozens of different cities. I’ve realised that in most work disputes you’re actually on the same side as your ‘opponent’. Brazilian Jiu-Jitsu (BJJ) and Luta Livre both come from Brazil. The main difference between them is that while BJJ derives from Judo and is traditionally undertaken whilst wearing a kimono (or ‘gi’). In this world of replaceable gadgets. They’re what I made my Light Synths with (netm. but also creativity and adaptability. I’ve trained in both sports for close to eight years now. Yet despite all that.ag/led-262 Hackspaces I’m a trustee at my local hackspace Build Brighton.ag/synths-262). and each person will have their own personal take on them. and both focus on applying joint locks and chokes to your opponent to force them to concede the match. Without them. No. you still have days when you feel like a beginner all over again. Tournaments have shown me what it feels like to face someone whose only goal is to do everything in their power to defeat you. and every time I’ve been welcomed with open arms. There are literally hundreds of moves. but at least there’s no 100-kilo behemoth laying on top of you trying to bend your arm the wrong way. Osaka-based designer Sacha (sachagreif. buildbrighton. so sports are a counterweight of sorts. arduino. something that reminds me the world doesn’t end at the edge of the screen. Compared to that experience.com) spends his time working on personal projects including open source community app Telescope . I’m not talking about design. making lots of controllable LEDs would involve a lot of wires! netm. As someone who tends to shy away from conflict in my daily life. I tend to easily get consumed by my work (that’s the risk when you’re doing something you love). confronting this fear has been a valuable lesson. Sure. especially when you get a chance to witness a master at work. you just disagree on how to get there. It has. both design and sport boil down to one thing: people.ly Neopixels These super-bright LEDs can be daisy chained together and controlled individually with a single data wire. it’s wonderful that there’s a massive body of people that wants to make and fix stuff.cc Paris-born. The fact that its hardware and software is all open was a brave decision – there are many copycats.FEED Beyond pixels Stuff I like Seb L ee -Del isl e Digital artist seb. Even after years of practice. though – Luta Livre and BJJ are also wonderfully creative. Arms which then promptly close down to try and choke me out! PROFILE Arduino Without Arduino I wouldn’t be doing anything with electronics. It’s not all about grit and suffering. it’s a great way to meet like-minded people. made it easy for anyone to start with electronics.

ag/type-262). (6) Brendan Dawes’ screen prints capture all the goal scorers from Brazil 2014 using beautifully simple source code (designplusdata. with a pay-what-you-want price (netm.ag/colorCC-262). january 2015 21 . (2) This practical guide to responsive typography by Jason Pamental will help you master the nuts and bolts of web font implementation (netm. (5) FormKeep makes it easy to create form endpoints for designers and developers.com).Need list Need list Stuff we want Small objects of web design desire: from a collection of free web icons to a set of screenprints that capture source code like never before 1 Litmus Builder  2 FREE Responsive Typography 4 Google Icons 3 $25 5 Free Formkeep  Adobe Color CC FREE 6 Varies World cup Source code Prints £35 What we think (1) Email editor Litmus Builder is continually improved through contributions from the community (netm.ag/FormKeep-262).ag/icons-262).ag/litmus-262). (3) The Adobe Color CC app is the perfect way to capture inspiring colour combinations (netm. (4) Who doesn’t love free icons? This set of 750 from Google is licensed by Creative Commons and designed for use in mobile apps and other interactive stuff (netm.

next month The top web design tools for 2015 We review the best new tools that you can’t afford to miss PLUS Learn how to create your own ebooks with CSS Build a progressively enhanced single page app Create a prototype with Sketch and InVision ISSUE 263 on sale 23 December Print edition.co. Google Play. Kindle. Nook and Zinio net.com .creativebloq.uk Digital editions available on iTunes. back issues and special editions available at myfavouritemagazines.

Rolling Scopes will host its first fullblown conference in Minsk. 2015. Psychotherapist Dr Clare Symons added a professional view.. the day ended with a slightly longer panel session to mark Geek Mental Help Week. Highlights from the rest of the day included Scott Jenson’s description of Google’s ‘Physical Web’ open-source project (which aims to bring URL discovery to the real world). Benjamin Hollway (shortlisted for net’s coveted Emerging Talent of the Year 2014) bemoaned the age discrimination he has received working with the web. and Anna Debenham presented her ongoing research on the browser capabilities of gaming devices and TVs. we were treated to Chris Murphy speaking about knowledge and learning in his usual inspiring manner. Brad Frost rounded off the day perfectly with a wonderful summary of all other talks. share their personal experiences. Taking place over three days. On day one.com Fluent DATE: 20–22 April 2015 Location: San Francisco.front-trends. The schedule and venue haven’t been finalised yet.is Marc Roberts (@marcroberts) is a London-based backend web developer who co-founded Neutron Creations in 2008 JQUERY UK DATE: 6 March 2015 Location: Oxford. web developers. incorporating a mix of entertainment.com FRONT-TRENDS 2015 DATE: 6-8 May 2015 Location: Warsaw. mobile app developers and software engineers. adaptable. after its 25 years of existence. UK jQuery UK returns for a fourth year with some of the top names in frontend development.Feed EVENT GUIDE The Rolling Scopes Conference DATE: 1 Feb 2015 Location: Minsk. Emma Mulqueeny announced that the 97ers (those born in or after 1997) were going to use the web to change the world. Unusually. entitled: ‘The web is an educational.css author Nicolas Gallagher are already confirmed as speakers at this three-day festival for frontend lovers – with more still to be announced. the event strives to maintain a ”small-conference feel” by encouraging speakers and attendees alike to mingle. jqueryuk. Day two kicked off early with a CreativeMornings talk from the lively David Hieatt of Hiut Denim. Marc Roberts reports from the event that explores what the web means to some of its top professionals Event report Halloween this year marked the latest conference from Craig Lockwood: The Web Is. It promises practical takeaways you can put to use as soon as you leave. performant.. information and inspiration.com The web is .rollingscopes. PROFILE Date: 30 October 2014 Location: Cardiff.com january 2015 23 . and included the UI designer handing out free beacons to all attendees. readable/writable. fluentconf. Chaired by Andrew Clarke. constantly-changing. accessible. PL Google’s developer expert Todd Motto and Normalize. Cole Henley and Relly Annett-Baker – who have suffered from and written about mental health issues. the event saw 16 speakers gathering to share with the 400 attendees exactly what they think the web is all about. linked-up. STTTTI-enabled pair of jeans targeted at young creative 97ers for promoting mental health via lasers … now available on Nintendo Wii”. CA Fluent – running since 2012 – plays host to thousands of JavaScript developers. BY After a string of smaller meetups and workshops. water-based. but this is definitely one to keep an eye on. the session saw three web professionals – Chris Murphy. Their answers were as broad as the web itself. UK URL: theweb. conf. who shared his vision of rehiring the Welsh ‘grand master’ denim workers. Taking place in Cardiff. and suggested what we could all do to remedy the problem.

1 choice for web designers and developers in one discounted package Print edition only Take out a print subscription to net and get your copy before it hits the shops. If you are dissatisfied in any way you can write to us or call us to cancel your subscription at any time and we will refund you for all un-mailed issues. Prices correct at point of print and subject to change. From £25.49 save up to 40 % digital edition only Take out a digital subscription to net for on-the-go access to our fully interactive edition. For full terms and conditions please visit: myfavm. You will receive 13 issues in a year.49 save up to 45 % Terms & conditions: *Prices and savings quoted are compared to buying full priced UK print and digital issues.Subscribe To NET the No. From £20. technologies and techniques. Each issue is packed with the latest web trends.ag/magterms. . extra images and more. with streaming screencasts. Offer ends 31 January 2015.

myfavouritemagazines.99 every 6 months .99 save up to 61 % Two simple ways to subscribe Online: www.uk/NETSUBS Phone: 0844 848 2852 and quote code BUNDLE14 Your subscription will then continue at £30.co. and take advantage of print as well as exploring the fully interactive digital experience great reasons to subscribe ● Print edition delivered to your door ● 13 issues in a one-year subscription ● iPad edition download ● iPhone edition download ● Money-back guarantee From £30.saving 35% on the shop price and giving you a 83% discount on a digital subscription .NEW Print & iPad/iPhone edition Enjoy a combined print and digital subscription.

Other than that. it’s all been through the network of people we know or have met at events. we have only landed one major deal through someone visiting our website. boosting your profile for future gigs. Nvidia and Intuitive Surgical. but how do you go about attracting one – and what do you do next? Leonard Teo shares his tips interview32 We chat to net’s Young Designer of the Year. In the history of our company. high-profile client. In . we’re privileged to be able to say that we’ve worked with companies such as Autodesk. thoughts & advice business Desktop-last28 Dan Tello explores why the industry is so afraid of mobile-first design. At Ballistiq (ballistiq.com). These jobs bring you the instant prestige of being able to say you’ve worked with these companies. and urges us to start truly embracing a multi-device future Succeed with Larger clients With high-profile clients comes professional kudos. you have to work all the hours God sends Every freelancer and small agency owner wants to succeed in getting a big gig with a large. self-taught CSS wizard Harry Roberts.Opinions. about how he kicked his ‘view source’ addiction The myth of late nights 42 Paul Woods takes down the fallacy that in order to be successful in the creative industry. But where do you start when you’re looking to score yourself one of these kinds of gigs? The unfortunate ‘secret’ about the consulting business is that most of the jobs you will get will likely be based on your relationships.

A large company that wants to build a micro-site would say with a straight face. You can still invoice at the start of a contract and split payments up into milestones. it’s time for the contract to be signed. a web and mobile software development company in Montreal. we work in the media and entertainment industry and attend the major trade shows that attract all the software and hardware companies. but once you build up enough cash reserves to ride the payment cycles. big or small. You might like to consider a higher rate for these long payment term clients. it shows you’re interested in what their company is trying to achieve. Leonard (@leonardteo) is the CEO of Ballistiq. waiting for an enquiry. It’s easy to forget that you’re a business and so you have to sell. following up. Go to where the clients are. You need to have a contract and a lawyer handy. It sounds scary when you start. That means networking: talking to people. having lunches . Industry events are a great place to network. Find out when your potential client’s fiscal year ends and use this to figure out the quarters. it’s important to set the right tone. Networking can help you to find opportunities that you would have missed whilst sitting at home with your Dribbble account. responsive web design and all this ‘stuff’ that we internet pros are obsessed with. PROFILE Many creative or technical freelancers just want to focus on the craft. It’s easy to forget that you’re a business and so you have to sell Large companies also tend to work with quarterly budgets. This helps you work out when you should follow up with your contact. You know you’re good at networking when the people you’re meeting start introducing you to others. or they’ll ask for yours (which should be professionally drawn up) and it will be reviewed by their legal team. and the last month when they need to spend any remaining budget. When working with larger companies.  The number one question I ask any client. is: what are your business objectives? This not only helps me understand the project better. Once you’ve scored a meeting with someone that might want to hire you. Many creative or technical freelancers just want to focus on the craft. For example. most companies get countless emails and LinkedIn requests every day from outsourcing companies. M aking connections Money talk The great thing about working with larger companies is that they tend to have set budgets and are usually more open about money than smaller companies. “We have $15k budgeted for this. have a lawyer do a sanity check and make sure you’re not exposing yourself. Once you’ve settled on the project and budget.com) january 2015 27 . Canada (ballistiq. period. What can you do?” I’ve found that smaller companies don’t have budgets and tend to squirm when you ask them what their budget is.Opinion today’s globalised world. If they ask you to use their contract. The best times are at the beginning of the quarter when they are setting budgets. going out and bringing home the bacon.. and leading you to jobs. calling them. Many of these larger companies don’t particularly care about HTML5. Relationships and recommendations from friends and existing clients cut through the white noise. The contract can be done one of two ways: either the client will ask you to use their standard vendor contract.. it should be about them. It should not be about you. it’s just business as usual. you’re usually at the mercy of their payment cycles and it’s difficult (though not impossible) to demand anything other than 60-day payment terms. They’re more interested in how you can help them achieve their objectives.

VOICES Essay 28 january 2015 .

As former ice hockey pro Wayne Gretzky once said (and as Steve Jobs often quoted). This logic is not sound.. and if you don’t get a message like: ‘Not formatted for your device’ (the first one I tried).” Stop. you’ve won the project. but it’s important not to overlook this distinction. Our projects are well built and well designed. why are we. but with less . Three months later.com on your desktop and browse the latest hot designs the web has to offer. not where we want january 2015 29 .. “Less than 50 per cent mobile traffic? Desktop first. or is it simply because the existing experience is hardly usable on a small screen? It could be either. Is the current amount of traffic related to the nature of the content. to the end of the lifetime of what you built (around three years) is a total of four years. Low usage today isn’t necessarily indicative of low usage in the future. There may be a large potential mobile user base just waiting to be tapped into. They win awards and please our clients. you’ll get a fairly tall. They’re responsive. but is anyone really embracing mobile-first design? Dan Tello argues that we should start building for a multi-device future As developers. An overwhelming amount of responses implied an underlying belief that the decision to build mobile-first is primarily related to the amount to go. whatever it may be. but when it comes time to start a project.” Say a sales lead comes in and you pitch your strategy to the client. Why is it that in nearly every award-winning desktop experience we’ve seen or built this year. singlecolumn view of everything you saw at a desktop width. “Skate to where the puck is going to be. experience. Open up Awwwards. Open the same URLs on your phone. our team and our clients so afraid of actually putting it into practice? I sent out a survey to get a feel for people’s hesitations about mobile-first. stacked and boring? I’d like for us to step back and honestly evaluate the state of the multi-device web. You’ll find site after site of beautifully done desktop experiences. not where it has been. why are smaller devices still treated as second class? Mobile-first seems to be generally regarded as a positive thing in our industry. there is a breakpoint at which everything goes from immersive.Essay Mobile Desktop-last: what are we so afraid of? Illustration by Ben Mounsey It may be the buzz-phrase of the moment. Where is the puck going to be in four years’ time? Will you still be glad you decided to budget time into supporting IE8 instead of pushing the mobile experience? The implied assumption that designing for small screens first will somehow be detrimental to the Pitching for the future The data shows where we’ve been. From your initial sales pitch (12 months ago). and in another nine months.com or theFWA. revolutionary and rad to static. Low mobile traffic is not necessarily indicative of low mobile interest. They’re awesomely beautiful on cinema displays … but they’re completely boring on your phone. we take great pride in our work. In an industry where the term ‘mobile-first’ is ubiquitous. you deliver your beautiful new baby into the world. of mobile traffic the client is currently receiving.

headers. Your users love it. but it often means burning endless hours on complex workarounds. accelerometers. 30 january 2015 Nuance and intention are lost. it’s time to bring some much needed life to mobile browsers everywhere. put an interactive prototype in the hands of your client and watch the excitement spread. On the other hand. Assume that in both scenarios. Additionally. Which starting point better positions you to move forward towards the best overall user experience? Do you wish more apps were like desktop websites. On mobile we have touchscreens! With cameras! gyroscopes. your content and UI has the potential to become laser-focused. and you get that ‘app’ feeling for free.” says designer and mobile maven Josh Clark (@globalmoxie). it’s the imagination. all you might need to do is adjust the layout with some CSS to fill the space. design or interaction into a place where it doesn’t fit. “It’s not the technology. This is exciting! Instead of presenting cinema-sized static comps. Every interaction and piece of content has been carefully whittled down to its essence – in part. ‘Simple and focused’ need not mean ‘boring and limited’. creating an impact “Small screens are limiting. mega-menus. Now let’s build a well-crafted desktop-only web app. hover states and content length suddenly become problematic. horizontal screen and things like a mouse cursor. assuming the same functionality as the native app described above. geolocation! All connected to the internet. and we have all the room in the world for navigation.” I often hear this argument from designers who are accustomed to wowing clients with cinema-sized Photoshop comps. everything is perfectly sized for your screen. Why? Because it was designed specifically for the small touchscreen in your hand. There’s plenty of breathing room. The interactions are slick. This can result in patterns that simply don’t translate well to a tiny touchscreen. to other people. Now we’ve put our mobile-first fears to rest.C. Now remove the ‘-only’ suffix from the two (mobile/ desktop) previous tasks. put an interactive prototype in your clients’ hands.VOICES Essay desktop audience is simply false. I can’t wait to see what we build. and watch the excitement spread Proof it works There’s nothing like using a well-crafted native app. There’s no temptation to fill space with superfluous fluff when the space isn’t there. There is no ‘squeezing’ of content. We’ve barely scratched the surface of what we could do on mobile. By designing for small screens.com/extend and pushing code at github. large tables. it’s a limitation of client meetings. content. geolocation! Instead of presenting cinema-sized static comps. designed and approved assume a large screen. Because we built with the desktop experience in mind. area senior frontend developer at Viget. you’re starting with intensely focused content. because that’s what you started with. Elegance is sacrificed for the sake of time and budget. delivering your user exactly what they’re looking for. a mouse and a keyboard. But this isn’t a limitation of technology. Beginning small just might be the key to making something truly big. The site is beautiful and wins an award. footers and asides. We have touchscreens! With cameras! Gyroscopes. to translate a mobile-first design to tablet and desktop sizes. desktop and everything in-between. PROFILE accelerometers. Long select lists. And it’s true – small screens are less impactful in a client meeting. You are in a better position to make informed decisions about whether or any additions or enhancements are necessary. because there simply wasn’t physical space to do otherwise. or that more desktop websites were like native apps? Which direction scales more easily? With desktop-first. a wide aspect ratio. and untethered to any location. He can be found blogging on viget. the initial design patterns that get wireframed. We do our best to jam it all in there. The truth is that there are far more opportunities for groundbreaking experiences on mobile devices than there are on desktop.com/greypants . we knew all along that we had to deliver experiences to mobile. our design assmues a wide. Hold that thought. and no inherent need to change the markup when moving from smaller to bigger. Dan (@dantello5) is a Washington. and the content is focused and easy to get to. The translation is smooth. D. and solutions have to be hurriedly shoved in place if they are to make it in before launch.

.

Info job: Frontend architect and performance engineer w: csswizardry.com t: @csswizardry 32 january 2015 .

Oliver Reichenstein Harry Roberts Words by Martin Cooper Photography by Rob Monk The self-taught CSS wizard on showing veteran devs how to improve their sites. why it’s worth hanging on to those unsexy old tools and the dangers of ‘view source’ addiction february 2013 33 .

With that cleared up. he planned to become an architect. a well-crafted fib. in fact. in his words. does Roberts habitually right-click and ‘view source’ as he hops around the internet? “I used to be terrible for that when I was first starting out. I could learn what I wanted to. ‘If it ain’t broke. It’s Peeking under the hood . when I wanted to. break it and see how it works’. “I’m a consultant frontend developer and frontend architect. the fun is solving problems and tinkering with things. What drives me is finding the solutions to these things with CSS. That’s where the fun is for me. I do a lot of speaking and a lot of teaching. As such. I have to tinker with and reverse-engineer. “Anything that has inner workings. surrounded by architects and their plans. That’s why I’ve stuck with CSS.” Roberts explains. ‘If it ain’t broke. “It’s what pushes the web forward and I wouldn’t be a web developer today if I couldn’t view source. I’m the sort of person that says. Roberts had no formal training. “I realised we should get an online portfolio. I don’t know any JavaScript. I’ve been working for myself for a year today. I just picked things up and ran with them. “I tend to work very short stints with clients all over the world. One downside is that I haven’t been formally introduced to programming languages. CSS – he flies under the Twitter handle of @csswizardry. finding himself excited enough by web development to fully immerse himself in it.’ This is. I have to tinker with.” he says.” Roberts smiles. floated by Opera’s Bruce Lawson. That’s why I’ve gone down the large-scale sites and applications route.” His specialism is. there’s so much that you can do with it and so much that needs to be done to it. and spent his afternoons working at a local print supplies shop. Growing up. Around that time he and a friend started doing design work for local firms – making. helping people guild their UI architecture and helping teams work better together on long-running products. I have a fascination with everything.” So. Sites are getting bigger and more complex. Anything that has inner workings. Harry Roberts sketches out the actual facts of his life thus far. Even for such a limited language.” Where to begin? “For me. At that point I concluded I was a much better developer than designer. “Being self-taught is a gift and a curse. that happens to be in the form of CSS. Before that I did a three-year stint as a senior developer for Sky. I haven’t been in an environment where I was shown what I needed to learn. terrible flyers.” 34 january 2015 more product-led builds as opposed to just websites. of course. I have a fascination with everything. it does indeed read: ‘Built by Harry Roberts. why has he dedicated himself so assiduously to Cascading Style Sheets? “CSS is still at a point where everything is open to be solved. at scale. I probably account for half of Wikipedia’s monthly throughput. actually. if you view the source of the Girls’ site. break it and see how it works’. and there’s a move towards “I’m the sort of person that says.” a gift because I can learn things at my own pace.” he says. logos and adverts.” he smiles. Roberts got into the web “by accident”. I  probably account for half of Wikipedia’s monthly throughput. So.Voices Interview   You might have heard a rumour that Harry Roberts used to be the web master for Romanian pop outfit The Cheeky Girls and. “At the moment.

the problems usually come from the business level.ag/NHS-262) “I had a heated debate with John [Allsopp] at a conference recently. “Don’t use a tool just because you’ve read an article that says it’s cool. with a portfolio that boasts the likes of the BBC. I’ve stopped my voyeuristic peeking under the hood. ” he smiles. do firms do that result in sites that are slow? “Actually. I don’t care what someone’s code is like. sure. “You can’t work like that. “Large web pages with extrane- january 2015 35 . “It’s a real mess. Are knives bad? Not if you need to chop some vegetables …” He suggests being “I’ve realised that users don’t care what the code is like.Interview It’s a great way to learn. “It can be daunting.” However.com and the Financial Times. he’s trying to kick the habit. Sass. “has the potential to be bad if used incorrectly. however. “But those sites handle millions of people every day. What you have to remember is. Roberts built the UI Toolkit and architecture (more at netm. NHS. operation and  efficiency are the developers’ problems to solve. “Sass. You put things into Above We caught up with Roberts at one of his favourite spots. it’s imperative that people care a lot about source code when they’re one of the developers tasked with building and maintaining a site. and approaching it as a nimble complement to what you already know. but still works. One area Roberts feels still needs a little more diligence is working with preprocessors. as a user. Booking.” Often Roberts finds a company might not understand performance.com. It’s like saying guns are bad. not just a dev one. Rather it takes the view that the site’s speed. Are guns are bad? Not if you’re hunting. Don’t get me wrong – I’m a massive fan of Sass. Roberts has learnt to take a more detached view. “Can he stop thinking about the process behind it? Can it be just about food?” These days.” he explains. “I’ve worked with people who I look to as fantastic developers.” He stresses that it’s hugely important to be aware of the fact that what preprocessors spit out is what ends up on people’s machines. It’s just not important. Going in and telling those guys how to build better sites makes for an interesting dynamic. And. they add complexity that may come back to bite in the future. But. “His stance was: ‘Don’t use Sass’. ‘garbage in. Roberts is already playing in the big league when in comes to clients. ‘No – if you’re bad at Sass. whereas mine was.” A site that has ugly code. “I wonder if Gordon Ramsay goes out and can eat a meal without passing judgement?” he muses. Belgrave Music Hall and Canteen in Leeds Right For the NHS site. but also a healthy group of detractors. then don’t use Sass’. what sorts of problems is he brought in to solve – what. In production. it would be important to me. is infinitely more valuable than a site with lovely code that doesn’t work. A lot of companies don’t realise that performance is a business problem. pragmatism trumps perfectionism” it and often people ignore what comes out the other end. has legions of fans.” The business Despite his relatively tender age (he’s this year’s proud owner of net’s Young Developer of the Year award). Last issue (261). for example. “A problem. it’s all about context.” Roberts explains “is that Sass can be something of a black box. in other words. Roberts points people to the source code for Facebook and Google. He felt that although they might make developers’ live easier in the short term. one thing I learned quickly in a product environment is: pragmatism trumps perfectionism. in the last few years.” So. as it can become tiring. As a developer working on one of those companies. but it’s not a magic bullet. Look at the problems you have and find out what’s going to solve them. John Allsopp cautioned against preprocessors. “One thing I’ve come to realise is that. in so doing. There’s only so much a developer can do to improve the performance of a poor feature decision. garbage out’.” he says of those times he’s found himself consulting with such large and respected organisations.” Spotlight on Sass Naturally.” In Roberts’ view.” Roberts emphasises. of course.” Roberts recalls. cautious about when you use Sass. and the users don’t care … Those sites are highly performant. As an example.

net) and Chrome’s Dev Tools. Before I go into a client. Roberts points out. greatest and shiniest new technologies. and those problems tend to come from the business. can be a risky place to be if you want to build sites that have a huge reach that nets a lot of money for the business.” Roberts says. in 1968. If I can. You’ve got new stuff for new browsers and old stuff for old browsers. not being overly ambitious. he says. “Elsewhere. Reduce the number of moving parts – if you can get rid of it. The adage is named after programmer Melvin Conway who. to share his wisdom about CSS Above Fasetto brought Roberts in to build a solid and scalable UI for its new product ous features lead to bloated code. opined that ‘organisations which design systems … produce designs which are copies of the communications structures of those organisations’. Roberts dives into the code.” With this overview established. When he can’t get on-site.” Built to last an agency where staff turnover is likely to be high. if you need [the site] to last a long time – and this is a very unsexy stance to take – just use the thing that will work everywhere. ” he says. “I work in companies where sites could already be three years old and might need to last for another eight. “understanding the business is very important in understanding how and why a product was put together. There’s no framework or language that’s going to make your site last 20 years. sustainable might just involve writing code that can be worked on by other people when you’re gone. Beyond that. I exist to solve business problems. for example.es) is a project Roberts is doing for free. For example. as if by magic. do so. although this does have its inherent difficulties. ag/parker-262). this is is a good developer working in a tough environment. At the end of the day. to get a view of their problems. A definition Sustainabilit y does.” The cutting edge. to ensure compatibility with old browsers. Suddenly you realise this isn’t a bad developer. The thing is.Voices Interview Top CSS Guidelines (cssguidelin.” When it comes to the nuts and bolts of code dissection. he recommends CSS Lint by Nicole Sullivan (csslint. I’ll have a Skype call with a couple of developers and somebody above them. I try and get a 30. It’s also about scaling the platform. So looking at code is very political and business-orientated. they plan to build fallbacks. software interface structures reflect the social structures of the organisations that produce them. and not showing off. however. if you’re working in . the old stuff works everywhere. another big concern for Roberts is building sites that are sustainable – ones that last. It’s all about cost savings and efficiencies. It’s about building simply. “The key is simplicity. A lot of the work I do is pushing back on superfluous stuff … saying ‘the user won’t miss this’ . “You’ve instantly given yourself two lots of work. simplicity is always the answer. they may want to use a new technology and. And the code base can be big. “If you can get rid of it. Roberts swears by Parker (netm. mean different things in different contexts. he explains. So. “For me.000ft overview of the organisation.” Reflections Roberts cites Conway’s Law. do so. Essentially. “I could look at some source and think ‘this is ridiculous. explaining that he spends a lot of time poring over the code. Roberts admits. he’ll do review code remotely. There’s no magical framework or tool that’s going to make your site last 20 years” Along with making sites run quickly and efficiently. and ones that can be maintained.” A lot of clients are prone to falling under the spell of the latest. sustainable might involve thinking about how long a site can be left running before we need to start sharding databases. 36 january 2015 why has the developer done this?’ But I could sit with the developer for five minutes and they could explain that – for whatever reason – they’ve got to support a particular device. At the end of the day. but they will care that they’re now using a slow website’.

.

Sometimes ideas can be vetted with a pen and a paper.com When I create a prototype. This makes the client feel more comfortable about the product because I’m able to show that every aspect was thought through. who’s the audience and how much time do I have to complete it? The goal of a prototype is to vet whatever’s in your head in the shortest possible time frame. I factor in the following variables: how far do I have to go to communicate what’s in my head. I want to effectively answer any questions I had before prototyping. I sketch or build a clickable PDF.com onestraythought. S co t t Hurf f Product design specialist scotthurff. I may end up writing HTML. These allow me to explore and play – if I were to start by using a particular tool. If my intention is to quickly communicate a concept or rapidly test IA. Ultimately. 38 january 2015 UX designer My greatest prototyping tool is a pen and notebook. I show the entire process. including those early sketches. When presenting the prototype to a client. jump to a specialist tool or crack out your HTML. other times.com Founder. a quick-and-dirty iOS app. Working on paper allows me to focus on getting the behaviour right initially. rather than the layout. CSS and JavaScript. NiceUX Remain flexible and consider the variables each project brings. Once a design is fairly solid.VOICES Big question Process What’s your approach to prototyping? Work everything out with a pen and paper. as efficiently as possible. my thinking would naturally be constrained to the widgets available. For more complex nuances like data binding or responsive content structures. that’s when I move into a tool like Axure for refinement. . CSS and JS skills? The pros share their personal techniques Jon H a dden Br a d Nunn a l ly niceux.

and keep them engaged over time. Jeykll or Hammer for Mac. a higher-fidelity interactive prototype created in Axure or HTML may be appropriate.ag/ reichelt-262) the Government Digital Service’s head of user research Leisa Reichelt speaks of how her approach to prototyping has changed. The easiest prototype you can create is a narrative arc. and has the advantage of baking progressive enhancement into the design process. Too often. The most important thing is to understand what you hope to achieve before making any decisions about the fidelity or interactivity of your prototype. Working like this gets you closer to developers. For the heavier-duty projects. making for better organisation and implementation of ideas.net Independent consultant Senior UX professional I have a background in documentary filmmaking and have spent years making non-narrative things easier to consume by turning them into narratives. Bad Robot Design badrobotdesign. Make it a priority Before you dive into a project. paper prototypes or something simple using Prototyping on Paper could suffice. then pass it back for refinement. and the IA should be the thread running through it.ag/priority-262) explains why prototyping is something every designer should do first. this tutorial from Daniel Bramhall (netm. If I am working closely with other disciplines.com willhacker. something we need to do much more of. engage the audience with a hook or problem as soon as possible. designers only consider the perfect outcome for their design. This applies to prototypes. Providing you with an insight into the functionality of your design. If you’re working on a single product for a long time.Donn a L ich aw Wil l H ack er greatnorthelectric. Prototypes should have plot points. as well as the end client. But if you are testing terminology to flesh out the IA of a mobile app. The web is not perfect. resources Prototype to success In this brilliantly insightful talk (netm. Sometimes it’s a sketch. Keep in mind that prototyping is part of a larger design process. as this neat presentation (netm. january 2015 39 .ag/apple-262) showcases their initial methods so you can see how your technique matches up. G avin W y e UX designer gavinwye. CSS and a bit of jQuery can also be good – I have found it immeasurably useful to learn the rudiments of frontend code. too. lighter-touch tools like Flinto and even Keynote are great for getting designs on screen fast. testing your ideas for effectiveness is vital.com The tools I use change depending on the problem I’m trying to solve. it’s a good idea to build your own framework and use this code to prototype. If you want to test whether a design is usable. Take code from the developers. An insight into Apple Have you ever wondered how the top dogs at Apple approach prototyping? Wonder no more. Ya el L e v e y UX designer. not an end in itself. Using HTML. sometimes it’s a rough visual but most often it’s in code using CSS frameworks and tools like Mixture. ‘hack’ it to meet your needs. Axure is a powerful tool. This way we can get something in front of users and stakeholders – in a browser on the device they choose – quickly.com Prototyping is a great way to communicate with the rest of your team.

we started by looking at our existing brand and teasing out the key properties of BBC iPlayer – the things that differentiate it from the other VOD services. tablets and internet-connected TVs. We used these to develop a set of personality traits that everybody involved could refer to. HTML. We are so privileged to have such an engaged user base. InDesign and Illustrator to OmniGraffle (netm. net: What was the most rewarding part of the redesign project? KÇ: The team felt a lot of responsibility towards the millions of regular iPlayer users. diary studies and in-depth interviews for formative research and then used everything from guerilla testing to iterative user testing in our in-house lab and home visits. Getting the balance right between taking advantage of the native opportunities of each platform and maintaining consistency was an ongoing challenge. so keep an eye on how we iterate the product! . whatever device they may have. Q&A Kutlu Çanlıoğlu The creative director behind the BBC iPlayer multi-platform redesign on how he balanced familiar patterns with native advantages Info Job: Creative director. Proto. net: What were your initial steps? KÇ: We knew from the get-go that this would be a long project and that we would have a huge number of decisions to make. prototyping in Keynote. We also wanted to make it easier to find programmes.com) for project management. Establishing this common vocabulary from the start meant we all knew what was important and could use that to guide our decisions. Flash. we received invaluable constructive criticism. The relaunch in May was very much a new start for us and we are already working on very exciting projects to make BBC iPlayer even better. Our users increasingly use iPlayer across multiple devices so we wanted to make sure we were reusing familiar patterns. I think the lesson is you need to bear in mind what’s right for your circumstances. so getting to the end of the redesign and finally unveiling the new iPlayer to our audience felt great. So. Alongside the very positive feedback. so the search journey is very prominent to help get them straight to what they’re after. which is exactly what we needed to evolve the service across all platforms.co. Fireworks. lay the groundwork for a more personalised service and create a more coherent experience across devices. we focused on bringing the user experience on all different platforms closer together.Voices Q&A essential for us to be able to serve as much of the BBC’s audience as we can. The general wisdom in responsive websites is to design mobilefirst but that can lead to the desktop experience being compromised. net: What key tools and technologies did you use? KÇ: Everything from Photoshop. That’s something we couldn’t afford to let happen as a very substantial percentage of our users use iPlayer on computers. They are often on the go and looking for something very particular to watch. net: What kind of user testing did you do? KÇ: We started out with focus groups.ag/graffle-262). net: What were the main challenges involved in creating a multi-platform experience? KÇ: iPlayer is available on hundreds of devices across mobiles. BBC iPlayer w: bbc. With this redesign. in order to make sure we got the design right.uk/iplayer t: @kutluc net: What was the main goal behind the redesign? KÇ: To help our users discover new programmes and start shifting perceptions of BBC iPlayer from a catchup service to a destination in its own right. It’s 40 january 2015 net: How did you tackle design for smaller devices? KÇ: We try to be mindful of the users’ frame of mind when they access iPlayer via the mobile views of our responsive site and mobile apps. As we have dedicated apps that cater specifically for mobile and tablet users we decided to go against general wisdom and design desktop-first.io and Trello (trello.

.

Outside of work. At Edenspiekermann. Of course. someone in your management is either failing at their job or taking the mickey. But putting those cases to one side (after all. day and night. Got a partner and kids? Forget about them. and And agile is one way that agencies can achieve this. It’s simple maths. four or five late nights every week. if you’re working three. the occasional late night before a deadline is absolutely fine. often this practice doesn’t end as an intern. and won several awards for his work. every young creative is brimming with enthusiasm to prove themselves. So if the team has 20 working days in the sprint. This was sold as an integral part of being a creative: work every possible hour. and we wouldn’t have it any other way. One of the ways that we manage a sustainable working environment at Edenspiekermann is by using agile working practices such as scrum [see page 96 for more on this]. he likes to draw mildly offensive pictures of himself (often in the nude) . In the past Paul (paulthedesigner. Want to win an award? You have to work late. In an agile process. A ScrumMaster (the facilitator of the process) informs the team and product owner how many working days are in the sprint. directly under my Berlin apartment is a design studio. For agile to work. burnt-out staff (and ultimately high staff turnover). Long-term evolution of a digital product requires a sustainable approach. Our responsibility as creative and project leads is to protect young creatives from burnout early on in their careers. and you might get an internship. who. rather than the oldschool ‘fixed handover deadline’ model that results in unenthusiastic. brimming with enthusiasiasm to prove themselves PROFILE Many moons ago when I was in art school I was introduced to a fundamental pillar of the creative industry: late nights and weekend work. the product owner must remove some tasks before the team commits. Too often agencies take advantage of this. to be fair). In the creative industry. over half still consider late hours normal practice: work every possible hour. and you’ll keep your job here. waterfall processes and the ridiculous notion that digital products can never be ‘finished’ are long over. And I’m pretty damn proud of the work we do. and should be undertaken without question. I’ve come to realise that the statement should read more like this: work hard and you’ll do well. late nights are often displayed as a badge of honour. Want to do great work? You have to work late. As we know. The commitment between the team and product owner at each sprint planning becomes almost sacred: the product owner agrees not to push extra work into the sprint. Of my university group. assholes will be assholes). and the estimated time for the selected tasks is 30 days. as with any career.ie) is a design director at Edenspiekermann. we have been working like this for over three years. It was reinforced when I started interning. day and night. as a project owner. But. transparency and trust is paramount. Too often agencies take advantage of young creatives. Think of it like this: sustainable long-term product development. the client is heavily integrated into the team from the very start. As I write this (at 8pm on a Sunday evening. Sadly. watching on as 30-something year-olds huddled over their iMacs past 9pm every night: work every possible hour. The days of lengthy spec documents. a junior or even senior designer. You have to work late. and you might get a job here. There a group of sweating designers in there. week-in week-out. And do some better work. They are involved in the planning of timed work sessions called ‘sprints’. At the start of each sprint. The sad irony is that the myth of long hours is exactly that: a great big lie. day and night. Wake up.voices Opinion Business The myth of late nights Paul Woods debunks the great fallacy that more hours equal more success 42 december 2013 three years as design director at Edenspiekermann I can count all the really late nights I’ve worked on two hands. how can creative agencies build a sustainable work culture and still produce great work? the team commits to a set amount of features. It’s time to get a life. and the team agrees to deliver the work to which they originally committed. are huddled over the same illuminated iMac displays. everyone plans a list of features that will be completed in that sprint.

.

This was then exported as a simple grid mesh. won FWA Site of the Day and earned countless plaudits across social media. Autodesk Maya.js were used to bring Pablo to life online. but a side-project that came about through a conversation between web developer Gordon and art director Van der Haar. He’s the author of The Book of CSS3 and The Modern Web w: about. It isn’t a promotional site. to which the illustrations by designer Yuen were added as a texture. Pascal van der Haar and Jono Yuen.js. Pablo began life as a model constructed in Autodesk Maya.in his first week online Pablo was seen 60. WebGL. The models 44 january 2015 were then brought into the browser. WEB AUDIO PABLOTHEFLAMINGO.” says Gordon. Pascal van der Haar netm. “I was able to create a precise form that could be directly mapped to the physics base.000 times. Matter. Peter is a veteran web developer who now works as a technologist and frontend lead at rehabstudio. The response from the public has been incredible . and was the largest ‘aha!’ moment of the whole project.js and physics library Matter. where 3D modelling library three.com. Jono Yuen jonoyuen.Gallery Inspirational sites PE TER GASSTON Sensational design and superb development three. and he’s brought to life beautifully in fully responsive WebGL.js.com A one-trick site.COM Nathan Gordon cinemont. Pablo is the result of a collaboration between authors Nathan Gordon. but what a delightful trick! Pablo is a flamingo who loves to dance.me/petergasston t: @stopsatgreen .ag/haar-262. This gave me the result that I was after.

as he included many references to classic processing algorithms and models from other 3D graphics projects: Game of Life cellular automaton. Built by Adelaide-based developer and friend of the band James Reid. the site uses the three.js WebGL library for its 3D graphics. “A hugely enjoyable interactive WebGL music video experience. ‘Why not put it in the video. At one point. Hopalong Orbits … “James was reading about tesseracts. with people dancing around it in space?’” Alpha Beta Fox singer Tanya Giobbi says. Australia.” The site isn’t optimised for mobile. the 4D tesseract cube.js.Inspirational sites three. “We thought it was pretty awesome. viewers even get the chance to alter a video clip of the band by changing parameters with dat. It seems the site was something of a learning experience for Reid.com/AlphaBetaFox Alpha Beta Fox is a self-described ‘dreamy shoegaze’ band from Adelaide. psychedelic video fits the music style perfectly. The futuristic.NET James Reid for Alpha Beta Fox facebook. but it does work in one. and the Web Audio API to play the music. Kaliset fractals. and SomethingNothing. Desktop-only though” Paul Irish (@paul_irish) january 2015 45 . less common environment: it has a VR mode for Oculus Rift or similar devices. then thought.net is an interactive music video for its song ‘Something / Nothing’. WEBGL SOMETHINGNOTHING.GUI. Web Audio API.

WEB SPEECH API 40TOGETHER.Gallery Inspirational sites si t e of t he mon t h HTML5 canvas API. .com This year marks McDonald’s’ 40th anniversary. The grid layout and posters were built using Pixi. but you can view it on Razorfish’s portfolio site at 40together.js. there are two things here that really catch the eye: the beautifully animated interface.js WEBGL. even on mobile devices. and it’s celebrating by presenting customers’ memories spanning five decades. The system that creates the typographic posters uses natural language 46 january 2015 and syntax analysis to deconstruct each sentence and tag words based on the sentiment it contains.com. in an interactive application created by Razorfish.COM Razorfish razorfish. A custom 3D renderer was built on top to provide the transitional animations and make them perform smoothly. Goodboy Digital goodboydigital. The cool thing is this all happened in real time!” Users can also share memories through speech input in browsers that support the Web Speech API – another great enhancement in a site full of beautifully considered details. Built entirely using the HTML5 Canvas API.com. Goodboy’s technical partner Mat Groves says: “We ran the sentiment information through an algorithm that would lay out the poster and render it using some custom-made webGL shaders. a 2D WebGL renderer by Goodboy Digital. The site is no longer live.razorfishawards. and good-enough-to-eat typography. Pixi.

rather than just using flashy visuals for their own sake.com Ionic Security ionicsecurity. The overall effect is to ensure the emphasis is on the information.js vector library.Inspirational sites HTML.js. It’s a clever effect. the technology is simply amazing! Explore 40 years of McDonald’s memories. HISTORY API “Mindblown by this site. Kudos Razorfish” Adam Safar (@xadusx) ionicsecurity. “We used Paper. the pixels are contained to a smaller area of the screen. On mobile they are gone altogether. including triggering changes on scroll.” lead developer Ramsay Lanier says. CSS. The JavaScript to run the animation. made with the Paper. ensuring the site is smooth and responsive to input. but I’ll make an exception for this. january 2015 47 .com I’m not usually a fan of parallax websites that hijack the scroll. The site is laid out with Isotope and features CSS3 animations and transitions. took only 400 lines of code. a super powerful animation library. Each swipe of the mouse moves between pages.” On tablet. presenting the content in a way that allows you to read it at your leisure. as would happen on so many of the site’s badly designed contemporaries. where performance is more limited. Continuity between pages is provided by the little cloud of pixels that form a data visualisation. rather than frantically watching it rush past. “We only needed one HTML5 canvas element to achieve the effect.

jQuery. address some big user frustrations. while Masonry is used to lay out the flexible grid. events and publications. My first Jekyll site and excuse to try new things” Chris Coyier (@chriscoyier) 48 january 2015 .js WELLCOMECOLLECTION. The site is built on Drupal. UX designer Eleanor Ratliff says. calls itself ‘the free destination for the incurably curious’. Masonry. and its new. jQuery UI and the AmplifyJS components library are in place to generate the common page elements. Developer Gareth Estchild says. The backend developers replicated the code from our HTML templates. which lead to some challenges. responsive website has the same attitude. like flagging clearly on the listing pages when an event is fully booked.” “It was very fun to work with @katiekovalcin on her new personal site.org London’s Wellcome Collection.ORG Wellcome Collection wellcomecollection. the site promotes installations. along with some exclusive digital content – including games. a museum of medical artefacts and artworks. Performance and findability were obviously foremost considerations in building the site: it’s very quick to load even on low-bandwidth mobile data connections. “Simple little things.Gallery Inspirational sites Drupal. “Drupal is a bit notorious for getting it to spit out what you want. which means we’ve been able to achieve good semantic markup.” The layout relies heavily on JavaScript: jQuery. Developed by the Collection’s in-house team. AmplifyJS. and key information such as the address and gallery visiting times are present on every page.

they rotate. geometric textile patterns that Dusen Dusen creates. What makes this site are the little geometric patterns scattered around. and has a custom Grunt set-up for creating web-ready SVGs from Illustrator exports. Jekyll. they animate their stroked lines … they are the detail that the whole site hangs upon. It’s hosted on GitHub Pages.” Katie says.net A simple personal portfolio becomes something special in the hands of Katie Kovalcin.in. using the increasingly popular static pages generator Jekyll. designer at Happy Cog and net’s Young Designer of the Year 2014. What I really appreciate about this site is the sense of personality. where the SVGs aren’t present. making it easy to update. The patterns glitch. “The exciting energy of their patterns and shapes is something that I wanted to capture for the web. january 2015 49 . The site was built by Chris Coyier of CSS-Tricks. Chris Coyier chriscoyier.” Such is the energy of those shapes that when visiting the site on mobile. the experience feels a little diminished. and they work exceptionally well.IN Katie Kovalcin kovalc. and the feeling that it’s been designed by someone with a very clear vision of the end product. “I was inspired by the bold. Grunt KOVALC.Inspirational sites SVG.

Blenderbox’s Jason Jefferies says. Mellon Foundation supports humanities and the arts. and search is used cleverly to get users to what they’re looking for quickly. It’s a site that knows why its visitors are there. the layout and content is pleasingly simple and clear. we cached popular queries and worked with the client to idertify appropriate sets of years. a more fitting method of input for smaller screens. HISTORY API MELLON. Text is nicely laid out with an emphasis on focus. . to limit results. and gives them what they want with ease. Its redesigned site is nicely responsive. “To mitigate the performance issues. and although it could benefit from a little more image optimisation to improve load time. CSS. This redesign pays a lot of attention to usability.com The Andrew W. mobile users are redirected to the Advanced Search page. The Grants Database page searches 45 years of grants.” 50 january 2015 This led to a very smart consideration of form: where desktop users are shown an interactive map displaying where the Foundation’s money is spent globally.Gallery Inspirational sites HTML.ORG Blenderbox blenderbox.

.

trends and tools that helped it become a leading search powerhouse Chris works as a digital designer at creative brand-building agency TPA w: mousdale.Sublime design & creative advice This month Featuring.com t: @iamtomnewton Brief How we built 64 How Great Apes built a tool to enable a coffee company’s customers to dip their toes into 3D design and create their own coffee container 52 december january 2015 2013 We’d like you to design a site for a fireworks or pyrotechnics company... The best portfolio sites mix image-heavy case studies and plenty of info. or build a site for a huge pyrotechnics firm that puts on ground-shaking public displays... firework sites Profiles A nd y B o o t h Andy is a web designer at multichannel consultancy Practicology w: practicology. .com t: @theandybooth C hris Mou s d a l e Profile Pros at digital marketing agency Forward3D share the tips. Clients include Tesco and the BBC w: iamtomnewton. You could design for a small independent firm that sells fireworks to the public.com t: @chrisedmo 58 T om Ne w t on Tom works at small agency Somewhat_. Focus on 56 Design Challenge This month. Gene Crawford looks at how to get the balence right.

(3) Promotional areas highlight the social aspect of the site. My month What have I been doing? Completing the responsive retrofit of Hobbycraft’s website and designing a ‘click and collect’ checkout for another retailer. best of all. or which fireworks complement each other. Providing relevant product information and a product selection tool will drive sales. Customers can see what each firework does with a preview video and. but you can’t deny its commercial success! january 2015 53 . What sites have I visited for inspiration? The new argos. The search function can support multiple fields. fast. (4) Each product comes with a preview video to show exactly what the firework looks like and give the customer realistic expectations. combine fireworks to make a show. convert site visitors into customers. (6) Magento’s catalogue highlights featured and popular products on the homepage.com for their different ‘click and collect’ approaches. Building the site on the Magento platform allows for the use of the powerful bundled products function. with a mild green highlight for callto-action points. by creating the opportunity to engage with customers through their own content. intuitive and most importantly. What have I been watching? The box-set of series seven of 24 What have I been listening to? Taylor Swift’s 1989. (2) A background video creates atmosphere and inspires customers to spend more for bigger fireworks.Design challenge 6 1 2 3 4 5 5 Andy Booth Bursts. so the customer can get exactly what they need.uk and harveynichols.com A bold scheme that places the focus on the spectacular fireworks and encourages users to think big Every family would love to recreate sensational public firework displays in their own garden. The fireworks’ wow factor is the centre of attention. Close up (1) A clear search tool allows customers to create their own fireworks package to fit their needs.co. An all-black website can look negative. The problem customers face when buying online (or offline) is they don’t know what they are going to get. so I have used white to neutralise the design. and add them to the basket with minimal fuss. Haters gonna hate. The site would inform customers as to which fireworks work well together. Ecommerce sites need to be user-friendly. (5) A basic colour scheme ensures the focus remains on the products. so customers can see which items are recommended.

These guys have done some serious work. (3) The services panel features more bold colours to draw the visitor’s eye. which led me to find a brilliant Grunt. Clicking the ‘Play’ button loads an HTML5 video. It also uses the HTML5 Fullscreen API to play the videos fullscreen when the user has clicked the play icon. to ensure sharpness for the ever-increasing screen resolutions. so anyone can keep up to date with PyroPyro. or find out more about it. and contains key service offerings. The site uses bold colours inspired by the firework displays.com What have I been watching? Boardwalk Empire. with an option to find out more or play a video for a chosen event. helping show the quality of PyroPyro’s work. These help draw the eye to key areas and make the design feel more fun. Close up (1) A large magenta panel introducing the company contrasts against the video blocks. What have I been listening to? Quite liking the new Future Islands and War on Drugs albums. Which websites have I visited for inspiration? siteinspire. . This box will slide away to reveal the work behind. The site makes heavy use of JavaScript and CSS animations to add movement to the elements. they are showcasing their work straight away. A large panel contains thumbnails of previous shows. 54 january 2015 A firework-coloured site for a visual events company that proudly shows off videos from past events PyroPyro is a large company offering all kinds of visual magic to make your event go with a bang.com is pretty much my homepage – and patterntap. so rather than using a generic image slider with stock photography. icons appear which allow the user to either play a fullscreen video of the event. When a user hovers over an item. (4) A testimonials panel features a slider of customer quotes. (2) The slider panel contains featured case studies. These panels will use CSS3 animations to add movement when a user hovers over them to reveal more information. That and Breaking Bad are the only things I watch.js email design workflow. All icons have been created as SVGs. (5) At the footer is a large email capture form with social media links.Showcase Design challenge 1 2 4 3 5 Chris Mousdale PyroPyro My month What have I been doing this month? Unifying a bunch of email newsletters.

What have I been doing this month? Completing an overhaul of the official Chelsea FC Hospitality app. Clicking their desired item will pull up extra info and previews in the sidebar. Close up (1) PyroTech’s large catalogue of fireworks and music is easily browsed through a grid format on the stage. Extra options such as settings. they can watch a lifelike preview of their creation. Once complete. (4) The menu bar has tabs to switch between viewing fireworks. Finally. flight path and reviews. music or the show preview. Then they can curate their show using an intuitive interface which displays timings and arrangements. such as GoGo Penguin and Kiasmos along with less chilled artists like Killswitch Engage. The concept behind this web app is to aid the curation of a musical firework extravaganza by giving users a platform to experiment with firework and music options. january 2015 55 . then customise their item by selecting their desired colourway. with accurate physics using a WebGL canvas. (2) Here users can find out details such as cost. Users will be able to browse through and preview PyroTech’s large catalogue of fireworks and music to find the right combination for their custom show. (5) The Preview tab will enable the user to see their curated display in real time before they purchase. account and so on are accessible through a More button. filter the selection or search for specific items. they can assemble their show in a similar way to most video editing software. By adding the selected items to their timeline. What have I been watching? All the football and F1 I can get a hold of.com for apps.Design challenge 4 5 1 2 3 Tom Newton PyroTech My month A web app with video editor enables users to put together their very own musical firework extravaganza My hometown. The user can view predefined sets. and we’ve just finished watching the American Office from beginning to end! What have I been listening to? A lot of the music featured in my app. (3) Once the user is happy with their selection.com for sites and pttrns. the customer can order the physical set of fireworks and accompanying music through the web app. This app can be expanded upon by adding a companion mobile or tablet app that can be used to trigger the fireworks by tapping along to the music or in an automated setup. duration. Southport. they can either click ‘Add to show’ or drag the item to the timeline. Which sites have I visited for inspiration? siteinspire. hosts the British Musical Firework Championships – the inspiration for PyroTech.

But what happens when I’m not there to reinforce the big picture. Other times there are websites for design companies that go into a richer explanation. but also your approach. via email. However. (3) The project pages for Bright Umbrella (abrightumbrella.com 2 1 3 (1) The Web Development Group’s (webdevelopmentgroup. putting your work in context is paramount to getting not only the visual outcome across. . There are portfolio websites that literally place a screenshot of the website on the screen of an image of a device like a laptop. and some pieces of your portfolio that can simply be skimmed or viewed quickly as screenshots. iPhone or iPad. Gene’s mission is to work tirelessly to provide inspiration and insight for developers. and features a nifty focus technique when you mouse over the different image types of the project’s screenshots.com) exhibits a full case study approach and a simple screenshot to show and explain the work in detail. His recent projects include unmatchedstyle.Showcase Focus on Focus On Showing your work Gene Crawford explores the best way to balance images and information on a portfolio website PROFILE Lately.com) is organised by year. offering up a full case study with client quotes and so on. com) project section is made up of focused case studies. I’ve been thinking a lot about the best way to show off my own web design firm’s work to potential clients. In person it’s pretty easy to simply show off websites on my laptop and iPhone or iPad while we’re talking. both on our website and in person. These can also be great sales tools for when you’re not there. but with enough detail to satisfy the curious new prospect. like when they visit our website? Showing and telling are two different things. Ideally you would want to have some deep explanation of a project via a case study. Sometimes all three are shown side by side to drive home the concept of a responsive website for the uninformed. For me the most successful portfolio sites mix these approaches. (2) The portfolio section for nclud (nclud. or when you’re working on selling to a new client remotely. so the potential client gets to see things nice and quickly. and displays the work across different device screens to show off the firm’s responsive design skills.

Profile

forward3d
forward3d.com

The international digital marketing agency
shares the tools and techniques it uses
to help clients supercharge their
searchability
58

january 2015

A decade ago, Forward3D was
starting life as TrafficBroker, an
agency centred around Google AdWords.
Fast-forward eight years and it was
opening its first international offices.
Fast-forward to today, and Forward3D has
transformed into a 270-strong search
powerhouse, with its own set of purposebuilt tools that have helped transport it to
the forefront of the digital marketing
industry. We caught up with team
members Daniel Gibson, Tom Manning,

Profile

Claire Devilliers, Darren Fullerton and
Tim Gladston to find out more …
net: Please introduce Forward3D – how
did the agency come into being?
DG: It evolved from a search engine
affiliate company called TrafficBroker that
began when the founder read a book about
making money using Google AdWords.
As the company grew, it quickly became
evident we needed to adapt to overcome
the scaling, data and linguistic challenges

we were facing. This led to the adoption
of an agile working methodology, our
own project management app, CardWall
(cardwall.co.uk), our international division
Locaria and our technology platform Stage.
Stage is all about making sense of large
sets of data, so staff can automatically
draw the insights they need from the
millions of rows of data we collect on a
daily basis. Locaria provides our clients
with the platform to take their business
onto the world stage, unlocking new

info
Location: London (HQ), New
York, Shanghai and Seoul

Established: 2004
Team size: 270
Expertise: Search, display
and content marketing
Selected clients: British Airways,
Hilton, Gucci, Ralph Lauren, New
Look, John Lewis and ASOS

january 2015 59

An growing number of factors – weather. Baidu (China) and Naver (South Korea) every day. What we say on behalf of our clients is crucial to upholding their brand’s voice and key messaging. Yahoo!. These consumers are directly looking for a brand. It wins accounts with mrporter. we quickly realised that to run digital marketing at the standard that clients demanded. part of the Forward Internet Group. the Forward Internet Group. net: How does the branding and search relationship work? TM: The text-based nature of search marketing doesn’t receive the same levels of attention that traditional creative work does. basket process. It adds SEO to its range of services 2011 The team sets up a dedicated display advertising department.com and Space. This combination of scale and reach is a unique capability that has transformed the agency from a small startup to the 270-strong global digital marketing agency it is today. a new multichannel attribution model is developed by the in-house data analysis team. Evaluating the potential demand for the business in question and the products it offers is vital in order to value the opportunity. Yandex (Russia). business or particular products a company sells. Market wise.apothecary 2012 Opens New York and Shanghai offices to help support global client wins markets and opportunities. stock levels. We can run a campaign in any language or market worldwide. net: From where does the name Forward3D come? DG: As we transitioned from an affiliate company into an agency. Bing. Forward3D worked with air conditioning specialist Andrews Sykes to create an interactive map showing the weather conditions at various stadiums in Brazil 60 january 2015 . Except in most search engines we only have text and a limited number of characters within which to do this. and an evaluation of the infrastructure in place (such as the website itself. seasonality.NK. ASOS. quality of content. net: How do you go about understanding a brand’s search needs? What techniques and approaches do you use? TM: The common themes revolve around the situation a company is in right now and the market it sits in. competitor activity. The challenge is that millions of consumers search for our clients’ products and businesses on Google. transaction or lead? While there are lots of tools – such as Google’s 2013 Forward3D wins accounts with British Airways. It also linked with our parent company. currency conversion rates – were impacting our campaigns. John Lewis and Debenhams. enabling an agile working methodology to be utilised across teams. making it particularly complex when you consider the attention your average consumer will give to a search engine results page. Driving search traffic won’t matter if the experience isn’t optimal for consumers.Showcase Profile Timeline A look at Forward3D’s history 2004 Neil Hutchinson founds TrafficBroker. payment gateways and customer support). How many searches are there available to advertise against. and names Martin McNulty as MD. it’s twofold: the opportunity available and the competition in that market. and what are the chances of turning that into a visit. an affiliate agency that sends traffic to sites via Google AdWords 2007 Internal collaborative project management tool Cardwall is launched. we needed to take into account more than just the performance of the campaigns themselves. and providing transparency for clients 2008 The team wins an account with Hilton Hotels 2009 Trafficbroker becomes Forward3D. This includes the performance a brand is producing from search right now. a new office is opened in Seoul and the agency grows to 270 employees globally Photo-ready To coincide with the World Cup. TV programme scheduling. It was this multidimensional aspect of digital marketing that led us to adopt the name Forward3D. It reaches 150 employees globally and relaunches its internal technology platform 2014 Forward3D wins accounts with Ralph Lauren and Hertz. in much the same way that the more visual work would do.

in which we detailed how we could increase bookings in the South Korean market by over 700 per cent. they will come’. We achieved this by analysing the linguistics and behaviour of the existing campaigns. but equally important. Where does a brand sit compared to its competitors? Will the opportunity be cannibalised by better brands in the same space? Understanding these points will help predict whether a brand can produce a profitable model off the back of the activity. There are always going to be occasions where design and UX will override search-based decisions. to draw conclusions on the key upcoming trends that would define the challenges for retailers in coming years Keyword Planner (netm.Profile Left For its State of Fashion project.5 million daily digital interactions collected over two years from global fashion brands. is the competition. in our experience nothing is more effective than a well-constructed test. You must know where you sit compared to the competition. usability and the experience are also important. that allows you to compare yourself. to the wider industry. but these only come into play once you’ve got people to the site in the first place. The demand for that service or content can also be measured as part of initial brainstorming. We’ve also completed a project with Hilton Hotels for a campaign that involved factoring favourable and unfavourable exchange rates into our paid search bidding strategy. percentage uplift on particular URLs. Google Analytics has recently launched a new benchmarking tool. We introduced a bid january 2015 61 . Setting realistic KPIs for success. so profitability is the bottom line for our clients.ag/keyword-262) – available to estimate search volume and costs. Forward3D’s data team studied over 9. language or even market. You could argue that if you were a starting a business today you should consider search at the point you decide on a name. If no one is searching for what you’re about to design. Benchmarking yourselves with whatever data is available to you is very important. Last. net: At what point in a web design project should a client start thinking about search? DF: There’s an adage: ‘If you build it. which led us to widening the keyword selection and expanding the language targeting to non-domestic users. but ensuring search is considered from the outset will minimise the need for costly workarounds later. Except if people can’t actually find ‘it’. this is irrelevant. revenue generated and the optimisation score for a particular page or site are all areas that can be used to set the scene for success. net: When do you and the client decide how success will be measured? DF: The vast majority of what we do is e-commerce oriented. Small-scale testing helps identify opportunities in a new keyword set. or there is extremely strong competition. Design. on all types of site metrics. net: And what kinds of results have you achieved? TM: We recently completed a case study with Hostelworld and Google. It’s also important the client understands there are many sides to measuring the impact of search. it becomes increasingly difficult to stand out in a search environment.

Another trend worth monitoring is search engines increasingly providing the answers to specific queries and questions themselves. net: When it comes to social media and paid-for activities. but on Facebook they might just be looking at their friend’s wedding photos. A campaign that focused on British travellers looking for accommodation in the US increased bookings by 31 per cent and revenue generated by 25 per cent. 62 january 2015 By aggregating and segmenting data into alert-based prompts. This phase is key to avoiding our staff sinking in rows and rows of data on a daily basis. then it has lost its purpose. how easy is to persuade clients to part with cash? CD: Display and social advertising have typically lower returns on investment for advertisers due to the nature of the platforms. bypassing the need for users to click on any of the results or absorb any of the listings and advertisements on show. With Google. net: What’s the key to presenting analytical data to clients? TM: Analytical data can change the fortunes of a business. net: What’s your approach to analytics? TM: The amount of data our campaigns and clients’ websites produce can be phenomenal. Our platform gives our analysts the ability to manipulate data so seamlessly that it’s become a trait of ours to ensure the output of our analysis is useful. as how people speak and how they type are not necessarily the same. but if it isn’t tangible or doesn’t provide a possible action. Voice searches in particular. it both asks questions of our analysts and points them in right direction for a solution too. at the top of the search results. and a full social calendar – all of which help it cultivate a ‘work hard play hard’ approach modifier that concentrated on periods that we could predict would have higher purchase intent due to the strong British pound. due to their scale and international reach. breakout areas where employees can relax. net: How do you see search changing over the next few years? What trends are you watching most closely? DF: Wearable technology will change the way we search for information.Showcase Profile Downtime Forward3D has a strong team culture. with complementary meals and drinks. but Stage allows our analysts to make sense of it all. you know someone is actively looking for a product or brand. This will impact an industry built around shorter keyword phrases. If there is no opportunity or the returns are just too low it makes it very Tracing icons For John Lewis’ Design Icons. the team produced an interactive timeline showcasing individual artists and iconic homeware designs that have influenced modern styles .

Profile
difficult to pursue with clients. However,
if the brand has something compelling to
communicate or offer, it’s worth testing.
Always start small, to reduce the
financial risk. Utilise the granular nature of
targeting available through the likes of
Facebook and Twitter to really put a brand
in front of its core audience. Once clients
are able to see which aspects of the activity
are working, they can make increasingly
informed, data-led decisions. With
campaigns like these, it’s about learning
fast or failing cheaply.
net: Is it easy to find new team members?
TG: Attracting people is relatively easy, but
hiring the right ones is significantly harder.
We look for a balance of technical ability
and communication skills, which also suits
the digital marketing industry perfectly, so
there is plenty of competition. We also look
for candidates who fit into our culture, are
team-oriented and who have a relentless
side in the way they approach learning,
delivery of work and developing those
around them. We’ve had to hire over 200
people over the last two years to support
our growth, and as a result we’ve invested
heavily in our graduate trainee programme.
It’s a long-term option but one that’s been
very successful for us.
net: What skills are in the biggest
demand right now?
TG: Experience with data or analytically
led expertise. At Forward3D, it’s not just
about skills though; it’s the mentality and
application of a candidate’s experience
that’s important to us.

office culture

James Glick

Comms and business director

What’s on your desktop today?

over the course of the day, in addition
to everything else. The vast majority of
people will eat in the canteen which means
it can get pretty busy, but it’s important
everyone gets to sit together, take a break
and catch up.

What little things make your
life worthwhile?

What hours do you work?

I’m rarely actually at my desk, so it’s quite
a minimalistic sight most of the time. I just
have just my screen, a notebook or two and
my desk phone. My Macbook Air is glued to
me throughout the day.

Websites: Sky Go (netm.ag/skygo-262),
theguardian.com, pando.com, theverge.com,
dropbox.com
Apps: 1Password, Evernote, Citymapper,
Feedly, Hailo
Convenience and great content are
recurring themes throughout my list of
favourite websites and apps. 1Password
(agilebits.com/onepassword) has changed
the way I approach online security. It stores
and populates login information and fields
automatically – so I can concentrate on
making my accounts as secure as possible.

What do you have on the walls?
The walls of our office are exposed brick
and quite minimalist, but that’s not to say
our office is without features. We have
individually designed meeting rooms,
a keyhole to walk through to the cafeteria,
an auditorium for larger meetings and
presentations, plus a giant crustacean and
a wall of monitors in our developers’ room.

What will you do for lunch?

We’re very fortunate in that the company
provides us with complimentary breakfast,
lunch, snacks, drinks and even a fully
stocked bar, all located in the office canteen
and social area. Friday is a particular hit, as
there are bacon sandwiches and ice cream

Our offices hours are 9-6 but in certain
periods it can be difficult to avoid a few
extra hours here and there, particularly in
the run up to Christmas when all our retail
clients are in their key trading periods. It’s
a very clichéd thing to say but I really can’t
imagine many other companies working as
consistently hard as ours does, across all
departments and levels of responsibility.

What else do you do in
the office?

It depends on personal preferences, but
there’s plenty to choose from, including
table tennis, a table football table, music
room, PlayStation and Xbox as well as
massages and pilates once a week.

How often do you all hang out?

Although we’ve grown considerably in the
last few years (there were 25 people here
when I joined four years ago) there’s a great
social side to the company. We have drinks
at 5pm every Friday as well as monthly and
quarterly socials, plus the opportunity to
get involved in fundraising initiatives with
our charitable organisation, the Forward
Foundation (forwardfoundation.org.uk). Some
of us even play for the same Sunday league
football team!

Describe your office culture
in three words ...

Progressive, multicultural and friendly.

Mood This project explored how colour impacts mood,
and in turn affects online purchasing decisions

january 2015 63

Showcase

How we built

How we built

presidentti3d.paulig.fi
How Great Apes created an intuitive 3D design tool to enable a coffee
company’s customers to create their own coffee containers
2

1

3

5

4

Brief
Coffee house Paulig wanted to
let its consumers create their own
beautifully crafted coffee boxes,
in collaboration with Shapeways.
The brief called for an elegant and
easy to use 3D design tool that
could be used to produce objects
compatible with Shapeways 3D
printing specs.

64

january 2015

Close up
(1) At the heart of the Paulig Presidentti 3D
campaign is a WebGL-based design tool that
enables users to create their own unique coffee
container by editing the surface, adding decorations
and a custom embossed relief. Designs are based
around Presidentti’s hexagonal logo. (2) The surface
editor unwraps the container’s surface, turning it
into an isometric editing layer. After this, the user
can select a pattern and freely paint, stretch or
erase polygons across the container’s surface.

(3) Users can publish their designs in a gallery
that consists of a looping canvas. Alternatively,
designs can also be downloaded as 3D objects or
uploaded into Shapeways’ shopping cart. (4) The
mainpage’s hexagonal grid adapts to fit different
screen sizes. A background video is only used with
browsers that support automatic playback. (5) All
sections of the campaign site are compatible with
mobile devices, with the exception of the design
tool, which requires WebGL.

How we built
Mik ko Johannes
sairio

niko
Sipil ä

Mik ko
Sa ario
Timeline

What happened and when
on the project
Early May 2014

Mikko has a long history in
programming and is a founding
partner at Great Apes
w: greatapes.fi
t: @greatapesltd

Niko is one the founders of
Great Apes and works as a
lead designer
w: greatapes.fi
t: @greatapesltd

Family-owned coffee company
Paulig’s slogan is ‘Stay curious’.
In a recent campaign with advertising
agency SEK & Grey, it made good on this
promise by enlisting Helsinki-based
digital design company Great Apes to
offer customers the chance to design
their very own coffee cup, which would
be brought to life by 3D printing service
Shapeways. Great Apes introduced the
Finnish market to WebGL with a simple,
intuitive UI that would enable anyone
to easily create their first 3D design.
We spoke to the creatives behind the
project to find out more ...
net: Hello! Why don’t you introduce
Great Apes?
NS: Great Apes is a digital design and
development agency from Helsinki. It
was founded in 2008 and currently has
10 employees. We work mostly in digital
marketing communications and service
design for web and mobile.
net: And Paulig Presidentti 3D – could
you describe the project?
NS: Paulig is a family-owned company
founded in 1876. In Finland and the Baltic
countries, the company is a market leader,
and in Russia it is the second-largest
supplier of roasted coffee. Presidentti is
one of Paulig’s oldest brands (est 1929),
with the slogan: ‘Stay curious’. The
Presidentti 3D project is a great example
of this, encouraging users and coffee
lovers to experiment and quite literally
think outside the box.

Mikko is a senior developer
with a hands-on, head-first
approach to all things digital
w: greatapes.fi
t: @greatapesltd

net: How did you land the job, and what
was the client brief?
NS: The job came through advertising
agency SEK & Grey. It has a long-standing
relationship with Paulig and has been
working with more experimental concepts
for Paulig’s Presidentti brand in recent
years. Originally we had a workshop with
both Paulig and SEK & Grey, where we
discussed what would be technically
feasible. We first focused on how we could
build an easy to use, WebGL-based design
tool. Not a lot of stuff has been done with
WebGL in the Finnish market, so to
convince the client that we were able to
do this we created a very rough prototype
of the tool’s ‘unwrapping’ feature and
proceeded from there.

Initial meeting with Paulig and SEK
& Grey to discuss the concept

Late May 2014
Workshop with Paulig and SEK & Grey
to present the first prototype and
budget proposal. Development of the
design tool begins

June 2014
Paulig is presented with the
layouts. After approval, development
of the gallery and UI interface
implementation begins

July 2014
Annual holidays slow the development
progress, but mobile layouts are
defined and their development begins

Early August 2014
The first designs are uploaded to
Shapeways, the design tool is modified
to meet 3D printing demands

Late August 2014
net: How did you decide on the 3D
printing angle?
NS: It was there from the start. SEK had
produced a small patch of custom coffee
cups for Paulig that utilised the hexagon
pattern from the Presidentti logo. These
served as both an inspiration and a style
reference. Although the cups were
produced using traditional methods
(a CAD model and manufacturing plant)
they did provide us with a benchmark
we needed to replicate dynamically in
the design tool we were creating.
net: How did you prototype the project
and communicate your ideas?
NS: As mentioned before, we created an
initial prototype to demonstrate different
types or surface options based on the

The team works flat-out for
upcoming release

Early September 2014
Site is released, designs start rolling in

Mid September 2014
Site is localised in English. A direct
import pipeline to Shapeways
is implemented

October 2014
Just three weeks after the
launch, the site’s gallery has
gathered over 3000 designs

january 2015 65

(5) The final icons and interface elements in Illustrator.Showcase How we built 2 1 Evolution A behind-the-scenes look at the project’s development (1) Visuals are based on Presidentti’s style guidelines. with the main elements being the green and gold. (3) A lot of the interactions in the design tool were sketched before being built. and the triangle and hexagon pattern. (4) We also explored a number of different ideas for the UI elements. 3 4 5 6 66 january 2015 . (6) The UI design was finished in Photoshop with final tweaks and improvements made directly in development. (2) The style reference for the container’s surface came from these custom-made coffee mugs.

Number 26 The site’s gallery gives a serial number for each design. Much of the design revolves around the hexagons that define the Presidentti look. The design of the number is similar to the Presidentti coffee’s label number 26. there’s always something you would like to improve upon – especially with this type of a project that has an actual tool in the centre of it. We needed to Throwing shapes The surface editor is a sculpting tool designed to enable users to manipulate the outer shape of their coffee container customise three. 3D design software is usually somewhat complex and numeric. add more decorations and ways to manipulate the size and angles. Next month: The site for Orient Express leisure company Belmond january 2015 67 . net: Which tools. Our production process often follows a pyramid model – we build a solid foundation. SVG and CSS3 animations.js (threejs. It’s also important to evaluate if the device’s or browser’s support for a specific technology is solid enough. utilising its API. Mathematically. Leap Motion and Oculus Rift. The aim is to bring as many of the key features to as many platforms as possible. After we got to the stage where we could actually create different designs. which would wrap around its edges. We used Azure for server-side operations. There’s a ton of interesting features we had to leave at the drawing board due to budget and time restrictions that we hope to still explore in future projects. Finally – as is always the case with these types of endeavours – there were a lot of performance issues to overcome. net: If you could remake the site. The container model had to meet the demands of 3D printing. Besides having to conform to 3D printing needs. technologies and platforms did you use to build the site? MS: three. is there anything you’d change or improve? NS: Naturally. We then designed the design tool’s user interface in Photoshop and moved into production. on top of which we add different feature layers. we focused on desktop Google Chrome and Safari. the UI was tweaked and features and tool tips were added. net: What were the biggest technical challenges that needed to be overcome? MJS: The main one was to find a way to build an intuitive UI for the design tool. and test them out on different devices and set-ups. After this we moved on to the layouts. which appears in print designs before implementing said features. the container’s surface had to consist of the Presidentti hexagons. We are also looking into possibilities for web and mobile provided by Unity. starting with the overall look of the main page. and optimise the experience for a few key platforms – on this campaign. the biggest challenges were to do with developing an algorithm for the dynamic geometry for the containers.How we built hexagon in a WebGL object.js libraries to achieve a printable 3D model output. We would’ve liked to have worked around some of the limitations of the 3D printing technology to enable more colour options. Facebook API for user identification and built a custom pipeline for uploading the models into Shapeways. improving the UX depending on the device and browser support. net: Which web technologies are you looking forward to experimenting with? MS: iOS 8’s WebGL should prove very interesting with touch coming into play. regarding object thickness and the smoothing of the relief images. net: How to do you ensure a site runs consistently on multiple devices? MS: It’s essential to build prototypes – or at least a proof-of-concept – of all critical features. and maybe add server-side rendering to the images with user-set camera angles and so on.org) was the essential tool on the WebGL side. but most of the site and UI is built using Canvas.

libraries and development environments increasing exponentially.FeatureS Cover feature build Mobile apps the easy way Nowadays. and has spent the last few years involved in the development of a number of native mobile apps for iOS and Android Illustration Kyle Bean Kyle is a London-based artist and illustrator who creates playful.uk Photography Aaron Tilley aarontilley. Nike+ Training Club (netm. Here’s a quick primer on how to get you started. has gone from strength to strength.ag/nike-262). but you have the option of using one of many hybrid app frameworks now available.com 68 january 2015 ack in 2010 I was asked to manage the build of an iOS application for a client. This meant a buggy version of Xcode or Eclipse and the ADT plugin. along with the number of apps available in the Google Play and Apple App Stores. Editor’s Choice in the App Store. A team of three of us spent the next three months building our first real app. tactile imagery and installations using handcrafted techniques kylebean. Today you can still use the native development tools. Work gave me a Mac which I was very happy with as it included a Terminal app. In 2010 you built apps with the developer tools that Apple and Google wanted you to use. I didn’t own a Mac so couldn’t create iOS apps. Before this point. .co. you can use the latest responsive tools and frameworks to build a web app that works across many different browsers. AKQA’s Jon Boydell gives the lowdown of the top tools. We built a coffee shop app that used MapKit and a search service to pin coffee shops to a Google Map. I had little interest in building apps for mobile devices.com). My work sent me on a two-day iOS development crammer which took place over a very hot weekend with seven other sweaty individuals. with the number of frameworks. and how to recognise when an app might not be what you want to build. there are as many ways of creating apps as there are Android device sizes. and I didn’t own an Android phone so had no desire to build something for Android. without having to worry about the features of the device. won a number of design awards and been downloaded on iOS and Android millions of times. something I had missed on the PC. It has been App of the Week on both sides of the Atlantic. Since then. That app. approaches and frameworks you need to get started B Authors Jon Boydell Jon is a group technical director at AKQA (akqa. I’ll cover what the different mobile development frameworks can offer. mobile app development has exploded. Alternatively.

Cover feature january 2015 69 .

which may be enough for what you want to do. In addition. or by loading a skeleton of the page while waiting for assets. The majority of mobile phone users all use the default browser and a default browser update usually only happens along with an OS update. a web app is a good place to start so you can’t rely on the latest features of Chrome being available. The following viewport meta tag will ensure that our site is scaled correctly on each device. we can give the user the feeling our app is faster by giving instant feedback to user interactions. Getting started It is important to get the foundations of a mobile web application right. To get onto the user’s . People are very familiar with web apps.FeatureS Cover feature Different experiences The LoveGold responsive website offers a premium experience across a number of device form factors Mobile web apps A mobile web app is a responsive. users won’t be able to find your app through the App Store (which. we can also decrease load times by grouping requests and using a globally distributed CDN to allow for more concurrent connections from a location closer to the user. Remember latency is high on mobile networks. given how saturated the store is nowadays. If you’re directing users to your site via Google. Common techniques such as gzipping. Additionally. adaptive or mobile-optimised website. and they are drawing increasing amounts of traffic from mobile devices (and not necessarily just from apps). It will also enable us to include breakpoints for larger devices – be they phablets or bigger. code minification and concatenation are still important. then a web app is a good place to start. initialscale=1. There are downsides to running a mobile web app on a device – you are reliant on the user’s browser to provide the experience. may well be a blessing in disguise). even when a network is slow. image compression. These might include location services.0" /> Building narrow-first will ensure we are giving mobile users the optimum experience. while still enabling the user to pinch and zoom: 70 january 2015 <meta name="viewport" content="width=device-width. A web app can take advantage of a limited set of mobile device hardware features. If your primary method of directing users to your site will be via Google. so you need to optimise for performance. device motion or offline caching. However.

I might use one of the many prototyping web apps available – my favourites are Flinto (flinto. Major technology vendors such as IBM are getting in on the game with solutions ●D  oes your app offer a strong offline experience? ● I s it something that people want to have in their hands? Native or hybrid? Not every app is created equal. And no matter which development approach you’ve chosen – web. Looking at the apps on my phone. build it. Twitter and Salesforce. The difference between the two is in how your code is executed on the device. Sky+ for programming my Sky box.. A native application runs directly on the device you’ve been developing for. People use their phones as a toolbox and each tool should have a specific purpose.ag/worklight-262) comprises an app runtime built on Apache Cordova.com) and Proto.io). Its Worklight platform (netm. Nike+ Running to track my lunchtime runs. Train Times for. and you will probably want yours to connect with services in order to provide your users with features such as notifications. security.io (proto. hybrid or native – you will want those services to work across all mobile platforms. There are two ways to build apps for mobile devices: native and hybrid. so you can leverage your JavaScript skills to take advantage of the out-of-the-box services and connectors for public APIs such as Facebook. it’s ARM-based machine code. Alternatively.Cover feature Mobile Backend as a Service No app is an island. Titanium’s developer. the first thing to consider is focus – the best mobile apps have a strong focus. Appcelerator. and tools for businesses to manage their entire app portfolios. and once you’ve worked exactly out what it is you’re building. Plus.ag/ platform-262). If you’re developing your app with non-technical people. and for Android it’s Dalvik VM bytecode (to be replaced in ● Can I describe the app in one sentence? ●D  oes an app in the store already do what I want my app to do? (And if yes. has recently entered this market with the Appcelerator Platform (netm. As an app developer you will need tools to monitor customer usage and the ongoing health of your app. In the case of iOS.com) offers usage-based pricing. geolocation services. will my app do it better?) At this point. Mobile apps Once you’ve decided that what you want to make is indeed an app. it’s worth giving some thought to the tools you’ll be using to aimed at the enterprise mobility market. a prototype can be worth a thousand meetings. It’s built on Node. data storage and web API integration. you can try it for free. well . And your apps don’t need to be built using Titanium to take advantage of the platform. your app will need to be bookmarked outside the browser. Mobile Backend as a Service (mBaaS) is an approach that bundles all of these features into a single platform and promises to remove homescreen.. Parse (parse. I would start sketching out my app idea. analytics and notifications amongst other features.js. You can quickly establish whether your app concept has a strong enough focus by asking yourself a couple of questions: the hassle of managing platform-specific implementations. Here are some things to consider: ● I s there something that’s available on the device platform that’s not available using mobile web? A toolbox The best apps do one thing really well – for instance. the best are the ones that do just one thing well. For indie developers who would struggle to find the cash to cover the subscription fees of these solutions. the Worklight Server that allows you to write service adapters in JavaScript. Sky+ focuses on emabling users to programme their Sky boxes january 2015 71 . providing cloud storage.

The Google Play Developer API allows you to automate functions available in the Developer Console and hook them into your build pipeline. Think about this upfront – it places restrictions on you as a developer. in the very near future.com/ objc) development interface. you will have to distribute your app through the Apple App Store or Google Play. but also provides benefits in the form of testing and distribution tools. Developing a native Android app means you’ll need a Java IDE and the Android SDK. practically guarantee smooth transitions and animations. and take advantage of all the device features for the platform you’re using. Google does not enforce an official approval process. It’s best to follow the guidelines closely as they are a condition to becoming a featured app. Google Play provides a number of features to get you through the last few miles to a successful launch. Swift: developer. There’s essentially no gap between your imagination and what you can build. Unlike web apps that can pitch their tent on the servers of your favourite cloud-hosting provider. quality and content. Its approval process can take up to eight weeks and apps will be rejected if they fail to meet the stringent requirements. . Google recommends using the Eclipse IDE with the Android Take your app to The store You’ve chosen to go native or hybrid. which in turn runs on the device. As native apps are run directly on the device hardware. and you will want to make use of third party beta test platforms. and are developed in Objective-C (or. Picking your tools iOS apps are typically built using the Xcode (or AppCode: jetbrains. You can use it as a beta test platform to distribute alpha and beta versions of your app and manage staged rollouts to a percentage of users. There are hundreds and hundreds of ‘getting started’ tutorials on the internet.FeatureS Cover feature the next version of Android – Android L – with a runtime called ART). and now your killer app needs to go out and find its users.ag/start-262. 72 january 2015 but encourages developers to be selfregulating by publishing guidelines on development best practices. When it comes to testing and rollout tools Apple falls behind.apple. at netm. working closer to the metal means you can squeeze more performance from your apps. and ready-made ways to monetise your app. Apple keeps a firm grip on which apps are allowed entry to the Store. A hybrid application is one that is executed inside a wrapper application.com/ swift). but the most concise comes from Apple.

NET development skills. with a consistent design and platform-specific UI features january 2015 73 . it’s a good idea to start with Android Studio.com) is a C#-based development framework.it): A utility toolkit that takes away the hassle of using sometimes-complex iOS classes.ag/AF-262): A popular networking library with a simple interface ●C  lassy (classy. the type of application you get at the end of the day depends on which method of development you choose. This makes it the most performant of the hybrid frameworks. You get the benefit of the performance of a native application along with the lower overhead of maintaining one source tree for both iOS and Android.org): 2D OpenGL game engine ●P  icasso (square.com) – ActiveRecord for Android ● And Engine (andengine.Cover feature Development Toolkit (netm. as you will have a single code base rather than separate source trees per platform. or your existing skills are in other development languages.as): A stylesheet system for styling iOS US components ●M  agicalRecord (netm. Xamarin Xamari (xamarin.io/dagger): Dependency injection framework All that said. As these run on the device hardware also a decent number of accelerator frameworks for iOS and Android that can get you going with a native application nice and quickly. If you’re an existing Java developer and more familiar with IntelliJ IDEA. On the move Nike+ Training Club has been developed as a native app for Android and iOS. This will be replaced with Android Studio (netm.org): An open source games development framework for 2D and 3D The maturity of the Java language has given us countless Java libraries.ag/studio-262). However. Five of the best for iOS are: ●S  SToolkit (sstoolk. if you’re a total novice.ag/magical-262): An implementation of the ActiveRecord pattern for iOS ●C  ocos2d (cocos2d-swift.ag/event-262): Pub/sub communication library ● Active Android (activeandroid. but is more powerful than the existing Eclipse IDE and ADT combo.io/picasso): Image download and caching library ●D  agger (square.ag/ toolkit-262). Hybrid apps Hybrid app development frameworks allow developers with existing. which is in beta right now. It also references other useful libraries ●A  FNetworking (netm. language-specific skillsets to make the best use of their talents. If you’ve got . nonnative. then this approach may not be the quickest way to develop your app.github. They also make your app simpler to maintain. Here are five of the best Android libraries that make developing for Android easier: ●E  ventbus (netm. Xamarin is the framework for you. rather than Eclipse. Your code is compiled directly into a native binary rather than being executed inside a wrapper. There are you can squeeze more performance from native apps.github.

com/swift) Android Developer Toolkit (netm. Coupled with component frameworks such as Sencha Touch (sencha.github.as) MagicalRecord (netm.phonegap. but it comes with limitations and quirks of its own. but using a hybrid language will always involve a compromise of some sort.org) Picasso (square.ag/ start-262) SSToolkit (sstoolk.com) Appcelerator Titanium (appcelerator.com/ steroids) Getting Started (iOS) iOS Developer Library (netm.org) is for you.github.io) Developer tools AppCode (jetbrains. ●O  fficial docs: cordova.0 ●T  utorial site by Christophe Coenraets.it) AFNetworking (netm. com/titanium) TiDev (tidev.io/dagger) 74 january 2015 Developing apps the way that Apple and Google intended results in the most performant apps.ag/bus-262) Active Android (activeandroid. Two of the most popular frameworks are Apache Cordova and Appcelerator Titanium.io/ cordova-tutorial ●T  utorial for IntelliJ IDEA: netm. then Apache Cordova (cordova.org) Sencha Touch (netm.github. updated regularly: ccoenraets.com) Proto. I have seen apps perform perfectly well on iPhone 5S that grind to a halt on as-new Android devices or older iOS devices.FeatureS Cover feature Resources Prototyping Flinto (flinto. you can quickly develop apps that look and feel like native creations. apache.ag/ androidkit-262) Xamarin (xamarin. Hybrid development can get your app into both stores quickly.io (proto. Apache Cordova If you’re a web developer and you’ve got the CSS.6. Taking the hybrid framework approach has many benefits. or accelerators for specific app domains (see the list on previous page). In my experience.io/picasso) Dagger (square.com) AndEngine (andengine.org/docs/ en/3.com). JavaScript and HTML skills.com).ag/ intelliJ-262 Hybrid applications built using Cordova might be subject to performance issues – depending on how they are optimised – on some Android devices or older iOS devices. but at the expense of having to maintain a code base per platform and effectively doubling the skills needed. .com) that includes additional tools such as PhoneGap build (build.com/products/touch) or AppGyver’s Steroids (appgyver. whether that’s in performance.io) Apache Cordova (cordova.ag/touch-262) AppGyver Steroids (appgyver.apple. community support or access to new operating system features. There’s also a semicommercial version of Cordova called PhoneGap (phonegap.apache. Cordova provides a bridge that allows you access to the native device features so it’s possible to access the GPS receiver and other device services from your JavaScript code.com/objc) Swift (developer. in order to take an app into both stores.org) Getting Started (Android) Eventbus (netm.apache.ag/magic-262) Cocos2d-Swift (cocos2d-swift. Native development can be sped up by using accelerators in the form of pre-existing libraries.ag/AF-262) Classy (classy.

ag/quick-262 ● For more formalised training: training. Are you a web developer who doesn’t want to stray too far? Use Cordova with Sencha Touch or Steroids. Views are defined Taking the hybrid approach has its benefits.appcelerator.NET developer for years? Then the Xamarin framework would be the best place to start.com/appcelerator/KitchenSink ● Unofficial Titanium developers’ site: tidev. Want to develop for iOS and Android and all your skills are in JavaScript? Go with Titanium.com ● Sample app that uses most Titanium features: github. Rdio and eBay Appcelerator Titanium Titanium (appcelerator.io Which should you use? The answer to this question will depend on what you are comfortable with.ag/alloy-262). Jon is AKQA’s mobile lead and Andi is a senior technical architect at the company january 2015 75 . Titanium supports a lot of device features that are common to Android and iOS.js and Underscore. Have you been a . well known companies as well as smaller players have used Titanium and Cordova to develop hybrid apps. but some features are only supported through third party modules or enterprise modules that require a license fee. including PayPal. the Apple App Store. Titanium has recently introduced a new MVC framework called Appcelerator Alloy (netm. Want to develop the most performant app possible with the latest features from iOS8 or Android L? You should head for the native development toolkits. where you can to download the Eclipsebased IDE and development kit. so you can jump-start your development. but will always involve a compromise using XML and CSS and translated by the Titanium runtime into native UI components. Your code is executed by a JavaScript runtime engine that runs on top of your target device. or both! Special thanks Jon Flowers & Andi Smith Jon and Andi helped put this article together. You’ll need to create a developer account and have the correct native development kits installed on your computer for each mobile device you want to write for: ● Appcelerator Quick Start: netm. based on Backbone.Cover feature Titanium and Cordova Large. Sharing your app To share your new app with the world – assuming you have built an app – all that’s left for you to do is to submit it to the Google Play Store. Your starting place for Titanium is the Appcelerator website.js.com/titanium) is a JavaScript development framework. It uses the same UI components that you use in Titanium.

Sara Soueidan explores how scalable vector graphics can be used for much more than just creating and animating shapes .

cy position the circle’s centre on the x and y axes. An SVG image is described by a set of human-readable XML tags that define the elements and shapes the image is made up of. <line>  . SVG. and JavaScript. <polyline> and <rect> . SVGs are tags that render basic or complex shapes. There are six basic shapes defined in SVG: <circle> .Second feature S calable vector graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. CSS3. An SVG graphic can contain basic shapes. you can create complex shapes using the SVG <path> element. or both. width and height are presentation attributes used to position and size the rectangle --> <line x1="100" y1="300" x2="300" y2="100" stroke-width="5" /> <!-. <ellipse> . and can be animated or interacted with using CSS. You can find more of her writing on her blog sarasoueidan.x. All three are presentation attributes --> <rect x="300" y="100" width="400" height="220" /> <!-. focusing on HTML5. y. JavaScript or native SVG animation elements. An SVG <path> has a presentation attribute d – short january 2015 77 . <polygon> . positioned and styled using SVG ‘presentation attributes’. complex shapes. In other words. For example. Each shape is described.com <circle cx="100" cy="200" r="250" /> <!-cx. the attributes used on each of the elements in the following snippet are all SVG presentation attributes: Author Sara Soueidan Sara is a freelance frontend developer. writer and speaker from Lebanon.the stroke-width presentation attribute sets the thickness of the line --> In addition to the basic shapes. and r specifies the size of the circle’s radius.

to make the code cleaner. There are several techniques for creating SVG sprites. In addition. you can embed it in your page in a number of ways. 100). when you’re working with complex SVG graphics you’re likely to create these shapes in a graphics editor like Illustrator or Inkscape. then drawing another line to the point (200. Demo Part of the demo Sara Soueidan has created as a guide to SVG coordinate systems (bird illustrations by Freepik. What you want to do with your SVG will help you decide which approach to take. SVGs are also more semantic – an <svg> element is used to represent a graphic. but these two will give you a great start that can lead you on your way.ag/ illustrator-262). and many tools are available to automate the creation of the sprites.FeatureS Second feature SVG Animations SVGs are a great candidate for icon systems. I would recommend Peter Collingridge’s online SVG editor (netm. Here’s an example of an SVG <path> : <path d="M 100 100 L 300 100 L 200 300 z" fill="deepPink" stroke="#009966" strokewidth="2" /> The above path draws a rectangle by moving M to the point (100. Embedding SVGs After creating and optimising your SVG. icon fonts have many disadvantages – for example. You can learn more about the SVG <path> syntax in this article by Chris Nager: netm. You can create SVG sprites. or the node. In most cases.ag/nager-262 – or in the SVG specification at w3. arcs and lines that make up the final path. The path data consists of a set of commands and coordinates that tell the browser where and how to draw the points. it is generally a good idea to optimise your SVG using one of the several optimisation tools available.js-based tool SVGO (netm.ag/collingridge-262).ag/grumpicon-262) – Grumpicon is a tool that generates SVG sprites in CSS and automates the fallback for you. which captures icons far better than a <span> or a <div> with a background image. The six embedding techniques are: Break it down An SVG illustration of a bird (left) and the elements (basic and complex shapes) it is made up of 78 january 2015 .org/TR/ SVG/paths. Many more techniques exist. After optimising the SVG. embed them and provide fallback. 300). which makes creating animated and interactive multicoloured icons a breeze. However. then export the entire graphic as an SVG (netm. exported SVGs may seem tricky because they contain a lot of code that seems intimidating at first. As such. and have many advantages over icon fonts. editors usually include meta data. Chris Coyier has also written an article explaining how to create HTML-inline SVG sprites and automating the process (netm. ag/sprites-262). and closing the path z to form a triangular shape. they require special handling to ensure fonts are rendered as required across different browsers. The contents of the <svg> are also accessible. ag/svgo-262). To get started. SVGs make great icon systems because they can be styled and animated. 100). take a look at ‘A guide to using Grumpicon’ by Todd Parker (netm. it becomes much more readable and – more importantly – smaller. which make things more efficient when using SVGs as icon systems. At first glance. drawing a line L to the point (300.com) for ‘data’ – which contains the data that defines the outline of the shape you’re drawing. including any text content embedded inside it in a <text> element. comments and extra elements that can be safely removed without affecting the rendering result of your SVG.html. and embed it into your page. In addition to being resolution-independent.

0.element { background-image: url(path/to/ your-graphic.0.svg" alt="image description" /> ● .92.62c-0. where anything you Translating elements The reused element is positioned relative to its original position define between the opening and closing tags will be rendered by the browser if it cannot render the referenced SVG image. thus preserving the spatial relationship between them.8.0-27.17-12. CSS interactions (such as hover) will not work if the SVG is embedded using <img> .75.0.elements making up the head: eyes.99.162.fallback here --></iframe> ● <embed type="image/svg+xml" src="yourgraphic.0. The group element is used for logically collecting together Any styles or animations (including transformations) you apply to the group will be inherited by all the elements inside it. you can organise them into groups.61.96. unless you’re embedding the SVG inline in an HTML document. controlling it from the main page’s JavaScript can be tedious (for more on iframes. Any animations defined externally will not work.0.svg" /> ● <svg> <!-. beak. turn to page 104). Pretty cool.0. Grouping elements in SVG is similar to grouping them in a graphics editor.svg"><!-.593. right? sets of related graphical elements.81-41.105.inline svg content --></svg> If you want to animate your SVG using CSS animations. and even though <iframe> is similar to <object> in many aspects.0 9"/> </g> <g id="head"> <!-. etc.17-27.svg><!-.0.30.96.01. preserving the spatial relationship between them of shapes – instead of transforming each shape. } ● <object type="image/svg+xml" data="yourgraphic. --> </g> </g> In addition to creating elements.1-1. It’s also worth mentioning that with <object> and <iframe> .010. Structuring SVG code <g id="bird"> <g id="body"> <!-.01-0.01.75.01l36.62. and you’ll probably find yourself using groups in SVG a lot. you could group all its elements together to make working with it easier.0-13.38c0.12.9.12. For scripting with JavaScript.82.17 C78.elements making up the body shape --> <path id="wing" d="M105. This is very useful. So if our bird was part of a bigger image.84.26.78.78.0. you get a default fallback mechanism.16c-15.09 c-1. 17-27. To group elements. the <object> tag is your best bet.fallback here --></object> ● <iframe src="your-graphic.13.87.3.0. or as a background image in CSS.23.0. january 2015 79 .78.78.38.Second feature Grouping Illustrator’s grouping functionality is used to group elements together ● <img src="your-graphic.1.11c0. you need to make sure you add the animations inside the <svg> in a <style> tag. you can use the SVG <g> element.5 6.39-2. you can transform them all as a group. This comes in handy when you want to transform or animate an element made up of a group You can transform all your shapes as a group.09.09c4.51.svg).75.90.

com) 80 january 2015 .ag/styling-262 SVGs can be styled and animated with CSS. too. Changing shapes The shape animated using SMIL SVG also comes with the ability to ‘copy’ and ‘paste’ elements. and the way you embed your image will determine whether or not the CSS animations and interactions will work. You can reuse an element with the <use> element – SVG naming conventions are very convenient.ag/coyier-262 SVG has lots of potential and is a very different world from HTML. So in the example shown above. and then reuse it. defining and reusing elements. For many more resources about the different SVG topics. The copied elements can be either rendered or defined as a reusable invisible ‘template’. The x and y attributes specify the position of the pasted element. and 100 units below it. The <defs> element also be used to define an element. you can refer to my three-part guide. Make the cut Clipping paths cut out parts of an element in a specified path shape (designed by Freepik. it will be positioned relative to the SVG Current User Coordinate System.ag/structuring-262 To learn more about structuring SVG documents. The following example defines a linear gradient. check this article out. Styling and animating SVGs with CSS netm.ag/understand-262 Coordinate systems in SVGs are unitless. relative to the positioning of the original element. not just shapes. Structuring. as you can see! For example. grouping and referencing netm. To learn more about that. I recommend this list compiled by Chris Coyier. take a look at my slide deck about the topic.FeatureS Second feature Gradients The result of referencing a two-colour gradient defined inside a <defs> element Resources Understanding SVG coordinate systems and transformations netm. the new bird will be positioned 100 units to the right of the original bird. The element defined inside <defs> will not be rendered. The guide also includes an interactive demo to better understand the concepts. we could reuse the existing bird like so: <use x="100" y="100" xlink:href="#bird" /> The xlink:href attribute is used to specify the ID of the element you want to reuse. For a detailed reference. to create another bird in our SVG canvas. and when placed using x and y on <use> . and uses that gradient to fill the background of a rectangle (see image above left): <defs> <linearGradient id="greenishOrangeGradient"> <stop offset="0%" stop-color="#81CCAA" /> <stop offset="100%" stopcolor="#F69C0D" /> </linearGradient> </defs> <rect x="100" y="100" width="700" height="450" fill= "url(#greenishOrangeGradient)" stroke="orange" stroke-width="1"/> A compendium of SVG information netm. It is possible to define anything inside  <defs> .

y . We do that by animating the x-coordinate position of its centre: <circle cx="50" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributeName="cx" from="50" to="150" dur="3s" repeatCount="1" /> </circle> SVGs have builtin graphics effects like clipping and masking. animating their transformations (rotation.ag/clipping-262). using the repeatCount attribute. you can clip an element using the SVG <clipPath> element. The following is an example of a circle that is animated so it moves 100 units horizontally. which changes shape and colour. Some of these are imported from SMIL (w3. from and to specify the beginning and end values of the animated attribute. which is a watercolour splatter text effect from this article about techniques for creating textured text using SVG and CSS: netm. animating their colours. filters and even lighting effects! For example. and others have been added to SVG as an extension. The names are self-explanatory. january 2015 81 . Blending modes and filters enable you to create effects similar to those you can create in graphics editors. You can also specify the number of times you want the animation to run. or animating their motion along a path. blend modes. For more information.org/TR/REC-smil). <animateTransform> . SVG basically provides us with a range of different Photoshop effects. Using SVG animations. the closest ancestor of the animation element will become the target. SVG animations SVG provides us with the ability to animate elements by animating their numeric values (such as x . you can create more subtle masking effects that look less like they’re being cut with scissors. If you do not specify a target. you need to specify what attribute you’re animating using the attributeName attribute. Using a mask. right in the browser. I recommend this introductory article by Noah Blon (netm. translation and so on).ag/blon-262). When using an animation element. SVG graphics effects SVG has way more to offer than just creating shapes and animating them. width and height ). This ID is then used to reference the gradient and use it as a fill colour for the rectangle. There are four animation elements in SVG: <animate> . The  <clipPath> element specifies the area of the element that will remain visible after the clipping is applied (read a full explanation in my article here: netm. <animateMotion> and <set> . An example is shown in the image above. An example is a simple loading spinner. SVGs have built-in graphics effects like clipping and masking. and dur specifies the duration of the animation.ag/texture-262. These animations can be achieved by using the native SVG animation elements. and even lighting effects! When animating an element. you can morph shapes into one another. you can specify its target using the xlin:href attribute that contains the ID of an element in the same document.Second feature Masking element A watercolour splatter effect created using an SVG <mask> element applied to the text The gradient gets as ID.

.

. 84 90 Build Modularised apps  84 create a great portfolio  90 The CSS of the IoT 94 Kamil Ogórek introduces Ampersand. Look out for the video icon throughout our tutorials.io/caniusewidget). This issue. two authors have created exclusive screencasts to complement their articles and enhance your learning: Kamil Ogórek’s introduction to Ampersand.. the new ‘non-frameworky’ framework Tobias van Schneider shows you how to use Semplice to build beautiful case studies Luis Daniel Rodriguez explains how to write the stylesheets of tomorrow today Desktop Mobile/tablet 0 0 0 0 0 0 0 0 0 0 98 Head to head  96 Build a custom UI 98 Johanna Kollmann pits agile against lean in a battle of production approaches Matt Keas walks through how to create unique.js and Dave Arel’s tutorial exploring how to improve your mobile app performance. It explains from which version of each browser the features discussed are supported. january 2015 83 . interactive web experiences Standards Ruth John explores how to go about tackling device orientation events 103 3rd party content & RWD  104 Jimmy Jacobson uses iframe to add third party content to a responsive site Improve app performance 108 Dave Arel on how hardware accelerated compositing can boost mobile app speed Accessibility 114 Mark Sadecki looks at accessibility issues surrounding HTML5’s canvas element Browser support Exclusive videos We feel it’s important to inform our readers which browsers the technologies covered in our tutorials work with.js. tricks & techniques This month Featuring. Our browser support info is inspired by @andismith’s excellent When Can I Use web widget (andismith.Tips.github.

pl t: @kamilogorek job: Senior client-side engineer. Browserify for working with CommonJS modules. to be used when needed. as fully separate pieces hosted on npm. but it’s all written in CommonJS modules. I am going to recreate one of the best things available on the internet right now – the animated GIF aggregator: gifalicious. Structurally. For now. Starting our codebase For now. This enables us to collect newly found images in local storage. In this tutorial.ag/ AmpersandVid-262 84 january 2015 Writing complex applications isn’t an easy task. Illustration: Lynn Fisher and Amy Lynn Taylor Ampersand.PROJECTS JavaScript Download the files here! You’ll find all the files you need for this tutorial at netm.js is the new framework on the block.com/substack/ watchify) so we’ll be able to iterate more quickly. We’ll create our codebase using a few basic tools. all we need is the folder structure. which means we don’t need to create a local server to expose our files. we’ll keep things simple and use local storage. Modularisation – breaking things down into small pieces that work together – is one way to go. it’s similar to Backbone.ag/ampersandGit-262 A b o u t t he a u t h o r K amil Ogórek w: kamilogorek. X-Team areas of expertise: JavaScript q: how do you deal with stressful situations? a: I go bouldering. and exposed to the world with Browserify. All those pieces can be used together. Watchify (github. lift heavy things or cook delicious food JavaScript modularised apps with Ampersand. Ampersand.js.js Kamil Ogórek introduces ‘non-frameworky’ framework Video See the tutorial in action in Kamil Ogórek’s exclusive accompanying video at netm. and it combines the best parts of the top JavaScript tools to help you do just this. and uses it to build an animated GIF aggregator .net.

var Router = require('.js file has been created and will be recompiled every time we make a change. so we can add in the application name. var AppView = require('. Application lift-off Now we have installed Watchify and configured our npm scripts.app = { init: function () { this.JavaScript and of course our starting point – a single HTML file. model: this.view = new AppView({ el: document.js file. and some are meant for browsers only. and one of the simplest ways to achieve this is with npm.history. description.and server-side in node. license and version. Thanks to npm. Some of those modules can be used on both client. var Me = require('. you need to leverage the bundling capabilities of Browserify (written by James Halliday – @substack)./router'). which will transform all CommonJSbased requires into code that is usable in the browser.router = new Router(). Now our bundled. Node packaged modules (npm) hosts modules that have been written and published by other developers and can be used in your own application. you can host your own instances and create a local repository that contains all the common modules you need regularly. which can help you write your apps more quickly january 2015 85 .js -o bundled. Next we can install our tools with npm install -save browserify watchify .me = new Me().js is structurally similar to Backbone. author. Focus on Node Packaged modules One of the most crucial things to consider when writing modularised applications is code reuse.js" } We’ll create a basic application structure that will hold our files.me }). } Modularised apps Ampersand Tools are npm hosted. but is written in CommonJS modules . Also. some are node. To use those modules in your client-side application.json : "scripts": { "build": "browserify js/app. so we’ll be able to start our development. you can simply install the pieces of code you’d like to use and require them in the code.js apps.js". and add our npm start and npm build commands to the package. We can add those commands with specific flags to our newly created package./views/app'). so you can use them whenever you need. and write a simple index. "start": "watchify js/app. this. Let’s install some of the Ampersand./models/me'). window.js only. because npm is open source. ampersand-router and ampersand-view . Npm is public and you can make your own modules public.js -o bundled. hand-picked client-side modules. This will take us through a few basic questions. we can run these right away in the background with npm start .js"></script> Ampersand. this.start().html file: <section data-hook="app-container"></section> <script src="bundled. Let’s start by initialising our application using npm’s npm init .body. What we’ll need is ampersand-state . this. or all those that you’re using on a particular project.router.json scripts object.js pieces and write our first lines of code in our app.

AmpersandView .js modules – for example AmpersandState . For now all our modules will be dead simple.exports = AmpersandRouter. and covers solutions used in the framework. the main creator of Ampersand. reacting to events like add.js is one of the frameworks that relies on good JavaScript knowledge rather than the internals of the framework itself. explore the Browserify website (browserify.js describes itself as a “highly modular.exports = AmpersandState.js: Ampersand. }. This is the base of all other modules.PROJECTS JavaScript In-depth Further Reading Although Ampersand.app.js homepage ampersandjs. These resources will help you get up to speed with everything you need to make the best of Ampersand. First modules We have the main application view and our router. loosely coupled. This is the place you can read about basics of the framework and its ideology.extend({ routes: { Being human Henrik Joreteg’s book.com/substack/browserify-handbook The Browserify handbook can help you grow your skills in using CommonJS modules. module. Lo-Dash functions with an underscore namespace.init(). We required our base state. how to contribute and how to get started.com/learn The Learn page is the best way to start learning about Ampersand.js. and can deal with changes of its own children if needed. module. Ampersand. change or remove. var AmpersandState = require(‘ampersand-state’). Let’s look at what we’ve done here. Me .extend({}). as it’s capable of storing your data in a handy manner. non-frameworky framework for building advanced JavaScript apps” 86 january 2015 . but it contains all global application states.com This JavaScript book was written by Henrik Joreteg. Browserify handbook github. The key thing to understand is that every time we use any of the Ampersand.js Learn page ampersandjs.com The Ampersand. empty AmpersandState object.org). window. Human JavaScript read. so let’s write them. Human JavaScript. js. but right now we don’t have those modules. Here you can see that we required ampersand-state . including documentation. For now it’ll just be a new.humanjavascript. explores practical patterns for JavaScript apps Introducing Ampersand. or any constructor object that starts with a capital letter – it has been required at the very top of the file we’re talking about. It covers plenty of common problems you can run into when developing applications using Browserify. For more information on this. as we’re bootstrapping everything. This is just a convention.js homepage is where you can find all the information regarding this framework. it’s always a good idea to get to know your tools as well as possible.

we’ll use hashbased routing. Now we have to create the view itself. using its set method. which will look for an element with a given data-hook attribute. Router is just an object of path/function key/value pairs.js parts.scrollTop = 0. Let’s do the main route first. This way we’re able to avoid using IDs. this. What should happen when user navigates here? We should create a new view.js // Gifalicious'. var _ = { result: require('lodash. we’ll use it to create our view switcher.js: Minimalistic approach to not so minimalistic problems is Kamil Ogórek’s presentation from 2014’s Reject. january 2015 87 . var AmpersandViewSwitcher = require('ampersand-viewswitcher'). classes or attributes like role . catch: function () { this.js is a collaborative effort that is currently brought to you by over 70 contributors them without breaking any logic. This will let us swap its own content with anything we like.view. This where we should attach listeners and events. we need to install three new dependencies.js. However./gifs-item'). { show: function (newView) { document. we’re able to specify all the application routes we’d like to handle this.js we’re able to specify all of the application routes we’d like to handle. Once we get this element. var GifsItemView = require('. Resources Ampersand. attach some data to it and display it in our view switcher. gif: function (id) {}. allowing UI developers to modify Team effort Ampersand. } }). The initialize function is available on most of the Ampersand. In router.exports = AmpersandView. There are three routes we have to handle: an empty route.ag/reject-262 app.switcher = new AmpersandViewSwitcher(this. which will trigger a given function once hit.queryByHook('app-container').body. } }).switcher. which will simply redirect us to the starting point if there’s no matching route. document. } }). container. module. Our main view is slightly more interesting. create the main view passing document. gifs: function () {}.redirectTo(''). and is called once a module has been created.extend({ initialize: function () { In router.result(newView. in which he walks through the framework and explains the motivation behind the project: netm.set(new GifsView({ model: app.js init function. gif/:id route and *catch . For this.JavaScript '': 'gifs'.me })). var AmpersandView = require('ampersand-view').result') }. 'gif/:id': 'gif'. What we do here is to query our element using the queryByHook function. var AmpersandView = require('ampersand-view'). and set up routing. which is how you’d handle regular pushstate-based routing. '*catch': 'catch' }. we need to initialise our app state. we’re not able to serve the same file for every route.container = this.title = _. and eventually redirect users if they hit an unavailable route. 'pageTitle') || 'Ampersand. In the app. Handling routing Because we don’t have a server.js conference. which is our starting point.body as its element. and do our initial work.

} By creating forms this way. and take a look at a slightly more complicated example. Displaying data in views GIFtastic The original animated GIF aggregator our creation is based on (gifalicious. We already have a collection which will handle all the storage stuff for us. which will trigger the writeToLocalStorage function and store it there. which is a function with a single argument: an object with all data that user has filled into the form There are all kinds of inputs. var AmpersandView = require('ampersand-view').ag/ampersandGit-262). return this.gifs.me. submitCallback: function (obj) { app.gifs. and slightly modify our views/ gifs. it will be added to our GIF collection. this.add({ id: app. queryByHook('gifs-container')). module. to define what type of inputs should be rendered and included in the form 3 submitCallback . directly under collection render.html template.pluck(app.net) 88 january 2015 Now we have our view and data in place. src: obj. let’s add a form tag with add-gif hook to the gifs./templates/gifs. For our task we’ll need three options: By creating forms this way. we need to find a way of adding our precious GIFs to the local storage. Now every time a user sends a new image URL..length ? _. which you can read about in the GitHub repo that goes with this tutorial (netm.html').extend({ template: require('. we need to display it in our view.me. AmpersandFormView ’s constructor takes an object with few options to configure its own behaviour. fields: [new AmpersandInputView({ name: ‘src’ })] }). Adding new data using forms Because we don’t have any initial data../templates/gifs-item.pluck .PROJECTS JavaScript module.js to generate this form for us. We need to introduce two new modules – AmpersandFormView and AmpersandInputView – plus some Lo-dash functions like _.src }). } }). To do this.gifs. renderForm: function () { this.extend({ template: require('. }.queryByHook(‘add-gif’). which is a DOM element that will be used as a container for our form 2 The fields array.html'). we’re able to handle things like validation and requirements automatically. }).gifs. . ‘id’)) + 1 : 1.exports = AmpersandView. We also need to add our renderForm function to the main render . First off. Let’s add a form with a single input. render: function () { this.models. so we only need to add a new model to this collection.me.renderWithTemplate().renderCollection(app.max and _.form = new AmpersandFormView({ el: this. which will take a valid URL and send it to our collection. this. we’ll use bindings. we can handle things like validation automatically 1 el . GifsItemView.max(_. Here you can see how to handle validation and duplicates. me.exports = AmpersandView.

} reuse components that have already been written by other people Right The final form of our application. but in this case.url': { type: 'attribute'.remove(this. To learn more about all these possibilities.id': { type: 'text'. I’ve tried to keep things as simple as possible here. text . Bindings is one of the view’s attributes that we can add: bindings: { 'model. Removing GIFs To get rid of data. hook: 'id' }. name: 'src' } } Breaking things down a little. january 2015 89 . it will trigger the onRemoveClick  handler and remove itself from our GIF collection. There are plenty of other things we could do with our GIF aggregator – it’s up to you where you take things from here! Peer review With thanks to Ryan Chartrand and Josh Johnston from X-Team. Isn’t it cute? The only new thing we’re dealing with here are events.ag/gifalicious-262.JavaScript Left npm lets us easily which are a way to tell Ampersand what data should be displayed in our templates. go to netm. instead of paths. attribute and booleanClass . and &yet partner Henrik Joreteg for their peer reviews of this article. we’re listening for a click event on an element with a remove data-hook attribute.model).id ). When this happens. First we define which attribute should be used (for example model. we’re basically assigning specific behaviour to a given model’s attribute. If you’re interested and want to explore further. we specify an event and element on which it’ll occur. There are things like handling a single GIF route and adding a GIF counter which I’ve described in more depth in the project README file. hook: 'src'. Finishing up The only thing left here is to add some CSS magic to make things a little prettier. For example.collection. They work in exactly the same way as routes. To see the full GIF aggregator in action. you should definitely check out the code repository I’ve provided – netm. refer to the GitHub repo. events: { 'click [data-hook~=remove]': 'onRemoveClick' }. 'model. then specify its type ( type: text ) and select a hook (the DOM’s data-hook attribute) of an element that should be used with our binding.ag/ampersandGit-262 – for a more complicated version. where you’ll find a fully functional demo. and we can set single or multiple bindings for the same attribute. There are bindings like class . onRemoveClick: function () { this. we need to modify our gifs-item view and give it the ability to remove itself.

This can be for a number of reasons.com and enter the code iloveNET at the checkout to receive 50% off the cost of Semplice Offer valid until 14 Feb 2015 A b o u t t he a u t h o r T obias va n S chneider w: vanschneider. We know how important a great portfolio can be for our careers and especially for how we position and present ourselves in the industry. You focus on creating beautiful work. co-founder. On top of that. Spotify. which makes updating your portfolio as easy as creating it. which means all your projects are together in one place.com t: @schneidertobias job: Creative director. Semplice areas of expertise: Product design. In most cases it’s either a lack of technical skills that hinders us on the road to bringing our vision to life. Still. Semplice takes care of the rest. have presented our work hasn’t changed at all. or simply that the available tools aren’t delivering the results we have in mind. .PROJECTS WordPress Exclusive offer! 50% off semplice Visit semplicelabs. you can achieve all of this without using HTML or any programming languages. most of us struggle with the very time-consuming task of creating an outstanding online portfolio. Everything created with the Semplice content editor is easy to edit from anywhere. 90 january 2015 Created by designers for designers. Semplice is built on top of WordPress. everything is automatically responsive. as creative professionals. Semplice enables you to create beautiful branded pages that tell the stories of your project the way it should be told. branding q: how do you cope in stressful situations? a: I play a round of Counter-Strike WordPress Create beautiful case studies with Semplice Tobias van Schneider introduces Semplice. art direction. making browsing through your work on any device a joy. What’s more. a fully customisable case study portfolio system based on WordPress For a very long time the way we. With Semplice. we aimed to create the new portfolio tool we designers have been looking for.

change the colours. We will assign it to a specific project later.com or whichever font hosting service you have selected. and start creating our special project page. You can add as  many of these as you like. from any font service you choose. to achieve a fully branded effect. Let’s start by adding our custom font sets. Once you’re done. All you have to do is paste the JavaScript or CSS code from TypeKit. Think of the navigation of a global element that you could assign to as many projects as you like. 01 Each project or page is built up in a modular way. Once you’re 02 Step 2 Add as many font sets as you like. as long as you stick to the basic grid. followed by our custom thumbnail for the homepage grid. Semplice was built as a tool for translating your ideas into reality. a set of tools to play with and the freedom to do whatever you want. The great thing about Semplice is that you’re not limited to a thumbnail grid template as in most portfolio systems – each thumbnail item can have its own size. and then using Semplice to bring it into reality. We begin by 04 Step 3 Create custom navigations and add these to your project pages adding basic information about the project. 03 which you can then assign to a specific project page or pages. For example. Semplice gives you a blank canvas. simply by pasting the JS or CSS code from the font service you choose done. You own the full source code – so make it your own! january 2015 91 . You can add your logo. When we were building Semplice. so we recommend having a layout concept already planned out in your mind. while Semplice ensures it all works fine on mobile devices. font choice and so on. we always kept in mind that most designers would already know exactly what they wanted to create with it. save your navigation – we will assign it to your project later. Our next step is to add a custom navigation. Fonts. just save your custom font set. I will walk you through some of the basic functionality that will enable you to create a simple branded page that shows off a project case study. To add a new font set. each project page could have its very own font set.WordPress While Semplice is built on top of WordPress (which gives you plenty of freedom if you do want to jump into code). Expert tip Hacking Semplice Semplice is made for hacking. click on FontSets > Add New . and ensures it’s easy to maintain. Semplice gives you the option to create fully custom navigations. For this example project. everything has been created with a completely custom interface on top of the usual WordPress backend. which makes the process of building your portfolio more efficient. Click on  Navigations > Create New to create a new navigation and customise it in any way you want. Now we have our basic elements in place – the navigation and font sets – we can create a new project page by clicking on Portfolio > Add new work .

semplicelabs. The Semplice content editor is completely visual and can 10 be easily accessed a outlined in step 7. Just click on the ‘T’ icon in the top-left corner (you can mouseover the different buttons to see which modules are available). Let’s start by adding an introduction using the paragraph module. you can start to see how the website will end up looking. but it might be the perfect thing to set the tone for your cast study. 08 In the top navigation we can now select the font set we created earlier. and apply this to our paragraph layers. 06 Step 6 Add a fullscreen cover to create a fully immersive experience for your users We’re now entering the core part of the experience: the Semplice content editor. Let’s add another layer right underneath the first. Everything can be edited by simply clicking on the layer you want to change. This feature is completely optional. This helps make each case study a complete.com Step 8 Add a project description to your case study page by including a paragraph module 92 january 2015 . As everything is modular. Once you’re done. These range from images 07 and paragraphs to galleries and multi-column modules. We can do this by choosing the Image tool in the top left. You’ll will see a blank canvas. Every time you add a new piece of content. hit the checkmark icon in the top-right corner to save your layer and immediately go into preview mode. you can add a container around it which you can style in any way you like. colour. using the tools available at the top of the page. immersive experience. we also share our knowledge base which you can easily access at help. 05 Our fullscreen cover gives you a great opportunity to welcome the viewer with a beautiful fullscreen video or immersive fullscreen imagery – simply click Fullscreen Cover in the top bar when creating a new project or page in WordPress.PROJECTS WordPress Now we can add some custom branding to our project page. you could use the same navigation style for multiple different projects. Here. text alignment. You can create any layout you want. Adding an image gives you many 11 expert tip Semplice videos Semplice provides indepth video tutorials which you can access after purchasing the software. width and padding. We can customise the module’s background image. giving you complete freedom to start creating your custom portfolio. By clicking on the Content Editor tab (which you’ll find in the top bar after creating a new project or page). you enter a fully customised content editor on top of WordPress. 09 At this point. where we now can select the navigation style we created earlier. Click on the Branding tab at the top.

14 15 In order to add the video to the first column. By approaching the process this way. It’s a way to make something better. videos and more. create a new column that’s eight columns wide (leaving four columns for the description). We need to split it into two sections: one side for the video and another for the short description. and give it the width of four columns. you can create any layout you can imagine. you can re-order your 13 content layers by just dragging them to a different position. Let’s add a video from Vimeo to the page. The reason we do it this way is that the video will now automatically have the width of eight columns and will scale across any platform. Click on the paragraph (text) icon to add the description. You can be as creative as you want to be. you can now easily change the video or description width by optimising the width for the column it sits in. or even define another background image to sit behind the image you just added. Create a second column inside the multi-column module. Every module within the content editor can be combined with any other to create custom layouts. When you first start a new project. so you can see your portfolio site take shape as you build options – you can position and scale the image. 16 Creating with Semplice is addictive – once you’ve figured out all the possibilities. Each project or case study you’ve created can be used as a template for any new case study you want to add in the future. By entering the layer mode. images. Then we simply click on the oEmbed module for our first column and paste the Vimeo URL into the space. and place a description next to it. as Semplice keeps everything responsive and ensures your design works properly on mobile devices. Our default grid is made up of 12 columns. Step 9 Use the content editor to view each page.WordPress expert tip Semplice Templates Save time by using templates and the Block Duplicate functionality. Think of the way you lay out elements in InDesign – except now you can do it while keeping everything responsive. Now we’ll add a multicolumn module. you can select a previous project to use as a template. This can be a great time-saver. 17 Step 11 Made use of the multi-column module to create any layout design you prefer january 2015 93 . With this you can essentially create any 12 editorial layout you can imagine. to go the extra mile and tell the story of your work the way it should be told. Semplice is more than just a tool. You can again insert paragraphs.

emerging technology means the anatomies of our code bases are changing. two of the main issues are working with microcontroller-embedded CSS that fails to compile. Whatever microcontroller you choose. Most open source IoT projects run JS clients on Linux or Python. or they could be loaded directly using the println  method: client. These interfaces use HTML. CSS and JS code can be wrapped in <style> or <script> tags directly in the file. However. then this is your opportunity to learn to craft stylesheets in IoT projects. and load CSS or CSSbased stylesheets to platforms such as .css\" />\n" .println("<link rel=\"stylesheet\" type=\"text/css\" href=\"autohome.io areas of expertise: Prototyping. CSS assets can be loaded from an SD card. Electric Imp (electricimp. If so. Arduino (arduino. Web designers and developers need to get their slice of the IoT pie. stored directly in the microcontroller or loaded through a local network.NET or C#. CSS and JS assets.org/ bone). Here is a code sample where CSS assets are loaded in C++: void indexCmd(HTTPServer) { server. These run C++ files called ‘sketches’ which can take some getting used to. or by connecting to a local network and running client requests. For example. and dealing with buggy JS scripts to change CSS properties. As designers we’ve done a great deal of work to move on from the idea of designing . a local web server. CSS and JavaScript assets to the web browser and back. and this portion includes small user interfaces that connect to microcontrollers and load data and UI elements in real time to the cloud. Microcontrollers Sl ide Deck See Luis Daniel Rodriguez’s slide deck on The CSS of the Internet of Things at: netm. Teknolog.httpSuccess(). In a microcontroller. and write the stylesheets of tomorrow today We are used to projects that consist of a cloud or virtual web server hosting and sending our HTML. With the Internet of Things (IoT) there’s a growing demand for ‘internet enabling’ – adding sensors to physical objects and then connecting them to the internet. Arduino projects can serve index pages with remotely loaded JS and CSS. I assume that you care about writing stylesheets that lead to engaging designs and value easily modifiable code as opposed to machinegenerated CSS.cc). UI design and development q: how do you deal with stressful situations? a: By thinking ‘big picture’ learn The CSS of the Internet of Things Luis Daniel Rodriguez explains how to prepare for a plethora of screens and devices.org). whereas BeagleBone and Electric Imp load assets from a cloud server.io t: @uxcodeline job: Designer. size and layout. real world CSS needs in IoT projects essentially come down to: CSS rules to change colours. A good place to start is by looking at the interfaces for interactive TVs.. CSS IoT Grief If you can get past a little coding in C++ or Python. In Raspberry Pi.. P(indexHTML) = "<!DOCTYPE html>\n" "<html>\n" "<head>\n" "<link rel=\"stylesheet\" type=\"text/css\" href=\"custom.ag/IoT-262 94 january 2015 Four popular microcontrollers are Raspberry Pi (raspberrypi.PROJECTS CSS CSS A b o u t t he a u t h o r L uis Daniel Rodriguez w: teknolog.com) and BeagleBone (beagleboard.css\" />").

we can apply that thinking to small screens following snippet uses the button element. The IoT needs more CSS! january 2015 95 . we can use the button element for significant user tasks beyond its traditional use as a ‘submit’ button. but embracing the select design principles from the worlds of engineering and biomimicry work much better than any coding hack. CSS and JS to visualise status updates or notifications sent from the microcontrollers.ag/responsiveness-262) ● Flexibility .1). Basic HTML5 Elements One of the biggest peeves for anyone who knows HTML5 well is to find anchor tags used for buttons. Now we are ramping up our innovative layout techniques with Flexbox.CSS for specific resolutions. margin: 0. we can assign or reassign classes and support flow in the DOM with less friction. In every IoT project there is a need for dashboards designed using HTML. including sensors. Using CSS to style user interfaces displayed through microcontrollers has its limitations. padding: 12px 18px.With clever use of JS. as we move beyond web servers and flat screen interfaces. There’s no question designers have learned enough to make CSS code adapt to bigger screens. margin: 5px 0.We can support design iterations with less code. we’ve cleverly used float through the years. efficient. border and border radius. padding: 13px. We’ve learned to deal with scrollbars appropriately and paired up with JS to move content into view. CSS is ideal for styling SVG thanks to its simplicity and compactness. efficiency.notification { display: block. Here’s a basic HTML/CSS design for notifications using <div> and <span> elements: <div class="notification"> <span class="action"> <?xml version="1. margin and outline properties. SVG is the tool of choice for building visualisations. maintenance and memory.ag/flexibility-262) I’m excited for the future. Thanks to CSS. What this means is that we can write the stylesheets of tomorrow today by adapting our code for a plethora of screens. and while this article does not intend to be an SVG primer (see page 76 for more on that). } Design principles IoT projects are some of the best examples of balancing resources. CSS-based data visualisations are nothing new. border: none. something a lot of web designers are very familiar with coding CSS for.0" ?><svg></svg> </span> <span class="message">Notification</span> <span class="time">4:30PM</span> </div> Resources Check out additional resources for web designers in emerging technologies. responsiveness and flexibility creates additional opportunities for CSS in IoT. instead of the button element itself. rather than writing more code or dealing with bloated code bases (netm.1. responsive and flexible stylesheets for basic UIs and data visualisations. and we can now take that thinking and apply it to smaller screens. hardware. ● Responsiveness .When designing screens. but has the appearance of a flat menu item: button { background-color: none. border-radius: 0. you have data visualisations. altering the entire style or layout by changing just one class (netm. We can expanding the influence of CSS in a smart world by focusing on writing modular. } Data Visualisations Wherever you have data acquisition systems. API. clear: both. border: 1px solid #666. background: rgb(1.ag/efficiency-262). height: 34px.ag/modular-262) ● Efficiency .ag/train-262 . width: 233px. Applying modularity. we focus on adaptable layouts and not pixel perfection (netm. You can accomplish this several ways – for example by including icons. The We have adapted CSS for bigger screens. overriding the background colour. experience and interface design available under the Training tab at: netm. As far as layout is concerned. ● Modularity . Keep in mind that interactive TVs are at best a Linux device that can run WebKitbased browsers.CSS code can be written to be easily swapped and reassigned to standardised components (see netm. and by changing the padding. outline: none.

lean is the strategic layer. and working software is the main measure of progress. Why I love it While originally ‘for developers’. Their approaches shared key principles. documentation-driven workflow. and we are back to a waterfall process in disguise. Lean has been used in many contexts: Lean Startup. take a look at these resources: agilemanifesto. the Lean Enterprise Institute is a good starting point 96 january 2015 Agile has been sold as the secret weapon for getting everything done on time and on budget. and what I’ve covered here is a very brief overview.org The Scrum Alliance focuses on the scrum agile framework Lean. Verdict Both approaches provide tools to manage uncertainty and change. but a vision has to guide any decisions made. Agile is a lean approach to software development. At the heart of agile is an empowered team working at a sustainable pace. Thus lean appeals to leaders tasked with business transformation. The success of Toyota put the spotlight on lean. Lean Manufacturing etc. research. Philosophy and key principles Agile emphasises collaboration over process. The core idea of lean is to provide the best customer value while minimising waste. Challenges Fact file Resources Agile and lean are huge topics. The term ‘lean’ originates from Lean Manufacturing.PROJECTS Head to head HEAD TO HEAD AGILE vs Lean A b o u t t he a u t h o r Johanna Kollmann w: usandthe machines. To find out more. Data is key. is great for introducing teams to agile. It’s about solving customer problems that matter. Lean is about learning: teams and organisations continuously improve what they make and how they work.com t: @johannakoll job: Founder. delivered in ‘sprints’. while empowering people to continually improve both product and process. reflecting regularly on how to work better together and increase the quality of output. Agile is great for delivery. as its structure and rituals encourage agile values. published as the Agile Manifesto. Setting out priorities and deciding the whats and hows together allows a team to really own a product. agile’s focus on collaboration improves everybody’s lives. Combine this with a fixed scope. I combine a lean mindset for strategic decisions and my overall process. Scrum. allowing teams to prioritise what adds most value. A common misunderstanding is that lean is just about cutting costs or doing things quicker. . Its notion of reducing waste is great for improving delivery processes. a management philosophy developed at Toyota in the 1940s. It’s a philosophical approach that needs committed holistic implementation to really work. a group of practitioners got together to find a better way of developing software than the traditional. removes silos and enables knowledge sharing across disciplines. with agile techniques for planning work and day-to-day workflow and collaboration. with processes such as Scrum. Us and the Machines areas of expertise: Product strategy. information architecture q: how do you deal with stressful situations? a: My favourite way is to get happy endorphins for the next day with an evening of dancing at a good gig Johanna Kollmann compares the pros and cons of the most popular software production approaches Agile Lean In 2001. When to use it Agile is great for delivering software if you have a strong vision of what you want to build and clear priorities. The focus on customer value opens the door for customer insight and feedback. and Eric Ries incorporated it into the Lean Startup approach.org The original Agile Manifesto scrumalliance. the most popular agile approach. through efficient and flexible processes. Lean is useful for figuring out what to do next that will provide value to customers.org For more on lean. as well as wider business operations.

Sass and JavaScript techniques.on sale now! This all-new guide includes everything you need to start designing and building amazing websites people will love. and much more! Available at all good newsagents and online at netm. articles on best practice responsive web design. You’ll find tutorials covering the very latest CSS.ag/ultimateguide3 . tips on how to get the most out of WordPress and other CMSs.

responsive UIs.org t: @matthiasak areas of expertise: CSS.PROJECTS JavaScript Download the files here! All the files you need for this tutorial can be found at netm.ag/talks-262 98 january 2015 Custom UI controls are notoriously difficult to implement and can behave inconsistently on different devices. I will use an original interface I developed for a web documentary called Facing North (areyoufacingnorth. HTML5. which fades in when the screen is touched or the mouse is moved during video playback. and helps me focus on the next step – in every part of my life JavaScript Create a custom user interface Matt Keas looks at how to develop custom. Here is the HTML for the Facing North compass menu: <div class="container"> <div class="compass"> <!- . Wrapping all this up in an edgy user interface can be tiresome.com). browser support and a strong grasp of JavaScript. and fades out again after a few seconds. The main interaction of Facing North involves a rotating menu. which can be viewed by dragging the compass in either direction via mouse or touch.ag/radialGit-262 A b o u t t he a u t h o r Mat t he w K e as w: mkeas. interactive experiences on the web videos Matt Keas has given a number of conference talks on his experience of building Facing North. You can find them all listed at: netm. performance and security analysis q: how do you deal with stressful situations? a: I’m a fan of philosophy. The approach: HTML and CSS Creating custom UI controls requires intimate knowledge of CSS layouts and positioning. Executing custom designs requires pretty intimate knowledge of layout and positioning with CSS. establish a ‘DIY’ code ethic for this UI. I will demonstrate a UI approach for an interactive web documentary. interactive media. and especially stoicism. animations and pseudo-classes produces effective. and hopefully demonstrate how JS. It’s grounding. As my example. cross-platform UI controls to create unique. The compass will track with the cursor or finger. Focusing on layout. enabling the user to select the video they want to play. In this article. animation. CSS and HTML can be combined to create an original interface. JavaScript frameworks. Facing North consists of 18 videos. tedious and taxing.

. – an interactive music video with a circular UI l Hollow (hollowdocumentary.compass element is highlighted by a white. The . window. check out: l DailyJS’ series on DIY jQuery (dailyjs. a notepad and some great notes can you really boost your skills. The design includes a horizontal ‘range’ across the middle screen. denoting north."> --> <div class="north-indicator"></div> </div> </div> The . circular border. The Glue: JavaScript There are a few major components of the JavaScript for Facing North’s compass UI: l Clouds Over Cuba (cloudsovercuba.org/docs/backbone.com) – an interactive web documentary and immersive multimedia collage centred around a McDowell County in West Virginia l This Place (thisplacejournal. It’s possible to maintain a square box model by using an ::after pseudo-element that has padding-top:100% . These will be created in l Addy Osmani’s book.com) and historic documentary on the Cuban missile crisis for the entire compass UI lA  prototype (JavaScript ‘class’) to handle logic for each orbiter lP  olyfills (to help support older browsers) The JavaScript initialises onload with: window.a web documentary with accompanying images and posts about the Oregon coastline Finally. The .vendorPrefix = getVendorPrefix().compass must be small enough to fit on the screen.orbiter elements are simply <img> tags that ‘orbit’ around the compass.com). and it must be perfectly circular. book or blog on how to code or implement interactive media.ag/sourcecode-262) lT  he Backbone source code (backbonejs. Learning JavaScript Design Patterns (netm. to look deeper into Facing North (areyoufacingnorth. and using some maths we can ensure any number of orbiters will distribute evenly.container element adds the transparent black overlay and can be sized using vh and vw . Here are some of my latest favourites: It takes a lot of extra reading and work to fully explore all these items.html) The .ag/osmani-262) lT  he jQuery source code (netm.JavaScript 18 of these will be created by JavaScript: <img class="orbiter" src=".north-indicator element is positioned at the top of the compass.ag/layering-262). which can be accomplished with a CSS pseudo-element. There is no de-facto standard.com) . Safari on iOS currently has some support issues. but a few hours of dedicated practice.com) – an interactive lA  prototype (JavaScript ‘class’) to handle logic l Pharrell’s 24 Hours of Happy (24hoursofhappy. This is handled in the JavaScript. our JavaScript. resources Explore further Interactive web documentaries are intended to be viewed and experienced in a browser environment.container . typically involving some mix of interaction and audio-visual feedback. animations and pseudo-classes help produce effective..onload = app. which means these types of projects present something of a blank canvas. responsive UIs Another great angle is to look at more examples of interactive web documentaries.orbiter element. it must sit absolutely centred on the . The primary problem in the UI is the transforms applied to each .html) Layout.com/framework. function app() { rAFPolyfill(). so it’s best to recalculate the CSS with JavaScript onresize or use % widths.ag/keas-262) and a further demo on its layout (netm. january 2015 99 . The . Are you ready to start painting? For more info on what JavaScript framework to use. you can check out my talk about building it (netm.

compass elements 100 return orbiters. i++) { self.prototype. this. compass.prototype. offsetWidth.rotate() is the function used to animate the position of each Orbiter() during interaction: It doesn’t take much extra code to handle two event types – mouse and touch Compass. i)).length)). img. img. for (var i = 0.offsetWidth : the diameter of the compass. } Compass. this. the following is just a january 2015 contrived example created for this article. index) { var img = document. compassElement) { this.PROJECTS JavaScript var compass = new Compass(18. } Below left This image denotes the different elements on the screen Below right This demonstrates the positioning of the . compassElement). which takes num orbiters to create and distribute around the compass UI. } The Orbiter() constructor in the live version pulls JSON data from a server. and getVendorPrefix() is called to retrieve CSS prefixes of the browser – for example -webkit.compassElement = compassElement.addOrbiters(num.handleInteractionEvents(). document.rotate() has a few things worth noting here: 1 i : the spot in place (an integer between 0 to 17 if there are 18 Orbiter() objects) 2 self. and a reference to the compass UI DOM element.src = ".orbiters.rotation = 0.png".orbiters and the .compassElement... Orbiter() s with an i greater than 0 will be rotated around further to ensure even distribution .img = img. between 0 and 359) to set each Orbiter() .setTransform(i. compass) { var i = num. i < len. this. self. we create a new instance of the Compass ‘class’.compassElement. orbiters = []. this.orbiters = this.compass’)).length.orbiters. The compass constructor is quite simple: function Compass(num. The rest of the JavaScript is run through the constructor new Compass() . this. } Most of the animation and interaction is handled by handleInteractionEvents() . querySelector(‘. len = self. in pixels 3 delta || 0 : the current rotation (in degrees.className = "orbiter".addOrbiters = function(num. } } Orbiter.rotate(). there is a polyfill added for requestAnimation Frame() . } In app() .orbiters[i]. ~~(360 / self.createElement(‘img’). while (typeof i === "number" && i--) { orbiters. addOrbiters() just creates num Orbiter() objects and stores them in an array: Compass./images/screen" + (index % 4 + 1) + ". -ms  or -moz. delta || 0.push(new Orbiter(compass.rotate = function(delta) { var self = this. which creates <img> tags with JavaScript: function Orbiter(compass.appendChild(img).

orbiter and then move it 250px (the radius of the . -50%) translateZ(0). and CSS: . } Notice the three functions for handling touch and mouse events: 1 onTouchAndMouseStart() : triggered on mousedown or  touchstart when the interaction with the compass UI starts 2 onTouchAndMouseEnd() : triggered on mouseup or  touchend when interaction has stopped and stops animating the compass UI 3 handleDrag() : triggered on mousemove or touchmove when the compass UI is ‘dragged’ and animates the compass UI to ‘track’ with the user’s mouse or finger The code for these handlers.5%.. left: 50%. function onTouchAndMouseStart(e) { .JavaScript 4 ~~(360 / self.orbiter smack dab in the centre of the . the more it will flip upside-down. The maths was both the most difficult and most rewarding part of the UI..orbiters.. transform: translate(-50%. for 18 orbiters. width: 15%.compass .handleInteractionEvents = function() { var self = this. and the ‘drag’ events were handled only when the ‘start’ events took place.compass { width: 500px. or 20°. Unfortunately. } function handleDrag(e) { . but reorients the . this... we have created a reusable interface pattern. } $. we can add an extra and equal rotation to the . and the rotating back keeps the . involves orbiting elements that animate and revolve around the centre of a circle.ag/radialGit-262). height: 500px. Without researching. border-radius: 50%. january 2015 101 . visit the GitHub repo (netm. $. for instance. The more we rotate it round..on('mousedown touchstart'. handleDrag() and onTouchAndMouseEnd() can be found online at the Github repo. } function onTouchAndMouseEnd(e) { .. left: 50%. } This puts the .prototype. Facing North’s compass UI. to optimise CPU resources. Consider the following HTML: <div class="compass"> <img class="orbiter" src=". exploring and prototyping the ‘hard parts’ (read: the maths and UI approaches). I would not have been able to make this work as smoothly as I did..setTransform() code can be found online at the GitHub repo (netm. This is easily done with CSS transforms. translating the . ~~ rounds a decimal number to the nearest integer The Orbiter. you’ll notice that the . Final thoughts Through a strategic approach. For example.ag/radialGit-262). position: absolute. border-radius: 50%.length) : the degrees by which to spread out each Orbiter() .orbiter .compassElement). Let’s assume our container element (with class . } . Any .orbiter { position: absolute. onTouchAndMouseStart() . The rest of the Compass() constructor involves initialising touch and mouse event handlers: Compass.orbiter doesn’t keep its vertical orientation. margin: -7.orbiter element on the interface can rotate around the edge of the circle. this will be 360/18. onTouchAndMouseEnd.compass ) with this extra line: transform: rotate(25deg) translate(-250px). onTouchAndMouseStart. top: 50%. top: 50%. In-depth Rotating elements CSS Transforms can facilitate some really edgy designs. We can easily rotate the . For an in-depth look. Doing as much animation as possible via CSS helped optimise rendering.orbiter : transform: rotate(25deg) translate(-250px) rotate(-25deg). Rotating 25 degrees. window).compass ) has  border-radius: 50% and is horizontally and vertically centred on the screen. This is one nifty trick we can do with transforms./images/screen1. The final product benefits from a DIY code ethic.orbiter  element so it’s be vertically aligned again.png"> </div> . It didn’t take much extra code to handle two separate event types (mouse and touch).orbiter in the same spot.on('mouseup touchend'. as well. To fix this.

99 every six months .uk/CASUBS OR CALL 0844 848 2852 AND QUOTE ‘BUNDLE14’ Your bundle subscription will continue at £29.co.myfavouritemagazines. and get behind-the-scenes access to top studios. pro analysis of the latest trends and inspiration that lasts all year GREAT REASONS TO SUBSCRIBE: Save up to 61% on combined subs Print edition delivered to your door Download the award-winning iPad edition Full money-back guarantee 13 issues in a one-year subscription FROM £29. .saving 36% on the shop price.99 SUBSCRIBE ONLINE TODAY: www. plus an incredible 85% discount on a digital subscription.NEW BUNDLE OFFER! SAVE UP TO 61% SUBSCRIBE TO COMPUTER ARTS Enjoy the tactile beauty of our print edition and the interactive delights of our award-winning iPad edition in one package.

the value of gamma would change. All events are supported in most major desktop and mobile browsers. The event is fired when there is a change to any of these values. As always. but the degrees from the original direction of the device when the event is first fired. including deviceorientation and devicemotion . beta is the vertical tilt and gamma is the horizontal tilt. You can view an example of the code to access the deviceorientation event values at netm. You can often find her chatting about web development. If the screen and keyboard were facing you. and Mobile Safari doesn’t take the compass heading value for the deviceorientation alpha value. Similarly. y and z. A quick aside: if you are familiar with iOS development then this is a lot like the Core Motion Framework. Based on a handheld device’s default position being portrait. Alpha is the device’s position based on the compass heading. Opera Mini and IE Mobile. PROFILE WEb APIs to imagine picking up your laptop. ag/demofull-262 (full-page) or netm. the interval in milliseconds at which data is obtained. beta and gamma. designs and codes. there are quirks. we may not want this. It also returns rotationRate – the rate at which the device is rotating – and interval . Usually acceleration takes into account gravity. This event returns two values for acceleration: acceleration and accelerationIncludingGravity . In the same example of code linked to above. The deviceorientation event gets information on the placement of your device and is returned with values for alpha. beta and gamma values. If you tilted it back away from you. and beta and gamma are tilt values. but when you start to play around with them. which is part of the specification. there’s no data to pick up on. Quite a few of them are influenced by mobile devices and current native development. Ruth (@Rumyra) wireframes. Games. its acceleration as it moves. the value of beta would change. they’re quite easy to get your head around – then you can start to build some pretty fun things. and you tilted it with the left side down and the right side up. and rotationRate is returned as the rate of change of the alpha. It may be easiest Current support The current W3C specification is in working draft. gesture control and mapping are but a few use cases. Older versions of Firefox implement the events in a slightly different way. This is measured in m/ s². you can see the devicemotion values being returned.ag/democode-262 (with code). there are some very interesting web APIs coming to our screens and code. It’s also wise to be aware that devices need to have the hardware and relative support. These events may seem confusing on the surface. then the Sensor Manager Object would give you access to the same data. As before. and specifically. and as some devices don’t have the means to return acceleration without the effects of gravity. No support is given in desktop Safari. Here there are acceleration and accelerationIncludingGravity values for x.Web standards Device Orientation Ruth John on the events that monitor device placement and movement As I explored with my Vibration API article in issue 260. building apps and how an extra div is not the answer to your styling problems january 2015 103 . If there’s no accelerometer or appropriate drivers. The devicemotion event gives us information about the movement of the device. but not yet supported. Some of the most supported modern features are device orientation events. if you’re familiar with Android development. However. with the exception of the compassneedscalibration event. we listen for an event.

These apps offer users the ability to interact with content such as videos. the iframe fell into disuse and even disdain.PROJECTS RWD Download the files here! All the files you need for this tutorial can be found at netm. Full-stack development. Before tables and CSS. including trying to mimic the sidebar of Windows apps. There is one glaring issue that keeps this from being a perfect solution. Tumblr. CodePen. work just as well when an HTML document is rendered inside an iframe as they do when the document is the root of the window. and to embed those previews on third party websites january 2015 Adapting and adjusting Living in the 21st century.  ● Disqus is a commenting platform that turns any page into a forum thread with comments ● Twitter uses iframes generated via JavaScript to enable users to embed Tweets inside any web page ● Tumblr uses iframes to display videos and other content. People did crazy things with iframes. If the embedded web app does not adjust its display for different devices. the iframe tag. scalability q: how do you deal with stressful situations? a: Take a walk! When a situation or event is getting stressful. it never really went away. Good news – the iframe is back! Actually. as it was back then. user authentication and even social features – so please don’t call them ‘widgets’. netm. Responsive design techniques. it was all a web designer (or.ag/3rd-262 104 Ah. The only acceptable use of the iframe was to display ads. And that is true for these embedded web apps. content has to work on an array of devices. as well as to prevent malicious JavaScript from being run inside its dashboard ● CodePen makes use of iframes to show real time previews of code being written by its users. I like to take a quick walk around the block Add 3rd party content to responsive sites Jimmy Jacobson explains how to use JavaScript. including using a fluid grid. . Services like Disqus. Wedgies and SoundCloud all use iframes to enable social media networks and third party websites to embed fully featured web apps. Wedgies areas of expertise:  JavaScript. it will not fit inside the mobile layout.ag/iframeGit-262 A b o u t t he a u t h o r Jimm y Jacobs on RWD w: wedgies. As HTML evolved to support tables and then CSS. ultimately causing the website owner or social network to abandon it. You just haven’t been noticing it any more. Vine. Websites often use different layouts for mobile and desktop rendering.  These apps include the ability to interact with content – please don’t call them ‘widgets’ The solution to this is the same one that web designers and developers use for websites on mobile devices. Of special interest will be the sections on writing your own library and cross-domain message passing. a webmaster) had to control the layout of a page. iframe and RWD techniques to embed third party web apps in your responsive site Resource 3rd Party JavaScript by Ben Vinegar and Anton Kovalyov covers writing JavaScript to be used by third party websites.com t: @jimmyjacobson job: Co-founder and CTO. flexible images and CSS media queries. It is impossible for an iframe to have a height specified by a percentage. NodeJS.

and responsive design in the content provided to the iframe. browsers default to 150 pixels. as ever. the code provided to the end user and the code served into the iframe are identical. when an explicit height in pixels can’t be detected for an iframe.ag/thirdparty-262). This height is detected via the height attribute of the embedded document in the resize event handler 3T  he parent window listens for the message and resizes the iframe element whenever the message is detected. The technique we now use is achieved through a combination of JavaScript that is loaded into the user’s website.  Finding a fix At Wedgies. Just make it work. an HTML document embedded in an iframe can pass a message to the parent window using cross-domain messaging. Set height The UI for embedding a SoundCloud shows you can’t set the height of an iframe to 100 per cent via its attributes and for an iframe to detect the height of the content being rendered inside it.RWD   case study Embedding polls Wedgies (wedgies. The flow is pretty simple. has some very strange requirements (see the GitHub repo at netm. our solution to this problem comes from the excellent book Third Party JavaScript by Ben Vinegar and Anton Kovalyov (netm. Next to it is the same poll embedded into the same page. Using JavaScript. but rendered in a mobile screen size january 2015 105 . A lot of Wedgies’ users choose to embed these polls on their own websites. The content has adapted responsively and the iframe has been resized automatically.com) provides a platform for creating and voting on polls.ag/iframeGit-262 for more on this). but there are some specific things that have to be done in order to conform to the security policies of various browsers. Below you can see two examples of one poll embedded into both a desktop layout and a mobile layout. was the one that removed the worry from the end user. Internet Explorer. In most cases. This is how the development team at Wedgies learned how difficult it could be for a user to embed third party content into a responsive layout. But in the end we found the best solution. in particular. 1 Register an event handler in the embedded document for resize events 2T  he embedded document posts a message to the parent window that contains its own height. In both examples. including allowing the user themselves to set a height and width on the content. using the data in the message Changing shape Shown here is a Wedgies poll embedded into a page rendered on a large screen. Wedgies experimented with a few different ways to make this process easier on the user.

Benefits and bonuses Leveraging responsive design inside a web app intended to be embedded on third party websites has other bonuses as well:  ● By providing an oEmbed endpoint.resize(postMessage). This code is loaded by the parent webpage.height = (parseInt(msg)) + "px". instead of being rendered in a fixed height iframe.parent. It listens for a message and sets the height of the element with  id = id-of-iframe to the value in the message. the JS library detects these snippets and expands them into the code needed to render the iframe containing the correct content. and generates an iframe to load the web app Below Wedgies uses PhantomJS to render the embedded web app view of a poll.getElementById('id-of-iframe'). Now when a user pulls up the web page on a mobile device.   function msgReceiver(ev){ var msg = ev. }   Event handler for window resize: $(window). The library also contains the message listener and code to resize the iframe when a message is received. the web app can be discovered by services like Embedly (embed. and for the document embedded in the iframe to respond to the resize events responsively.ready(postMessage).   Event handler for page load: $(). without any modifications RWD techniques aren’t just for mobile. } } This technique requires the developer of the embedded web app to have control over JavaScript on the parent page. window. the embedded web app responds to the width and height correctly. if (elem) { elem. so be careful about filtering for the specific message from your app.data. exposing the app to more potential users ● Building plugins on platforms like WordPress is much easier ● PhantomJS can be used to render a screenshot of the embedded web app and used as content for Twitter or Facebook posts ● Content is ready to be used inside a mobile app via Web View. Top Disqus is deployed to third party websites via JS.PROJECTS RWD Take a look at the following code.height(). which can be used as content inside Facebook and Twitter posts var elem = document. which goes in the webpage that is embedded via iframe. This is pretty simple code.  106 january 2015 .style. The best way to do this is to give them a combination of a JS library and a snippet of HTML containing a unique ID.postMessage(msg. '*'). cutting off the content in the mobile layout. In a production environment there are many things posting messages. When run.ly) that aggregate embeddable services.   function postMessage() { var msg = $('body'). This technique allows the iframe to be resized along with the page. A web app deployed to an iframe and distributed across websites will have broader adoption if it works across any screen size or mobile device. Use of jQuery is assumed in this example. iframes trigger the same events and constraints a document needs to render itself responsively.

.

If you are a web developer. unless you’re a game developer for the web. regardless of the language being used. in some cases – especially in environments like mobile – it can result in harsh performance implications that we have very little control over. Today. Like most hardware-related performance matters. the GPU is a necessity. In gaming.PROJECTS Performance A b o u t t he a u t h o r Dav e Arel w: davearel. However. CSS3 q: how do you deal with stressful situations? a: Beer. The web. most modern browsers utilise the GPU. Can I say that? performance improve your mobile apps’ performance Dave Arel explains how to use hardware accelerated compositing to improve applications’ animation and rendering performance The web is full of exciting applications that push the limits of modern technology. Processing on the web has been. excels at rapidly manipulating memory to accelerate the creation of images to output to a display. with its january 2015 many inefficiencies. is particularly tricky in low processing environments. The CPU is the brain behind the computer. it’s more important than ever to understand what’s going on under the hood of the browser. but at the same time most frustrating. and is responsible for the majority of input/output operations. understanding our code’s impact on the GPU can go a long way to creating performant applications. the browser has tried very hard to remove the use . especially a mobile web developer. One of the aspects of the web that is most appealing. web browsers have foregone all use of the GPU. mobile has often been considered a harsh environment to develop in.com t: @davearel job: Stealth entrepreneur areas of expertise: JavaScript. but until recent years. Processing Video Dave Arel has created an exclusive screencast to accompany this tutorial. Watch along at netm. The beauty of the web isn’t its performance – it’s the quick distribution and availability on almost any device that sets it apart from almost any other environment. While we don’t necessarily have lowlevel access to the GPU.ag/ performance-262 108 Since the dawn of computers. however. HTML5. is that it often abstracts many of the lower-level details of traditional languages like C or Java. you’ve probably given very little thought to the processors you’re building web apps for. processing power has always had an enormous impact on the type of software we’ve been capable of producing. thankfully. has forced us to take a much deeper look at the performance of the web. Because of its lack of processing power and low memory capacity. However. however. introducing The GPU Most modern devices have two types of processors: the central processing unit (CPU) and the graphics processing unit (GPU). In most cases this leads to a greater efficiency in the way we develop applications. Mobile. an afterthought. The GPU. Lots of beer.

Standards The W3C is working on specs to standardise the use of the GPU january 2015 109 . but in reality browsers will continue to evolve. GraphicsContext Traditionally.0). and translate them onto the screen without having to repaint the image. In this article. The browser can then make a choice according to the change specified. an entire web page was a single GraphicsContext or backing surface. The future of compositing will contain better documented resources and browser standards for utilising the GPU.element { -webkit-transform: translate3d(0. 0. 0) . so it’s important to test the impact that hardware acceleration has on your application in every browser you support. However. as translate3d was intended to. Understanding how to best utilise the GPU can greatly impact the performance of your application. Simply use translate3d to force the object into a negative space (-1000px. it’s critical to utilise the GPU with purpose. and sometimes a bit of a hack.Performance Focus on The present and future of hardware Gaming world The GPU’s ability to perform thousands of calculations in parallel is essential in creating the intense gaming graphics you see today of this hardware from web author’s code. It also prepares the layer so it can be instantly moved or manipulated later. . browsers have very few resources that describe their rendering process. The terminology and implementation of hardware acceleration can be very different for each browser. I’ll take a look at this general concept. gaming and applications – hardware acceleration has become an integral aspect of performance on the web.0. the use of 3D transforms.0. Creating a composite layer is a good way of ensuring it won’t be repainted when other parts of the page are repainted. transitions and opacity changes. W3C’s CSS Will Change Module working draft will allow web authors to inform the browser of an element that is likely to change. and there are very few standards around the implementation of this. utilisation of the GPU is determined by several factors – most notably. it does trigger hardware acceleration and will cause a composite layer to be created. Today. However. } While this doesn’t perform any visual action to the element. Browsers have tried to remove the need for web authors to consider the use of the GPU altogether. and we’ve already started to see specs being developed that will help do just that. Processing power has an enormous impact on the software we’re capable of producing On top of that. Then translate it back to the screen by setting the translate3d property to (0. This can be useful for items that may not otherwise contain 3D transforms. leaving the implementation of the GPU up to the browser to predict. given that the web is accelerating every day – and constantly progressing to far more complicated graphics processing. Helpful tip: You can use compositing to cache elements off-screen. to build truly performant mobile applications or web animations. Because a GraphicsContext has a one-to-one relationship with a bitmap. without necessarily having to repaint the object. To do so often requires browser prefixes. whenever the GraphicsContext is invalided (changed visually in any way) the entire bitmap needs to be reprocessed.0) .

inlcuding a section regarding browsers’ rendering engines Mobile web so fast Vin Diesel wouldn’t race it netm. While in theory every object on the page could be composited. This can be problematic when trying to change (animate) a layer over and over. when something on the page changes (text. it’s critical to understand the difference between painting and drawing. creating optimal frame rates for animations can be difficult. Compositing helps break up our page into several backing stores.ag/chrome-262 Chrome’s updated documentation on its implementation of GPU accelerated compositing Compositing in Blink and WebKit netm.ag/tricks-262 Ariya Hidayat explains some tricks for getting the best performance from your CSS animations At the core The CPU is the computer’s ‘brain’. this can be wasteful in terms of memory. Because repainting a bitmap is extremely costly. Hardware acceleration Hardware acceleration is a term most of us have probably heard many times over the past few years. Drawing is an efficient process that involves casting the pixels to the display.ag/sencha-262 A blog post by Sencha that considers hardware acceleration Accelerated rendering in Chrome netm. It’s widely understood that 60FPS creates an optimal viewing experience. and has very few cores. and discusses how to debug this using Safari’s Developer Tools Tricks for GPU composited CSS netm. layout CSS Will Change Module netm. It simply draws the bitmap onto the screen for each frame of the animation. If you are familiar with animation or video terminology. you’ll likely know that frame frequency (often referred to as frames per second or FPS) is an important aspect of creating smooth animations.PROJECTS Performance Drawing versus painting Resources Further Reading Chrome and several talented web developers have been leading the way in breaking open the inside of the browser’s rendering engine and shining some light on what’s inside.ag/layer-262 A basic but useful overview of hardware acceleration by Chrome product manager Tom Wiltzius How browsers work netm. In action If there’s one thing to take away from this article it’s this: without hardware acceleration. The GPU processes certain tasks simultaneously. that can’t be handled by the GPU alone and requires the CPU. To most people. It’s also inefficient to upload a texture to the GPU.ag/blink-262 An extremely insightful video that explores compositing in Blink (Chrome’s rendering engine) and WebKit Understanding hardware acceleration on mobile browsers netm. styles.ag/change-262 A W3C working draft – this is the future of compositing on the web Optimizing CSS3 for GPU compositing netm. Check out some great resources below: GPU accelerated compositing in Chrome netm. allowing the browser to focus on repainting or redrawing only a portion of the page. The GPU can be used to manipulate bitmaps without having to repaint them. Painting is a very expensive process that involves generating a new bitmap.ag/optimise-262 Ariya Hidayat demonstrates a spinning 3d cube using the compositor. This is because it has typically been most effective in improving the performance of some animations. hardware acceleration refers to creating smooth animations. and can have thousands of cores 110 january 2015 .ag/work-262 A very insightful overview of how browsers work.ag/fast-262 Article I wrote exploring compositing on the mobile web First off.

we can perform some of those tasks within the hardware. 100% { transform: translateY(0). the browser will composite these layers. By using the GPU. browser prefixes are necessary to perform these actions in most browsers. HTML <div class="circle"></div> CSS . Note that the examples below assume browser compatibility. } } As you will see in Chrome. and using the original bitmap we can simply draw the image to the page for every frame of an animation. The green indicates it’s being repainted every frame. } 60% { top: -15px. we will animate the element with translateZ property. display: inline-block. uploaded and drawn for every frame of the animation. 50%. transitions and opacity changes are all suitable candidates for compositing. animation: bounce 2s infinite. } 40% { top: -60px. 80%. top: 50px. 20%. as seen here in Chrome Compositing Here the circle is no longer being repainted every frame. height: 30px. each frame of the animation is being repainted. and will only issue draw calls for each frame of the animation. 50%. it’s being composited } @keyframes bounce { 0%. In the first example. transitions and opacity changes are all suitable for compositing margin property. We will do this with the CSS3 @keyframes rule. painted. we will bounce a circular element.circle { background: red. 20%. In the example below. border-radius: 30px. and the content will be redrawn without having to be calculated. If we swap the top property for the translateY property. As of now. width: 30px. margin: 0 auto. causing the browser to repaint the content for every frame. 100% { top: 0. 80%. } 60% { transform: translateY(-15px). In the second example. we will animate the CSS transformations.Performance and so on) the browser has to reprocess some or all of your page. CSS changes @keyframes bounce { 0%. position: relative. Repainting The red circle is not being composited. } 40% { transform: translateY(-60px). CSS transformations. rather than continually painting it. The GPU will handle the manipulation of this object. This is one of the most expensive processes your application will undertake. } } january 2015 111 . This will cause the browser to composite the object.

PROJECTS Performance This is an incredibly efficient and smooth process. Chrome and Safari have some excellent debugging tools when it comes to compositing. debug. Use your developer tools in Chrome and Safari to measure the difference.chrome. Because layers can be large. you’ll want to ensure you understand exactly how much memory you are using. it’s a little hard to see the true impact this has. Layers can be accelerated simply because of their stacking context. . you will see every node that is composited within your application. or animate at a low frame frequency. Watch a video of it at netm. Try duplicating the div to form hundreds of bouncing objects. because it’s very easy to abuse.This will flash a green box around any element that is repainted – when something is simply drawn. the memory that layer is using. it doesn’t always make sense for the browser to repaint the entire layer ● Show FPS meter . the GPU can use a lot of memory. In applications where accelerated compositing is used a lot. Each node will list a reason for compositing. and monitor composited layers ● Show paint rectangles . Remember that painting is an inefficient process. Click the ‘drawer’ icon in the top right. which lists all the composited layers under the current node you have highlighted in the inspector. You may find you’re unintentionally utilising more memory than you originally thought. The best way to gain insight into this is simply by using it.ag/devconf-262 particular.This will draw a line around each composited layer. in many different ways. you will see a layers tab that will open a tool to help you find. The GPU is then able to execute the drawing process for each frame of the animation.com/ devtools). Most importantly. A bitmap is created and uploaded to the GPU as a texture. In Chrome’s developer tools (developer. Because we’re only animating one object. as well as revealing tiles. Dave Arel gave a talk entitled ‘Accelerate yo’ HTML mobile app. at a rate of nearly 60FPS rate. Tiles are a way for the browser to break up composite layers into several manageable chunks. and you’ll begin to see the effect this has on the browser. The fewer green boxes there are. There you will see a Rendering tab which will contain some of the following options: Debugging In Safari.This will display a FPS meter that will show you when your applications drops below 60FPS Newer versions of Safari come with a helpful Layers tab. You can open these by clicking on the ‘drawer’ icon in the top-right of the debug panel. this is definitely something worth considering. If you highlight the HTML tag. then on the Rendering tab 112 january 2015 Accelerated compositing can be extremely helpful. and a count of how many times that layer has been painted. Debugging Debugging accelerated composited layers is massively important for several reasons. In Closing Rendering options Chrome’s dev tools contain some great rendering settings. there are several rendering settings. If you’re working in a mobile environment in Ensure you understand how much memory you are using. the better the performance ● Show composited layer border . the green box will not appear. then watch closely to see how this impacts your application. Try adding properties such as translate3d on elements that seem to render slowly. because it’s very easy to abuse Video At this year’s HTML5DevConf. when it is properly understood.

.

However. how users interact with those paths. When a keyboard or screen reader user interacts with fallback content. The Canvas Task Force of the W3C’s HTML Working Group has recently added two new features to the Canvas 2D specification that attempt to solve these problems: a method for programmatically linking a region of the <canvas> with a particular piece of fallback content. and one for visually indicating if that region has keyboard focus. and if it does. which provides an alternative for non-text content. it must meet the following principles: 1P  roviding alternative content for what is drawn on the <canvas> 2E  xposing the location of a path drawn on the <canvas> to assistive technologies 3V  isually indicating whether or not that path had keyboard focus (netm. without a method for programmatically associating this content with regions on the <canvas> . to use in applications that need to be accessible to people with disabilities. The addHitRegion() (netm. Authors can also call the drawFocusIfNeeded() 114 january 2015 Mark is the accessibility coordinator at edX.ag/drawfocus-262) method after drawing a path to the <canvas> . Partial support is included in Chrome Canary. interactive bitmap images. the dynamic nature of the <canvas> element has made it difficult. if not impossible. dynamic and interactive <canvas> applications cannot be fully accessible. and visually indicating when these regions have focus. the location information reported to the Accessibility API is that of the corresponding hit region. rather than the location of the textual equivalent. to draw a focus indicator (a dotted or solid line) around that path. and an invited expert in W3C's HTML Working Group. However. and how those items may change over time.ag/hitregion-262) method can be passed the ID of a corresponding element represented in the fallback content. This instructs the browser to check if the associated fallback content has focus. scriptable.PROJECTS Accessibility Accessibility The canvas element Mark Sadecki discusses two new features of HTML5’s <canvas> element that help make it accessible to users with disabilities The HTML5 <canvas> element provides authors with a drawing API they can use to create dynamic. PROFILE The <canvas> element allows authors to put HTML content between its opening and closing tags (‘fallback content’). Screen magnification software can then pan and zoom to the location of the region drawn on the  <canvas> . To be accessible.ag/recommend-262) stage of the W3C Technical Report development process. There is virtually no limit to what authors can draw on the <canvas> . These two features are currently in the Candidate Recommendation (netm. including the number of paths. Firefox Nightly and the nightly build of WebKit.org/People/mark) . He participates in the HTML Accessibility Task Force and the Canvas Task Force (w3.

.

40 million images 1. .js Create beautiful portfolio case studies 9012 Learn the CSS of the Internet of Things Create a custom user interface Add third party content into RWD Improve your apps’ performance A fusion of creativity Brilliant technology. Amazing art.9 million videos 40.000 new files added daily 9000 Explore our innovative new tools at shutterstock.com/labs.Projects Modularised apps with Ampersand. It’s a match that helps deliver great images and videos to creative professionals like you.