46wt by srtu dtyukdty

special 2oth anniversary issue The voice of web design

Issue 261 : December 2014 : net.creativebloq.com

Prototype with origami Discover Facebookâ&#x20AC;&#x2122;s free and easy design toolkit for Quartz Composer

The top 23 JavaScript libraries every designer and developer needs to know

Exclusive reports, interviews & more! Project

Build a modular CMS tailored to your needs

Welcome

editor’s note

20 years ago, when the first issue of .net magazine came out, promising to “make sense of the information superhighway”, I was finishing off my A-levels. We didn’t have the internet in school and programming for us meant Karel the Robot. It was only the following year, at university, that I discovered the legendary blue links via Netscape Navigator, which recently also turned 20. 20 years ago, Opera’s CTO, Håkon Wium Lie, also published a proposal that would change web design forever: cascading HTML style sheets (netm.ag/CSS261). And 25 years ago Tim Berners-Lee released the code of the World Wide Web to the public. To say that things have changed is an understatement.

For this milestone issue, we have interviewed many of the web’s leading designers and developers to celebrate how far we have come. Read Gary Marshall’s report on the story of the web on page 76, check out what Jeffrey Zeldman and Remy Sharp think we can learn from the past on page 38 and, if you want to know what the future holds, take a look at Peter Smart’s essay on page 28. So here’s to you, our readers, and here’s to the web – we wouldn’t be here without you! Oliver Lindberg, editor oliver.lindberg@futurenet.com @oliverlindberg

Featured authors Eric Me yer

Natasha Irizarry

Jack Frank lin

Pe ter Smart

Eric A. Meyer is an author, speaker, sometime teacher, and co-founder of An Event Apart. On page 103 he explains how the standards process has served us all these years w: meyerweb.com t: @meyerweb

Natasha is a self-proclaimed UX evangelist and works as a consultant for companies with UX and design problems. On page 26 she talks about trusting your creative intuition when designing with data t: @natashairizarry

Jack does Ruby and JavaScript at GoCardless, writes at javascriptplayground.com, and from page 68 lists the top JavaScript tools you can't afford to miss w: jackfranklin.co.uk t: @Jack_Franklin

Designer Peter works at Fantasy Interactive and recently travelled 2517 miles to solve 50problems50days. com. On page 28 he looks at the future of the web w: petesmart.co.uk t: @petewsmart

december 2014 3

@netmag

Future PLC, Quay House, The Ambury, Bath, BA1 1UA +44 (0)1225 442244 /netmag +netmagazine flickr.com/photos/netmag netmag@futurenet.com

net.creativebloq.com

Editorial

Editor Oliver Lindberg oliver.lindberg@futurenet.com, Production editor Ruth Hamilton ruth.hamilton@futurenet.com, Art editor Mike Brennan mike.brennan@futurenet.com, Designer Rich Carter richard.carter@futurenet.com, Commissioning editor Martin Cooper martin.cooper@futurenet.com, Staff writer Sammy Maine sammy.maine@futurenet.com, Staff writer Gary Evans gary.evans@futurenet.com

Editorial contributions

Austin Bales, Philip Clarke, Tanya Combrinck, Gene Crawford, Jordan DeVries, Antony DiSpezio, Jack Franklin, Scott Garner, Shawn Henry, Natasha Irizarry, Mark Jones, Sean Johnson, Gion Kunz, Mark Llobrera, Gary Marshall, Eric A. Meyer, Alexander Mihaylov, Dan Nagle, Peter O’Neill, Adam Simpson, Peter Smart, Karolina Szczur, Elle Waters

Art contributions Linzie Hunter, Ben Mounsey, Ben O Brien, Xavier Ho

management

Group editor-in-chief Dan Oliver dan.oliver@futurenet.com Head of content and marketing, photography, creative and design Matthew Pierce matthew.pierce@futurenet.com, Director of content and marketing Nial Ferguson nial.ferguson@futurenet.com Creative director Robin Abbott bob.abbott@futurenet.com, Acting group art director Simon Middleweek simon.middleweek@futurenet.com Editorial director Jim Douglas jim.douglas@futurenet.com, Chief executive Zillah Byng-Maddick zillah.byngmaddick@futurenet.com

Advertising Director of advertising sales James Ranson james.ranson@futurenet.com +44 (0)20 7042 4163 Advertising sales director Suzanne Smith suzanne.smith@futurenet.com +44 (0)20 7042 4122 Senior sales executive Victoria Sanders victoria.sanders@futurenet.com +44 (0)20 7042 4176 Circulation Trade marketing manager Daniel Foley daniel.foley@futurenet.com Print & Production Production controller Roberta Lealand roberta.lealand@futurenet.com Licensing Licensing & syndication director Regina Erak regina.erak@futurenet.com +44 (0)1225 732359 Subscriptions Phone our UK hotline 0844 848 2852; international +44 (0)1604 251 045 Subscribe to net online at myfavouritemagazines.co.uk

NEXT ISSUE ON SALE 27 November 2014 © Future Publishing Limited 2014. All rights reserved. No part of this magazine may be used or reproduced without the written permission of the publisher. Future Publishing Limited (company number 2008885) is registered in England and Wales. The registered office of Future Publishing Limited is at Quay House, The Ambury, Bath, BA1 1UA. All information contained in this magazine is for information only and is, as far as we are aware, correct at the time of going to press. Future cannot accept any responsibility for errors or inaccuracies in such information. Readers are advised to contact manufacturers and retailers directly with regard to the price of products/services referred to in this magazine. If you submit unsolicited material to us, you automatically grant Future a licence to publish your submission in whole or in part in all editions of the magazine, including licensed editions worldwide and in any physical or digital format throughout the world. Any material you submit is sent at your risk and, although every care is taken, neither Future nor its employees, agents or subcontractors shall be liable for loss or damage.

Print 10,632 Digital 3,672

We are committed to only using magazine paper which is derived from well managed, certified forestry and chlorine-free manufacture. Future Publishing and its paper suppliers have been independently certified in accordance with the rules of the FSC (Forest Stewardship Council).

The ABC combined print, digital and digital publications circulation for Jan–Dec 2013 is

14,304

A member of the Audited Bureau of Circulations

Colophon 4

december 2014

Apps used

Google Docs, InDesign, YouTube, Skype, Illustrator, FutureSource, Photoshop, GitHub, Quip

paper

COVER PaceSetter Gloss 250gsm P3-82 Galerie Fine 100gsm P83-114 Grapholvent 70gsm

Typefaces

Antonio, Amatic SC, Merriweather, Share Tech, Titillium Web

contents Issue 261 : December 2014 : net.creativebloq.com

FEED

SIDE PROJECT of the month 16

Joel Alexander shares his library of short and sweet practice briefs for designers

clients from hell

BEYOND PIXELS

NEED list

EVENT report

Workspace

Alexander Mihaylov gives a tour of betahaus Sofia, Bulgaria’s first coworking space, and introduces the team and tools that ensure everything runs smoothly

A designer faces a client with unique views on what makes a professional identity

Jordan DeVries shares what he’s learnt from creating a range of board games

What we want, from an app that organises our bookmarks to a neat new notebook

Oliver Lindberg reports from net’s very own web conference, Generate London

voices Data Versus Intuition

Data’s all well and good, but it can’t replace creative instincts, argues Natasha Irizarry

The future of the web is ... 28

Peter Smart explores a future where the web is tangible, adaptive and invisible

Big Question

Q&A

We asked: what can web designers and developers learn from the past?

We chat to the Paravel team about their recent foray into web archaeology

What are we worth?

Sean Johnson considers how designers should put a price on their time and skills

december 2014

VOICES

INTERVIEW

‘The Dao of Web Design’ author John Allsopp argues that Sass isn’t as great as people think it is, and explains why the future will be all about JavaScript

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

Contents

regulars

regular

GALLERY

Karolina Szczur lists her top new sites, including a beautiful creation for Charity: Water’s September campaign

Network

Exchange

The latest mail, tweets, posts and rants

Wisdom from Peter O’Neill, Mark Jones, Elle Waters and Philip Clarke

Showcase design Challenge

Focus on

profile

how we built

Designers reimagine sites from 1994

Gene Crawford explores perceived speed

We chat to entrepreneur Drew Wilson

Behind the scenes on the Field Museum site

PROJECTS Create a modern web UI

Dan Nagle explains how to leverage various tools to lay the groundwork for a web UI

Features Essential JavaScript

Create responsive charts 94

Gion Kunz shows you how to create greatlooking, responsive charts with Chartist.js

We’ve come a

68 long way, baby

Node, Grunt, Mocha ... Jack Franklin runs through the top JavaScript tools every designer and dev should know

On its quarter-century birthday, we take a misty eyed look back at 25 great years of the World Wide Web

Quartz Composer

Creative coding with P5.js 98

Scott Garner introduces creative coding tool p5.js and explores what it can do

web standards

103

Use mixins with extend

104

Eric A. Meyer on 25 years of web standards

project

Prototype with

Head-to-head

Adam Simpson compares Sublime and Vim

Austin Bales on how to use Origami and Quartz Composer to build a prototype photo viewer

Exclusive video tutorials! Look out for the video icon in the tutorials for exclusive screencasts created by authors

Antony DiSpezio explains how to write smarter Sass by using mixins with extend

modular content systems 108

Mark Llobrera walks through how to build modular content systems in WordPress

ACCESSibility

Shawn Henry considers older users

114

december 2014 7

Mail, tweets, posts and rants contact us

@netmag

/netmag

+netmagazine

both NYC and London 2015 at generateconf.com.

YouTube redesign Hello @netmag! Can you check out my new YouTube redesign? netm.ag/ youtube-261. Thank you!

Ziarekenya Smith, Orlando, FL

Generate London Thoughts from the Generate London conference: netm.ag/ generate-261

Chris Rhymes, Northampton, UK

Would you ever consider hosting one of your Generate conferences in Minneapolis?

Flicker Creative, Minneapolis, MN

Thanks for your write-up, Chris! We also had a blast at Generate London, if we may say so ourselves. To relive your experience or read up on what you’ve missed, turn to our special event report on page 22. Sadly, it’ll probably be a while before Generate will expand to Minneapolis. The Big Apple is next: we’re delighted to announce that we will return to New York on 17 April 2015. Register your interest for

december 2014

Thanks! We always enjoy looking at unsolicited redesigns of big sites, although they often leave us wishing those features would be implemented for real. They are a good way to show the world your design talent, and may even lead to a new job. To find out more, check out this Creative Bloq post: netm.ag/redesign-261.

netmag@futurenet.com

do to take part in the design challenge?

Joanna Kosińska, Yorkshire, UK Just follow Craig’s example, Joanna. Send a portfolio link to netmag@futurenet.com and we will consider you for one of our next Design Challenges. We’re always on the lookout for keen designers to take part!

New JS plugin Please check out my latest JS plugin on Github: netm.ag/ plugin-261.

Giancarlo Soverini, Alta Badia and Florence, Italy

Nice one, Giancarlo! elba.js is a pure JavaScript slider that serves lazy loading images according to the screen size. See it in action at netm.ag/elba-261. If

net.creativebloq.com

anyone else wants help getting the word out about their open source project, drop us a line.

Shipping to Serbia We would like to subscribe to net magazine. Do you ship to Serbia (Belgrade)? At the moment we don’t have that option when we order a print copy.

Miloš Sibinović, Belgrade, Serbia We do! You’ll need to order your subscription over the phone (+44 (0)1604 251045) or – if you can track down a machine – by fax: (+44 1604 251031). The same is true for Argentina. Apparently, this is due to continual fraudulent activity online from these countries ...

Challenge me I’m a subscriber and a big fan. I was wondering if you were looking for contributions for the ‘Design Challenge’ feature at all? If so, I’d love it if you would consider me. Here is my portfolio to give you an idea of what I do: netm.ag/mclachlan-261.

Craig McLachlan, Glasgow, UK

Reading the latest issue and looking at the amazing projects featured in the showcase section made me wonder what would I have to

Generating a buzz For highlights from Generate London – including the evercharming Gavin Strange – turn to page 22. Next stop: the Big Apple!

Network THE POLL

What’s your preferred frontend MVC framework? Backbone.js 14% Gives structure to web applications by providing models with key-value

Dojo 2% Scales with your development process, using web standards as its platform

Knockout 12% Applying the MVVM pattern for simplified, dynamic JavaScript UIs

React 5% A JS library with core principles including declarative code and efficiency

Ember.js 10% A standard architecture for ambitious web applications, that eliminates boilerplates

Polymer 5% A new type of library, built on top of Web Components

AngularJS 50% If HTML were made by a designer, it would look like AngularJS

Ampersand.js 2% A highly modular, loosely coupled framework for advanced JS apps

From our timeline

What was the best thing about the web back in the 1990s? Not everything had a comments section. @craigfortune Animated GIFs... and that it led to the tech we have today. @UWDoIT Waiting about half a day for a CBBC game to load, playing for 3 seconds, then waiting forever for the next one to load. @samthomasseo

One of the best things was how badly it was made, because that made me understand why the new way of building it was much better. @nonswearyphil

The ‘Wild West’ attitude with Flash… lack of conventions so loads of experimentation. ‫@ ‏‬hereinthehive Simplicity, maybe? While not as challenging, making websites was a lot easier. It was fun. @just4TheALofit

2 browsers. 1 that mattered. 0 Facebook. @Octavector

The dial-up sound. I miss it. Eeerlererler urrr EEEEEEE urrrrrrrrrr CRRRRrrrrc KHEEEEEE boop. @DaleAnthony

Definitely Java Applets of ‘fireworks’. @codeweb

The internet wasn’t allconsuming. @chopsmcmutton

COOL Stuff We learned This month The perception of performance

Studies have shown that when the perception of performance is high, user satisfaction skylarks. The problem is, perception is hard to quantify. This article takes a rigorous look at perception and expectation, seeking to bring some concrete numbers to the table. netm.ag/performance-261 Testing vs designers

Should we leave designers to use their skills and experience to get to the right solution? Or, should we rely on cool, hard statistics and, through them, let our users steer us to the products they want? It’s a familiar debate, and this piece takes a reasoned stance. netm.ag/testing-261 Android dollars

It’s amazing, and it’s true: Microsoft makes more money from Android than it makes from Windows Phone, Skype and Xbox combined. That’s because, though made by Google, Microsoft owns lots of patents upon which the mobile OS relies, which generates royalty fees. One of the biggest payers is Samsung who, apparently, slips Microsoft more than $1b a year. netm.ag/dollars-261

december 2014 9

Send your questions to netmag@futurenet.com this month featuring... Peter O’Neill Peter is the founder of London-based analytics consultancy L3 Analytics w: .l3analytics.com t: @peter_oneill

Practical advice from industry experts

QUESTION OF THE MONTH

What’s your opinion on the age-old debate of keeping calls to action above the fold? Octavector, Kent, UK

Mark Jones Mark is a PHP and Drupal developer, and works at CTI Digital in Manchester w: justanothermark.co.uk t: @JustAnotherMark

Elle Waters Elle works with clients to integrate inclusive design into their company culture w: SAteach.es t: @Nethermind

Philip Clarke Phil is the technical director at Rockpool Digital w: rockpooldigital.com t: @PhilipAClarke

Above the fold In today’s device-independent world, web designers need to start ignoring the ‘fold’. Campaigns such as Nike’s Air Jordan (see netm.ag/nike-261) are geared around encouraging viewers to scoll

PC: The internet today is device-independent. People use a vast array of browsers and screen sizes, so you’ll end up with a much better project if you ignore the fold and think about persuading users to scroll, rather than squeezing everything in as high as possible. Nike have produced some great, exploratory campaign sites which don’t have any calls to action near the top. The whole design encourages visitors to scroll, which allows Nike to tell a story which naturally leads to an action. Accessibility

Form inputs Is it still important to ensure form inputs etc. look as close to the system default as possible?

Lee Baillie, London, UK

EW: Believe it or not, some of the system default controls themselves can actually contain accessibility issues. For example, default text input fields can display

december 2014

placeholder text that doesn’t have enough colour contrast for users with low vision. On the visual side, there are benefits to following consistent design patterns. Make a checkbox look and act like a checkbox, and you won’t confuse your users. And when you use a default control, you preserve that control’s native accessibility features, such as name, role and value. If you are tempted

Q&As

3 simple steps What is the best process for testing accessibility you have ever seen? Michael Spellacy, New York, NY

EW: Accessibility testing works best when integrated into your existing workflows. However, the best approaches usually share certain features.

Pinnacle SEO @PinnacleSEOTwit Upping performance Consider if you really need all of those modules on your Drupal site

to create custom controls, start with the default controls and use progressive enhancement principles to apply minor changes to the visual styling. For more information, check out our post at netm. ag/indiana-261. UX

User journey Is it a good or bad idea to change the page content (e.g. top nav or sidebar) based on a user’s journey to that page?

Wired Digital, Guildford, UK

PC: Changing your primary navigation based on user behaviour is never a good idea. Behaviour isn’t constant, so by doing this you risk creating a different navigation experience every time, making it incredibly difficult for people to rediscover stuff. Where you can get a bit more involved with individual user behaviour is with contextual navigation. We’re working on a site that’s almost entirely ontological, which allows loads of opportunities for personalisation.

Similarly, do you really need that big, fully featured module (e.g. Display Suite or Rules), or could the same effect be achieved with leaner, custom code? Secondly, check the Drupal logs. Disable or fix any messages that could never be useful. A page writing 20 undefined index records to the database will be slower than a page that doesn’t.

You can prevent many accessibility issues by creating digital content using design best practices and HTML standards. Learn how your specific role contributes to digital inclusion, then test for those elements in your work.

AnalyTIcs

Big data Do you think ‘big data’ is important or just business jargon?

Pinnacle SEO @PinnacleSEOTwit

Emma Barnes, Leeds, UK

PO: I think it’s just jargon. Data is data, nothing has changed there. We now have tools that can process more data in shorter periods of time, but the ideas haven’t changed. Value comes from using insights from data to make smarter decisions. I find most companies are not getting value from their existing small data, and could get a much higher ROI from investing in this first.

Drupal

Accessibility

Performance

The state of HTML5

Caching is great, but do you have any suggestions for making Drupal perform well for authenticated users?

What’s the current state of HTML5 support for accessibility? Can we safely use HTML5 to develop accessible websites?

MJ: First, remove unused modules. Drupal stores information about disabled modules. Clearing the cache regenerates this information, so remove them.

EW: If an accessible website is a cake, HTML5 is the butter. You can definitely use HTML5 as a key part of your stack, in developing an accessible website.

Martin Fraser, Fife, UK

Test for web standards

Federica Sibella, Bergamo, IT

Test with tools

Incorporate tools, toolbars and extensions into the testing process. One of the most important tools for accessibility testing is a keyboard. Get keyboard access right, and you help solve one of the top accessibility problems.

Pinnacle SEO @PinnacleSEOTwit

Test with people

Finally, consider your users. Test with assistive technology and conduct usability testing with people with disabilities. Build, test, learn.

december 2014 11

exchange Q&As However, HTML5 is just one of the many ingredients that contribute to that overall user experience. There are many HTML5 elements that can enhance accessibility, and there are others that may need ARIA for a fully inclusive experience. HTML5 will continue to evolve, so at the moment keep your eyes open for cases where you need ARIA. For example, HTML’s <dialog> element will eventually bring us fully accessible dialogs, but in the meantime, we need ARIA for this. Analytics

Data modelling How do you create models around your data? How do you extract insight when you don’t know what you’re looking for?

Josh Davis, Herndon, VA

PO: There is no shortcut – you need to know what you are looking for. Step away from the data and your analytics tool. First define your business questions, and what information you need. This guides your analytics set-up, the reporting you create, and the analysis you perform. Get this right first, otherwise you just have a big mess of pointless data. Drupal

Not a fan Friends keep telling me PHP is a joke language. Should I find new friends?

Dan Davies, Cheshire, UK

MJ: Before you completely give up on your friends, show them PHP’s latest features. PHP 5.3 added namespaces and closures (anonymous functions). PHP 5.4 added traits and a built-in CLI web server. PHP 5.5 added generators and clauses to try-catch blocks. PHP is not perfect but it is far better than it used to be. If your friends still think it’s a joke, maybe it is time to find new friends – there are a lot of us using PHP.

A new look Tools like InVision are giving designers a more engaging alternative to flat wireframes

december 2014

Future of wireframes

Branding and patterns

Will static wireframes die out if HTML prototypes become the norm?

Dan Davies, Cheshire, UK

What’s your take on changing the colour of social media logo buttons to fit with a client’s branding and colour scheme?

PC: Hopefully! We’ve been steadily moving away from static wireframes, at least as a deliverable. Brands are thinking increasingly in terms of journeys rather than pages, which is definitely something to be encouraged. A simple, clickable prototype made in something like Axure (axure.com) – or even just flat wireframes strung into a journey using an online tool like InVision (invisionapp.com) – starts so many more conversations and creates so much more value than a 50-page document full of boxes and lines.

Stephanie J Dougherty, Washington, VA

PC: With the exception of Google+, all the main social networks are blue – so users tend to differentiate between them using shape recognition rather than colour, anyway. Having said that, do you really need to? They might stand out less if they’re in your brand colour, resulting in less social sharing – and you’ll also be violating the social networks’ brand guidelines. Of course, a bigger question is whether you should even use social media logo buttons ...

Analytics

Drupal

Return on investment

Finding popularity

Is there a way of getting an ROI for a blog before you launch it that isn’t gathered from a marketers sales pitch?

Many consider Drupal as the most advanced and powerful CMS, but what could Drupal do to increase its popularity and core contributors?

Nigel Clutterbuck, London, UK

PO: The short answer is no, you can’t know how well a blog will do in advance. You can calculate costs and the level of traffic you need to achieve a target ROI against those costs. Then you can see if those target traffic levels are realistic to achieve. But knowing performance in advance, that is fortune telling. On a side note, I wouldn’t recommend launching a blog to make money – instead, write about what you are passionate about. Drupal

The internet of things Can Drupal serve as a hub in a smart home? Or will the Internet of Things make Drupal obsolete?

Stefan van Hooft, Somerset, UK

MJ: As more devices become internetenabled, Drupal’s strength in data modelling and administration can only make it more relevant. It will be trivial to create RESTful APIs with Drupal 8, and these APIs will make it easier for non-Drupal apps to communicate with each other, and with Drupal. Developers of smart home applications want to concentrate on the benefits to the end user, and Drupal provides a solid foundation to build on.

Adam Hill, Newcastle, UK

MJ: In a word, documentation. Drupal.org has masses of documentation, but it is not well structured, easily searchable or well maintained. This is improving, but it will take time and needs people to get involved. More broadly, Drupal needs a developer-focused publicity push. It has a reputation of being great for users but full of weird custom things for developers. Drupal 8 changes this. It is embracing OOP, using Symfony components (symfony.com), and won’t be coupled to its rendering and theming engine. Analytics

Dashboards What are your recommendations for the best Google Analytics dashboards for social, multi-channel attribution?

Steve Shreve, West Palm Beach, FL

PO: The best or most useful dashboards depend on your business questions there is no one-size-fits-all here. Include the information you can take action on within your dashboard, and evolve this as your needs evolve. Whatever you are doing with analytics though, always start with the basics - which is not multichannel attribution.

New york 17 April 2015 Featuring Mike Monteiro, Val Head, Pamela Pavliscak, JoonYong Park, Netta Marshall ... and lots more to be announced

www.generateconf.com

People, projects & paraphernalia

This month Featuring...

Side PROJECT OF THE MONTH 16

Joel Alexander shares his online library of short and sweet practice briefs aimed at helping designers explore new ideas

BEYOND PIXELS

Jordan DeVries has created a range of board games that give a fascinating insight into how people interact when at play

Clients FROM HELL

Need LIST

A graphic designer faces a client with interesting views on what makes for a professional company identity

What we want this month, from an app that turns our cluttered bookmarks into a seamless library, to a neat new notebook

Workspace

Event REPORT

Alexander Mihaylov gives a tour of betahaus Sofia, a coworking space located in a warehouse from the communist era

Oliver Lindberg reports from net’s very own Generate London, the web conference with pug GIFs and banjo playing

december 2014 15

FEED

Side project

Briefbox

Illustrator Joel Alexander created a library of short-and-sweet design briefs to inspire designers Side project of the month net: Who are you and what’s your day job? JA: I’m the co-founder of Bristol-based design studio Orca Design. As well as the day-to-day running of the studio, I look after the custom lettering and illustration projects. Info job: Illustrator and co-founder, Orca Design w: Briefbox.me t: @thebriefbox

