netの July 1, 2015 の目次

We’ve got two big announcements this month. Voting for the net awards has just opened at thenetawards.com. We received a ton of nominations and as the standard was extremely high, drawing up the longlist was a tough job. It gets harder and harder every year! Please take a few moments to vote for your favourites, and help us whittle down the 210 nominees. Once we’re down to five per category, it’ll be up to our 100 industry judges (thenetawards.com/judges) to make the final decision. Also, tickets are now on sale for Generate London (generateconf.com/london-2015). The conference is expanding to a two-day, one-track event with the net awards ceremony taking place on the evening of day two. Speakers include Eric Meyer, Rachel Andrew and Sara Soueidan. There’s also an event report…

For the past two years I’ve been obsessed with letterpress printing. It’s a form of relief printing that’s been around for more than 500 years. There is a genuine craft to be slowly mastered; a refreshing counterpoint to the breakneck pace of web development, where we are always playing catch-up. What started out as a three-day refresher course soon resulted in the purchase of a tabletop press. Over the next year and a half, I gradually took over our entire dining room, filling it with three small presses, type cabinets, and piles of inky paraphernalia. When I bought a free-standing, treadle-operated, cast iron platen press with a whacking great flywheel last year, I realised I really did need a proper workshop to put it all in! That’s where you’ll find…