net: Where did the idea for Briefbox come from? JA: When I started out, I remember making up test projects and fake briefs to fill out my portfolio and learn new skills. Struggling to find new ideas, me and my buddy used to make up briefs and give each other feedback. This, combined with the fact I’m always thinking of fun side projects, was how the site started off: as a simple blog where I would write a brief a day and see what happened. net: What’s the reaction been like? JA: Amazing! Since launching the site in August, the reaction has been crazy. The blog turned into

december 2014

a community pretty much overnight, when I added a simple members area where people could save their favourite briefs for later. Smashing magazine, Speckyboy blog and Jessica Hische all tweeted about it, and page views got to 80,000 in that first month. net: How do you feel about people putting work based on your briefs in their portfolios? JA: I’m all for it. I’m writing much more ‘design exercise’ style briefs at the moment – like ‘Create an awesome geometric pattern’ rather than, say, a logo for a made-up company. This forces designers to step outside of their comfort zones and gives them a bigger playground that they can experiment and practice their skills in. net: Do you think that everyone should have a side project? JA: I would highly recommend having a side project. Doing something that is just for you, without the constraints, deadlines and stress found in client work, keeps me sane after a full-on week at the studio. Having a side project is like a hobby and Briefbox is mine. It’s really fun to work on, and helps me improve my coding and writing skills. At the same time, I feel that I’m giving something back, helping people improve their design skills all over the world.

Feed

How to

Beat creative block Ideas have dried up. Deadline’s fast approaching. How do you get the gears of your mind going again: what should you do to overcome creative block?

Spelling slip-up

Exclusively for net: the latest in a series of anonymous accounts of nightmare clients

Illustration: Ben O’Brien huddleformation.prosite.com

Clients from hell I’m a professional graphic designer. Over the years, I’ve had to deal with a plethora of foolish clients, but this was a such a unique case of terrible decision-making that I just had to share it. For the sake of anonymity, let’s call my client ABCD Group. I was tasked with creating a website for them. We weren’t off to a great start, as their first decision was to select pink and purple as their corporate colours. Although I made my concern about professionalism very apparent (it was an insurance company), in the end it was their company, and their decision. However, their next move was just outright frustrating. They insisted I incorporate their existing logo, which was a botched, half-arsed attempt that looked like it had been drawn in crayon. I know this sounds hyperbolic, but believe you me, I am in no way exaggerating. Besides being ugly, the JPEG they sent was muddy enough that I had no choice but to recreate it so it looked crisp on the site. I offered to make them a new one at the same rate, but they refused and insisted I use the existing version. Again, not ideal, but their decision. While doing this, I realised the logo actually misspelled the name of the company. Instead of being ‘ABCD Group’, it said ‘ACBD Group’.

Naturally, I brought this to their attention. It seemed like an easy fix – I would just transpose the two letters and correct the problem. No extra effort, no extra fee. It was an ideal solution. Client: That’s OK – just leave it as it is. Me: Are you ... are you really sure? Your logo isn’t the name of your company. You place this on everything your company does, and if it’s misspelled ... well, it doesn’t reflect well. I know you want to keep it the way it is, and that’s your decision. But, I really must insist that you let me fix the spelling error. Client: Nah, we’d prefer to preserve it in its original form. I made one last pitch before the website went live, even offering a couple of alternative logos and a correctly spelled version I had whipped up to show that it wasn’t a big deal. Again, no go. Well, in the end it was the client’s decision. The branding for the ABCD Group is consistent across the logo and website, though it’s all labelled up as ‘ACBD Group’.

top tools @mariaskatova says: “Cut off commitments and reduce workload. More sleep and some physical activity: two weeks like this and creativity returns. @musingspuntoit agrees: “Go for a long walk in the mountains (preferably alone) and take inspiration from nature (preferably wild). Any season will do!”

Widen your net @mrjamesparker suggests looking for ideas outside your area of expertise: “Down tools and research very different creative industries. Architecture and craft are great examples, as they have a physical output.”

Numbers game If you write down enough ideas, @abbott567 says, you’re bound to find a diamond in the dirt: “Carry a notebook, and write down ANYTHING you feel may be of some use in the future ... Don’t ‘do it later’ or you will forget it!”

If all else fails … clientsfromhell.net

“Coffee,” @keepyourreceipt says. “Four shots of espresso. Six on a bad day,” @halfnibble agrees. “Coffee, Red Bull – anything caffeine!” adds @bluemwhitew.

december 2014 17

FEED

from the web

5 3

Alexander Mihaylov introduces the team and tools that keep the first coworking space in Bulgaria ticking along workSPACE betahaus Sofia was the first coworking space in Bulgaria. We opened our doors in June 2012 and since then have established our brand as the leading startup hub in the country. The 1000m2 workspace plays host to around 80 exceptional entrepreneurs, promising startups freelancers and creative minds. The space is an old telco facility built in the 70s during communist times. We loved the robust construction so much that we designed everything with as few interventions as possible. We left the high ceilings, painted the visible concrete instead of covering it, and decorated some walls with old drawings from the 80s. We

december 2014

added some new stuff, like the big wooden sliding doors, to create a mixture of rough industrial and warm homey feelings. betahaus is located in the Lozenets district –an old, quiet neighbourhood in the heart of Sofia, just minutes away from the city centre. It matches our customers’ lifestyles perfectly: getting things done during the day undisturbed by the capital’s buzz, and walking in after work to visit their favourite bars and parks. When I am not busy answering tons of emails on my 13” MacBook Pro with Retina display, I ride my bike (1) around town to run errands, attend events, or even just pedal

about after work. My iPhone and a cup of cappuccino (2) are my only hand extensions. I have a great team that help get things done. Geri Dzhevelieva is our digital media guru and inhouse photographer, who loves her analog Nikon FM2 (3). Nikki Marinova is the top event planner in town. She can be seen sitting on one of the 120 green chairs (4) she is in charge of. Back office manager Bibi Gadzheva, seen armed with a pencil and notebook (5), is a whizz at maths. She takes charge of administration and accounting. Finally there’s Elizabeth Lazarova – who’s right at home on her large beanbag (6), and Vassilena Naydenova, who welcomes visitors into our betacafé with a smile, and delivers the best catering service to our clients. PROFILE

Trailblazers

Alexander works on business development at betahaus Sofia. betahaus (betahaus.com) has offices in Germany, Spain and Bulgaria

FEED

Beyond pixels

Stuff I like

Brendan Dawes Designer

brendandawes.com

Real paper just can’t be beaten for sketching out an idea. The reason is paper says ‘you have permission to scribble down crap’. I love the Smythson Panama – you can squash it or roll it up and it just looks even better. It goes everywhere with me. smythson.com

Processing No matter what code-based thing I need to make, Processing is the blank canvas on which I create – I use it on 90 per cent of my projects. It’s got better and better over the years with great libraries, plus there’s a vibrant community around it. processing.org

Electric Imp I make a lot of connected objects, and for that I want the basic infrastructure, such as connecting to WiFi, to just work. Electric Imp does that and it does it at scale if you need – and in a beautiful way, too. And you don’t have to be a geek to set it up. electricimp.com

december 2014

Board games

This month … Jordan DeVries’ range of games gives him an insight into the social interactions of people at play beyond pixels In my professional life I tend to create systems that help users work, but rarely get the chance to help them play. I wanted to study how people behaved in activities they initiated by choice – such as relaxing with a game – so I could better understand and improve activities they couldn’t avoid (like personal accounting). In recent years, I’ve noticed an uptick in the ‘quantified self’. Other than when playing games, traditionally the only people who had an immediate awareness of their ‘score’ were athletes. Now, you can see everything from the distance you’ve walked to your stock portfolio, right from your phone, wherever you are. Earlier this year, my wife mentioned an out-ofprint card game that she loved playing as a child. We took her sizable array of house rules and evolved it into a game of sci-fi combat, with players dealing damage to each other’s fleets. As a zerosum game (netm.ag/zerosum-261), it got really personal, which was my first taste of how people behave by personality versus by circumstance. I was hooked. I tried a handful of other concepts – everything from convoluted soap opera plots to crazy cat people stealing neighbourhood pets, to covert agents trying to pass intelligence. I explored psychological motivators like groupthink, being the odd person out (not by circumstance, but by choice), and watching trust form between players over time,

tested by the tension of revealing their allegiances. It was dramatic but exciting, and endlessly fun! In creating a physical product, I realised that digital is re-learning a lot of the lessons that print already knows. For example, where you hold a playing card tells you a lot about what a user’s fingers cover when they use an app. It was also challenging to try and simulate dynamic situations using static modules, like tokens or cards. What I didn’t expect was how satisfying it would be to make just one board game, having already made a hundred interfaces. There’s still that primitive mechanism in all of our brains that wants to hoard physical objects. And I loved watching a microcosm of social systems play out before me, in real time. You can forget that when you’re sitting behind a stack of layouts and code. Everyone deals with at least one frustrating interface a day, and fixing things is a solid way to start. But if we truly want to deliver on the promise of user experience – bringing technology back to humans in a holistic way – we shouldn’t forget how important it is to play.

PROFILE

Smythson notebook

Jordan (jordandevries.com) is the director of user experience at Brave UX, and is in the Top 1 per cent of Watch Dogs players on Xbox One

Need list

Stuff we want

Small objects of web design desire: from Monteiro’s latest business book to a pocket-perfect notebook inspired by community feedback 1

You’re my favourite client

$18

Hip Apple device mockups

Apprentice pocket notebook

$20

GitHub Student developer pack

Stache

free

$0.99

Croma

free

What we think (1) Mike Monteiro follows up on his hugely successful Design is a Job with new business tome You’re My Favourite Client (netm.ag/monteiro-261). (2) YouWorkForThem has released 27 new, ‘hip’ and easily customisable Apple device mockups for iPhone, iPad, Macbook Pro and more (netm.ag/mockups-261). (3) GitHub gives aspiring devs’ careers a kick-start by offering students a free suite of top developer tools (netm.ag/ student-261). (4) With a design inspired by community feedback, Baron Fig’s Apprentice Notebook is pocket perfect (netm.ag/notebook-261). (5) Stache is a Mac and iOS app that transforms your cluttered bookmarks list into a beautiful and seamless library system (getstache.com). (6) New Android app Croma is perfect for creating quick and fun colour palettes, as well as sharing them on-the-go (netm.ag/croma-261).

december 2014 21

FEED

Events

Generate London

Audience meditation, pug GIFs and banjo playing – Oliver Lindberg reports from a conference like no other Event report Date: 26 September 2014 Location: London, UK URL: generateconf.com

PROFILE

On Friday 26 September, the second annual Generate London conference, presented by this very magazine, took place in the lavish Grand Connaught Rooms in Covent Garden. It was attended by more than 300 web designers and devs from around the world. The one-day, two-track event kicked off with a keynote by creativity evangelist Denise Jacobs, who encouraged everyone to get in a creative frame of mind with a spot of group meditation. Her thought-provoking talk went on to discuss ways to control your brain’s natural

Oliver Lindberg is net’s editor and has been working with the title since the Iron Age. He was once described as a “dancing machine”

january 2014

creative capacities (slides at netm.ag/jacobs261). The presentation set the tone for what was to be a very inspirational day. Freelance web designer Meagan Fisher had prepared possibly the funniest slideshow ever seen at an industry event. Her presentation was packed with useful advice on how to be ‘less terrible at the business of design’, masterfully illustrated with a variety of cat and pug GIFs. Meanwhile, the second track kicked off with Google’s Jake Archibald – presenting shoeless as always – introducing us to the ServiceWorker, which enables us to build apps with good offline behaviour. Other morning highlights included Elliot Jay Stocks’ presentation on advanced web typography (“Every time you say font instead of typeface, Erik Spiekermann kills a kitten,” he warned) and Zoe Mickley Gillenwater, UX designer for Booking.com, who gave a very honest talk about the CSS tips and tricks she had learned the hard way. The mindset of

“I can’t start until I know enough to do it perfectly” resonated with the audience, and Gillenwater reassured everyone that this industry is constantly evolving and you simply can’t (and don’t need to!) know everything (slides at netm.ag/gillenwater-261). There was no danger of feeling a bit sleepy after the mouth-watering buffet lunch, as Aardman’s Gavin Strange squeezed his 40 minutes full of boundless enthusiasm. His work showed the audience not to be afraid of trying new things, and his infectious passion reminded everyone why we got into this industry in the first place (slides at netm.ag/strange-261). Jeremy Keith’s closing keynote covered progressive enhancement, stressed that websites don’t need to look exactly the same in every browser and emphasised that it’s our job to keep the web moving forward. The day drew to a close with Meagan Fisher taking to the stage once again to interview Dan Cederholm. The conversation took in the Dribbble cofounder’s conversion to Sass, and he managed to weave a quick banjo demonstration into one memorable HTML/Sass analogy. As you do. Photos of Generate London can be found at netm.ag/photos-261, and videos of all the talks will be on the Creative Bloq’s YouTube channel soon (netm.ag/CByoutube-261). Check out generateconf.com for info on both Generate NYC and London 2015.

Feed

EVENT GUIDE AntarcticJS Date: 14-22 Nov 2014 [TBC] Location: Antarctica “No, it’s not a joke,” say the organisers of the ‘first JavaScript Conference on the last continent’. Details are yet to be confirmed. But, reassuringly, you can attend online – so no need to pack the thermals. antarcticjs.com

HOW Date: 17-19 Nov 2014 Location: San Francisco, US The San Fran leg of HOW invites you to meet the designers, developers and programmers behind projects for eBay, Twitter and more. howinteractiveconference.com

JSConf.Asia 2014 DATE: 20-21 Nov 2014 Location: Singapore Airbnb’s Spike Brehm and open source software dev Wei Lu will speak at Asia’s “most influential web developer conference”. 2014.jsconf.asia

CSS CONF Date: 9 Dec 2014 Location: Oakland, US This one-day event focuses on frontend design, with speakers including Dropbox designer Daniel Eden and HackerYou lead instructor Brenna O’Brien. cssconfoak.land

beyond tellerrand Date: 11-13 May 2014 Location: DÜsseldorf, De Tellerrand’s next Düsseldorf outing may not come around until next spring, but early bird tickets are already sold out – so if you fancy it, shake a leg. beyondtellerrand.com

december 2014 23

Subscribe To NET the No.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. Each issue is packed with the latest web trends, technologies and techniques.

From

ÂŁ25.49

save up to

digital edition only

Take out a digital subscription to net for on-the-go access to our fully interactive edition, with exclusive screencasts, tutorials, video content and more.

From

ÂŁ20.49

save up to

Terms & conditions: *Prices and savings quoted are compared to buying full priced UK print and digital issues. You will receive 13 issues in a year. 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. For full terms and conditions please visit: myfavm.ag/magterms. Offer ends 31 January 2015.

NEW Print & iPad/iPhone edition Enjoy a combined print and digital subscription, 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.99

save up to

Two simple ways to subscribe Online: www.myfavouritemagazines.co.uk/NETSUBS Phone: 0844 848 2852 and quote code BUNDLE14 Your subscription will then continue at £30.99 every 6 months - saving 35% on the shop price and giving you a 83% discount on a digital subscription

Opinions, thoughts & advice

designing with Data

The future of the web is ...

Peter Smart explores a future web that you can touch, responds to your every whim, and is integrated seamlessly into your environment

Data versus intuition Data is useful, but it can’t replace creative intuition. Designers need to put some faith back in their instincts, argues Natasha Irizarry

interview 32

John Allsopp, author of ‘A Dao of Web Design’, argues that Sass isn’t all that great, and predicts a future centred around JavaScript

Earlier this year I accepted a position at a dating site with millions of users. I was hired to design user experiments, which became a battle between data and my intuition as a designer. Eventually, I found the right balance of combining what the data indicated, and what my intuition was telling me, to hit my goals.

Following my intuition

What are we worth?

How much are your skills really worth? Sean Johnson suggests pricing projects based on the value to the client, rather than time taken

My first project was to improve revenue by refining an upgrade page. Two experiments were built to test against the control, both of which broke the site’s overall template. Experiment A included a credit card form within the page, and Experiment B included a refreshed design of the control. The experiment designs were more aesthetically pleasing, but still under-performed the control upgrade page by .5-1 per cent.

Opinion

The control page was fairly skeletal: it included a list of features on one side of the page and a subscription selection form with a call to action. Analysing the data revealed that Experiment A performed the worst of all three, and breaking the template did nothing for subscription rates. While refining things, the control’s template and the purchase flow (which included the credit card form popping up in a new window) remained intact within the experiment. Though not pretty, staying close to the control’s design kept the user’s trust intact.

Applying the data

Getting it just right One thing the product had going for it was a brand that is valued by its users. I started creating emails that were sent out to a small percentage of the user base, and saw results quickly. My idea was this: if even one of our users felt some kind of emotion from this email and they engaged with it, something new could be learned. Stepping out of the current style guide let me focus on the brand itself. I created fun and playful emails that performed favourably for both the company and users, but not without criticism from my teammates for pushing the limits of the style guide. But of course, more tests had to continue to prove this method was working.

Emotion had to be applied in the designs, through tone or imagery, in order to get results that impacted the user, as well as our metrics A version of the email was tested that had been adjusted based on what the data was saying, resulting in a robotic message that under-performed the control – leaving me to assume that the data couldn’t tell me, or anyone else for that matter, how to design anything related to these issues. Emotion had to be applied in the designs, through tone or imagery, in order to get results that impacted the user, as well as our metrics.

The greatest risk In the end, taking a very risky, humanistic approach made the user feel not just wanted, but needed as well. And what user isn’t needed? The goal wasn’t just monetisation, it was also for the user to invest in the product. Making assumptions that you know what the user wants and that the data will

tell you everything, well, ‘makes an ass out of u and me’. Designers become obsessed with innovating and forget the real reason why we do what we do, especially in the context of designing with data. We have to consider data and our own intuition, applying both to what we build. Failures are inevitable – until we apply what we learn from how we fail we will continue to chase the local maximum instead of innovating. My opinion is this: don’t hold data above common sense. Take chances. Follow your intuition. Let data support your design, not define it.

PROFILE

After restarting the experiment, there still weren’t any measurable performance indicators. It felt like hitting a wall. I started making one change at a time, but it soon became clear that this process yielded very small productive results – and the devs started to get annoyed with all the tests. Then I had an epiphany: I was chasing the local maximum (netm.ag/maximum-261) – I had hit the testing limit. I wanted to innovate, but most of all I wanted users to feel enough passion about the product that they would want to pay to upgrade to the premium service. My new goal was to figure out why these experiments kept failing. To solve this issue, the right questions needed to be asked. The problem had to be more than aesthetics, right? That’s when the combination of data and my gut feelings worked together, and solid hypotheses were developed to test.

Natasha (@natashairizarry) is a self-proclaimed UX evangelist. She works as a consultant for companies who have user experience and design related problems

december 2014 27

VOICES Essay

december 2014

Essay

2O YEARS OF Innovations

The future of the web is... Illustration by Ben Mounsey

Imagine a world where you can touch products in a webshop, walls transform into touchscreens, and passwords are unheard of. It’s not as far away as you might think, says Peter Smart

The internet as we know it is less than 8,500 days old. Yet, in that time it has revolutionised the way the world lives, works and plays. In a generation, we’ve seen the world mapped in amazing detail; real time, face-to-face communication made possible with people on the other side of the planet; and the vastness of human knowledge retrievable in a fraction of a second. But this is nothing compared to what is about to come. Scott Cook, the founder of Intuit (intuit.com), claims “we’re still in the first minutes of the first day of the internet revolution” – and with the technological breakthroughs happening at the frontiers of our industry, it’s hard to disagree. No one can predict the future, but to explore the future technologies set to revolutionise our industry tomorrow, it is possible to examine leading research and cutting-edge developments happening at the forefront of our industry today.

The future is ... tangible Imagine being able to touch the web. The human body is incredibly adapted for touch. Millions of touch receptors cover our skin, allowing us to better navigate our physical world. Yet tactile sensation in the digital world is almost non-existent. However, today major tech firms including Apple, Samsung and Disney are developing haptics for the web: the ability to pick up our devices and not only see, but feel what we are looking at. Electrostatic Vibration (netm.ag/vibration-261) is a new technology that can manipulate the precise amount of

friction a finger feels when travelling across a touch surface. By increasing and decreasing this friction, it is possible to dynamically recreate the feeling of bumps, ridges, edges and texture. The implications of this type of technology suggest incredible possibilities for the web. A tactile web would revolutionise shopping experiences. Studies that show that touch has a significant, unconscious grip over decision-making processes. When I am able to feel how soft the coat I am looking to buy is, how will that alter the amount I’m willing to pay for it? There could also be implications for education. Studies show it’s not just how we think, but what we do while we think that impacts how we absorb information. How are haptic technologies set to offer amazing new possibilities for learning via digital mediums? Finally, imagine Skype. Michelangelo said, “To touch can be to give life.” A tangible web will allow us to be on a face-to-face call with a loved one on the other side of the world, and be able to touch them. The implications here for virtual human communication are enormous. This is why even the advances that we see today, like sending a touch to someone through the Apple Watch, point to an amazing future tomorrow.

The Future is ... adaptive The Internet of Things has captured the imagination of the media, manufacturers and business around the world and, according to Cisco, is set to become a $19 trillion global opportunity over the next decade. Although recent

december 2014 29

VOICES Essay reports have focused on mundane manifestations like the Internet Fridge and smart-controlled cooker, the real implications of the Internet of Things are far-reaching and set to revolutionise the way the web adapts to us. Internet-connected devices that can independently communicate are set to number 26 billion within six years, according to Gartner. Today, these devices are already jam-packed full of sensors and receivers that can create completely new, seamless experiences. Sensors already adorn our homes (smart bulbs that adjust to our presence in a room; thermostats that know our preferences) and our bodies. Our extremities are playing host to an increasing plethora of sensors including heart rate monitors, fingerprint readers, location sensors and gyroscopes. The advance in the quality and number of these sensors today is cultivating a web that will adapt to our preferences tomorrow. Imagine never having to come up with a password again. Passwords are an inherently terrible security

The future is ... invisible If Google chairman Eric Schmidt and his contemporaries are to be believed, the future of the internet will feel “... seamless. It will just be there. The web will be everything, and it will be nothing. It will be like electricity.” When it comes to the web, considering its raw form of fluid 1s and 0s, newfound technologies are set to fulfil the prophecies of Schmidt and co. A quick search for “future home concepts” will return a flood of visionary suppositions of walls, tables and windows that morph into web-connected touchscreens. However, for Chris Harrison and fellow researchers from Microsoft, this is becoming a reality. OmniTouch (netm. ag/omni-261.com) is a “...wearable system that enables graphical, interactive, multitouch input on arbitrary, everyday surfaces.” In other words, a wearable projector that can turn any surface into a display. Although a prototype, this technology shows the latent potential for a web that breaks the confines of our devices.

Our extremities are playing host to an increasing plethora of sensors including fingerprint readers and gyroscopes. The advance in the quality and number of these sensors today is cultivating a web that will adapt to your preferences tomorrow

december 2014

Perhaps most exciting, companies including Google are purportedly looking well beyond Glass and ambient displays. Smart contact lenses have received funded development. The ability to take the web and implant it into our eyes will revolutionise our understanding of the role of the web in our physical world. Invisible, yet visible simply by opening our eyes. For a scary look at this near reality, watch Eran May-raz and Daniel Lazo’s concept video Sight (vimeo.com/46304267.com).

Looking forward The web is just 1s and 0s; what we do with it is up to us. To create the novel experiences of tomorrow, the internet needs people like you: polymaths able to experiment across disciplines to create new experiences that capitalise on the innovations happening at the forefront of our industry today. Whether we use sleight of hand to make the web feel invisible, bend it to create touchable experiences or morph it to make it adapt to us at all times, the next 8,500 days of the web are in our hands.

PROFILE

system. They are guessable and as recent spate of celebrities will tell you, eminently hackable. However, from fingerprint readers to finger-vein scanners, today’s enhanced personal security systems are the precursors of tomorrow’s adaptive biometric security. Consider Nymi (getnymi.com), which authenticates the wearer using their heart rhythm, so that when you pick up your phone, it automatically recognises it’s you and unlocks. The shows of our childhood – Knight Rider, The Jetsons and, more recently, the film Her – have consistently fuelled the 20th century fantasy of artificial intelligence. Personal assistants that are smart, useful and personal. An adaptive web makes experiences like KITT and Samantha increasingly possible. Connected devices will allow ‘Smart Pins’ to follow us from device to device. As digital bubbles collecting all of your data, your Smart Pin securely links all your vital information to the web. So when I want to buy that T-Shirt, my Smart Pin authenticates me and purchases the item in a single tap. And because connected devices can communicate, my avatar can follow me into the physical world. For instance, if I see a cool gadget on a billboard at Waterloo train station, and approach to find out more, my Smart Pin appears on the sign and asks me if I’d like to buy one. Again: one tap and I’m done.

Peter is a designer, speaker and writer from the UK. To find out more about the future of the web, visit futureoftheweb.org

VoiceS Interview

2O YEARS OF

John Allsopp Words by Martin Cooper Photography by Xavier Ho

Forget jetpacks and robots – John Allsopp has gazed into the future and seen a world of JavaScript, movement monitors and tools for OAPs. And for the ‘Dao of Web Design’ author, that’s an outcome well worth fighting for ...

december 2014

Oliver Reichenstein

Info job: Developer, author, conference organiser w: johnfallsopp.com t: @johnallsopp

february 2013 33

Voices Interview

Future-powered “What interests me is taking what people are doing naturally and unconsciously and turning those things into interactions ... When we think about the future we have these huge Minority Report fantasies. It’s much more incremental”

december 2014

The Internet of Things. The connected web. The sensory web. Call it what you will, the web is changing and, quite soon, it will be all around us. Amazing devices are coming. Screens here, there and everywhere. The web will envelope us, and for web workers the possibilities are limitless. But that’s not necessarily the point ... or so says John Allsopp. “People think the future is about jetpacks,” Allsopp asserts, waving his hands. “You know, sometimes we believe the future has to be awesome, and if it’s not we’re disappointed.” The future, according to Allsopp, is likely to be rather more Last Of The Summer Wine than Minority Report. Think about it, he challenges: “The fact is, if you can keep a significant percentage of old people in their home for another year, the savings will be huge.” To achieve this doesn’t require complex, impressive systems – all we need are basic, web-enabled monitors that record and broadcast heart rates and the like. “It’s not just about saving money. They’ll have dignity, they’ll have control. And that could be done using a humble mobile phone. What greater opportunity? What greater challenge?” That, to Allsopp, is a future worth pursuing, and there’s not a jetpack, exoskeleton or internet-enabled fridge in sight. If anybody should be able to predict the future, Allsopp is more qualified than most. He is, after all, the man who just might have coined the inglorious term ‘Web 2.0’ (he can document his usage of it before Tim O’Reilly popularised the phrase). “It was back in early 2005 … I wanted to give a sexy name to the web stack – to HTML, CSS and the DOM. I sent an email to a whole bunch of people involved with the Web Standards Project saying ‘we need a concept, we need a brand’. But you know, the irony is, I used to blog everything but I didn’t blog this!”

Getting started Allsopp is also feted as one of responsive design’s founding fathers. His essay, ‘A Dao of Web Design’ (alistapart.com/article/dao) was published in 2000. In it he encourages designers to let go of print’s rigidity and embrace the web’s fluidity. Like in martial arts, strength, he tells us, can be found in relaxing. Ethan Marcotte cites Allsopp’s essay as one of his key inspirations.

Interview

Office culture From design classics to dongles, the Web Directions office – which hosts meetups, hack days and other industry events – has collected all manner of paraphernalia

These days, Allsopp teaches, speaks, makes, tinkers, writes and runs the Web Directions conference (webdirections.org). Based in Australia, Directions this year celebrated its 10th anniversary. However, Allsopp’s technical career dates back to the days before the web was even around. He was working as a software engineer in the late 80s when he built a Mac-based platform for creating knowledgebased systems. “We decided to sell the system online, which was very unusual for the time. To do that I had to understand the web and build websites. That’s how it all got started,” he finishes. Looking back, he says, if he’d understood how big the web was going to be, he would have applied himself to the project more fully.

things, web designers and web developers – they got up and they shaped what a technology should actually look like, and how it should work. And it was done in the face of objection.” He recalls a lecture he gave recently, where he discussed CSS3 factors – like border-radius, gradients and drop shadows – which are now almost obsolete. “We’ve been using them for 20 years, though we might have been doing them in a horrible way. The problem is, the standards bodies move so slowly, by the time something arrives in the browsers it’s passé, ” he elaborates. “What I like about the community-driven stuff – like the picture element – is that features come along more quickly.” Concluding his point, he says: “Web design is just web design. It’s not responsive design. If you’re not a good responsive designer, you’re not a web designer. Responsive is just table stakes now.”

“Preprocessors exist to make developers’ lives easier. There’s no semantic benefit. Everything just ends up as CSS”

Fast-forward So, what’s Allsopp’s take on where the industry stands now? Or, to put the question another way, how far have we as a community come from the days when ‘A Dao of Web Design’ shook the web? “You know, I think we have a good understanding of the challenges – from a visual design perspective – of designing for a screen,” he replies. “There’s a degree of maturity and we’re increasingly getting the solutions right. I think the work on the picture element by the Responsive Images Community Group was fantastic. For the first time, the people who used the technology – people who work at the coal-face, making

Keep it simple Allsopp is, however, keen to draw a distinction between the visual parts of products (he calls this the ‘surface layer’) and site’s mechanical underpinnings. This leads to certain frustrations with today’s web tools. “I’m a curmudgeon, ” Allsopp laughs. “I have a background in software engineering … and in software engineering, there’s a difference between simplicity and easiness.” Developers often, Allsopp

explains, want to make their lives easy by reducing keystrokes and banishing basic, repetitive tasks. “So, we build these really complex stacks of technology to make our lives easier. The problem is, we often build things that are much more complex because that’s the price we pay for an easy life.” To illustrate his point, Allsopp points to CSS preprocessors. “They exist solely to make developers’ lives easier. They are syntactic sugar. There’s no semantic benefit. They can’t do anything, as everything eventually just ends up as CSS. Sure there are many cases where preprocessors are valuable, but there are many cases where they’re not.” One of the challenges preprocessors bring to the table, he says, is added complexity. “You’ve added complexity to the syntax and [the developer] also needs to know both CSS and Sass. Then, you need build tools to process your Sass into CSS, and then you put it into your browser and you want to debug it. Now you need source maps … We’re creating an awful lot of complexity for the ease of the developer.” And why is that a problem? “It’s a problem because the more complex a product is, the more costly it is to maintain. The thing they learned in software engineering a long

december 2014 35

Voices Interview

Left Allsopp doing what he loves best – coding Above Web Directions’ feature blackboard wall has appeared on websites, book covers and serves as a great ‘old school’ tool for brainstorming

time ago is that 80 per cent of the cost of a system is maintaining it. If you build a complex system, you’re adding to the cost.” Along with adding cost, complexity also brings other problems to the table – not least concerns about the availability and longevity of the other systems your product relies on. “If your system is going to last any nontrivial length of time and you’ve got dependencies on version ‘x’ of Sass and version ‘y’ of Ruby on Rails, you wind up with a whole lot of technical depth that you’ve got to pay down at some point. You also need people who know all of the technologies.” He concludes with a warning against always grasping for the latest and most exciting tool. “I guess that’s a way of saying we rush too quickly to new shiny things, rather than looking at the core, simple things like HTML, CSS and JavaScript. We’re making things too complex and I think we should be careful.”

Enter the future Our conversation moves back to future. “Today, almost all interactions are conscious. Whether its touch, or mouse or voice, it’s still conscious. We’re building systems that are dumb and passive. They’re sitting there in a loop. That’s how GUI programming works. There’s an event loop and it waits until it gets an event and it responds. So, when we think about interaction, we think about a computer sitting there, waiting for us to touch it.”

december 2014

The thing is, we humans can’t deal with too many thoughts at once. So if we want a computer to do something, we have to stop what we’re doing and thinking about. For the most part, Allsopp argues, interaction is a block. What interests him most is the idea of unconscious interaction. People are walking around with a phone in their pocket, and all the time they’re creating a trail of data, he explains. For example, the pattern of walking could suggest, when analysed, that the person has the flu. “What interests me is taking what people are doing naturally and unconsciously and turning those things into interactions,” he finishes. The future, though, never looks quite like the future. “When we think about the future we have these huge Minority Report fantasies. It’s much more incremental. I think we get overly ambitious, we take today and put jetpacks on it.”

common language that we’re seeing everywhere, even in hardware now. You script Mac OS with JavaScript now. And, you know, lots of web designers have picked up some HTML and CSS along the way, and then just stop at JavaScript. People think: ‘Programming? How can that be interesting? It’s scary. It’s hard.’ Don’t think like that. It’s logic and humans are logical. Our brains are hardwired to do ‘if’, then ‘else’ stuff. It’s not much more complicated than that.”

“We rush to new, shiny things, rather than looking at core things like HTML and CSS. We should be careful”

Foundations And what’s going to power this future? Allsopp’s prediction is, once more, not quite the stuff of movies. “JavaScript. Learn JavaScript. I see a huge demand for it, it’s going to be the lingua franca. People criticise it for all its problems and limitations. It’s a

Rewind

You are, of course, holding net’s 20th anniversary issue in your hand. And, if there’s one thing that sums up the last 20 years, and will hopefully set us up for the next 20, it’s this observation from Allsopp: “It’s the ‘World Wide Web’. It’s got that ‘World Wide’ bit in its name, and that’s important. It underlines the web’s values, which are: openness, interoperability and access.” For Allsopp, working on the web is like forming a pact. “The web has been very good to us – it’s given us a good life, it’s given us interesting problems to solve, it’s given us a great community of people to work with, right around the world … We’re immensely privileged. The very least we can do to pay the web back is to understand its values and to honour them.”

VOICES Big question Industry

What can web pros learn from the past? The web is busy hurtling along at a startling pace, but what lessons can designers and developers learn by pausing and taking a look backwards?

A a ron Gus ta f s on

Jef f re y Z el dm a n

aaron-gustafson.com

zeldman.com

Founder, Easy Designs

Fault tolerance. This is a fundamental concept in the design of HTML and CSS that instructs browsers to ignore anything they don’t understand. It is what allows us to use HTML5 elements without making pages unusable in text browsers like Lynx. It also makes it possible to deploy CSS3 features without causing issues in older browsers. Understanding fault tolerance is crucial to building web pages that will work anywhere – yet it’s often overlooked.

A ngel a Ricci

Designer and frontend developer gericci.me

Progressive enhancement. We can’t hold back new web technologies – we have to embrace the ever-evolving nature of the web while considering the different paces this evolution presents. We have to keep things simple, starting from a semantic markup, then progressively enhance our interface with new layers of rich features. 38

december 2014

Founder, Happy Cog and A List Apart

Most of the problems that we’re called upon to solve today have been solved before. Tiny screens? They’re nothing new – back in 1995, we designed websites for monitors with far fewer pixels than today’s phones. Readability? We can turn to the last hundred years of book design for guidance. Form factors change faster than reason can follow – human needs and desires, not so much. We can learn as much from past failures as we can from the successes. Above all else, the past teaches us to subordinate our design egos to the problems that we’re solving and the people we serve.

2O YEARS OF

L éonie Wat s on

Gene Cr aw ford

paciellogroup.com

unmatchedstyle.com

Senior accessibility engineer, The Paciello Group

The web is for everybody. 20 years ago we didn’t know millions of people would use the internet every day. 15 years ago we didn’t know people would be using touch and speech, as well as keyboard and mouse. 10 years ago we didn’t know there would be multiple browsers. Now we know that people (and technologies) come in many gloriously different configurations, and that we should take pride in creating products that are usable by as many people as possible.

Rem y Sh a rp

Chief JavaScript wrangler remysharp.com