INFO job: Digital product designer w: cennydd.com t: @Cennydd Speaking to Cennydd Bowles at his London home is a tricky business. It’s not that he’s hesitant to talk about his past work at Clearleft and Twitter, or his strong views about the ethics of design. It’s just that everyone else wants to talk to him too. Our interview is peppered with his phone bleeping, then buzzing, as people try to get through to him. With an impressive 13 years in the notoriously protean web industry as a user experience designer (a term he uses, but isn’t fond of) Bowles hasn’t just remained relevant - he’s currently at the top of his game. And he’s also branching out into teaching: running workshops where he can share his experience. Bowles (whose first…

INFO Job: Empathy researcher, Rosenfeld and co-founder, Adaptive Path w: indiyoung.com t: @indiyoung net: Tell us a bit about what you do ... IY: I am an empathy researcher. I do person-focused research to help organisations balance out their existing evaluative, solution-focused and quantitative research. I can do a study for an organisation, but more commonly I mentor the team through the process the first couple of studies, so they gain the skills needed. This kind of research is different to traditional ‘user research’ , so it requires new skills. Teams love learning while conducting a real, relevant study. I also teach workshops and do one-on-one coaching. net: Your first book, Mental Models, was published in 2008. Why do you think it’s important to understand users’ reasons for doing things? IY:…

Dogstudio is an award-winning digital agency from Belgium, and its new website is simply stunning. Featuring rich imagery, delicate typography, detailed case studies and humorous and engaging copy, this website epitomises the quality-driven standards the studio aspires to. Where the site really excels, however, is in its use of animation – perhaps something we’ll see more of as designers and developers become accustomed to CSS animation techniques. “We prototype and refine directly in JavaScript,” says creative director Henry Daubrez. “I guess the secret is quite a lot of interaction happens between design and frontend development. Over the years we have started to know each other’s sensitivities.” Perhaps the most striking feature of the site is the smokey transition between pages. How was this achieved? “CSS masking, baby!” reveals Daubrez. “We…

Lonely Planet has everything a would-be world traveller might need, be that travel guides, destination inspiration or hotel reviews. Its team has also been on a journey, as it has been slowly migrating the site over to a fresh and feature-rich responsive design. The latest step has been to launch destination pages (for example, lonelyplanet.com/usa/california). I asked Matt Hinchliffe, frontend developer at Lonely Planet, how the team dealt with the site’s beautiful but abundant imagery: “We use ReSRC.it to compress and serve our images. They’ve handled everything brilliantly, including delivering WebP without us needing to lift a finger.” Lonely Planet has been a proponent of maintainable style guides, and its own, Rizzo, has attracted much interest from outside the company. “Rizzo allows us to build our UI components in isolation.…

Scout Cycles isn’t your ordinary cycle hire scheme. It is dedicated to helping people commute around New York responsibly, while promoting a healthy lifestyle by encouraging friendly competition. The company runs promotions based on a points system, and point leaders receive discounts on their monthly subscription. The site uses up-to-date data from the native app the riders use to track their mileage, speed and routes. Users can see live data at all locations covered by the scheme, to get a snapshot of how many cycles are available, how many scouts are riding and how many challenges have been created. SVGs will be used for all icons to enhance the look of the site on higher-resolution devices. Subtle CSS and JavaScript animations will be used to animate these SVGs and all…

BRIEF When Publik Coffee Roasters needed an identity, it turned to Super Top Secret. As well as developing a total branding scheme, the agency also created an immersive digital experience that enabled users to take a look inside Publik’s roastery and explore the origins of its beans. CLOSE UP (1) A 3D rendition of the main lobby enables the user to navigate through Publik’s roastery. (2) As users move through the homepage tour, each stopping point populates with information about other pages of the site they can jump to. (3) The product pages are a one-stop source of information for coffee aficionados, including a stylised map view of each bean’s area of origin, sourcing information, flavour profiles and preparation guidelines. (4) For each region of origin, we illustrated icons in…

ABOUT THE AUTHOR NEIL MCCA LLION w: codepen.io/njmcode t: @njmcode job: Head of frontend development, rehabstudio areas of expertise: JavaScript architecture, browser performance, progressive enhancement q: what’s your motto? a: CodePen all the things In this tutorial I’ll show you how to build a drum pattern editor application in JavaScript. I’ll use the Web Audio API (netm.ag/audio-268) to trigger drum samples and add effects, with Backbone.js (backbonejs.org) to handle views and eventing. I’ll also explain how a modular, eventdriven architecture can ensure the app is simple to modify and extend. The files for this tutorial (netm.ag/backbone-268) include instructions on how to set up the project, audio samples for the drums, and some CSS styling. The application we’re going to create is a simple drum pattern creator composed of several parts.…

VIDEO Clark Wimberly has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/keynotevid-268 ABOUT THE AUTHOR CLARK WIMBERLY w: clarklab.com t: @clarklab job: UX designer areas of expertise: User-centric design and development q: what’s your motto? a: Make things that are awesome With all the modern ways to prototype motion for web and mobile, sometimes things can get a bit overwhelming. Framer this and Origami that, and soon you’re spending more time coding your animation than designing it. Don’t get me wrong, I love those tools, but sometimes a simple animation requires a simple tool. Enter Keynote (netm.ag/keynote-268), a presentation app most of us (if you’re on OS X) already have on our machines. Normally used for Powerpoint-like presentations, Keynote has a set of simple, visual…

RESOURCE Ever wish you could use Sublime Text to write emails, CodePens or Stack Overflow answers? With the GhostText package and plugin, you can link a Sublime Text tab to any textarea in your browser: netm.ag/ghost-268 Exclusive offer! $11 off Sublime Text Power Us er Use the code NETMAG at SublimeTextBook.com for $11 off the book and video series Offer valid until 30 July 2015 ABOUT THE AUTHOR WES BOS w: WesBos.com t: @wesbos job: Full-stack developer, author, speaker and instructor areas of expertise: HTML, CSS, JavaScript, workflow, tooling q: what’s your motto? a: Never stop learning. Share what you know. Investing in web development tooling is one of the most important things you can do as a developer. Not only will it make you more productive, but the quality of your code…

Due to its nature as a dynamic language, it is surprisingly difficult to safely implement cryptographic primitives in JavaScript. To bridge this gap, a W3C working group was formed to design an API that provides these basic building blocks to web pages, apps and workers. Modern browsers already ship with everything that is required to build such an API, as enabling secure connections to servers via HTTPS requires that same functionality. The Web Cryptography API, at home under the namespace window.crypto , accepts input data in the form of TypedArray objects. As cryptographic operations can be quite expensive, all its methods return promises resolving to ArrayBuffer objects to not block the browser for the length of the computation. A reliable source of randomness is essential, and thus there exists window.crypto.…

ACCESSIBILITY As the field of web development matures, techniques established by accessibility experts are becoming common practice among user interface designers and developers. Codebases suffer regressions as code complexity increases. We mitigate undesired behaviour changes by describing the expected behaviour in tests. Too often accessibility criteria is not assessed until the last phase of a project. Fixing a major issue then requires a complete development cycle. As assistive technologies improve, we are building evermore complex patterns using tools like Accessible Rich Internet Applications (ARIA). This code must also be tested. But what should we test? And can we ever say with binary precision that an interface is accessible or not? I contribute to a tool called Quail (netm.ag/quail-268) that seeks to answer both questions in a free and open codebase.…

Side project of the month INFO job: Product designer, Facebook w: scottsavarie.ca t: @ScottSavarie net: Tell us about your day job … SS: I’m a product designer on the growth team at Facebook. One of our biggest goals is to get the next one billion people using Facebook – while continuing to make the product engaging for existing users. net: And how did Napkin (designwithnapkin.com) come about? SS: Through work, I took an iOS development course targeted at designers who have some coding chops, but nothing major. The instructor mentioned about it being weird that there are no tools to design on your iPad or iPhone. That kind of got me thinking, and so the following weekend I made a quick prototype as a proof of concept. net: What did…

No.73 (also known as The Witney Centre for Web Excellence) is a shared workspace located on the High Street of the sleepy Oxfordshire market town of Witney, and is currently home to five top-notch web freelancers: Jon Hicks, Jon Dennis, Ed Hicks, Denis Radenkovic and myself. Both Jons and I moved into the building five years ago, after previously being based in picturesque Burford. Two years ago the suite upstairs became available and we expanded into the space, and were joined by Ed and Denis. We knocked through the two main studios upstairs to create a bright, open plan space with the original floorboards and whitewashed walls. Although everyone at No.73 works independently, the shared studio space encourages collaboration and the sharing of ideas. Being a freelancer has many perks,…

A colleagues asked me recently, “How can I have a more confident presence when interacting with clients and peers?” Really, the answer isn’t about appearing confident, it’s about facilitating a fluid conversation. If you can do that, you’ll be naturally impressive, and people will look to you as the leader in the room. The great leaders I’ve been lucky to learn from act as catalysts, moderating productive conversations. Let’s take a look at some of the ways they do this. 1. BE A BEE Firstly, leaders identify the unique strengths of each person in the room and facilitate opportunities for these strengths to feed into one another. MailChimp CEO Ben Chestnut once stated that he imagines himself as a bee in his company (vimeo.com/34081566). He goes from person to person…

Bloomberg Business brings the different aspects of Bloomberg’s media empire (Bloomberg News, Bloomberg Businessweek, Bloomberg TV and Bloomberg Graphics) under one roof – and one that is compelling, unique and decidedly quirky. Much of the design is inspired by that of its printed sister publication Businessweek. Heavy use of large, bold type, often laid over images that themselves have filter treatments applied, is just one of the site’s many hallmark graphic features. Overall the vibrant design is freer – and frankly braver – than anything seen on other news websites. This is especially true for section fronts (in particular bloomberg.com/pursuits). The visual presentation is built upon a design system that gives the editorial team enormous flexibility to publish and package any type of content. Bloomberg digital editor Joshua Topolsky writes:…

MY MONTH What have you been doing this month? Working at Jellyhaus on some exciting web and native app projects for PepsiCo, and trying to fit in as many bike rides as I can! Which sites have you visited for inspiration? aiga.org and itsnicethat.com. What have you been watching? The Six Nations, Milan San-Remo and Notts County. What have you been listening to? According to my Spotify account, Mary Poppins! Obviously my twoyear-old daughter ... BikeFlirt is a tongue-in-cheek ‘dating’ site for specialist and unusual bikes. The site is split into two elements: the ‘Professional’ service is supported by a national network of independent bike shops, while the ‘Personals’ section allows private renters to make their bike available for a ‘date’. The double-entendre theme runs throughout the site, making it…

jobysessions.com Steven is an illustrator who lives and works in Brighton, UK. He creates varied and experimental work which he describes as ‘somewhere between pop and psychedelia’ stevenwilsonstudio.com Ben is the president of Sparkbox and founder of the Build Right workshop series. He writes about the web on leading industry blogs, and speaks around the world seesparkbox.com My name is Ben Callahan, and I’m a tools junkie. If I’m not careful, I’ll spend more time playing about with the hottest new tools than doing the work they were built to help me with. Chances are, some of you are the same way, which is why I was excited at the opportunity to experiment with, and ultimately recommend, some of these tools. These days, every new site I visit is responsive.…

The modular approach adopted in this article relies heavily on Browserify, a JavaScript development tool used for managing modules. If you’ve used Node.js (or io.js) this concept should be very familiar to you, as Browserify runs Node-like modules – or even Node modules themselves, directly from npm – in the browser. If you haven’t used Node.js this explanation won’t make it any clearer, but there’s no space here to go into further detail. Modules are included through the require() function, which accepts a file or folder path as an argument. For example, the following code would load jQuery, assign it to the standard string character, then run a common effect: var $ = require('./libs/jquery'); $('#foo').hide(); This article uses JavaScript files as modules, but with a slightly different convention of including…

The Package Control website has hundreds of themes (netm.ag/theme-268) and colour schemes (netm.ag/colour-268) for you to explore. Many developers find a dark colour scheme is easier on the eye, while others prefer lighter ones with minimal contrast. It’s helpful to spend some time trying a few out so you can find one that works for you. Colour schemes define the main code area and how things like variables, functions and selectors are coloured. Themes define the rest of the editor, including the sidebar, command palette, tabs and search box. Many packages include both a theme and a colour scheme. A recent feature addition to Sublime Text 3 is sidebar icons, so a handful of themes now provide nice looking sidebar icons. Cobalt2 (above) is a refined colour scheme that includes…

+ Still undecided about if Genesis is for you? Let’s take a look at the pros and cons for different types of users ... DESIGNER Genesis will not limit your creativity – designing child themes for Genesis is no different than designing for any other WordPress theme. If you’re not a techie, don’t worry, there are a ton of developers whose business is built around taking your Photoshop or Illustrator files and converting them into themes. DEVELOPER Instead of starting from scratch with each theme build, the Genesis Framework provides the core functionality and files to get you off the ground running. Of course, you can get as complex as you want, extending the WordPress API and core Genesis functions to suit your requirements. There’s not one thing in Genesis…

I designed a business card template for a company sales rep. I made a mere $15 profit off the final product – but jobs like this usually result in a lot more business. Client: I love your design, how much are your business cards? Me: $50 for 1000, including printing and shipping. Client: Oh. Well, there’s this other designer that is offering cards too. I’ll bet they’re cheaper. Me: If they are, that’s great. I’ve seen her design and it’s a good one. I was actually chatting via text with the other designer and she was charging more for her set. At this point, the client said she’d go with my card, and asked for the price breakdown. Client: Wait, you’re charging me an extra $15 for yourself? That’s a…

Date: 17 April 2015 Location: New York URL: generateconf.com In case you didn’t know, net magazine isn’t just a magazine – we do conferences too, under the ‘Generate’ banner. And Friday 17 April saw Generate New York 2015 taking place at Manhattan’s New World Stages. The one-day, two-track event, which attracted 300 designers from all around the world, kicked off with a talk from Brad Frost on how we need to “design systems that mean our websites will work on devices that don’t exist yet”. Navigating this shifting landscape means walking away from our obsession with tools, he argued: “Great minds discuss principles. Average minds discuss technologies. Small minds discuss tools.” Ironically, Frost’s own tool, Pattern Lab (patternlab.io) got a namecheck in almost every talk. PROFILE Tom (@tom_may) is the…

“The responsive @wellcometrust site is really quite stunning. Worth poring over this one” ETHAN MARCOTTE (@BEE P) The first of a series of interactive stories from the Wellcome Collection, Mindcraft (netm.ag/mindcraft-268) explores a century of madness, murder and mental healing, from Franz Anton Mesmer’s theories of ‘animal magnetism’ to the therapeutic power of hypnotism used by Freud. Written and curated by historian Mike Jay, the stories are told through images, video and atmospheric audio, using an interface designed and developed by Clearleft. “The narrative was the most important thing,” says UX designer Richard Rutter. “Any interactions we added absolutely had to serve the narrative, involving the reader and providing additional context or explanation as they went through the story.” Supplementary interactions such as galleries and quizzes add a bit of…

Hello Monday is a creative agency specialising in digital experiences and visual identities. When redesigning its portfolio site, it had some clear goals: make the site simple to navigate, and present the work in the best way possible. “We also wanted to show some of the playfulness that’s in our DNA,” says Hello Monday partner Anders Sønderby Jessen. Like Dogstudio, Happy Monday has utilised CSS animation techniques in sometimes subtle, but often sublime ways – be that the full screen menu that glides across the page, the smart transition between pages, or how navigation icons react on hover. Content is laid out in a manner reminiscent of a stylish magazine, with the design of each case study imbued with that project’s colours. Home and project overview pages employ a 3D…

As a keen mountain biker, I decided to tailor the concept to a high-end mountain bike hire company based in Whistler, Canada. Dirt Day’s target audience is experienced riders not family days out, and I wanted to make this clear in the design. I also wanted the visuals to reflect the fact that this is a bold, gritty brand. To do this I utilised a watercolour effect, with striking imagery overlaid with clipping masks to suggest the mud splatters you get after a good ride. From a functional standpoint, the site will have a simple booking system that allows users to select from a number of high-spec bikes and coaching options. I have also designed a virtual trail guide, which would utilise one of the latest features of Google Maps,…

Christopher (@fehler) is a best-selling author, speaker, designer and educator based in Belfast, exploring the intersection of design and business Jake (@designbyjake) is a designer at Typekit, making things mostly for the web, with a passion for type and typography Over the past decade, online typography has evolved rapidly. Internet Explorer has supported web fonts, using EOT format, since IE4 in 1997 (yes, you read that correctly), but since those first tentative steps, typography on the web has attained a degree of maturity that enables us to focus on elevating the craft to ever-higher levels. Adobe has blazed the trail here, introducing its Typekit web font service in September 2009, but others are equally deserving of a hat tip: Google introduced Google Fonts in May 2010, and Clearleft and OmniTI…

Music depends heavily on timing, so getting an accurate time value in JavaScript is critical. Luckily, the Web Audio API gives us just that, with a floating point value provided by its AudioContext.currentTime property. Unfortunately, that’s where our luck runs out, as the regular JavaScript clock – represented through Date.now() , window. setInterval() and window.setTimeout() – is less precise, returning time only to the nearest millisecond. This is OK in most cases, but not for music. Even worse, the actual callback functions can be delayed by tens of milliseconds when called, depending on other scripts running on the main thread. To get around this problem, Chris Wilson of Google came up with the ‘look ahead’ technique. In short, this technique combines setTimeout() with the Web Audio API to look ahead…

If this article leaves you hungry for more, check out these fantastic resources for the best and latest on Sublime Text. Sublime Text Power User I took a year and a half to discover every part of Sublime Text, and document how you can best use it as a web developer. The result is the book and accompanying video series Sublime Text Power User. Grab the whole thing at SublimeTextBook.com and use code NETMAG for $11 off. Weekly newsletter Every week, Sublime Text Tips sends out a newsletter covering some of the best tips, tricks, packages and themes. Sign up at SublimeTextTips.com. Forums The official Sublime Text website has some fantastic forums to help you can plug into the community – everything from upcoming releases of Sublime Text to new…

Being able to interrogate a function, method, or variable to verify its properties is an important part of any good programming language. Introspection functions were added to Sass in version 3.3.0 on 7 March 2014. These functions allow for evaluation of existence of mixins, functions and variables. They also allow for type check of variables, inspection of values, and dynamic calling of a function. Introspection functions in Sass include: feature_exists($feature) netm.ag/exists-268 Returns whether a feature exists in the current Sass runtime variable_exists($name) netm.ag/variable-268 Returns whether a variable with the given name exists in the current scope global_variable_exists($name) netm.ag/global-268 Returns whether a variable with the given name exists in the global scope mixin_exists($name) netm.ag/mixin-268 Returns whether a mixin with the given name exists…

+ Finding the perfect theme to showcase your content is a bit daunting. I suggest starting at StudioPress.com, the company that created Genesis. With over 50 child themes, it’s the largest repository of themes for Genesis on the web. If you can’t find what you want there, go to Google. There are a ton of quality third-party theme sellers, myself included. Here are some tips for narrowing down the best theme for you: The bottom line? Using the criteria above, find the theme that gets you 90 per cent of what you’re looking for. You can always customise that last 10 per cent. If, after this process, you still can’t find a theme, consider looking for (or building) a custom theme.…