Don’t repeat yourself. Recently there was a fun code search (netm.ag/code261) that revealed why the next version of Windows to be released would jump from 8 to 10: if (os.startsWith(“Windows 9”) was old code to match Windows 95. Remember when Opera was the first browser to hit a double-digit version number? It shipped with a user agent that had both Opera 9 and 10. We repeated this mistake. If we can learn anything, I’d say: if it feels easy, and has a stink of not being future-friendly, abort your current path and start again. It’ll be worth it. You won’t repeat those small but non-trivial mistakes.

President, unmatchedstyle

The web is fairly new still but its roots run deep, specifically in visual design. A huge lesson is patience: things move so quickly that we get impatient and often move on without considering all the angles that would make our work truly great. The masters of commercial design took time to develop a solid skillset that guided their work, generating a level of craft that has gone largely unrivaled on the web to date.

Fa me R a z a k

CTO, AnalogFolk analogfolk.com

Old technologies are not obsolete. We can sometimes forget that purpose-built tools often offer a superior experience over digital devices. Printed books feel better than a Kindle, the warm sound of vinyl more romantic than Spotify. Technologies such as the Arduino and Thermal Ink enable us to maintain a connection between physical and digital realms; guitars with laser strings and typewriter stands for tablets all bring back that old school charm.

Further reading CERN’s browser

The first line-mode browser was the first cross-platform browser. It was launched by CERN in 1992. In 2013 a team of designers and devs assembled with one aim: to reincarnate the browser. Their stories offer a priceless insight into how yesterday’s web worked: line-mode.cern.ch

A Dao of Web Design

If you’ve not already read it, check out John Allsopp’s ‘A Dao of Web Design’ (interview on page 32). The piece caused shockwaves when it was first published, and continued to resonate long after. Indeed, Ethan Marcotte credits the article as a great influence: alistapart.com/article/dao

Happy birthday CSS

CSS is 20 years old. It was proposed by Håkon Wium Lie with the aim of saving HTML. To see why, check out this page from 1993 - netm.ag/telektronikk-261 - where Lie resorted to making images with text in them. This in mind, Bruce Lawson’s interview with Lie makes for fascinating reading: netm.ag/lie-261

december 2014 39

Voices Q&A considered ‘modernising’ it with RWD, animations and so on, but realised that we’d be doing the page (and those who worked on it) a disservice. A faithful restoration was the only way to go about things.

2O YEARS OF

net: Is the rebuild really running NT Server 3.5? TW: Ha! Nope, but we wanted to recreate everything (including the text) just as it was. net: What were the biggest technological challenges of the project? DR: The site build was straightforward, aside from the image map. Once we had a recreation of the star map graphic – thanks to Microsoft’s Dan Schlitzkus – we had to figure out how Microsoft would have built the image map navigation given the technology available in 1993-1994. A detailed write-up on this process can be found at netm.ag/1994-261.

Q&A

Paravel

Trent Walton, Dave Rupert and Reagan Ray chat about the Microsoft project that saw them mining the archives of web history Info Names: Trent Walton, Dave Rupert, Reagan Ray (left-right above) company: Paravel w: paravelinc.com t: @paravelinc

net: Why don’t you introduce yourselves and the Microsoft project? TW: Dave Rupert, Reagan Ray and I work together at a web shop called Paravel. We teamed up with Microsoft to build the current responsive version of its homepage. Recently, Microsoft reached out to us again for a really fun project – to recreate the original Microsoft homepage, 20 years after its 1994 launch (netm.ag/micro1994-261). net: What motivated this digital archaeology? DR: Microsoft’s Chris Balt came to us with the idea, thinking it’d be appropriate to recreate the page on the 20th anniversary of its launch. To us, the 1994 homepage represents a key piece of the web’s history and captures the innovative spirit that so many who work on the web possess. Needless to say, we approached the project with reverence mixed with giddy enthusiasm. net: Was the job a complete rebuild or did you use pieces of existing code? RR: It had to be a complete rebuild because the original code was nowhere to be found. We briefly

december 2014

net: What can today’s web-makers learn from vintage sites? TW: I’m delighted by the fact that very little seems to have changed in regards to the way innovation happens on the web. We’ve never been content with current technologies, and have always found new ways to push the web further. Without this aspect, I don’t think I’d love web design in the same way. net: How do you think today’s sites will be remembered in 20 years? DR: I have no idea, but I think if they are still online they will have a better chance of being remembered at all. It’d be a privilege to inspect the code on Microsoft’s original 1994 homepage, or even the 2002 Wired redesign that demonstrated the power of web standards and CSS. Sites like these are valuable learning tools, they help tell the story of how the web was formed and represent key turning points in how we build. The more of the web we can preserve the better. Sites like Space Jam (netm.ag/spacejam-261) shouldn’t be the exception, they should be the rule. net: Are there any other 1994 sites you’d like to revisit, and possibly re-imagine? TW: Regardless of the year the site was launched, I’d love to see companies, organisations and individuals bring older sites back. Maybe that involves a recreation, but maybe it simply requires a permanent URL and the will to keep older work archived and online. I’m finally realising that if we think our work is significant in any way, we should be good stewards of that work. We should be keeping it online. For more information on web archaeology, visit netm.ag/archaeology-261 or netm.ag/MSHP-261

voices Opinion

Business

What are we worth? Sean Johnson explores the idea of charging for your value, rather than your time

december 2013

I guess if we want to earn more we can always put our rate up, but how far can you go with that? Who’s going to pay you £300 per hour when you’re being compared to others charging £50? And what if I’m more efficient with my time? Let’s say I can do something in half the time as someone less experienced. The quality of the end product may be the same, but I’m able to work faster. Why should I get paid less?

value-based Pricing

quantify the value of a project to the client at £100,000 per year, a realistic investment should be around £50,000. Whereas if we base our fee on how long the project takes – say 15 days at our day rate of £500 – we might only be charging around £7,500. OK, this may sound like a great idea, but how do you quantify the value? How do you put a monetary value on the client’s problem? Let’s say the goal for the site is to generate more leads. If the client’s typical customer spends £1,000 and they convert, on average, 25 per cent of their leads into customers, the value of each generated lead is £250. If the website can provide 200 leads per year, that’s around £50,000 of value. Also, if we focus on building a better user experience we might even be able to improve that conversion rate and push the value up higher.

Ask ‘why’ the client wants something. Then uncover what value they put on solving that problem

Now, what if we were to price up a job based on the value that project would bring? We’ve all had a client who wants a redesign because they feel their current site is outdated, right? Don’t take their request for a redesign at face value, delve deeper and find the reason why they need to ‘freshen up’ their website: maybe sales have dropped, they’re not getting enough leads or their customer service calls have gone up. There is always a problem that drives a client to spend money. Instead of asking ‘what’ the client wants something, we should ask ‘why’ they want it. Keep asking until you fully understand their problem and how much pain that problem causes. You can then uncover what value they put on solving that problem and easing that pain. When we focus on their business problems, we can focus the client on making an investment to solve those problems. When we talk about investment, we think about risk. I’m sure we all agree that if we invest £1 we’re more likely to see a return of £2 than £10,000. Likewise, if we

Practice makes perfect It can be tricky though. As designers and developers, these conversations are hard. We’re not business development managers or growth consultants, but with a little practice we can become more comfortable with these discussions. We need to think beyond just covering our bases. Yes, we still need to know how long a project will take, so we can cover our costs and schedule in our next project, but if we begin to focus a little more on the value that project will provide the client, we can start to realise what we are really worth.

PROFILE

For the most part, I imagine we’re fairly comfortable with pricing up projects. It’s something we have to do each and every time we take work on. We might sometimes ask ourselves if we’re charging too much or too little, but how often do we question what we are actually worth? When pricing a project, I’m guessing you find out the features the client wants, estimate how many days it will take and multiply that by your day rate. The shrewd amongst us probably add a little extra for contingency, right? The problem is, when we price projects based on how long they take, we’re essentially selling our time. We’re not selling our skills, our expertise or our ability to do the job. When we price projects based on time, we’re already putting a limit on what we earn – there are only so many hours in a day. What if we miss a few days, a week or even a month? Work might dry up for a bit, we might be ill or maybe we offered a fixed cost for a project, we’ve run over and we’re now working for free. We can’t get that time back.

Sean (@seanuk) is a freelance web designer working with small to medium sized businesses around the UK. He also hosts the popular Freelance Web podcast (thefreelanceweb.com)

Gallery Inspirational sites

k arolina szczur

Sensational design and superb development

HTML5, CSS3, RWD, SVG s , Interchange

charitywater.org/september Charity: Water charitywater.org

Well designed sites for charity organisations are hard to find, but Charity: Water is certainly one of them. The September campaign features beautiful, fully responsive imagery. “With some of our larger images, we tried out some srcset mimicry. We used a datainterchange attribute on the img or div (in the case of background images) tags that designated properly sized images,” says Christina Lutters, who was responsible for frontend implementation. “The proper image was downloaded and shown using a Zurb Foundation plugin called Interchange.”

december 2014

One of the team’s designers, Mike Smith, created some beautiful painting and hand-lettering to enhance the campaign. “To preserve the crispness of his work as we scaled the lettering responsively, we used SVGs,” Lutters adds. The most challenging aspect was to create a smooth flow between sections. “Because it’s responsive, the height of the sections changes, altering the height of the images and the flow of the gradients. We had to work a combo of unusual background image placement (using :after ), gradient breakpoints/overlaps, and some light noise to blend it all together.”

Karolina is a designer, developer, photographer and writer at &yet. She’s also an open source aficionado and runs CSSConf in Oakland, California w: thefox.is t: @fox

Inspirational sites

HTML5, CSS3, RWD, grunticon, js animations

responsivewebdesign.com Ethan Marcotte ethanmarcotte.com Karen McGrane karenmcgrane.com

Ethan Marcotte coined the term ‘responsive web design’ four years ago in an A List Apart article that was shortly followed by a descriptive book on responsive theory and practice. Now, together with Karen McGrane (author of Content Strategy for Mobile, published by A Book Apart), he’s launched a site featuring workshops, public events and a podcast. And it’s all about responsiveness. Perfectly aligned with Marcotte’s book branding, the site sets speed as its first concern. “Performance was a priority for us. I set up a simple performance budget, and it was actually freeing to view the site’s design through that lens. There’s still plenty of work we can do, but it’s satisfying to see how quickly our site loads over a spotty 3G connection,” says Marcotte. “We’re using Grunt to manage common tasks and a number of Filament Group-produced utilities to keep progressive enhancement and performance front-and-centre,” adds Marcotte. He also mentions such tools as grunticon, grunt-criticalcss, CSS and JavaScript loaders, as well as fixed-fixed.js. The result is a beautiful and faultless example of responsive web design in action.

december 2014 45

Gallery Inspirational sites

si t e of t he mon t h

HTML5, CSS3, Picturefill, Bourbon, Neat, Ruby on Rails, SSL

themanual.org Paulo Zoom paulozoom.com

The Manual is a design journal for the web. Previously print-only, it’s now evolving into a multidisciplinary publication that includes ebooks, an audiobook and of course, a web version. With the focus on a great reading experience, The Manual’s usage of colour is minimal, the design intentionally clean and typography superb. The imagery is sparse but beautiful, and commissioned illustrations are fully responsive, thanks to Picturefill. The CSS codebase is fully modular. “To help me write CSS, I use Bourbon and Neat, and also my own little Garnish

december 2014

(netm.ag/garnish-261) for shorthands and time-savers,” says The Manual’s lead designer and developer Paulo Zoom. As Zoom adds, the site is also heavily optimised for speed. “Aside from the usual optimisation of assets in the frontend, we continued to work with Marc Roberts on the site’s backend and architecture. The Manual is developed with Ruby on Rails, and it makes extensive use of caching for quick page renders. Then, we use CloudFlare to cache and distribute the site and we do so over SSL, making use of the SPDY protocol. This means very few requests hit our server, and the ones that do will benefit from page pre-rendering and caching.”

The strong, familiar type, combined with a bold use of colour, makes a beautiful counterpart to the print edition. Daniel Eden @_dte

Inspirational sites SVG s , JavaScript

jxnblk.com Brent Jackson jxnblk.com

SVG’s main domain so far seems to be an alternative for raster imagery and animation, but it can also be utilised in very interesting ways – including font replacement. Product designer Brent Jackson built Fitter Happier Text (jxnblk.github.io/ fitter-happier-text) as an alternative to jQuery-based FitText (fittextjs.com) by Paravel. It still relies on JavaScript, but is significantly more lightweight and performant. Jackson started playing around with SVGs before by creating a set of SVG-based loaders (jxnblk.github.io/loading). “This was mostly meant as a joke and an opportunity to learn about animated SVG,” he explains. Use with caution, though. “If you do intend to use these in production, be aware of limited browser support and be prepared to create fallbacks,” Jackson adds. Experiments like this prove that we’re still discovering the possibilities of what we can build with SVGs.

december 2014 47

Gallery Inspirational sites

HTML5, CSS3, parallax, Grunt, Ruby on Rails, Sass, Compass, Bower

blloon.com

Edenspiekermann edenspiekermann.com Blloon is a new ebook service that enables users to read for free, earning more ‘pages’ through sharing the app or rating their reads. Berlinbased Edenspiekermann was the agency tasked with developing the branding and digital product. “With Blloon, we wanted to create something that differentiated from the ocean of startup sites out there with looping background videos,” says creative lead Paul Woods. Matt Berridge, lead developer on the project, explains that the team did some groundwork at the start of the project to streamline development. “We integrated Grunt to automate tasks such as image processing, optimisation and

december 2014

Modernizr compilation,” he says. “We also integrated Bower into the asset pipeline as well as Autoprefixr, saving us time as the project went on.” The site makes use of a two-tier Javascript set-up based around the BBC’s ‘Cut the mustard’ test. The team created a ‘core’ JS experience, and progressively enhanced things from there. “We utilised open source scripts like Typer.js for the hero module, alongside a JSON feed containing titles, quotes and book covers (loaded via Ajax) from the Blloon book database,” adds Berridge. “On the book detail page, adaptive-backgrounds.js allowed us to calculate a suitable background colour given the book’s cover.”

Inspirational sites

HTML5, CSS3

asinglediv.com Lynn Fisher lynnandtonic.com

Pure CSS drawings are not a new thing, but Lynn Fisher takes them to a whole new level with her impressive side project, A Single Div. “The main challenge was the restriction of a single div per drawing. That forces you to think through multiple layers of :before and :after elements and handling z-indexes,” says Fisher. “I found it funny that when I was stuck, looking for possible solutions, everyone suggested to use another div element, which is precisely what I did not want to do!” The illustrations are mainly built with multiple box-shadows, background gradients and all values of border-radius to create organic shapes beyond rectangles and ellipses. Unfortunately, one of the drawbacks of using gradients is the lack of anti-aliasing, which sometimes made the lines look jagged. “One of the other hurdles was what CSS is capable of and what I wanted it to do. There’s a lot of trial, error, pushing pixels and faking effects with other CSS properties. I definitely needed to think about implementation in a different way,” adds Fisher.

Experimenting with what is possible: always good. Typical ‘real world’ use: use SVG. Chris Coyier @chriscoyier

december 2014 49

Gallery Inspirational sites

JavaScript, SVG, CSS3, jQuery

letters-inc.jp Letters, Inc. letters-inc.jp

Popularised by Polygon’s Playstation 4 and Xbox One reviews, SVG animations are quickly gaining widespread adoption. Tokyo-based agency Letters, Inc. based its monochrome (or black and blue, if you switch the colour palette) site on beautifully complex illustrations that are drawn as you scroll. To complement that effect, the agency makes great use of CSS3 3D transforms to showcase its projects. “The concept behind this website is to convey the development abilities of the Letters, Inc. team – each of which has

december 2014

been gaining great power of expression and producing various kinds of creative works,” explains lead designer Kenta Toshikura. “By using HTML5’s canvas, CSS3 and jQuery and combining them with SVG path animation, we attempted to make the web design as interesting as possible. We deliberatively used only a few colours, so they harmonise with the dynamic movements of the path animation. Users can also enjoy parallax effects by virtue of the smartphone’s gyroscope on the dedicated mobile site.”

The image on the site’s homepage is a perfect example of when SVG is the better choice. It looks sharp. Nicely done. Sara Soueidan @SaraSoueidan

next month

The easy way to build apps

We present the definitive guide to building mobile apps and discuss the top tools and frameworks

PLUS Get the most out of SVG â&#x20AC;&#x201C; a primer by Sara Soueidan

Build advanced JavaScript apps with Ampersand.js

Create beautiful portfolios with Semplice

ISSUE 262 on sale 27 November Print edition, back issues and special editions available at

myfavouritemagazines.co.uk Digital editions available on iTunes, Google Play, Kindle, Nook and Zinio

net.creativebloq.com

2O YEARS OF

Sublime design & creative advice

Design Challenge

this month Featuring...

Focus on

This month...

A site from 1994 M at t he w S mi t h

Profiles

Having a fast site is very important. However, there are ways to suggest speed that go beyond the technical, Gene Crawford explains.

Matthew is the VP of product design at Assembly, an inventor and advisor w: matthewsmith.cc t: @Whale

S h a ne Mie l k e Shane is currently freelancing as a creative director, designer and frontend developer w: shanemielke.com t: @shanemielke

Profile

N a omi At k in s on & J a me s W hi t e

We chat to designer, developer and successful entrepreneur Drew Wilson about being your own target market, and staying fit to work

Naomi is an award-winning brand and digital product designer. Visual artist James is also known as Signalnoise w: naomiatkinson.com t: @naomisusi w: signalnoise.com t: @Signalnoise

Brief

How we built

How Table XI and Caxy joined forces with Chicago’s Field Museum to give it a responsive, user-friendly new site based on Drupal

december december2013 2014

We’d like you to take a site from 1994 and redesign it, bringing all today’s tools, technologies and techniques to bear. We’d like you to try and capture the essence and personality of the old site, and use those ingredients to inspire your new, modern page.

Design challenge

4 1 2

Mat thew Smith

Time.com

A mobile site dedicated to presenting a curated selection of news in a focused, digestible format

I’m opinionated about news. I think it’s well understood that a lot of the news that circulates is filler to keep stations on-air all day, and to make their digital publications look busy and active. Still, staying informed is critical to being a world citizen. So through the influence of the incredible redesign of the Yahoo News App, I took to redesigning Time.com from its launch in the 1990s. My design aims to enable people to experience their news in bite-sized chunks of the most crucial reports, or articles that are most important to them individually. Constraints often create focus. When you reduce the mass in a recipe you increase the potency of flavour. The same holds true for the design of content.

Close up (1) The list of news titles should be spread out to slow the reader down to a cadence appropriate to engaging with curated news. The titles are accompanied by their respective category. (2) The articles themselves are formatted simply to create a hierarchy of information: imagery first to provoke interest, followed by a clear title and then a subtitle to summarise the article’s core story. (3) The start view is also intended to slow the reader down and give them a simple synopsis of what’s before them so they can make choices appropriate to their interest at the time of reading. (4) The menu provides the opportunity to move through the news topically, one course at a time. (5) Text size is large and open. Web fonts are used for titles and system fonts for body, to reduce initial load.

my month What have I been doing this month? I recently joined the Assembly team as VP of product design, and love the challenge of creating a community of builders. Which websites have I visited for inspiration? I subscribe to IFTTT updates from butdoesitfloat.com, and have been blown away by the cool stuff at mix. fiftythree.com/think. What have I been listening to? The new Odesza album and Banks on repeat, and I made a pretty good mix called New Beats and Treats (netm. ag/treats-261).

december 2014 53

Showcase

Design challenge

4 3 2

Naomi Atkinson & James White

My month What have I been doing this month? NA: Recruiting designers, renovating a building and crowdfunding for Whosit & Whatsit JW: Travelling to speak at several design conferences, and I had my first solo art show, in New York. Which websites have I visited for inspiration? NA: No websites – Reasons to be Creative, and London Design Week. JW: abduzeedo.com and Tumblr.com What have I been listening to? NA: Pyramid, Aphex Twin, Caribou. JW: Carpenter Brut, Kavinsky, Mötley Crüe.

december 2014

Microsoft

Two creatives teamed up to update Microsoft’s 90s site with a retrofuturistic, Star Wars-inspired vibe

We really admire how Microsoft went for a conceptual approach on its first ever homepage in 1994 (netm.ag/micro1994-261). We’ve brought this 90s approach into today’s web, creating a three-dimensional universe with Microsoft at the centre, reflecting the company’s initial aim to, it its own words, “put its growing Knowledge Base online”. With 1994’s limitations no longer holding us back, we can make full use of things like web fonts, CSS transforms and animations to bring this classic into the 21st century. On the responsive side, we’re giddy about the menu taking on the feel of Star Wars’ opening credits on smaller devices. Scrolling through the menu would take you forward and backwards in the space–time continuum! We’d love to take this challenge further, moving into the browser to prototype and test interactions, usability and accessibility for a truly out-of-this-world experience.

Close up (1) We included this little Easter egg for Larry Osterman, who campaigned to save the Blibbet – the mark from a pre-1987 Microsoft logo. See if you can spot it in the final design. (2) Web font Segoe UI brings us to modernday Microsoft. Making the most of scale and translate CSS transforms, as well as some CSS filters, allows us to create the illusion of type in a 3D space. (3) The colour palette adheres to Microsoft’s current brand guidelines, and the illustration style is definitely our modern take on the classic site. (4) We could have a lot of fun creating all of our logo effects in CSS – an SVG base image treated with cutting-edge CSS reflections, strokes and glows. (5) Excitingly, we also open the door to a CSS animation playground, moving parts of the UI around in zero-gravity!

Design challenge

1 2

3 4

5 6

Shane Mielke

The Museum of Bad Art

MOBA’s site has been modernised and rearranged to let the awful artwork take a front seat

Since 1994, the Museum of Bad Art has been dedicated to bringing the worst of art to the widest of audiences. Through its website (museumofbadart.org) it shares the best bad art ever assembled in one, two or three museums all in the Boston, Massachusetts area. My first inclination was to do something crazy/edgy/visual, casting aside logic and structure to mirror the unique spirit of the content. But I realised that it was still a functional website, with the purpose of getting people to visit the museums. The site needed to be modernised, responsive and should take a back seat in order to let the art shine. Or in this case stink. Using its current site content, I expanded the site from a 756px wide homepage, that only had one picture of its book and tons of text, into a 1200px widescreen responsive grid experience, with lots of bad art and interesting modules that tell a story about MOBA as you scroll down the page.

Close up (1) A large, featured marquee area showcases the bad art in all its glory. (2) Smaller featured area within the marquee area allowing MOBA to sneak any important promotions into the top of the site. (3) Robust news area featuring all of the MOBA news in all of its formats, with easy access to social media channels. (4) Rotating visual ‘collection’ area that features all nine categories of bad art on the site. The current site simply lists the categories, so I updated this by pairing the names with an example of bad art from within the category. (5) Promotional area to feature the MOBA book as well as any other MOBA features, linking users to special areas of the site. (6) Large persistent footer area on every page which explains the MOBA goals, should anyone not understand the type of museum they’re looking at.

my month What have I been doing this month? Some packaging, an iPhone app and the design and dev of several upcoming movie websites. Which websites have I visited for inspiration? tympathreejs.org, thefwa.com and stackoverflow.com. What have I been watching? Archived CrossFit videos of both the Regionals and Games events. What have I been listening to? The White Buffalo, Snapcase, Johnny Hollow, Mickey Avalon.

december 2014 55

Showcase

Focus on

Focus On

Perceived speed When aiming for conversions, site speed is key. But there are things you can do that go beyond the technical, explains Gene Crawford A lot has been written lately about speeding up your website by finetuning the backend, as well as tweaking the HTML and CSS for better formatting and performance. This is extremely important for a lot of obvious reasons. Mostly we worry about this sort of thing for business reasons – we want conversions. The faster the website loads in the browser, the faster the user can sign up, or make a purchase. This is one benefit to being fast. But another side of things that I’ve been noticing lately is an aim to ‘look’ fast. There are things you can do to make a web page appear fast that go beyond the purely technical. For example, the way you align the fields of a sign-up form, or the number of fields, can impact a person’s perception of the form. The difference between horizontal or vertical alignment can make a form look faster to complete. The strategic utilisation of animation can also sell the idea of something being fast and easy to manipulate. If the primary element on the page you’re designing also contains the main call to action, the faster someone will notice this, and the faster they can act on it. This technically isn’t faster in the sense of tracked time, but it can seem faster. Keeping the user’s perception of speed or ease of use in mind as you design can pay dividends. I challenge you to consider this idea of perceived speed as you work through your next design project, and see where it leads you.

PROFILE

Gene’s mission is to work tirelessly to provide inspiration and insight for developers. His recent projects include unmatchedstyle.com

(1) This is an older screenshot of Tumblr (tumblr.com) which shows the sign-up form using horizontally placed fields – an attempt to show visually how fast the form is to use. (2) The website for Project List (projectlist.com), a project management web app, quickly ‘slides’ in the sign-up form from the right of the page. This small animation helps sell the ease or speed of signing up for the app. (3) The sign-up form on the homepage of Pushreel’s website (getpushreel.com) uses a horizontal form field placement, along with two different submit buttons, to suggest the ease of sign-up.

on sale now! This all-new guide includes everything you need to start designing and building amazing websites people will love. Youâ&#x20AC;&#x2122;ll find tutorials covering the very latest CSS, Sass and JavaScript techniques, articles on best practice responsive web design, tips on how to get the most out of WordPress and other CMSs, and much more!

Available at all good newsagents and online at

netm.ag/ultimateguide3

Showcase

Profile

Drew Wilson drewwilson.com

The California-based entrepreneur on building tools to solve your problems and investing in your wellbeing Designer, developer, proud stay-at-home dad, entrepreneur, brewery owner, healthy living advocate: Drew Wilson’s job titles are long and varied. But his work ethos is simple – create things you would use, and design them how you’d like them to be designed. The approach has worked well for him so far – after kickstarting his entrepreneurial career by being the first to the icon party with Pictos, Wilson is now busy living up to his early success with payment service Plasso. We caught up with him to find out how he does it … net: So, why don’t you introduce yourself and tell us what you do? DW: Hey! Thanks for having me. I’m Drew Wilson and I’m a dad, designer and developer who makes various things. I have a handful of apps I’ve built for the web, Mac and iOS, as well as a brewery, winery and a restaurant. I consider myself an entrepreneur, as I make a living from my ventures. net: When did you first discover design? DW: I started designing out of my passion for art when I was a kid. My dad used Photoshop (version two) to lay out his comic book catalogue – he created the first ever mail-order comic catalogue. I started playing with Photoshop from a young age, and started designing with it when I was around 14. I built my first website in 1996, and have been building them ever since. net: What about technology and the web – when did they first make an appearance? DW: I grew up on Macs and we never had a PC in the house, so my computer experience is very different to most at my age. I was also home-schooled, so educational games on the

december 2014

Profile

info Location: Carlsbad, CA Established: 1996 Expertise: Design, development,

business

Projects: Plasso, Pictos, Namebox, Roon, Lumo, Valio Con

december 2014 59

Showcase

Profile

Above Payment tool Plasso is one of Wilson’s biggest successes Right Wilson describes the laid-back Valio Con as “an extension of himself”

Mac were a part of my curriculum. I remember getting AOL in around 92, when you had to pay per hour! The internet to me then was just chat rooms and email – a very different world compared to today. Ever since then I’ve been interested in technology and making things interactive, but it wasn’t until 2003 that I finally bit the bullet and learned backend code. Before then I just did HTML/CSS and Flash. I never wanted to learn to code – it seemed so nerdy and boring. But I soon found out that I loved coding and building for myself.

Once we’re done getting the kids down to bed (it takes a long time!), I’ll either hang with the wife and watch a movie, or if we both have lots to do I’ll hop back on the computer for a night shift. Also, I don’t take full weekends off – instead I take off one day during the weekend (usually Sunday) and then one in the week. It’s fantastic because a day off during the week means we can do anything with our kids, and never worry about crowds. I’ve been doing it for years now and I’ll never go back to two-day weekends.

net: What does your typical day look like? DW: My wife and I switch who gets up with the kids each day. I hang out with the kiddos (I have three) until around 9:30am, when I start work. I work from home and my door is usually closed, but the kids come in a few times a day to say hi, and I see them for lunch as well. I’m off work at 5pm.

net: You describe yourself as a stay-athome dad – how do you juggle fatherhood and work? DW: It’s true, I am a stay-at-home dad and my wife is a stay-at-home mom. We love it, and so do our kids. Some people have told me it “must be hard”, but that’s only if you consider ‘work’ the primary focus. I used to

be of that same train of thought. I had to consciously train myself that my kids are the primary focus, and work is secondary. Armed with that mindset, it becomes very easy and enjoyable to work from home. I’m fortunate to have the opportunity to be around my kids 24/7, so I want to take full advantage of it. I also don’t get stressed out easily, which is a convenient trait if you work from home and have three little kids! net: Lumo, Plasso, Pictos, Valio Con: you make lots of stuff! From where do your ideas and motivation come? DW: Almost everything I’ve built has started as a desire to solve a problem for myself. I built all the apps you mentioned because I needed something like them, and the existing options weren’t a good fit for me, or didn’t exist. It’s easy to be motivated when building for yourself, which is one of the main reasons I can build so much.

Left Wilson works from home, picks his own personal office hours and describes himself as a ‘stay-at-home dad’ – something he says he “always really wanted to do” RIght Working in an industry that he says “kills human bodies”, Wilson sees investing in keeping fit and healthy as a vital part of the job

december 2014

Profile

office culture

Drew Wilson What’s on your desk? Photo-ready The soon-to-be-released Filtron enables users to create, use and share photo filters. Wilson describes it as “super-radical”

net: Is there some kind of shared DNA that runs through all these products? DW: They’re all a part of me. They are the way I would do things. Valio Con (valiocon. com), for example, is an extension of myself. If you come to the conference you’ll be treated to a vacation and conference in the style I would most prefer. It’s very laidback and fun – no ‘VIPs’, no stage, custombrewed beer, local food, situated on the beach in the sun. So I guess my products all share my DNA. net: Do you have a template or is every product started from scratch? DW: I don’t try to build products or apps around a set of rules. I’m not an organised person so that idea never even enters my brain. I just figure out the way I would want to do things and then base the core feature set on that. When it comes to the actual code implementation, I do have a mini framework (really just a set of classes and functions) that I copy and paste. With each project it gets better and more robust, and cuts down on dev time. I don’t have that for HTML/CSS though. net: When inspiration strikes, how do you harness it? DW: I have a book on that called Execute (executebook.com)! I build immediately when inspiration strikes – at least the design, so I can flesh out my ideas. Over time I’ve gotten less free time, so I’m a bit more

picky about what I spend my time on now. I let things sit in my head for a few days to a week before acting on them, to see if they really stick with me. This also gives me an opportunity to outline (in my head) how long it will take to build, and how much return I would see. And I can judge if it would be worth my time to prototype something, rather than adding to existing products. It’s a balancing act. These days I’m trying to focus more on only a few things, and get away from building new stuff all the time, but it’s hard. net: Do you make all of your projects in their entirety, or do you work with other people? DW: I usually try to partner up with a developer. Tackling a product all on your own is only good if you’re doing one thing. If you’re doing multiple things it becomes too much work for a single person with only 24 hours in a day. Plus, partnering gives you the benefit of having someone else’s talents and ideas contributing to the product. It’s much better to do 50:50 than any other arrangement (and I’ve tried ’em all). I do have a few products that are 100 per cent me, including Plasso and Pictos. net: Which product makes you feel most proud and why? DW: Plasso (plasso.co). Because its success is a result of skill and not luck. Pictos (pictos.cc) was a stroke of luck. I was one of

27” iMac with a 24” Cinema Display, turned vertical. Rode Podcaster microphone. Various phones and tablets for testing. I love my Humanscale Float Table desk!

Little things that make your life worthwhile

Websites: Devour.com, Dribbble.com Apps: Photoshop, Sublime Text, GitHub, Tweetbot, Rdio Audio Reading: TED

What do you have on the walls?

Nothing right now since I just moved, but typically a few pieces of art.

What will you do for lunch? Whatever my wife makes me – yes, I’m lucky.

What hours do you work? Typically I start at 9am and go until 5pm, with a break or two for lunch and to see the kiddos. Depending on how busy I am, I’ll go back to work after putting the kids to bed for another four hours or so.

What else do you do in the office? My wife and I watch movies on the TV, but it’s mostly a work space.

How often do you hang out with other designers? I love hanging out with fellow tech people, but I’m a dad of three little kids, so I barely get out of the house at all!

Describe your working culture in three words I have fun.

december 2014 61

Showcase

Profile

Timeline

How Drew Wilson went from designer to entrepreneur June 1996 Makes his first HTML website

August 1998 Hired for his first paid design project – a poster for a local concert

December 2002 Hired as the only designer at a local print shop

December 2003 Leaves the print shop to go full-time freelance, with only one client lined up

August 2009 Launches first paid software after spending two years building it

May 2010 Creates and organises the first Valio Con, his annual design conference on the beach in San Diego

July 2011 Sells his first company, an ad network called Yoggrt

December 2012 Creates a book – Execute – in eight days, from concept to printer

May 2014 Launches Plasso: payments made easy. This now finances Wilson and his career

december 2014

Early icons Pictos was one of the first icon sets for sale online, and was successful enough for Wilson to give up client work altogether. The designer describes it as “a stroke of luck”

the first to sell icons, so I made tons of money – but only because I was one of the first. If I were to launch an icon set today, it would make nowhere near what I made with Pictos. I was lucky enough to be early. Plasso is different. There are a number of other services in the same space, yet it is doing well (well enough that it is where I draw my salary). I launched a similar app back in 2010 called Quixly, but it failed to make money. Then I launched Space Box, and it failed to make money. So I changed the business model and branding and relaunched Space Box as Plasso, and it’s doing really well. This shows me it isn’t luck, but my experience that has made it successful. That’s why I’m most proud of it. net: Do you do client work? DW: I used to. I stopped in 2008 to work full-time on my first software product I was going to sell. But it didn’t work out and I had to take on some client work in 2009. I also had to sell off furniture and all my camera gear – it was a very tough time. When I launched Pictos, that brought in enough money to finance me, and now Plasso is doing well enough that I don’t need to do client work. That said, building your own products isn’t all rainbows and chocolate baths – it’s hard. You will be poor. But if you’re smart and continue to push through, it will be worth it. net: What’s your take on the web’s attitude to work and health? Long, caffeine-soaked days seems to be almost obligatory ... DW: I hear ya. I personally don’t drink coffee, but I do eat chocolate! We all work in an industry that kills human bodies. The

analogy I like to use is this: a construction worker buys and wears a hard hat to keep him safe on the job. We need to pay for and participate in exercise and healthy food to keep us safe on the job. Looking at it that way, it’s much easier to spend money on these things, because it is worth it. I’ve had a personal trainer for over three years. It forces me to leave my desk because I have to be on time to meet up and work out. I’m also fortunate that my wife is ultra into healthy eating and is an amazing cook. So unless I go buy pizza or a burger, I eat about as healthily as a human can. net: Do you build time into your day to keep yourself healthy? DW: Most definitely. I work out with my buddy and trainer Rhett Andersen three days a week. But the kids keep me active on my days off too! net: What’s next? Do you have any new projects or products in development? DW: A bunch of new stuff actually. My restaurant and brewery will be launching soon (abnormalbeer.com), and I can’t wait for that! The winery has been going strong for a few years now, so we decided to expand into food and beer. I’m on the verge of releasing a superradical app that will make it easy for anyone to make and share photo filters with others, called Filtron (filtron.co). It will launch with a Mac and iOS app. There are a couple of other things that I’m working on in secret, and also a big update to Plasso is due out soon as well. Too much fun stuff! Next month: We chat to search and display marketing agency Forward3D

Showcase

How we built

fieldmuseum.org

Table XI and Caxy helped The Field Museum of Chicago bring archives to life online in a user-friendly new website

1 3 2

Brief Chicago’s Field Museum is a leading research institution and top tourist destination. The museum sought a UX, design and development team to update its website so it would reflect its mission and deepen engagement.

december 2014

Close up (1) Global nav items remain accessible on every page. Research indicated that this information was most important to users. (2) Persistent navigation gives users the security and freedom to explore. (3) Exhibitions, programmes, and events are filterable by audience type. This structure communicates the breadth of the museum’s offerings while highlighting the most relevant opportunities. (4) The hero image reflects the

essence of the museum. The redesigned section landing pages feature compelling photographs of museum exhibits, which drive discovery. (5) Analytics and heat mapping technology showed users were not engaging with exhibition promo blocks, so we revised their design to encourage interaction. (6) A fully responsive design ensures visitors are always able to find what they’re looking for, even when using their mobiles in the museum.

How we built Mik e Gibson

Annie Swank

Benjamin Dohert y Timeline

A rundown of how Table XI and Caxy tackled the project December 2013 Design director Mike leads the visual design and frontend development practices at Chicago-based Table XI w: tablexi.com t: @lovehasnologic

Annie leads the UX and user research practice at Table XI, and teaches throughout Chicago w: tablexi.com t: @annieswank

Benjamin leads Drupal practice through development and teaching at Chicago-based web consulting and custom web development company Caxy w: caxy.com

Table XI is selected to work on the project. It begins reviewing Google Analytics data and establishes Crazy Egg performance tracking

February 2014 The research team begins stakeholder interviews

When it was time to update the website for The Field Museum – one of Chicago’s biggest tourist attractions, and a leading scientific research institution – it was clear that a collaborative approach was the way forward. With the same team spirit that fuels the museum itself, an in-house web team enlisted Table XI (tablexi.com) to act as a research and design partner, and Caxy (caxy.com) to implement the frontend design. Their joint aim? To create a responsive site that would spark visitors’ curiosity. Here, Table XI’s Mike Gibson and Annie Swank, and Caxy’s Benjamin Doherty explain how they rose to the challenge. net: How did you come to be working on this project? MG: The Field Museum solicited proposals and selected Table XI to work on UX and frontend design. The teams then sought a Drupal development partner to implement the design. After reviewing several teams, it became clear that Caxy was the best fit. net: What was your plan of attack, and how did it change as the project went on? MG: On the frontend, our goal was to identify the disconnect between what users wanted to do on the site, and what they were actually able to do on the site. We knew we could only accomplish that with research. We designed a plan that would help us uncover these insights, so we could design a solution to meet users’ needs and drive business objectives.

BD: On the backend, our plan was always to keep the site native to Drupal. That is, to not introduce so much custom coding that future enhancement would be bottlenecked. We started off on a path that was very macro in that sense, but quickly shifted to developing elements which could be used as building blocks. net: What were your main goals when you started out, and did they evolve? AS: In this case of The Field Museum, our objective was quite clear: we knew the ultimate deliverable was a responsive, scalable website with easily updated CMS. From a business perspective the revised site needed to excite users to visit the museum, deepen their scientific discovery, and support the organisation’s philanthropic and programmatic goals. We focused our research around these objectives and continually referred back to these guiding principles. net: Tell us about the user research you conducted, and what you found out ... AS: We embarked on a four-month research phase, which encompassed a number of different research methods. The process began with a survey of internal stakeholders, which we used to form hypotheses and answer key questions: What information do users need most from the site? What are the most common complaints? We then interviewed museum visitors on-site to find out more about their motivations to spend the day at The Field

February 2014 User research begins with key audiences – this includes surveys, card sorts and observation studies

Early March 2014 The design team uses research to build site nav. By March it is designing in the browser and sharing prototypes

Late March 2014 It’s decided the website will be developed in Drupal, and Caxy is chosen as a development partner

May 2014 The team starts the biggest hurdle first: content migration. It develops scripts to move from the old site to the new one as well as refining the taxonomy of the content

June – July 2014 Backend tools are developed to allow for easier site management. Getting the design to come out natively in Drupal proves a challenge

August 2014 Review, QA and launch

december 2014 65

Showcase

How we built

Evolution

A behind-the-scenes look at the Field Museum site designÂ project, in progress (1) Before diving into more detailed wireframes, we mocked up concepts for the basic site scaffolding. (2) The sitemap helped us organise thousands of pages of content. (3) Wireframes were used to illustrate the direction the site was going in to a large group of stakeholders. (4) We explored a number of design options for the main navigation element â&#x20AC;&#x201C; here are some early examples. (5) The design of the ticketing matrix also evolved as the project progressed.

december 2014

How we built Museum. We used a modified card sort to understand what types of information were most important at different stages of the visit. Results indicated that we should differentiate between what you can see at the museum, and the logistical information needed to plan a visit. To assess usability issues, we asked volunteers to use the existing site to complete a given task. We watched closely for times when they got confused, and incorporated feedback into the redesign. net: Anything else? AS: Data analysis on Google Analytics provided further insights into user behaviour. In-site search history surfaced common user frustrations – it became clear that users couldn’t easily find key information to plan their visit, such as opening hours and parking. Heat maps and scroll maps helped confirm that featured content on the homepage was not being viewed, despite a prominent footer with multiple links. net: What technologies and tools did you use to build the site, and why? MG: For mockups, we used Sketch (bohemiancoding.com/sketch), a helpful tool that’s perfect for UI design. As sites get larger it’s important to keep files small and design consistent. The Pattern Lab (patternlab.io) is great for facilitating the design of systems rather than pages. You can easily view your interface elements, without having to duplicate effort. We’re building websites, so we work to get into the browser as quickly as possible. It’s much easier to evaluate the current state of any project when it exists in the appropriate medium. We use Haml,

Keeping updated The museum needed a CMS that could be easily updated and maintained

Research Table XI conducted a four-month research phase, which included a card sort exercise to explore what information was important to people during their visit, and usability tests with volunteers

Sass and CoffeeScript to make authoring these files even easier. BD: On the backend, the site was built using standard Drupal. Tools like PHing and Assetic were used for builds, and Google OpenRefine (openrefine.org) was used to manage parts of the content migration process. net: What was your typography strategy? MG: We wanted to use typography that was readable, above all else. Ensuring comfortable reading sizes drove the layout and design of all templates. This was achieved efficiently in code, through the use of proportional font sizing and a collection of seven horizontal and three vertical breakpoints in the responsive layer of the site. net: What were the biggest challenges? MG: The biggest challenge was one that is common across most projects: presenting

Drupal base Caxy implemented the design using Drupal, working to keep things as clean as possible

a clear site structure and paths to the site visitors that also aligned with the internal goals of The Field Museum. In evaluating our work, we kept coming back to the question, “What is the purpose of this page?” Knowing what the page was supposed to achieve helped guide the conversations that so often go off the rails when you start to combine multiple stakeholders, various departments and research findings. BD: From a development standpoint, one of the biggest challenges was working inside Drupal’s framework to implement the design as cleanly as possible. Drupal creates a lot of markup at runtime and we needed to override the system in many different ways to stay true to the design. Doing that in a way that didn’t degrade Drupal was difficult, but rewarding. net: What were the main things you learned from this work? AS: The website is an amazing platform to connect users to the vast archives of content found within the walls of The Field Museum. It was a tremendous undertaking to audit and prioritise this content. From a research perspective we learned what information matters most to museum visitors, then used these insights to design a system that allows users to access this information easily online. Next month: Great Apes explain the Presidentti 3D coffee box site

december 2014 67

Features Cover feature

When to use jQuery In 2013 Remy Sharp spoke at jQuery UK and wrote an accompanying blog post titled ‘I know jQuery. Now what?’ (netm.ag/nowwhat-261). In the post he spoke about how he went from relying on jQuery for all his projects, to using it on more of a case-by-case basis. Tom Maslen, a developer at the BBC, spoke at Responsive Day Out (besquare.me/session/cutting-themustard) about ‘Cutting the mustard’, the technique the BBC use to decide if a browser is ‘up to scratch’ or not: if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // bootstrap the JavaScript application }

GruntJS One of the frst and most popular projects for running command line tasks

Command line tools

Node.js Any browsers that don’t support the above get the core experience, but without the extra functionality added by the JavaScript. If you need to fully support those older browsers, jQuery is still the best option. If you find yourself only supporting the newer browsers but still wanting an easier interface than JavaScript offers by default, Remy Sharp’s min.js (github.com/remy/min.js) might be the thing for you. It’s a small library that offers simple DOM querying and event listener functionality.

nodejs.org Node.js lets us write JavaScript on the server, but it also lets us run arbitrary JavaScript on the command line. This has led to a number of tools designed to automate tasks that we otherwise would have to complete manually. The easyto-use Node Package Manager (npm) has really helped the community and ecosystem grow at a rapid rate. It not only makes it very easy to install tools, but also makes it nice and straightforward for people to publish their own.

Grunt gruntjs.com Grunt has been around for a while now, and is the most popular task runner for JavaScript. Created by Ben Alman, its vast plugin ecosystem allows you to configure it to compile your Sass, run your tests, minify your JavaScript and much more. When using Grunt, you install the plugins for the functionality you desire, and then create a Gruntfile.js file which will contain all the configuration for the plugins – such as the location of files to use, or settings for how you would like your code to be

december 2014

minified. You don’t write code to perform your tasks, but configure the plugins you’d like to use.

gulp.js gulpjs.com gulp.js uses file streams and lets you define tasks by writing the code, rather than the configuration approach favoured by Grunt. This means that you can get a bit more hands-on with your build system. In your Gulpfile.js file, tasks are defined as functions, in which you can write any JavaScript you’d like. There is still a huge amount of plugins for common tasks, but you have to include and call them yourself. It’s a little bit more difficult to pick up, but once you’re used to it you’re able to wield a huge amount of power.

Serve github.com/visionmedia/serve Serve is something I use every day and has become a key part of my workflow. Once installed, it allows me to run serve in any directory and visit the site on localhost:3000 . This is fantastic if you’re working with a website that you would quickly like to run, and view in a browser.

Cover feature

gulp This system focuses on streams, which are abstract representations of files

Bower For managing frontend dependencies, try Bower

Yeoman You can save time by using Yeoman to generate files for you

Moment.js This provides a fantastic API for editing and formatting dates

Yeoman yeoman.io Yeoman is a tool for building websites. It will generate a project structure for you, and configure Grunt or gulp to run your project. Once you’re familiar with the tools, you can save a lot of time by using Yeoman to generate files for you. For example, running yo webapp will generate an entire project set-up for writing HTML, CSS (or if you prefer, Sass) and JavaScript, complete with a fully featured Gruntfile with tasks configured for you. You can also create custom generators to suit your project’s particular needs.

Pulldown github.com/jackfranklin/pulldown I may be slightly biased here, as Pulldown is a tool that I built with Tom Ashworth, but it’s one I use a lot for quickly downloading a library. It uses

CDNJS (cdnjs.com) to search for files and then download them. This means that downloading jQuery becomes as quick as pulldown jquery . If you want more power, and more fine-grained dependency management, consider using Bower (see below) – but for a quick prototype or demo, I find Pulldown fits my needs really nicely.

Bower bower.io Bower is a fully featured solution for managing frontend libraries and dependencies in your projects. It can manage versions for you, and make sure that your project uses a specific version of a library. It will also deal with the dependencies of your dependencies, to ensure that every one works as hoped. You can keep your dependencies in a bower.json file – then running bower install will ensure all dependencies from bower.json are installed.

Utility libraries

Lo-Dash

lodash.com Although newer features in ECMAScript 5 and 6 have a lot of added functionality, often you’ll find yourself wanting to perform a fairly simple operation on some data that you’d rather not implement yourself. That’s where Lo-Dash comes in. It provides a vast amount of utility functions to perform common operations on objects, arrays or functions.

Moment.js momentjs.com Working with dates is usually pretty painful, regardless of language, but in JavaScript it’s even worse. The provided APIs simply don’t provide the features required. Thankfully for us, Moment. js exists to fill the gap. It’s a library built to handle creating, manipulating

december 2014 71

Features Cover feature

Mocha What sets this testing framework apart is that it doesn't provide an assertion library

and formatting dates and incredibly feature-complete. It’s become something I instantly reach for the moment I have to work with dates.

Accounting.js netm.ag/AccountingJS-261 Have you ever tried to multiply two decimal numbers in JavaScript?

0.2 * 0.1 >0.020000000000000004

AngularJS This offers tools for creating your own web application framework

avoid. When I learned JavaScript, the idea of writing tests for my code never occurred to me, but now I can’t imagine writing code without tests. It gives you confidence that what you’ve written works, helps with the design of code, and prevents you from inadvertently breaking something in the future.

Jasmine netm.ag/Jasmine-261

Because of how numbers are stored internally, these small errors are common, and in a large application they can start to cause huge problems later on, that are really difficult to track down. If you’re working with any form of currency or just numbers in general, you owe it to yourself to use Accounting. js and save many hours of pain.

Jasmine is one of the most popular testing frameworks for JavaScript. It lets you structure your tests through the use of describe functions, and specify the expected behaviour with it functions. It also provides easy ways to set expectations, such as expect(2+2). toEqual(4); . It runs in the browser and comes with plenty of advanced functionality, including spies for those with more complex applications to test.

Testing Libraries

QUnit

Testing has gone from something that was never really talked about five or so years ago (at least, not in the JavaScript world) to being something you can’t

QUnit is the library that jQuery is tested in, so you can be confident it provides

december 2014

qunitjs.com

all the functionality you need. QUnit is particularly useful when you want to test code that modifies DOM elements. It lets you define HTML that will be set up for each test, and then reset before the next one. This means you can run code and assert that the HTML has been manipulated as expected. If you’re working on JS that interacts heavily with the DOM, QUnit is the best choice.

Mocha visionmedia.github.io/mocha Mocha is a testing framework that can run in the browser, or alternatively within a Node.js application. Similarly to Jasmine, it provides functions including describe and it , and a number of other features that you would expect from any good testing framework. What differentiates Mocha, however, is that it does not provide an expectation or assertion library. This means that within your it blocks, you’re able to use any library to make your actual test assertions. The ability to use the expectation framework of choice, along with the fact that Mocha supports both

Cover feature

Q&A Andy Appleton Andy Appleton (@appltn), developer at Heroku, on the JS tools he relies on and the future releases he's excited about

EmberJS An opinionated framework, EmberJS is full of conventions to offer a framework for building complex web apps

the browser and Node, makes it a very popular choice.

Single-page application frameworks Due to the advances in browser capabilities and the functionality of JavaScript (along with future enhancements that aren’t quite there yet), in recent times more and more people have taken to writing their applications on the client. This means typically the server just sends data to the client in the form of JSON through an API. The rendering of that data, along with all other logic, is written in JavaScript in the client. As the need for these applications has grown, so have the frameworks to support them.

Ember emberjs.com On its homepage, Ember describes itself as “a framework for creating ambitious web applications”, and it focuses heavily on conventions to help you build your applications quickly. It puts the URL first, ensuring that if a user refreshes

a page in your JS app, they get that same page back again in exactly the same state, which is a common problem with JavaScript applications.

AngularJS angularjs.org AngularJS is Google’s framework for building web applications, and takes a very different approach to Ember. It provides much more freedom in that it lets you do things exactly how you want – which can be both a blessing and a curse. The best way to use Angular is to define your own internal conventions on how you want to structure your app, or you’ll find as your app grows it will become very difficult to work with. Todd Motto’s style guide (netm.ag/motto-261) may be a good place to start.

BackboneJS backbonejs.org BackboneJS is much less fully featured than the heavyweights of Ember and AngularJS, but that’s entirely by design.

Are there any tools that you tend to rely on for every project? Node.js and npm, always. Regardless of whether the backend is written in JavaScript, I always end up using Node in some capacity. I almost always include Lo-Dash (lodash.com). I like the expressiveness of the functional code I can write with it, and it’s nice to use as a compatibility layer when working with array methods like forEach and map . Which of the single-page application libraries do you tend to pick? The library I’m most familiar with is AngularJS. Angular is great for building applications with a complex UI, and once you wrap your head around directives, they’re an extremely powerful way to isolate and abstract interaction. I’ve also been working with Ember. I think Ember with ember-data (github.com/emberjs/ data) is a really good fit for a data-heavy app, and ember-cli (ember-cli.com) brings a strong set of conventions which make it far easier to work on a project with a larger team. Are there any libraries in their infancy you’re excited about? Projects like Hoodie (hood.ie) and Meteor (meteor.com) are extremely interesting. I’m of the opinion that the next massive progression in the way we build web applications will be in handling offline syncable data. I think about how Ruby on Rails has made it easy to create RESTful APIs, and I want that for data sync too.

december 2014 73

Features Cover feature

SuperheroJS A curated collection of articles, books, talks and tutorials all about JavaScript

Further reading There’s so much out there that no article could hope to cover even half of what’s available, so below I’ve shared some further links and resources to help.

SuperheroJS superherojs.com A great suite of curated articles, tutorials, videos, books and conference talks to help you improve your JavaScript and learn what the future holds for the language, too.

EchoJS echojs.com EchoJS is a site where people submit JavaScript content which is then upvoted by the community. It’s a great place to find tutorials and new libraries that people release.

JavaScript Weekly javascriptweekly.com A weekly, curated list of content in your inbox, JavaScript Weekly and its corresponding Twitter account (@JavaScriptDaily) offers a great way to get a dose of JavaScript.

december 2014

Handlebars The templating language that comes baked in with Ember

What Backbone gives you is a lowerlevel set of components that you can build your application on top of. It gives you models, collections and views, but lets you choose anything else to fill the gaps. This does mean you have to write a lot more code yourself, but it gives you complete control.

ReactJS facebook.github.io/react It’s probably a little unfair to have React in this list, as it’s not a framework for building these large applications. Rather, it provides a view layer for applications, which can be used with any other framework. React focuses on re-rendering states into views and doing it in the most efficient way, with the fewest possible DOM manipulations. It does this by building a virtual DOM, comparing it to the real one in the page, and making them match.

Handlebars handlebarsjs.com If you use EmberJS you’ll use Handlebars: it’s the templating language that comes baked in with Ember, but it can also be used independently. Handlebars uses curly brackets for syntax, and supports basic logical structures such as conditionals and loops to help you output your data.

Lo-Dash templates lodash.com/docs#template Lo-Dash, the utility library mentioned earlier, comes with a small and simple templating engine built in. If you find yourself needing some small templates, – perhaps without some of the more advanced features that other solutions offer – Lo-Dash may well be the library for you.

Templating

Modules and dependency management

With the growth in the use of JavaScript for rendering content on the frontend, templating languages have sprung up to support this.

As JavaScript apps continue to get larger and the number of files grows, you need to make sure you use some form of system for managing the files, the

Cover feature

Browserify This lets you use NodeJS’s modules and npm to manage frontend dependencies

dependencies between them, and how they are loaded into a page. Having thousands of <script> tags in a page is not a valid approach here!

Browserify browserify.org Browserify takes the module system we’re lucky to have in Node with npm, and lets us use it on the frontend. You write all your code using CommonJS (the dependency system in Node) and use npm to manage dependencies. Before viewing it in a browser, you then run it through Browserify, which converts it into code that the browser can happily understand. The downside is that you will need to rerun Browserify every single time you change a file, but this is easily automated and can be done with Grunt, gulp or similar.

jspm.io jspm.io Created by Guy Bedford, jspm is a package manager for JavaScript that lets you get modules from a number of sources, including npm, GitHub and others.

RequireJS For working with Asynchronous Module Definition spec, this is the best choice

RequireJS requirejs.org RequireJS is the best framework for working with the Asynchronous Module Definition spec for loading and managing dependencies. You define and load in your modules in a very specific format, which lets you also define your own modules and their dependencies. All the dependencies are loaded asynchronously, which means that, unlike tools like Browserify, you have to define your module in a callback function. It’s a different way of working and it can take some time to get your head around things, but once you have it’s a really nice way to build applications.

ES6 Modules netm.ag/polyfill-261 Coming soon to a browser near you, ECMAScript 6 – the latest version of JavaScript – will provide a full implementation for creating, importing and exporting code as modules. It’s not supported to a degree where you could reasonably use it, but the ES6 Module Loader polyfill provides support for

using it today. If you’d like to get up to speed with the module system that will eventually be supported in browsers, this is the way to go. The polyfill is very thorough and usable; I’ve used it in a large Angular application to manage dependencies with very little grief.

Conclusion The JavaScript world is vast, and full of great libraries and tools to make your workflow and development easier and more efficient. However, there’s so much out there that it can often be difficult to filter down to the tools you need for your daily work. The approach I recommend is to try a variety of the tools I’ve listed that sound like they might suit you, and slowly whittle the list down to just the final few that you can learn in detail and come to rely on for most of your projects. There are new libraries released all the time, but don’t be tempted to chop and change your toolset all the time. Find the ones you like and stick with them. Occasionally, maybe try a new one and see if it can do a better job than your existing tool, but there’s nothing wrong with having your favourites.

december 2014 75

Second feature

This year, net turns 20 – and the World Wide Web reaches the grand old age of 25. We remember the milestones and ask: what’s coming next?

his year is a big one for us. 2014 marks net’s 20th anniversary, and it also marks 25 years since Tim Berners-Lee (no ‘Sir’ back then) documented what would become the World Wide Web. Which anniversary matters more? That’s one for historians. What we do know is that web design and development has come a very long way since we first hit print.

points, as well as a couple of links. It wasn’t really much different from using WordPerfect, a software application I knew well.” McGrane remembers posting it and looking at it in a web browser “in all its grey-backgrounded, blue-linked, Times New Roman glory. I still remember the sense of shock and power I felt, realising that anyone could see it.”

Humble beginnings

Baby steps

Web design was a lot easier in the early 90s, because there wasn’t much design we could do. We didn’t get image tags until HTML 2.0, and even tables didn’t turn up until HTML 3.0. But that didn’t mean it wasn’t exciting. User experience expert Karen McGrane (karenmcgrane.com) first started making websites back in 1995. “The very first thing I published to the web was for a class project in grad school,” she recalls. “We learned the basic HTML tags and were taught how to post to the server. I remember sitting in my dark, windowless office, typing out a few tags for headings, bold and bullet

We launched .net in 1994 and tried to persuade the world that this web thing was going to be quite important. Artist and designer Brendan Dawes (brendandawes.com) was one of the people we persuaded. “I was an avid reader of Computer and Video Games when in 1995 or thereabouts a preview issue of a thing called .net fell from inside,” he recalls. “As soon as I began to read it I was captivated by the idea of my computer suddenly being part of something bigger.” Dawes went shopping. He bought “a giant doorstop of a book”, The Internet Starter Kit by Adam C. Engst, got online and

Tim Berners-Lee

creates the very first web page

Mosaic, the first popular web browser, launches in beta

The World Wide Web Consortium (W3C) is Founded

2O YEARS OF

Author Gary Marshall Freelance technology journalist Gary has been part of the net family since Google was in a garage. The sound of a dial-up modem still gives him shivers

.net magazine launches

december 2014 77

FeatureS Second feature

Early days The very first web page, complete with distinctive green text

downloaded every single one of Kai’s Power Tips for Photoshop. “Then, when I worked out that you could see the source of web pages freely and easily, I began to learn how to make websites. The idea that you could see source code and learn from it was, and still is, important to me. From that point on nothing was ever the same for me. It’s fair to say the web changed my life.” The year 1996 brought with it FutureSplash Animator, which would ultimately become Flash, and saw the introduction of the CSS Level 1 specification. Before CSS, content and structure were inseparable. With CSS, style and content were separated. That had huge implications, not just for redesigns – changing a style sheet was much easier than changing every single page of a site – but for compatibility, because the idea that you could write code once and deploy

Internet Explorer 1.0 ships

december 2014

Founding father The man that started it all off: Sir Tim Berners-Lee

it anywhere was under threat. It’s amusing to look back at, ahem, innovations such as Netscape’s <blink> tag (which made text blink in an annoying manner) and Microsoft’s <marquee> tag (which made text scroll in an annoying manner), but during the browser wars, web designers faced a very real problem. Code would work perfectly in one browser, but not in another.

End of a century The early years of the 21st century were all about Web 2.0 and user-generated content. While Web 2.0 was often characterised by oddly abbreviated names and rounded corners, it was more significant than that: where Web 1.0 was about being a passive consumer of content, Web 2.0 was about interacting. Web 2.0 brought us virtual communities of all kinds, wikis, web applications and YouTube commenters (we never said it was entirely positive).

HTML 3.2 introduces fonts, colours and background images

For Mike Kus (mikekus.com), web/UI designer and a familiar face from design and tech conferences, “the power of the web really hit home for me when I started to share my own design work through it. It was absolutely decisive in changing my career for the better. The ability to share and talk about the work you have produced is invaluable for gaining new clients and getting the projects that you want to work on.” Kus’ experience was repeated on the mobile web, where he shares his photos via Instagram. “This again has had a massive impact on my career,” he says. “I went from sharing my pictures as a hobby to it becoming part of my professional offering.”

Enter RWD 2004 was another big year for web design and development. We saw Google’s Gmail demonstrating what could be achieved with Ajax, and work began on

CSS Level 1 spec separates style from content

The browser wars start to make designers’ lives miserable

Second feature

A Touch of Frost How a book persuaded Brad Frost that everything he knew was wrong Brad Frost (bradfrostweb.com) is a web designer, writer and consultant, and his speaker diary is so packed we’re exhausted just reading it. He’s created some excellent resources for web designers, including Mobile Web Best Practices (mobilewebbestpractices.com) and WTF Mobile Web (wtfmobileweb.com). And of course, he’s no stranger to the pages of net. “It’s been almost eight years since I sat, newly graduated and unemployed, in my sister’s apartment reading Zeldman’s Designing

HTML5. We also saw Cameron Adams invent Responsive Web Design (RWD), although he didn’t call it that in his post, ‘Resolution Dependent Layout’ (netm. ag/RDL-261). The term responsive web design wouldn’t be coined for another six years, when Ethan Marcotte first introduced the phrase in an article on A List Apart (netm.ag/rwd-244). For Matt Griffin, founder of Bearded (bearded.com) and creator of What Comes Next is the Future (futureisnext.com), RWD was an epiphany. “I was bored with making websites,” he recalls, “then Ethan Marcotte’s book Responsive Web Design showed up at the office. Dominic, one of our developers at that time, took it home and read it overnight. In the morning I asked him, ‘What do you think? Is this something we could use?’ And he said ‘No, this is just how we make websites now.’ I took the book home over the weekend and came back on Monday with the same revelation.

google.com is registered

with Web Standards,” Frost says. “At the time, that book quickly taught me everything I knew about web design was wrong. Today, the fundamentals of that book still help guide me as I create web experiences for a multitude of web-enabled devices that didn’t exist at the time I read Jeffrey’s book.” For Frost, “the best way to be futurefriendly is to be present-friendly. This beautiful separation of structure, style and behaviour provides a solid foundation for creating web

Where Web 1.0 was about being a passive consumer of content, Web 2.0 was about interacting

Freeserve kills off per-minute charges for getting online

experiences that stand the test of time and endure the ever-shifting device landscape.” Frost is optimistic about the future. “The universality of the web is becoming more apparent every day, with every new person that gets online, and with every device that gets spat out,” he says. “It’s our opportunity and responsibility to embrace the web’s universal nature in order to help this wonderful medium continue to transform and enrich nearly every aspect of our lives.”

Ethan’s approach really addressed my biggest frustrations with web design ... it was a springboard for me to totally rethink how I approached the web, and it redefined what web design means to me. I haven’t been bored since.”

Here comes everybody In 2007, the iPhone invented the modern mobile web. We’d had the internet on phones for years – WAP 2.0 was delivering XHTML to phones in 2002, and devices such as BlackBerries included basic web browsing – but Apple added an intuitive touchscreen interface that you could pinch and zoom and flick, and that took the pain points out of mobile browsing. The iPhone didn’t do Flash, but it could do pretty much everything else – and it turned out that Flash wasn’t as important as most of us thought it was, anyway. The soaraway success of the iPhone – and later, the iPad –

W3C draws a line under HTML4 to focus on XHTML 1.0 and CSS

Web Standards Project (WaSP) founded to promote web standards

december 2014 79

FeatureS Second feature

Resources The WWW Consortium netm.ag/W3C-261

The World Wide Web Consortium explains how the web was won, with special credit going to the Web Standards Project that fought against proprietary tags.

The first web page netm.ag/first-261

See the world’s very first web pages as Tim Berners-Lee did, complete with green text and blinking cursors.

The Evolution of the Web evolutionoftheweb.com

An excellent overview of the web’s key milestones, from Mosaic to recordbreaking internet traffic.

The Evolt browser archive browsers.evolt.org

Evolt is one of the oldest web development communities around, and its browser archive enables users to download more browsers than most people have ever heard of. Sadly the site itself is no longer being updated, although the browser archive and mailing list endure.

blogger.com kicks off the user-generated content rush

december 2014

would ultimately destroy Flash on the mobile web. As with desktop web browsing, the mobile web got better fast. Speeds increased, hardware became more impressive and prices plummeted, making smartphones more popular than PCs and adding a whole new impetus to the drive for responsive web design. It helped drive two key design trends too: skeuomorphism, where digital items mimicked real-world objects and materials, and flat design, the Bauhausinfluenced minimalism that informs Windows 8 and the latest iOS, OS X and Android operating systems, as well as countless mobile websites.

Burning pits of death

RWD In 2004 Cameron Adams began exploring what was to become RWD

The rise of the mobile web has led to another important trend: apps. While the original iPhone didn’t offer native applications, preferring to bookmark web apps instead, the arrival of the Apple App Store in 2008 created a market that’s predicted to be worth £30 billion by 2025. Apps are much easier to monetise than websites, leading to an app rush – and that’s chipping away at mobile browser usage. According to the latest figures from Enders Analysis (netm.ag/enders-261), US smartphone users accounted for 55 per cent of all US internet use in January 2014 – but just 8 per cent of that was from mobile web browsers. 47 per cent of all US internet traffic now comes via mobile apps. As the Internet of Things draws closer and more connected devices with different forms of input and output proliferate, that’s a trend that can only continue. One of the biggest challenges for designers and devs is coping with the

sheer range of devices we’re using to get online: the days when you could get away with PC, Mac, IE and Netscape are long gone. Today’s web pros have to cater for everything from computers and smartphones to Chromebooks and set-top boxes, running a dizzying array of operating systems and apparently endless browsers. Hampton Catlin (hamptoncatlin.com), inventor of Sass, Haml, m.wikipedia.org and CTO of moovweb.com, believes that it’s time to rip things up and start again. “My current feeling is that we’re going to have to replace the current web layout rendering engines,” he says. “Our current reflow-based webpage layout scheme is just fundamentally badly designed for what we need it to do.” “We need to take a few thousand steps back and build a constraintbased layout system that makes sense

The dotcom boom peaks, and crashes shortly afterwards

Drupal brings the CMS to wider attention

WordPress begins its rise to world domination

Second feature

Making money The Apple App store introduced a new way to make money from the web

The mobile web got better fast, adding a new impetus to the drive for responsive web design

the iPhone launches, reinventing the mobile web and killing Flash

A new era The iPhone’s touchscreen interface launched the mobile web into the mainstream

for how the web is actually designed today,” Catlin says. “The sheer amount of CSS code and JavaScript required to get your browser to display any modern website decently bears witness to the problem. Media queries are a hack on top of the current engine to allow us to painfully implement something reasonably responsive, with the tradeoff of imposing huge limitations on what can be designed. It’s time we stop for a minute, as a community, and brainstorm on what the next 20 years of web design should be, and hopefully throw margin: auto; into a burning pit of death.”

A collection of text files We’ve come a long way from the days of dial-up and Mosaic, but at heart the web is the same as it always was. Eric A. Meyer (meyerweb.com) has been involved in it since almost the

apps begin to replace browsing on mobile devices

beginning. “The web is a quartercentury old now, and yet at its heart, it’s still a collection of text files,” he says. “Sure, we stream digital entertainment and embed images, but what contains them is text. The JavaScript that drives so much interaction, the CSS that brings our designs to life, the HTML that structures the web – it’s all text, designed to be simple enough for anyone to view and understand. Plain, raw, human-readable text, enabling incredible diversity and complexity.” He continues: “The simplicity of that text is its greatest strength. Think of all the compiled, non-text approaches that have tried and failed to replace the web. Java binaries, Flash applets, Silverlight files, and more – all have risen (some further than others) and fallen. And all the while, the text remains. The text endures. The text abides.”

Ethan Marcotte coins the term Responsive Web Design

Smartphone users account for more than half of US internet use

december 2014 81

Tips, tricks & techniques

This month Featuring...

Create a modern web UI

Prototype with Origami

Dan Nagle explains how to leverage various tools to lay the groundwork for a web UI

Austin Bales on how to use Origami and Quartz Composer to build a photo viewer

Create responsive charts 94

Gion Kunz shows you how to create greatlooking, responsive charts with Chartist.js

Desktop

Mobile/tablet

104

Head to head

Sublime Text does battle with Vim. Adam Simpson assesses the results

Creative coding with P5.js 98

Scott Garner introduces creative coding tool p5.js and explores what it can do

Standards

103

Eric A. Meyer looks back at the successes of the past 25 years of web standards

Use Mixins with extend

104

Antony DiSpezio explains how to write smarter Sass by using mixins with extend

Modular content systems 108

Mark Llobrera walks through how to build modular content systems in WordPress

Accessibility

Shawn Henry puts the spotlight on the accessibility needs of older users

114

Browser support

Exclusive videos

We feel it’s important to inform our readers which browsers the technologies covered in our tutorials work with. Our browser support info is inspired by @andismith’s excellent When Can I Use web widget (andismith.github.io/caniusewidget). It explains from which version of each browser the features discussed are supported.

Look out for the video icon throughout our tutorials. This issue, five authors have created exclusive screencasts to complement their articles and enhance your learning, including Scott Garner’s introduction to p5.js and Mark Llobrera’s guide to building modular content systems in WordPress.

december 2014 83

PROJECTS User interfaces

Download the files here! Download all the files you need for this tutorial at netm.ag/UIs-261

A b o u t t he a u t h o r

Dan Nagl e w: DanNagle.com t: @NagleCode areas of expertise: Desktop and web apps, Linux, HTML5 game development q: who would play you in the movie of your life? a: The Rock

USER INTERFACES

Lay the groundwork for a modern web UI Dan Nagle shows you how to leverage H5BP, jQuery and

Mustache.js to build the beginning of a web user interface

Video See the tutorial in action in Dan Nagle’s exclusive accompanying video at netm.ag/ UIsVid-261

I find the easiest way to learn a new tool or technique is with a project. Without a concrete end goal to motivate me, the lesson is merely a case of absorbing disjointed facts – and I find facts without context nearly impossible to remember. The goal of this tutorial is to lay the groundwork for a modern web interface, and as an example project, we’ll be building a mortgage calculator. This is easy to understand with only a few variables to juggle, and the calculation can be quickly checked using another online calculator. To build my web UI, I will be using a number of different tools. HTML5 Boilerplate will supply a solid foundation to start the build process. I will then add jQuery so the UI structure has a consistent and pleasant theme. A template engine – Mustache.js – will be used to begin the actual app.

december 2014

However, this tutorial will only cover the barebones calculation. After all, the goal is to lay the groundwork for further development.

HTML5 Boilerplate

First off, create a file called index.html and begin writing <!DOCTYPE html><html> . No, that is silly. We are going to take a massive shortcut and download HTML5 Boilerplate from initializr.com. HTML5 Boilerplate (now referred to as H5BP) is a template that encompasses dozens of best practices when developing a modern website. The high points of the included package are: ● A very thorough index.html ● Basic JavaScript libraries, such as jQuery and Modernizr

User interfaces

Focus on

Dynamic dialog box

● Basic CSS libraries, such as Normalize.css ● Asset libraries, including a 404 page, .htaccess, favicon and touch icons

jQuery UI (jqueryui.com) is a companion framework to jQuery that is also developed by the jQuery Foundation. It includes a lot of handy widgets, such as Dialog, Slider, Datepicker and Tabs. One very common task is to toss up a dialog when the user clicks a button or link. Often, the default browser alert box is used. This is fine until it is launched twice in a short amount of time – then the browser will ask the user to suppress it. To simultaneously prevent alert suppression and make the dialog more pleasant, use a jQuery UI dialog. The alert() is convenient in that it can be added on-the-fly and unreliant to the DOM. A jQuery UI dialog can do this too, but it requires more thought. The example below shows how to do it:

Essentially, H5BP gives you all the essentials, so instead of building each element from scratch, it’s just a case of modifying things. By downloading H5BP from Initializr, we are also given a choice of themes. We want a free layout to go with our H5BP. Layouts on offer include ‘None’ (the default template), ‘Bootstrap’ (which has a

$(‘<div/>’, { text: ‘Hello Dynamic Dialog.’ }).dialog({ title: ‘Sample Dialog Title.’, width: 300, height: 200, modal:true, close: function(){ $(this).remove(); }, buttons: { “OK”: function() {$(this).dialog(“close”); } } });

Templates ‘Responsive’ is a dynamic layout without a UI engine

H5BP will supply a solid foundation, and jQuery will be added so the UI has a consistent theme corporate feel) and ‘Responsive’, which we will be using. As you might expect, with this layout the elements are rearranged to suit whatever screen they are being viewed on. The Bootstrap theme has responsive elements, too. The technique specifies a different layout for different screen sizes. This is done through media queries, a technique introduced with CSS3. It works as follows:

First we create a blank div with the text Hello Dynamic Dialog . The text inside the div will be the content of the dialog. modal forces the user to acknowledge or dismiss the dialog before using the main screen. close is binded to a remove function. We must tell the dialog box to remove itself or it will be attached and orphaned in the DOM, causing a memory leak. It may not be a pure unrecoverable leak like in C or C++ programming, but it’s still worth tackling. It’s allocating an object (a div ), hiding it, and never using it again. If that happens too often, it will bog down the browser and make your site feel slow.

@media only screen and (min-width: 480px) { /* css */ } @media only screen and (min-width: 768px) { /* css */ } Shhhh Alert suppression helps users silence noisy sites – it can also break your UI

When the screen reaches 480px or higher, the additional CSS becomes active. When the screen reaches 768px, the next layout becomes active. This allows the webpage to adjust itself. Before CSS3, the original technique was to parse browser user agent strings to determine if a device was a mobile, and serve a different page. It was unreliable.

december 2014 85

PROJECTS User interfaces jQuery UI In-depth

UglifyJS Before handing your project over to an end user, you should minify and consolidate your code. This is very important for two reasons: 1. Y our site will be faster because the browser has fewer files to fetch 2. Your site will be harder to hack or steal because your code will be harder to read UglifyJS (github.com/mishoo/UglifyJS) is designed to do just this. The only downside to using it is that troubleshooting on the production server is more difficult. For the same reason hackers will have trouble reading your code, you will have trouble debugging it. UglifyJS has numerous parameters to help automate code compression (via Grunt) and really squeeze as many bytes out of your files as you can. Assuming all your .js files are in a single directory, the absolute simplest way to get started is to minify the files in that directory with these commands (for Windows): del main-ugly.js del app-joined.js TYPE *.js >> app-joined.js uglifyjs app-joined.js > main-ugly.js Now, replace that series of .js files with main-ugly.js in your web app.

The Responsive theme we have chosen from Initializr does not have a UI framework, so we must provide one. jQuery UI is a framework of CSS classes, sliders, dialogs, icons and so on. It is a solid choice for this task. Bootstrap also has a nice UI framework, which we could easily have chosen instead of jQuery UI. Indeed, Bootstrap is the one of the most starred projects on GitHub. Both frameworks have specific strengths and weaknesses, and the choice is mostly down to personal preference. Right now, Bootstrap probably has a slight edge over jQuery UI in terms of support and development speed. Some sites combine the two libraries and leverage both. The first task is to pick a theme from jqueryui.com/ themeroller or roll your own. I highly recommend choosing an existing theme and using another CSS file for overrides. For our mortgage calculator, I chose the theme ‘Humanity’ – we want to use an existing theme so we can use Google’s servers to host it. See the code below for how to do this: <link rel="stylesheet" href="//ajax.googleapis.com/ajax/ libs/jqueryui/1.11.0/themes/humanity/jquery-ui.css" /> Every standard jQuery UI theme in the gallery is available on Google’s public hosted libraries (netm.ag/libraries-261) – that’s over 20 themes to experiment with. The example given by Google uses ‘Smoothness’. Simply replace Smoothness with the name of any theme from the jQuery ThemeRoller, and it will load. The // at the front of the link makes fetching the library protocol agnostic. If your browser is using

Bandwidth savings UglifyJS Compression showing 60 per cent bandwidth savings for just one directory

Web fonts There are a wealth of web fonts available from Google - as shown by this free-font pairing project from @femmebot (netm.ag/fonts-261)

december 2014

User interfaces

Phone view In ‘Responsive’, the elements adapt depending on screen size

Tablet view The tablet layout kicks in when the screen is over 480px

http or https , then that will be used. Note that this method will not work if viewing the html locally using the file:// protocol. While you are adding the remote theme, modify your H5BP template to use Google’s public jQuery library for both regular jQuery and jQuery UI:

This concludes all our helper libraries. Now it’s time to piece everything together and write some code.

Remaining plugins and libraries There are just a couple of remaining libraries to toss into our setup. These are as follows: ● jQuery formatCurrency (netm.ag/format-261) is a plugin that allows easy currency manipulation (currency symbol, thousands separators, and two decimal places) ● Mustache.js is a JavaScript implementation of the minimalist Mustache templating engine. Although it is very lightweight (it supports no logic statements), it is more than suitable for our needs – but any website of real complexity should invest in templates for a consistent appearance

Versioning Before beginning on the JavaScript code, rename index.html to index.php (or your language of choice). Yes, all our business logic is in the JavaScript, but the server will provide a very important service for us. Have you ever made a change in a CSS or JavaScript file and not seen the result because of aggressive caching? This happens frequently. There are numerous tricks to try to fix this, but most are unreliable – browsers will cache anyway,

Mustache.js is a lightweight JavaScript version of the Mustache templating engine particularly on mobile devices where bandwidth is very expensive. However, there is one very easy trick that does work, and it is to version the files. We will use our web server to do this automatically. See below for the PHP version: <link rel="stylesheet" href="css/app.css?v=<?php echo filemtime("css/app.css");?>"> The end result is a UNIX timestamp of the file modification date appended to our link. The result looks like this: css/app.css?v=1407624474 . Whenever we save the file, the modification date changes, and that time stamp will change. Our web browser will think it is a new file and re-fetch – cache problem solved. You’ll need to do this for

december 2014 87

PROJECTS User interfaces every local asset that may frequently change (such as style sheets and JavaScript files). Note that filemtime() returns a 32-bit signed integer. This integer timestamp will turn negative and drop to the year 1901 in the year 2038. This has no effect on our caching system – we only care about the time changing to force a browser reload. However, we’re creating a mortgage calculator, and many new mortgages will last past 2038. JavaScript dates are not susceptible to this particular problem, but many of the underlying Linux apps and services are. If you are using PHP, use the DateTime class (version 5.2+) to manage dates.

Adding the mortgage logic I am going to skip the details of the maths behind the actual mortgage calculation. Instead, I will ask you to consider the following two monthly calculations. One is PHP, the other is JavaScript. The exponentiation function, pow() , that appears in both calculations, takes a variable and raises it to the power of another variable. For PHP: $monthlyinterest = floatval($interestrate / (12 * 100)); $denominator = 1 - pow( 1 + $monthlyinterest, 0-$nummonths); $monthlypayment = floatval($originalloanamount) * floatval($monthlyinterest / $denominator); For JavaScript: var monthlyinterest = (interestrate / (12 * 100)); var denominator = 1 - Math.pow( 1 + monthlyinterest, 0-nummonths); var monthlypayment = (originalloanamount) * (monthlyinterest / denominator);

The two functions perform the same task, but with one very important difference: PHP executes on the server while the JavaScript executes in the browser. With PHP, every user wanting to calculate a mortgage will ask your server to perform the very expensive pow() calculation and wait for a result. I can assure you from real world experience that this will kill a cheap shared hosting plan once a few hundred users start accessing it simultaneously. Whenever possible, you should strive to put logic in the web browser to ease the load of your server. The idea is very simple: instead of having one CPU doing 1,000 calculations (the server), you will now have 1,000 CPUs doing one calculation (the user’s web browser). This very reason is also why we are using JavaScript Mustache.js templates instead of PHP Smarty templates.

Whenever possible, strive to put logic in the web browser to ease the load of your server Adding the UI logic

Our mtgCalc() function only accepts three fields, so the form we need to place on our web page is very simple. There are a couple of interesting things we can do beyond <input type=text /> . <input min=’1’ type="number" id="loanlength" value="30"> type="number" is now very well recognised. Most web browsers will now add up or down arrows and honour "min" and "max" (and even "step" ) values when they see that input type. Using this technique is safe for old browsers too. Any input type that is not recognised becomes a normal text input. New and noteworthy input types to consider using are type="color" , type="date" and type="email" . Though many browsers will highlight a selected text box, we can still help out the ones that don’t: $( "input" ).focus(function(){ $( this ).addClass("ui-state-highlight"); }).blur(function(){ $( this ).removeClass("ui-state-highlight"); }); $("#originalloanamount").focus(); $("button").button();

Res ource Slide deck Take a look at the sidedeck that goes alongside this tutorial at naglecode.com/ modernwebui Input ui-state-highlight as applied to the focus() event of an input box

december 2014

Any input field that gets focus will be highlighted using ui-state-highlight , a helper class defined by the jQuery UI CSS libraries. The other two commands

User interfaces

give the loan input field focus when the page loads (saving the user a click) and the other tells jQuery UI to style our buttons.

Adding the application logic All this UI, and our application still does not calculate a mortgage. This is easily fixed. Bind to the Calculate button: $( "#CalculateButton" ).click(function(){ mtgCalc($('#originalloanamount').asNumber(), $('#interestrate').asNumber(), $('#loanlength').val()); The asNumber() is from our jQuery currency library loaded earlier. It parses the string, removes nonstandard characters, and returns a JavaScript numeric double, suitable for our mortgage function. This finishes the calculation. The next step is to display the result. We will create a template with Mustache.js. I prefer to keep all my templates in a separate file called templates.js and store them in a global variable called Templates . This is the code for our results templates: Templates['results'] = 'Monthly Payment: <b>{{monthly}}</b>'; Mustache.js takes a JavaScript object and expands its references inside a given template. There are far more powerful templating systems, but Mustache.js offers good functionality for its size, and is infinitely preferable to taking the long journey back to the server for such a simple calculation and result. The code you need to use is as follows: var result = { monthly: toMoney(mtgObj['monthly']) }; var resultshtml = Mustache.render(Templates['results'], result); $("#results").html(resultshtml);

The main function in your Mustache.js arsenal is Mustache.render() , which executes the template and gives back the result. Another useful feature is using an ampersand ( & ) inside your template to suppress escaping the output. Our application is now finished.

Ship it

Left Popular frontend template HTML5 Boilerplate provides the basis for our UI Right Bootstrap is an

alternative framework option that we could have chosen instead of jQuery UI

Last of all, we need to minify all our code into one package for the browser. This saves the browser additional connections to fetch our application, and protects our code by making it more difficult to reverse-engineer. The tool I recommend for this task is UglifyJS. Here is a quick command to minify all the .js files in a directory into main-ugly.js : rm main-ugly.js ; cat *.js | uglifyjs -nc > main-ugly.js Run a similar command on each directory you wish to minify. As a long-term strategy for code minification, I recommend taking a look at Grunt. UglifyJS also supports recursive minification, but for now, the directory-level approach is sufficient. Now we need to tell the browser to load the minified files instead of the development files. We can use filemtime() again and let the PHP switch between normal “main-ugly.js” and our normal files depending on which is most recent. However you decide to manage it, only upload the minified version to the production server.

Explore further By leveraging HTML5 Boilerplate to get started, jQuery UI for better widgets, Mustache.js for lightweight templates, and UglifyJS to speed up the production server, we’ve laid the groundwork for a modern web UI. A respectable website can be built and maintained from these tools, but don’t stop here. More sophisticated tools exist, and I encourage you to explore them as you optimise your workflow.

december 2014 89

PROJECTS Prototype

Download the files here! Download all the files you need for this tutorial at netm.ag/origami-261

A b o u t t he a u t h o r

Aus t in Bal es w: austinbales.com t: @arbales job: Product design manager, Facebook areas of expertise: Design q: who would play you in a movie of your life? a: Ryan Phillippe

prototype

Build a prototype with Quartz Composer Austin Bales walks through how to create an interactive

photo viewer prototype using Quartz Composer and Origami

video Austin Bales has created an exclusive screencast to accompany this tutorial. Watch along at netm.ag/origamivid-261

Quartz Composer (netm.ag/QC-261) is a powerful motion graphics tool from Apple, originally used for everything from broadcast graphics to screensavers. It’s a non-linear, visual tool – it works by connecting dots and ideas, rather than writing code or defining fixed keyframes. Although it wasn’t originally created for interaction design work, its flexibility and speed make it an ideal environment for designers. Origami (netm.ag/origamiFB-261) is a toolkit for QC, developed by Facebook, that makes prototyping easier by encapsulating common patterns and concepts used by interaction designers. Prototyping with QC is fast: you can change a composition (edit values, make new connections between patches, swap in a new image) on the fly, without having to recompile or wait for that result to take effect in your

december 2014

prototype. This makes QC much faster than a code environment that depends on reloading, or a videobased tool that requires re-rendering. Although this tutorial walks you through to a final prototype in a straightforward manner, its much more common for designers to play around in QC, transitioning different ports with different values. Building skills in QC takes time. This tutorial is meant to introduce you to this powerful tool, give you a starting point for future exploration, and lay a foundation for building and practicing. We’ll cover the basis of creating compositions: working with images, transitions, animations, switches and the most simple of interactions. To get started, you’ll need to get both QC and Origami by following the instructions at origami. facebook.com.

Prototype When you create a new Quartz Composer (QC) composition, you’ll be presented with an Editor and a Viewer window. The Editor is a grid view that holds patches – for now, just a Clear . The Viewer will be blank, since all that’s in our document is a Clear field of black. As you insert more patches into the Editor, you’ll see the Viewer update in real time.

Inserting Origami’s Phone patch is the first step in any mobile QC composition. To insert a patch, press cmd+Enter to bring up the Library window. Type ‘Phone’ into the typeahead and press the Enter key to insert the patch into the Editor. You’ll see a white iPhone appear in the Viewer. Follow the same steps to insert the Layer Group and Phone Dimensions patches.

Patches are representations of functionality, data or images. They receive input and provide output through ‘noodles’ connected to labeled ‘ports’. Data flows through these ports from left to right. Connect the Pixels Wide port on Phone Dimensions to the corresponding port on Layer Group by clicking the dot on the first patch, and then clicking on the dot on the second (you can also drag between

Step 6 Change the X Position, Y Position and Opacity values to explore how the on-screen layers behave

ports to connect them). Then you can connect Layer Group ’s Image port to Phone ’s Screen Image port. .Layer Group is a macro patch that flattens the layers and contents inside it into a single image – think of it like a Smart Object in Photoshop. All of our subsequent work will take place inside this patch. Double-click the patch to open it. You can get back up in your heirarchy at any time by pressing the Edit Parent button in your toolbar.

Now that we’re in our Layer Group , drag the file PhotoGrid.png into the Editor window. You’ll see both an Image and Layer patch appear in the Editor, and see the image itself appear inside the Viewer. You’ll notice that the Image and Layer patches are connected via their Image ports. It may sound complicated, but it actually makes a lot of sense. Individual images in QC might be connected to multiple layers, or you may decide to run them through filters or other patches before connecting them to a Layer .

To get familiar with the way Layers work in Quartz Composer, select the Layer patch from the previous step and press cmd+T to view the patch’s parameters. Play around with the X Position , Y Position and Opacity ports a bit to get a sense of how layers on screen move and behave. You’ll notice that QC works on a coordinate plane system with 0 being at the centre of the screen, and that Opacity works on a decimal system, running from 0 to

Step 1 QC compositions are presented in an Editor window (left) and a Viewer window

expert tip

Fixes and enhancements Origami includes several fixes and enhancements to Quartz Composer, including support for inline values, linear ‘noodles’, Retina support, and some convenient window layout shortcuts. Whenever I begin a composition I click Window > Resize to Thirds to give me a usable window layout. I also recommend disabling Keep Patch Library Visible in Preferences > Editor .

december 2014 91

PROJECTS Prototype

Step 7 Rename your layer ‘Photo Grid’

1.0. When you’re done playing, set positions back to 0 and Opacity back to 1. Rename your layer by double-clicking on the title. Rename it ‘Photo Grid’.

Insert two Transition patches and connect their output Progress ports to your Photo Grid layer’s Opacity and Alpha ports respectively. We’ll use Transition patches to shift the Opacity and Alpha values of the photo grid, as seen in the final output.

Step 10 Connect your Interaction 2 patch’s Click port to your Switch’s Flip port to trigger your Switch when you click in the Viewer

entered in the previous step will be sent to your Layer .

Play with the pop animation’s Bounciness and Speed values.

Select the Transition connected to the Alpha port, and set its Start and End values to 1 and 0 respectively. For the Transition connected to the Scale port, set the values at 1 and 0.95.

Here’s where the fun begins. Insert a Switch and a Pop Animation into the Editor. Connect the On/Off port to the Number port and then connect Progress to the Progress ports of both Transition patches.

Now, let’s add our other image. Drag Photo.png into the Editor window. Again, an Image and a Layer patch will appear, and you’ll see a large photo appear in the Viewer. Double-click the title to rename it ‘Photo’.

Now, if you select the Transition patches and toggle their Progress ports from 0 to 1, the Start and End values you

Select the Switch patch. Double-click the Flip checkbox, and watch your Photo Grid fade out to the background.

Next, Insert three Transition patches. Attach the first two’s Progress ports to X Position and Y Position on your Photo layer, respectively. The last Transition we’ll attach to both the Width and Height ports.

Set the Start and End Values of the X, Y, and Width/Height Transition patches to the following values: X Position: -213, 0; Y Position: -93, 0; Width/Height: 212, 640. Then, connect your Pop Animation ’s Progress port to the Progress ports of each of these Transitions .

Finally, insert an Interaction 2 patch and connect its Click port to your Switch’s Flip port. This will trigger your Switch when you click anywhere in the Viewer. That’s it! This prototype just gives a glimpse of what’s possible with Origami and QC.

Expert tip

Organising patches

Step 9 Set the Transition’s Start and End values to 1 and 0 respectively

december 2014

Keep your patches organised! Quartz Composer lets you arrange patches on screen in any manner you like, but I encourage you to keep them aligned in neat rows and columns, reflecting the flow of information in your composition. As your prototypes grow in complexity, this becomes more and more important – it’s easy to get lost when you’re disorganised.

PROJECTS RWD

RWD

A b o u t t he a u t h o r

Gion K unz w: mindtheshift. wordpress.com t: @GionKunz areas of expertise: Frontend development q: who would play you in a movie of your life? a: The guy who played Steve Urkel!

responsive charts with Chartist.js

Gion Kunz shows you how to use Chartist.js to create greatlooking, responsive charts in your next data visualisation project

chartist.js Desktop 9

5.1

* With matchMedia Polyfill

Mobile/tablet

12.1

5.1

As a responsive web developer I’m constantly seeking ways to bring standard technologies under one hood, while also trying to keep up with the W3C One Web promise (netm.ag/oneweb-261). Making the same information, design and interactions available on every medium – despite each coming with their own particular restrictions – may seem impossible at first. It’s one of the most challenging parts of a developer’s job, but I still think that this is a promise we can and should fulfil. The problem with not displaying some content on certain media, or dismissing some interactions, is not really that it breaks a W3C contract, but that it messes with our users’ expectations. That’s where we pay the fine. There’s nothing more annoying than discovering your favourite button on a website does not exist when you’re sitting in the bus and feel like pressing it! In my experience this can even cause a user to simply choose not to view a website on a given media completely. I think these principles should be applied to any content on the web, and this includes data visualisation. Faced with a project for a client who wanted me to implement a performance dashboard that should be accessible on a mobile and tablet, but also displayed nicely on a big widescreen television, I felt lost with the options available. There were already tons of good charting libraries out there, but none of them actually solved the issue of generating simple and nice looking charts that also behaved responsively. After spending hours trying to tweak existing libraries to make them behave how I wanted them to, I simply decided to

december 2014

create my own. This marked the birth of Chartist.js (netm.ag/chartist-261).

Getting up and running The easiest way to started with Chartist.js is by using Bower package manager (bower.io). You can then install the latest version of Chartist.js by typing the following command in your shell: bower install chartist --save You will now have Chartist.js installed locally, and awaiting your further instruction. All you need to do is add the resources into your HTML and you’re ready to draw some nice responsive charts. <link rel=”stylesheet” href=”bower_components/chartist/ libdist/chartist.min.css”> <script src=”bower_components/chartist/libdist/chartist.min. js”></script> Chartist.js comes without any dependencies and has a compressed size of less than 10KB. The core purpose of Chartist.js is to solve one and only one problem, which is to enable developers to draw simple, responsive charts. It does that using the power of web standards, like inline SVG in the DOM, and CSS for its appearance. With this clear separation of concerns, and leveraging standard technologies, Chartist.js is able to provide you with all you need and nothing more. The biggest issue I’m currently noticing with a lot of libraries is that they are trying to solve too many

RWD problems, and forgetting about the fact that they are libraries and not applications. I’m sure you’ve run into situations where a library customises everything but the one thing you’d really like to customise. By building upon web standards, you can easily extend the functionality of Chartist.js and scale linearly.

Hacking your first chart Now as you’ve included Chartist.js into your project, you can go ahead and create your first chart. The library comes with some default styles that can easily be overridden or customised with the Sass (SCSS) version. If you’d like to go with the default styles, you can simply use the pre-built CSS class .ct-chart to create a chart container in your HTML. <div class=”ct-chart”></div> That’s already it for the HTML part. Of course it’s up to you if you’d like to use a <div> , or any other element you think matches the context better.

Chartist.js tackles only one problem: to enable devs to draw simple, responsive charts Now let’s go ahead and initialise a simple line chart with two series by using the function Line in the global Chartist.js namespace. Chartist.Line(‘.ct-chart’, { labels: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’], series: [[0, 3, 2, 8, 9], [1, 2, 3, 5, 8]] }, { width: ‘300px’, height: ‘200px’ }); Congratulations, you’ve just created your first chart using Chartist.js! Wasn’t that a piece of cake? But wait … isn’t that supposed to be a responsive charting library? Of course I wouldn’t recommend that you use fixed dimensions for your chart, based on pixels, right?

aspect ratios and scales Because of the nature of responsive design, it’s important to understand that block content in design, including images, videos and the like

need to be able to scale and adapt to the medium. In order for an element to scale, you need to rely on certain aspect ratios (4:3, 3:2, 16:9 and so on) rather than specifying a fixed width and height. With Chartist.js you can specify those ratios directly on containers, without the need to calculate any fixed dimensions. In order to create a chart that uses the aspect ratio of a golden section, you can just add the class .ct-golden-section to your container where you initialise your chart. There are also classes for other common scales that you can use instead. Just check the Chartist.js documentation online (netm.ag/chartistdoc-261) to get a complete list of aspect ratio classes you can use, out of the box.

Resources Live coding Visit the Chartist.js website to check the latest updates, and hack on some charts in the browser using the live example page. netm.ag/livecoding-261

<div class=”ct-chart ct-golden-section”></div> You can then just omit the fixed width and height in the options when initialising your chart. Chartist.Line(‘.ct-chart’, { labels: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’], series: [[0, 3, 2, 8, 9], [1, 2, 3, 5, 8]] }); Your chart will now use 100 per cent of the available width and scale with the golden section as fixed aspect ratio.

Responsive sugar topping Chartist.js provides an easy way to specify configuration that should be used specifically for a given medium. It makes use of CSS media queries and window.matchMedia to provide a configuration override mechanism that allows you to fully re-configure your charts based on media query rules. The following example shows a mobile-first configuration style where small screen devices will see a point on the line chart and on larger screens the points will not be drawn. Chartist.Line(‘.ct-chart’, { labels: [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’], series: [[12, 9, 7, 8, 5]] }, { showPoint: true }, [[‘screen and (min-width: 640px)’, { showPoint: false }]]); I hope this has given you a good overview of the philosophy of Chartist.js, and that you’re hopefully already thinking about a next project where you could use it.

december 2014 95

PROJECTS Head to head

HEAD TO HEAD

Sublime TEXT vs VIM A b o u t t he a u t h o r

Adam Simpson w: adamsimpson.net t: @a_simpson job: Frontend developer at Sparkbox areas of expertise: TML, CSS and JavaScript q: who would play you in a movie of your life? a: Adam Scott

In a battle of the text editors, Adam Simpson pits the

popular Sublime Text against the ever-enduring Vim Sublime

Vim

Sublime Text might be the most popular editor among frontend developers at the moment. It’s a fantastic tool that delivers a fast editor, awesome expandability and rock-solid stability.

Vim is an ancient editor that continues to thrive, featuring an incredibly advanced movements system, unparalleled adaptability, a rich macro system, and a modal system that allows mouse-free control.

Grok-ability Sublime provides a straightforward UI: project tree on the left, tabs across the top. Since it’s modelled after TextMate’s UI and key commands, it provides a familiar experience to users from the first time they open up the app.

This is Vim’s weakest point: there is no shallow end. Vim follows the Unix philosophy of only doing one thing well, so it doesn’t come with silly things like sidebars. Resources like Vimcasts (vimcasts.org) and Vimbits (vimbits.com) assist in acclimatising to Vim.

Plugins Expandability is a major part of a good text editor, and Sublime is no slouch with an ever-growing, already massive plugin community. Through a simple plugin, you can add any feature you might want to your editor. Package Control (sublime.wbond.net) offers additional value by making plugin installation incredibly easy.

You can add project trees and other things to Vim via plugins. Use Vundle (netm.ag/vundle-261) or Pathogen (netm.ag/pathogen-261) to install and manage plugins à la Sublime’s Package Control. Vim Awesome (vimawesome.com) is a great resource for finding new plugins.

Speed One of Sublime’s most buzzed-about features upon its release was speed, and that buzz is deserved. Churning through JavaScript files in your latest web app is hardly even a challenge.

Vim is fast, and its speed is easily managed. Though I’ve never needed it, you can simply comment out some of the plugins in your .vimrc to make your Vim even speedier.

Can I bend it to my will?

Fact file MacVim If you’re on a Mac and want to dive a little deeper on Vim, I would highly recommend MacVim. MacVim is a more recent version with some extra features. netm.ag/macvim-261

december 2014

The ultimate question. Sublime’s extensive plugin support and fairly minimal UI make it an application that a developer can manipulate to their liking. Projects like MarkdownEditing (netm.ag/markdown-261) easily demonstrate this malleability.

Vim’s appeal is its depth. In my opinion, it’s the quintessential onion application (netm.ag/onion-261), with layers and layers of functionality just waiting to be peeled back. Each layer reveals more ways to accomplish any task.

verdict Both editors are superb. Sublime offers a stable and familiar, yet fairly deep, tool that will serve faithfully for years of development. Vim offers unparalleled depth and efficiency while sacrificing some of the glitz (such as a GUI) other apps enjoy. In the end, both get the job done and fit a multitude of workflows without sacrificing performance or stability. Regardless of which editor you choose, it’s up to the individual to make the most of it.

NEW BUNDLE OFFER!

NEW! PRINT AND DIGITAL BUNDLE DEAL Enjoy the tactile beauty of our print edition and the interactive delights of our award-winning iPad edition in one package, and get behind-the-scenes access to top studios, pro analysis of the latest trends and inspiration that lasts all year

SAVE FROM

£30.99

UP TO

61%

SUBSCRIBE ONLINE TODAY:

www.myfavouritemagazines.co.uk/CASUBS Your bundle subscription will continue at £30.99 every six months - saving 36% on the shop price, plus an incredible 85% discount on a digital subscription.

PROJECTS JavaScript

Download the files here! All the files you need for this tutorial can be found at netm.ag/p5-261

A b o u t t he a u t h o r

S co t t G arner w: scott.j38.net t: @scottgarner areas of expertise: Creative technology, interactive design q: who would play you in the movie of your life? a: A computer generated viscacha

Javascript

Explore creative code with p5.js

p5.js seeks to bring the power and flexibility of Processing to the web. Scott Garner introduces the new tool for creative coders

video Watch an exclusive screencast of this tutorial created by Scott Garner at netm.ag/p5Vid-261

The new p5.js (p5js.org) is a library designed to bring the power of Processing (processing.org) to the web. It aims to introduce artists, designers and educators to the world of programming while also offering versatile tools to bring devs and engineers into the visual arts. Let’s dive in and create our first ‘sketch’. Our goal is to build a drawing tool that transforms a simple image into a field of animated stars. First, we’ll define a few global variables and write our setup() function. p5’s setup() is run once, when the sketch is loaded, so it’s the ideal place to handle initialisation. var hintImage, skyImage, stars = []; function setup() { ... }

december 2014

Inside our setup function, we’ll create a canvas and hide the mouse cursor so we can draw our own. By default, p5 adds an outline around shapes – we want to disable strokes in this case. createCanvas(800,500); noCursor(); noStroke(); Next, we’ll load a pair of images. One will serve as the background – in this case, a night sky scene. The other will be the ‘hint’ image – the black and white design (seen overleaf) our final design will be based on. The idea is to put most of the stars over black pixels in our hint image, to recreate the design

JavaScript in our background scene. It would be easy to create these images with p5’s text and drawing tools, but for the sake of brevity we’ll use static assets. hintImage = loadImage("//bit.ly/hintImage"); skyImage = loadImage("//bit.ly/skyImage");

The draw function

That’s it for setup() ! Another key function is draw() . It’s called in a continuous loop, which is helpful for animations and adding elements over time. function draw() { ... } Within the Draw function, our first task is to fill the canvas with our background image. p5 doesn’t automatically clear the canvas between draw() calls, so we need to do this every frame or we’ll end up with some strange accumulation effects. To place a loaded image on the canvas, use the image() function and give x and y coordinates for positioning. image(skyImage, 0, 0);

p5.js aims to offer versatile tools to bring devs and engineers into the visual arts Next, we’ll grab the current mouse location and store it as a p5.Vector using createVector() . This object comes with handy functions to deal with points in space, but we’re mostly just using it as a container.

Focus on

A bit of background Processing is a programming language and development environment originally designed to teach the basics of computer programming within a visual arts context. Since its creation in 2001 by Ben Fry and Casey Reas, it has continued to expand and evolve into one of the most powerful platforms for creative coding. While screen-based drawing remains a central focus, it is now used for everything from generative sound projects to digital fabrication. The goal of p5.js is to take the core ideas of Processing and adapt them to the modern web. This not only means a shift from Java to JavaScript, but also the introduction of new features like HTML DOM manipulation, and a broader reach than was previously possible. It also means you have the full power of the web at your disposal, allowing you to interface with other JavaScript libraries, access popular web-based APIs and easily target any device with a browser – from desktops to laptops to mobile phones. One of the biggest advantages of working with p5.js is 13 years’ worth of tutorials, examples and other learning materials created for Processing. In most cases, core principles translate directly, and code can often be adapted with only a few minor tweaks. Again, teaching is an essential element in p5, both for artists and designers interested in programming, and for programmers interested in the visual arts – so it’s a great place to start, regardless of your skill level. The creation of p5 is a collaborative development process led by Lauren McCarthy, with contributors from around the world. The project is always looking for enthusiastic developers, designers, artists, teachers, authors and, really, any other role you could imagine. If you’d like to get involved, please get in touch at hello@p5js.org. All contributions are welcome.

var position = createVector(mouseX, mouseY); Using our newly-stored mouse position, we can draw our cursor. We’ll set the drawing colour with fill() by passing RGB values and use ellipse() to draw a circle at the mouse location. fill(255, 192, 0); ellipse(position.x, position.y, 8, 8); We only want to draw new stars while the mouse is pressed, so we’ll check p5’s mouseIsPressed before proceeding. If the mouse is down, we need to calculate a good place for our next star to end up. We’ll do that with a custom function called findPixel() , which we’ll define later. Once we have a target, we’ll create a new instance of a custom Star object (more below) and push it

Announcing p5 p5.js was released to the public last summer. See the interactive announcement video at hello.p5js.org

december 2014 99

PROJECTS JavaScript onto the end of our star array. If we end up with over 2,000 stars, we’ll start discarding the oldest ones. if (mouseIsPressed) { var target = findPixel(); var star = new Star(position, target); stars.push(star); if (stars.length > 2000) stars.shift(); } Finally, we’ll loop through our array of stars and call update() and draw() on each of them. We’ll dive into these methods later on. for (var i = 0; i < stars.length; i++) { stars[i].update(); stars[i].draw(); }

Helper functions

Now setup() and draw() are in place we’ll work on the helper functions and objects. First, we’ll define a function that finds a resting position for each new star. All we need to do is check some random pixels in our hint image, using get() to see if they’re black or white. We actually only have to look at their red value, because in both cases the RGB values match. If we find a non-white pixel, we’ll return it because we’ve hit our design. If not, we’ll just return the last pixel checked and it will serve as a random star.

Below left The background image – this night sky scene provides the setting for our animation

function findPixel() { var x, y; for (var i = 0; i < 15; i++) { x = floor(random(hintImage.width)); y = floor(random(hintImage.height));

Below right The hint

image, which dictates the positioning of our stars

100

if (red(hintImage.get(x,y)) < 255) break; }

december 2014

return createVector(x,y); } Last up is our custom Star object. Put simply, we want a reusable container that stores information about each star, and also provides a means for updating and drawing them. JavaScript doesn’t provide a way to create classes in a traditional sense, but we can get the same result by defining a function and extending it for our own needs. Each star has a few properties (starting position, final location and a randomly generated diameter), which we’ll define in a ‘constructor function’ that is called for every new star created in our draw loop.

To give the stars a twinkle, the alpha value is determined using p5’s noise() function function Star(position, target) { this.position = position; this.target = target; this.diameter = random(1, 5); } Next we’ll add an update() method to Star, which will use p5.Vector’s lerp() to calculate a new location between a star’s current and target positions. In this case, we’re moving four per cent of the remaining distance for every draw, which effectively gives us an ease-out effect. If we wanted to get fancy, we could also simulate some physics here, but for now we’ll keep it simple. Star.prototype.update = function() { this.position = p5.Vector.lerp( this.position,

JavaScript

In-depth

Points on a plane Interpolation Each frame, linear interpolation gives us a new point along the path between the current star position and its destination

this.target, 0.04 ); };

Drawing stars

Like many graphics applications, drawing in p5 is based on a coordinates system. Horizontal movement is determined by changes on the x axis, and vertical movement by the y. All of p5’s basic drawing functions, such as ellipse() and rect() , use this system, as do advanced operations like grabbing an individual pixel’s colour with get() . So, to draw a 100px square, 50px from the left edge of the canvas and 25px from the top, we’d use: rect(50, 25, 100, 100);

Finally, Star’s draw() method actually draws the star to the canvas. Once again, we’re using fill() and ellipse() , although this time we’re calling fill() with a grayscale value and an alpha value for transparency. To give the stars a twinkle, the alpha value is determined using p5’s noise() function. This returns the Perlin noise value for the specified coordinates, meaning you get a smooth, fluid sequence of random numbers. For the third parameter, we’re passing a time-based value rather than a spatial value, so that the noise will animate over time.

Additionally, p5 offers some global variables helpful for positioning, like the width and height of the canvas. To draw a circle with a 100px diameter in the exact centre of the canvas, we’d simply divide the width and height in half.

Star.prototype.draw = function() { var alpha = noise( this.target.x, this.target.y, millis()/1000.0 );

ellipse(mouseX, mouseY, 100, 100);

ellipse(width/2, height/2, 100, 100); To begin animating these shapes, we’ll need to pass variable parameters instead of constants. We can, of course, define our own variables, or use values provided automatically by p5. In the following code, for example, an ellipse is drawn wherever your mouse pointer happens to be on the canvas.

fill(255, alpha * 255); ellipse( this.position.x, this.position.y, this.diameter, this.diameter ); };

Ellipse ellipse() also takes x and y coordinates along with values for dimensions

That’s it for our first sketch! Click and drag to see new stars appear and conform to the hint image.

What’s next? From here, you might add some HTML elements to control variables using the p5.dom add-on or even add sound to the visuals using p5.sound . We’ve only scratched the surface of what’s possible with p5.js, and with new features and an official editor on the way, there’s even more to look forward to. Have fun!

Rectangle The first two arguments to rect() define the x and y position, the second pair determine the width and height

december 2014 101

on sale now!

In 164 packed pages, we show you how to get to the top of Google. From making your site load faster and climbing the rankings to the latest SEO tricks and techniques, this handbook contains everything you need to know to become a master of SEO. You’ll also learn all about Analytics – from a wide range of industry experts and Google itself – and key marketing techniques to drive your site or business to the top of the world’s favourite search engine.

Web standards 2O YEARS OF

interoperable. In fact, sometimes what they thought was right was to be intentionally non-interoperable. The web was dependent on competing fiats, and it was quickly fragmenting both users and developers. The confusion and waste of that era led to the formation of the Web Standards Project (WaSP); and a tireless, years-long effort to cadge and cajole browsers into some semblance of consistency. It was a crazy idea, but it turned out to be just crazy enough to actually work.

A historical precedent

The Highest of Standards Eric A. Meyer celebrates 25 years

Photograph: Jeffrey Zeldman

of web standards successes As regular readers are no doubt aware, the past few months have seen the finalisation and rapid adoption of the new <picture> element. Thanks to the tireless, years-long effort of the Responsive Images Community Group (RICG), the web is gaining a standardised, author-friendly, HTML-centric method to deliver responsive images to users. It’s a remarkable moment, the more so because it’s exactly what should have happened. By that, I don’t mean the technical specifics of the solution – it has its pros and cons, as with anything – but instead the fact that the web needed to be enhanced, and the standards process allowed the community to make it so. The process worked through competing proposals, balancing of priorities, and community interest to arrive at a common solution. How far we’ve come in the past 20 years. Back in my day, young padawan, browser makers just did whatever they felt was right and didn’t try to be

PROFILE

Process

The RICG followed in the tradition of WaSP, which in turn followed in the tradition of the web itself. The same pattern repeats: a problem exists, a need is identified, and a small group of committed, passionate people get together to shape the future. They talk with developers and designers, engage in debate, make compromises, get ridiculed and shouted at from multiple directions, and eventually come to a solution with widespread support. In the case of the web, the group was as small as two: Tim Berners-Lee and Robert Cailliau. WaSP started with less than 20. The RICG, about a dozen. Each one the nucleus around which a vital, necessary change grew, and was shaped by the community. Sure, it took time. More time than seems reasonable, and so much energy, when the end solution seems so simple. But that’s the standards process in a nutshell, right there. The process is slow, frustrating, inefficient and flawed – just like us. It hasn’t given us every last thing we each want, but it has given us things we all need. <picture> . Media queries. Flexbox. SVG. PNGs. HTML. The web. This is why, for all its frustrations, the web’s standards process is worth celebrating, 25 years on. Worth cherishing, in fact. It’s gotten us this far, to a web where browser makers can be both innovative and collaborative, and a set of technologies that are everywhere. HTML, CSS and JavaScript are embedded in the firmware of routers, wired into the guts of desktop applications, running on nearly every mobile device. Few, if any, single-source technologies even come close. Someone once said, “There are few sure losing bets in technology, but the surest is to bet against the web.” The standards process is an integral part of why. Let’s take a moment to reflect on that, as we move into the next quarter-century of the greatest, most human information delivery system the world has ever known. Eric A. Meyer (@meyerweb) is an author, speaker, blogger, sometime teacher, and co-founder of An Event Apart. He’s been working on the web since 1993 and still finds it utterly compelling

december 2014 103

PROJECTS Sass

Download the files here! Find the GitHub repo for this tutorial at netm.ag/extend-261

A b o u t t he a u t h o r

An t hon y DiSp ezio w: anthonydispezio.com t: @adispezio job: Content engineer, Inkling areas of expertise: HTML, CSS, Sass, JavaScript, WordPress, N64 q: who would play you in a movie of your life? a: Kyle MacLachlan

Sass

Craft smarter mixins with extend Anthony DiSpezio shows you how to leverage mixins and

extends at the same time, to write smarter Sass and cleaner CSS Sass has a well-earned reputation among frontend developers for wrangling complex CSS into smart, reusable code. This is unquestionably valuable for scaling and maintenance, and allows developers to augment the shortcomings presented by traditional CSS. Two of Sass’ most fundamental features are mixins and extends. While often grouped together for their ability to generate additional styles, each offers a unique approach for solving common CSS drawbacks. In developing Sass proficiency, knowing when to use a mixin or extend is key. But mixins and extends are by no means exclusive and, when used together, can produce cleaner, more robust markup. To better understand how these two features can work in tandem, let’s start by taking a closer look at their unique behaviour.

The humble mixin

video Watch an exclusive screencast of this tutorial created by Anthony DiSpezio at netm.ag/mixinvid-261

104

Mixins are one of the basic building blocks of Sass. Simply wrap a group of properties or selectors in a mixin, and the code can be reused by including the mixin later on. Writing the commonly shared code once ensures that future edits can be made in a single place – a core tenant of the DRY methodology. This example button mixin contains shared border properties that are included by two different button classes:

december 2014

SCSS @mixin button { border-radius: 4px; border: 4px solid black; } .search-button { @include button; background-color: blue; } .cancel-button { @include button; background-color: red; } CSS .search-button { border-radius: 4px; border: 4px solid black; background-color: blue; } .cancel-button { border-radius: 4px; border: 4px solid black; background-color: red; }

Sass

Focus on

‘Clever’ is not always better Contents A mixin’s contents is included every time it’s called. In our example, the border properties are repeated in both classes

This is already a huge improvement over plain CSS and we’ve only just scratched the surface. Mixins also accept inputs, called arguments, which can be used as variables for properties or even class names. Let’s look at a more advanced example that generates entire button classes with a unique class name and background colour: SCSS @mixin button($name, $background-color) { .#{$name}-button { background-color: $background-color; border-radius: 4px; border: 4px solid black; } }

When used together, mixins and extends can produce cleaner, more robust markup

Sass offers endless possibilities for streamlining and refactoring CSS. It’s tempting to use every Sass feature in a project and it’s not uncommon for new developers to take things a little too far. Always remember the goal is to increase productivity while simultaneously maintaining clean CSS output. If a mixin or extend is so complicated that it’s hard to maintain, it’s probably been over-engineered. If you find yourself in this position, take a step back and don’t be afraid to simplify. Sometimes over-engineering can lead to functional problems as well. Abuse of Sass directives can break the cascade or cause specificity issues. Chaining extends across multiple files can lead to unexpected selector output, and bloated mixins inside loops can create massive amounts of excess CSS. Always keep your Sass and CSS output manageable and respect the basic principles of CSS. Keeping Sass manageable is not an excuse to write bad CSS. It is always good practice to write efficient CSS selectors (even if performance gains are marginal), but there’s no need to overcomplicate your Sass modules to the point where you don’t understand how they work. An easy-to-understand mixin that produces a few extra lines of CSS may prove to be more valuable in the long run, especially when working in large teams. Sass guru Hugo Giraudel said it best in his article ‘Keep Sass Simple’: “Everything is not meant to be used everywhere” (sitepoint. com/keep-sass-simple). This sentiment rings true for many of the esoteric uses for Sass. They might be great experiments, but often they can introduce far too much complexity into productionready projects.

Include the mixin with the values for each argument to generate unique CSS for each class: SCSS @include button('search', blue); @include button('cancel', red); CSS .search-button { background-color: blue; border-radius: 4px; border: 4px solid black; } .cancel-button { background-color: red;

Keep Sass simple This article by Hugo Giraudel weighs the importance of experimental Sass with the realities of production-ready stability

december 2014 105

PROJECTS Sass border-radius: 4px; border: 4px solid black; } Even in this small example it’s easy to see the scalable power of Sass.

Downsides of duplication

in-depth

A Community at Large Sass is frequently credited for having a diverse and engaged community of developers that extends well beyond the language itself. All over the world, developers have come together to share their knowledge and love for Sass. SassConf (sassconf.com) is an annual conference devoted to frontend development and Sass. Every year, hundreds of designers and devs descend on New York City for several days of speakers and activities aimed at educating and growing the community. Sass meetups are a great way to catch up on new ideas and talk shop with other Sass enthusiasts. There are meetups all across the globe, so find out if there’s one near you. If not, start your own meetup and help grow the fun Sass community! For a weekly dose of Sass, check out the Sass Bites podcast hosted by Micah Godbolt (youtube.com/user/sassbites) and the Sass News email group curated by Stuart Robson (sassnews.com). These subscriptions are jam-packed with valuable knowledge and the latest Sass tips and tricks. Every day, fantastic Sass experiments are posted on blogs, Twitter, YouTube, code playgrounds and more. Devote a small portion of your day to exploring what’s new and pushing the boundaries of your own experience.

Get involved Sass meetups are happening all over the world – find a meetup near you or start your own

Although it is a straightforward process to use mixins to repeat blocks of CSS, it’s not always the smartest thing to do. The CSS output generated by the mixin now contains two classes, each with identical border properties. Constantly using mixins in this manner will generate less-than-optimal markup and a bloated CSS output full of duplicate code. Luckily, we can use extend to pick up where the mixin leaves off.

DRYing out with extend The extend feature allows classes to inherit all of the properties of another class by grouping the selectors together. Instead of duplicating the CSS each time like a mixin, the selector is grouped with the class it extended: SCSS .button { border-radius: 4px; border: 4px solid black; } .search-button { @extend .button; background: blue; } CSS .button, .search-button { border-radius: 4px;

More info Visit the Sass website for more information on creating arguments and using variables within mixins

106

december 2014

Sass Res ource Sass course Ready for the next level? Check out Dale Sande’s Advanced Sass course on Treehouse for more powerful mixins and a wealth of other great Sass knowledge: netm.ag/ sasscourse-261

Grouping properties Instead of writing duplicate code with a mixin,

the extended properties are grouped together to lessen the redundancy

DRY-ing out Check out Sam Richard’s article on DRYing out mixins for even more ways to write smarter mixins: netm.ag/DRY-261

border: 4px solid black; } .search-button { background: blue; } Now our output only has one instance of the border properties shared by our buttons. We can utilise this convention to streamline the mixin’s output.

So happy together The mixin-only approach was bloated because every time we called the mixin, we unnecessarily

Intelligent use of mixins and extends has led to remarkable Sass modules duplicated the border properties. Instead of writing these shared properties directly in the mixin, we can extend an existing class that contains them, reducing the amount of duplicate code: SCSS .button { border-radius: 4px; border: 4px solid black; } @mixin button($name, $background-color) { .#{$name}-button { background-color: $background-color; @extend .button; } }

@include button('search', blue); @include button('cancel', red); The classes that inherit the shared button properties have been grouped with the .button class, eliminating the duplicate border properties. CSS .buton, .search-button, .cancel-button { border-radius: 4px; border: 4px solid black; } .search-button { background-color: blue; } .cancel-button { background-color: red; } This mixin/extend combo can be used to generate many buttons while reducing the amount of duplicate CSS. More advanced Sass features, such as placeholder selectors, can help to further increase the cleanliness of this code.

Finding a balance Intelligent use of mixins and extends has led to some remarkable Sass modules, but remember to always check the CSS output. Sass is not a panacea for every CSS issue, and will require some finesse to achieve the expected output. Experiment with different techniques and see how these features can be woven together to create powerful mixins and clean stylesheets. Sass’ active community means there are always new ideas to explore, discover and contribute. Have fun!

december 2014 107

PROJECTS WordPress

Download the files here! All the files you need for this tutorial can be found at netm.ag/modularGit-261

A b o u t t he a u t h o r

Ma rk L l obrer a w: bluecadet.com t: @dirtystylus job: Senior developer, Bluecadet areas of expertise: HTML, JavaScript, WordPress, Drupal q: who would play you in a movie of your life? a: Tilda Swinton

Wordpress

Build modular content systems in WordPress Mark Llobrera walks through how to use Advanced Custom Fields

to create a WordPress CMS that is flexible as well as structurally sound

video Mark Llobrera has created a screencast to accompany this tutorial. Watch along at netm.ag/modularVid-261

108

The key word that has informed my work for the last few years has been ‘flexible’. A website needs to be flexible for the end user, morphing to meet them on their chosen device. But our content authors need flexibility, too, in how they create content for the site. They need to be able to mix different kinds of content to create a compelling site. One of the ways we talk about this flexibility for both users and authors is using the term ‘modular content’. Loosely defined, modular content means breaking down our content into smaller chunks that can be combined in many different ways. It is not a

december 2014

new idea, but it is one that is given new urgency by our new multi-screen, multi-device web. A ‘page’ is simply too big a unit – it must be broken down into smaller components to enable it to bend and change to better serve its authors and users. WordPress has a few options that can be used to add some of this flexibility into a CMS. Elliot Condon’s Advanced Custom Fields (advancedcustomfields.com/pro) has long been an essential plugin for extending the capabilities of WordPress in order to build custom CMSs. The plugin has two features that are well suited to our goals of creating a CMS that supports our flexible design

WordPress system, namely the Flexible Content Field and the Repeater Field. These features allow designers and developers to create modules and craft markup to represent those modules, but they also give content authors flexibility in how they order those modules. So instead of needing many different page templates, we can use a smaller number of flexible content types and templates that are able to render a wide range of possible pages.

Identifying our modules Let’s start with an example: a product details page template. A common scenario is to have a large, evocative image at the top, supported by a section (or sections) highlighting individual features (with an optional image). Finally, callout blocks to related products could follow. We can start by identifying our design system. There are a number of ways to do this, but at the moment I like to sketch out my site’s possible templates and what they will need to support. Once I’ve done that, I start circling common visual

A website needs to be flexible for the user, morphing to meet them on their chosen device structures that can support those content modules. From there I can move on to wireframes that clearly identify those modules. In the scenario shown in the image on page 111, the template calls for three modules: A) a full-width image with text layered on top, B) a centered image with text running underneath it, and C) a series of callout blocks that have a thumbnail image with text layered on top. Our goal is a template that can support any of those blocks, in any order: ABC, ACB, BAC, BCA, ABBC and so on. Certain orders will make more sense given the desired hierarchy of the page, but we want to be able to support all options.

Case study

Our toughest client: ourselves At Bluecadet we’ve had a lot of experience building modular content systems for our clients. Our toughest client this year, however, might have been ourselves. We entered this year with the goal of redesigning our website (bluecadet.com), and it took a lot of hard work to create a design system that could accommodate the range of our work. For our case study pages we needed support for varying numbers and combinations of text, video and imagery. Additionally, we needed the system to be intuitive for our teammates who would be entering and maintaining content. We ended up creating a design system with modular content blocks, including: a full-width single image, an image slideshow, a video player, a video loop, a pull quote, and regular text. Once we started building in WordPress, Advanced Custom Fields’ Flexible Content Field allowed us to create each content block as a separate layout, all shared by one post type and one template file. Our content authors appreciated the ease of creating and re-ordering the different module layouts, which let them put together the right layout for each project case study page.

Creating modules in WordPress Now that we have an idea of what kinds of content we’ll need to support, we can start creating our modules in WordPress. We will use Advanced Custom Fields Pro (advancedcustomfields.com/pro), a paid plugin that includes the Flexible Content Field and Repeater Field. Once you have the ACF Pro plugin activated, go to the new menu item Custom Fields > Custom Fields and add a new Field Group . Call it ‘Core

Mix’n’match Content authors create layouts from a range of content modules

december 2014 109

PROJECTS WordPress

Resources

Further reading The overlap between modular content and frontend style guides is very large, and Anna Debenham has written a good overview on different approaches to building them, called ‘Front-end Style Guides’ (netm.ag/style-261). She also maintains a collection of frontend style guide resources (netm.ag/gimme-261). Dave Rupert of Paravel Inc. wrote 'Responsive Deliverables' (netm.ag/deliverables-261) which deals with design systems, style guides and different client deliverables. I’ve focused on WordPress’s Advanced Custom Fields, but ExpressionEngine and CraftCMS both offer the Matrix field (buildwithcraft.com/features/matrix), which behaves very much like the ACF Flexible Content Field. Karen McGrane’s book Content Strategy for Mobile (netm. ag/content-250) and Sara Wacher-Boettcher’s book Content Everywhere (netm.ag/content-237) both deal with identifying and structuring content, which is the starting point for any modular content system. Newfangled’s Christopher Butler wrote the post ‘The way you design web content is about to change’ (netm.ag/change-261). His article inspired me to investigate the Flexible Content Field in WordPress.

Modules’. Once you’ve created a Field Group, you can add fields to it. Create a single field called ‘Flexible Content’. Select Flexible Content as the field type. A Flexible Content Field gives you the option to create multiple layouts. Those modules we identified earlier? They map directly to the layouts you will create here. When you create the field it should automatically create your first layout for you. Go ahead and label the first layout ‘Image Text Overlay’, with a name ‘image_text_overlay’. That name is important because that’s how you’ll reference the field in your PHP template file. Create a field labeled ‘Background Image’ (name: ‘background_image’) and set the Field Type to Image . Add another field, labeled ‘Overlay Text’ (name: ‘overlay_text’) with a Field Type of Text . That’s it for the first layout. Once you’re done with your first layout, hover over the word Layout in the left-hand column. Several options should options appear, including Add New . Click on that to create your second layout. Label it ‘Image and Text Block’ (name: ‘image_and

Each layout maps to a module, so we can craft layout-specific markup in our template _text_block’). Add a field labeled ‘Featured Image’ (name: ‘featured_image’, field type: Image ). Add another field, labeled ‘Description Text’ (name: ‘description_text’, field type: Wysiwyg Editor ). This layout maps to the centred image with a text block underneath it. Finally, create your last layout. Label it ‘Callout Blocks’ (name: ‘callout_blocks’). Create a new field labeled ‘Block Collection’ (name: ‘block_collection’, field type: Repeater ). A repeater is a way to create multiple field collections. In the Sub Fields section of the Repeater field create a field labeled ‘Block Image’ (name: ‘block_image’, field type: Image ). Create a Text field labeled ‘Block Text’ (name: ‘block_text’).

Fields explained

Style guide Product style guide for sales force

110

december 2014

There are our three layouts. If the process of creating field groups and fields is a little confusing, the ACF website has very detailed documentation and videos showing how to create them. The modules are all pretty similar: they contain an Image field, and a Text or Wysiwyg field for entering

WordPress

text. The only wrinkle is that the last module ontains a Repeater field with sub fields, so that we can create multiple field collections within one larger layout. You may be wondering, why create separate layouts when each layout contains very similar fields? Well, each layout maps to a module in our design system, and this allows us to craft markup in our template that is specific to each layout. But even more important than the ability to break our markup into separate pieces in our template is the flexibility that layouts provide. Each different layout can be created any number of times. Furthermore, each layout can be dragged in the display order to give your content author the flexibility to decide the best arrangement for the content that makes up each page. Some pages might only use one or two of the layouts, depending on what content is available for the page. By default ACF will attach your Field Group to the default Post type. If you are creating a big CMS, it’s very likely that you’ll attach it to a custom post type of your making. Now let’s take a look at it in action. Note the option to create any one of the three layouts by hovering over the ‘+’ symbol. Once your layout has been

created, you can also drag your fields to put them them into any desired order.

Left A simple detail page wireframe, with three distinct visual modules identified Above A Flexible Content Field with multiple layouts

Crafting our template So now that you have your content structured into these modular layouts, how do you create a template to display them? Well, it turns out that the PHP template is quite simple. In it you will check for rows in our Core Module ’s Flexible Content Field . For each row, it can then check the layout type and render the appropriate markup. For rendering the fields themselves we will use the handy ACF methods the_sub_field() (netm.ag/sub-261) and get_ sub_field() (netm.ag/getsub-261). I like to generate my themes using underscores.me (underscores.me). Your theme should have a contentsingle.php file already present – if not, you can create one. Delete everything in the file and replace it with this code: <?php ?> <article id="post-<?php the_ID(); ?>" <?php post_ class(); ?>> <div class="entry-content"> <?php if( have_rows('flexible_content') ):

december 2014 111

PROJECTS WordPress <section class="text-calloutblock"><h1><?php the_sub_field('block_text'); ?></h1><img src="<?php echo $block_image['url']; ?>"></section> <?php endwhile; ?>  </section> <?php endif; ?>  <?php endif; ?> <?php endwhile; ?> <?php endif; ?> </div> </article>

Get adaptive Flexible Content Field layouts are easy to create and reorder

while ( have_rows('flexible_content') ) : the_ row(); if ( get_row_layout() == 'image_text_ overlay' ): ?> <section class="text-overlay"> <h1><?php the_sub_field('overlay_text'); ?></h1> <?php $background_image = get_sub_ field('background_image'); ?> <img src="<?php echo $background_ image['url']; ?>"> </section> <?php elseif (get_row_layout() == 'image_ and_text_block' ): ?> <section class="text-centered"> <?php $featured_image = get_sub_ field('featured_image'); ?> <img src="<?php echo $featured_ image['url']; ?>"> <section class="text-block"> <?php the_sub_field('description_text'); ?> </section> </section> <?php elseif (get_row_layout() == 'callout_ blocks' ): ?> <?php if( have_rows('block_collection') ): ?> <section class="text-callout"> <?php while( have_rows('block_ collection') ): the_row(); ?> <?php $block_image = get_sub_ field('block_image'); ?>

112

december 2014

This template begins by checking if the field flexible_ content has any rows. If it does, then it loops through each row of the field. Each time through, it checks the Row Layout using the get_row_layout() method. You can see that the three names it is checking are the ones you specified for the three layouts: image_ text_overlay , image_and_text_block , and callout blocks . Each of those layouts gets its own (modular) piece of markup. In each markup block you then call the_sub_ field() (or get_sub_field() , in the case of images that you’ll need to set to a variable for printing later). Now you have a template to render the correct markup for each of your modules, you can style the results with CSS. In many cases I prefer to work out the CSS for each module in a frontend

Content authors are given intuitive tools to create layouts and drag them into any order style guide or static HTML mockup, so this step normally involves copying, pasting and testing into the WordPress theme CSS file. The CSS I have used is included in the tutorial files. It is fluid (to an extent) but not responsive – you are encouraged to play with it and come up with your own markup/CSS patterns once you understand how the ACF layouts and fields are rendered.

The final (flexible) result The end result is a page template that supports a flexible design system, on both the authoring side and the rendering side. Content authors are given intuitive tools to create layouts and drag and drop them into the desired order. The result will be wellcrafted, consistent markup, ultimately giving the site’s users a better experience.

PROJECTS Accessibility

Accessibility

Older users

The web is no longer the preserve of the young. Shawn Henry considers the needs of today’s biggest online spenders: the baby boomers Long gone are the days when young ‘techies’ were the primary target audience for websites. Increasingly, a key market for sites is older users, especially as the baby boomers age. Studies show that boomers spend the most money online of all generations: people aged 50 and over spend nearly $7 billion per year online (netm.ag/50-260), and by 2015 45 per cent of the US population will be 50 and above. The percentages are similar in many countries (w3. org/TR/wai-age-literature).

The definition of Good design

Getting flexible Grey text on a light background is a common colour combination in many modern websites. Yet most older users cannot see such grey text well or even at all, because the contrast ratio is too low. As with many accessibility issues, poor contrast can also be a problem for users without disabilities – for example, people using your website on a mobile device in bright sunlight. WCAG 2.0 includes requirements for contrast ratios of 4.5:1 minimum at Level AA and 7:1 at Level AAA. There is a plethora of tools available to help you check contrast ratio. You’ll find a list at netm.ag/contrast-260. Flexibility, in order to meet a wide range of user needs, is a key aspect of accessibility. For example, while many older users need high contrast, some people need low contrast, including people with some cognitive disabilities and visual conditions. Make sure that your web pages and applications work when users select other background and text colours through their browser, operating system or other settings. For more specific guidance and resources, take a look at w3.org/WAI/older-users.

PROFILE

Older users’ changing needs significantly impact user experience – and the requirements of good design. For example, low contrast between text and background can be hard for older users to read due to changes in contrast sensitivity and colour perception. Small click targets can be difficult to operate due to reduced dexterity or tremors. Audio can be hard to understand due to hearing loss. As we age, most of us have increasing visual, physical, auditory and cognitive impairments that affect how we interact with computers and websites. To help you understand how to design better for older users, there’s a rich source of information that’s been developing for over 15 years: the body of work on web accessibility for people with disabilities, including the Web Content Accessibility Guidelines

(WCAG) from the W3C (w3.org/WAI/intro/wcag). The European Commission-funded WAI-AGE project found that existing W3C accessibility guidelines address the majority of older users’ web needs.

114

december 2014

Shawn (uiaccess.com/profile.html) focuses her personal passion for accessibility on bringing together the needs of individuals and the goals of organisations in designing human-computer interfaces

100%

UK BASED SUPPORT

The UK’s Most Advanced

RESELLER HOSTING

Your clients deserve great web hosting Projects Lay the groundwork for a modern web UI Build a prototype with Origami Responsive charts with Chartist.js Explore creative code with p5.js Smarter Sass with mixins and extends

9015

Build content systems in WP

From only £29.99 per month

SELL Cloud Hosting 100% UK SUPPORT 24/7

UNLIMITED 100% CREATE Websites Your Brand Custom Packages FREE & INSTANT SETUP 99.99% UPTIME SLA FULL ROOT ACCESS

SELL LINUX & WINDOWS

EXCLUSIVE DISCOUNTS

HOSTPAY BILLING & CRM

Find out more www.heartinternet.uk/reseller-hosting 0330 660 0255 0845 644 7750

now Call us now

9000

t more

www.heartinternet.co.uk/vps

www.heartinternet.uk Web hosting | Reseller hosting | VPS | Servers

www.heartinternet.co.uk Web hosting | Reseller hosting | VPS | Servers