netの December 2016 の目次

Lack of management support. Lack of interest from other devs. Lack of comms between internal design teams. I could continue. @iandevlin Quality assurance. It becomes a hindrance to keep it maintained throughout user acceptance testing and client amends whilst working on components or templates. @danstyled When it specifies a premium font, but client can’t supply it and the developer is expected to pay. @martinthorne A style may have a way of weaving type into a pic that is practically impossible. @Maximusburger When it uses pixels but you code CSS in rems. @chrisrhymes Lack of attention to detail, when it has not been tested in the real world (e.g. required white space around an item). @Bjarni When there’s not enough context about where/when to use an item (and people want to…

What successful ways are there to prove to stakeholders how a11y makes a difference? Wesley Knight, Northampton, UK CB: The A11Y Project (www.a11yproject.com) is an open source project that aims to make accessibility easier for frontend developers. Here are three tips to help put it into practice ... SHOW YOUR EVIDENCE + Connecting stakeholders directly with the evidence is often the best way. Getting them to watch user research with participants with disabilities is really powerful. When time is tight, I’ve edited video clips and shown the highlights. I’ve even done ‘before and after’ videos. EDUCATE YOUR STAKEHOLDERS + Frequently with accessibility, there’s a focus on visual impairments, but there are numerous ways you can exclude people from using your site. It’s also worth pointing out that changes that make…

How do we serve ads in a way that will help our sites get onto users’ whitelists, while providing value to advertisers? Here’s what net’s Twitter followers recommend DEMARCATION “Make sure the advert is clearly marked,” says @woodss. “Hiding them in content distracts the reader but also makes them less visible.” @RichardWilcox concurs: “You have to go obvious but unobtrusive. Annoying users just worsens their perception of the content provider AND the advertiser.” DESIGN Ads don’t have to be an eyesore: you can offer text ads and style them to match your site, or work with advertisers to choose artwork that will match your visual tone. “Make them beautiful, minimal and elegant,” says @KingPixil. @steltenpower points out that ad-blindness will reduce effectiveness if you present your ads the same as…

ANDREW GORMLEY Lead UI designer andrewgormley.co.uk CLOUDAPP Whether I’m bug-spotting or throwing out new ideas, CloudApp is by far the quickest way to share snippets of content with my team, and it’s extremely effective with Slack. Everyone I’ve shared it with loves it. www.getcloudapp.com MUZLI This plugin goes hand in hand with my morning coffee! Muzli is great for catching up on the latest design news as well as supplying me with a range of inspirational content from top design sites and individuals. Recently the company announced it would be partnering with InVision. muz.li FINCH I’m a designer that utilises frontend development skills to rapidly prototype my designs. Finch is useful for sharing my local builds with both my team and other devices for testing. It has made my process…

SCRIPT DATE: 27 Jan 2017 LOCATION: Linz, AT Script ‘17 is a one-day JavaScript event with an international speaker lineup. Bonus: it starts at noon, so there’s no need to drag yourself out of bed early. scriptconf.org AWWWARDS DATE: 2-3 Feb 2017 LOCATION: London, UK Oliver Reichenstein, Mr. Bingo and Paul Lewis will speak at this respected awards scheme’s London conference. Dig out your 3D-glasses before you venture onto the website, or prepare for a headache. netm.ag/awwwards-287 LEAD DEVELOPER DATE: 21 Feb 2017 LOCATION: New York, US Head down to this one-day conference for technical leads to hear pearls of wisdom from engineers at Etsy, FreeAgent, Twitter and more. 2017.theleaddeveloper-ny.com TOPCONF DATE: 28 Feb-2 Mar 2017 LOCATION: Linz, AT Looks like Linz is the place to be for conferences this…

INFO job: Frontend developer w: sarasoueidan.com t: @SaraSoueidan Unusually, net’s Skype chat with Sara Soueidan takes place in a tantalising series of five- or six-minute chunks. It’s not that she’s too busy to talk, but that’s as long as her home internet connection in Lebanon is inclined to give us. “It’s like this most of the time, ” Soueidan smiles. “It actually sometimes benefits me in my work, because I tend to focus on performance a lot more. Whenever I’m building anything I get to test it on an actual bad connection!” She seems remarkably unfazed by the situation, given that she works on the web. As a freelance frontend developer Soueidan has risen to prominence over the last couple of years, building up a strong portfolio of client work, garnering…

SUPERFRIENDLY Dan Mall explains how SuperFriendly stays productive In terms of creativity, one of our main jobs is to assess any new ideas and evaluate them against the current backlog of tasks for the project. If it’s high enough priority, it will be added to the current set of daily tasks. If we’re exploring a small design variation – say, an alternative placement of a header – we’ll create a feature branch off the current repository. For something larger, like a new feature, we tend to work outside the latest build and sketch rough ideas first for us to discuss. When working on SuperBooked, I wanted to explore a way to enable people to quickly say they need work and let their connections know, without spamming them. I turned to…

ELLEN PORTEUS Melbourne-based illustrator and graphic designer Ellen’s trademark ‘mind-melting’, looping GIFs have been used in editorial work, social media and even branding by clients such as Leo Burnett and Sydney Opera House www.ellenporteus.com JAMES CURRAN James is a senior director at global production company Partizan, where he oversees a team working largely on social media campaigns. With his roots in video game design, motion graphics and music promos, he also creates playful GIFs as SlimJim Studios in his spare time www.slimjimstudios.com VALENTIN ADAM French designer and illustrator Valentin works as Playground Paris, and created a GIF every day for a month for his Instagram feed. He is represented by WE ARE GOODNESS www.playgroundparis.com FIASCO DESIGN Designer Tom Grant and designer/frontend developer Nick Lewis both work at Fiasco Design, an…

BROWSER SUPPORT 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 Can I Use web widget (andismith.github.io/caniuse-widget). It explains from which version of each browser the features discussed are supported. EXCLUSIVE VIDEOS Look out for the video icon throughout our tutorials. This issue, we have two exclusive screencasts to complement our articles: one from Marc Andrew showing you how to build a simple prototype with Flinto, and one from Peter O’Shaughnessy’s Samsung colleague explaining how to create a VR web app.…

ABOUT THE AUTHOR EMILY BRICK w: www.emilybrick.me t: @emilybrick job: Senior product designer, BuzzFeed areas of expertise: Product design, HTML, CSS ABOUT THE AUTHOR SAM THURMAN w: www.samthurman.com t: @Sam_Thurman job: Senior frontend engineer, BuzzFeed areas of expertise: HTML, CSS, JavaScript CSS can be a real nightmare. We’ve all seen CSS that has spiralled out of control into a mess of codependent, poorly named spaghetti. Fortunately CSS frameworks like Bootstrap and Foundation are here to help. These frameworks give you the base styles you need to get your project off the ground quickly. But what if you need something more custom? What if your project is a beautiful, unique child that doesn’t conform to the rules, man? SOLID FOUNDATION At BuzzFeed we decided that we needed to create a framework from scratch.…

ALEX DULOZ Alex is the happy owner of SuperYesMore and the Pastry Box Project, amongst other things. From page 68 he explores how to boost your productivity w: www.superyesmore.com t: @alexduloz LISA HASSELL Lisa is a creative director specialising in illustration and graphic arts, and heads up WE ARE GOODNESS. From page 76 she uncovers the art of the GIF w: www.wearegoodness.com t: @lisahassell KIM GOULBOURNE Kim is a designer and developer who creates experiences at Bourn and designs at thoughtbot. She curates our gallery this issue, from page 44 w: www.kimgoulbourne.com t: @kimgoulb NICK BABICH Nick is a software developer who’s passionate about user experience. On page 104 he explains how to design responsive and device-agnostic forms w: www.babich.biz t: @101babich…

CLINTON PANTSUIT + How do you maintain consistent design when you have to build and release products fast enough to keep pace with an election campaign? You need a design system, and in the Clinton campaign it’s called Pantsuit. Creator Mina Markham explains how she made Pantsuit while also redesigning Clinton’s main site. netm.ag/clinton-287 JAVASCRIPT 2016 + With so many different tools and frameworks, the way we use JavaScript today is complex and there’s a great variance in users’ satisfaction levels. Sacha Greif wanted to quantify this, so he conducted an 89-question survey that had over 9000 responses. Here’s what he discovered. stateofjs.com RWD REVIEW + In this podcast Karen McGrane is joined by the editor and art director of Creative Review to discuss how to make an image-led publication…

SIDE PROJECT OF THE MONTH INFO job: UX developer w: tmaslen.com t: @tmaslen net: What is Tweetgest (tweetgest.com)? TM: Tweetgest’s purpose is to ‘make the crowd easier to follow’. Twitter is an amazing tool; entire communities interact on a daily basis – and yet getting yourself into a position where you know who to follow or have the time to sift through all the tweets to find the really interesting stuff can be too daunting. This is where Tweetgest comes into play. The name means a ‘digest of tweets’. Each ‘gest’ will follow a specific community and email you only the most interesting content. net: How does it work? TM: I use all the cool tech: a series of Node.js scripts that run within Docker, hosted on AWS EC2. The website…

What we think…

It’s a weekday. I’m standing in my kitchen, jumping around between the counter-tops. Jam on toast, school uniforms, packed lunches, a crazy juggle to get everyone ready. In a moment of clarity, I realize I need to hear something to set a calm mood for the day. “Alexa, play ‘Michael Bolton’ on Spotify”. The kids groan, and in seconds ‘Can I touch you there?’ fills the room with Michael’s dulcet tones and 1980s ideas about romance. Aha! Mood perfection and child annoyance is complete. No screen, no looking, no physical movement, and most importantly, no touching. No touching, Mr Bolton. This is now possible with Amazon’s Echo, an always-listening Wi-Fi speaker. It is selling by the bucketload in the US, and by the time this is published it should have…

Christopher Doyle & Co. www.christopherdoyle.co KIM GOULBOURNE Kim is a designer and developer who creates experiences at Bourn, and designs at thoughtbot w: www.bybourn.com t: @kimgoulb Australian Design Radio (ADR) is a Sydney-based podcast that provides conversations and commentary on Australian design. The team recently briefed Christopher Doyle & Co to refresh its brand identity and develop a richer digital experience. Referencing the visual language of equalisers and the shape of Australia’s landmass, CD&Co developed a living, sound-responsive identity based around a bold, simple logomark. Creating a seamless player experience on a website is an arduous task, but for this project CD&Co managed to design and build a simple, beautiful audio player that blends perfectly with the information displayed below. When an episode is played, the logo responds to the rhythm and…

Gulp www.gulpjs.com An incredibly powerful tool when it comes to dealing with repetitive tasks. There’s pretty much nothing that you can’t automate with gulp, from minifying your files to deploying your whole project. Code Climate www.codeclimate.com They say it best: “Healthy code ships faster.” Code Climate’s mission is to watch your code and let you know where it may break before it actually breaks. Travis CI www.travis-ci.org If you’re totally new to the world of code testing, Travis CI may seem a bit daunting at first, but it’s definitely worth investing some time and patience in. Automate all your tests on the fly, directly from your GitHub repo. Powerful. Nodemon www.nodemon.io Never restart your Node server after your app has been updated. Nodemon watches your files and reloads the server…

To celebrate the 2016 Rio Olympics, we created series of five ridiculously rubbery animations. The project was a great chance for us to be playful with 3D techniques; an area we are keen to do more in. We went through many ideas, finally settling on popping sports character skits. Each Olympop is based on a different sport and uses awkward balloons with felt tip pen faces for athletes. The balloon theme was helped along by the catchy pun we settled upon for the title. Some narratives are more ‘ambient’ – observing the environment surrounding an Olympic sport – while others focus on the game itself. Almost all the animation is done with hold keyframes and all the frames are manually posed, which makes the process very similar to stop motion.…

ABOUT THE AUTHOR PETER O’SHAUGHNESSY w: peteroshaughnessy.com t: @poshaughnessy job: Developer advocate, Samsung areas of expertise: Web APIs, mobile, VR/AR q: what’s your preferred way to procrastinate? a: Tweaking the CSS of my presentations – usually until two minutes before the talk! View source files here! All the files you need for this tutorial can be found at netm.ag/VRgit-287 VIDEO Samsung developer advocate Diego González has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/vrvid-287 For decades technology fans have dreamed of the ‘Metaverse’: a shared, inhabitable, virtual universe, limited only by our imagination. It sounds like science fiction, but the virtual reality internet is now starting to become a reality. Imagine a chat app that could launch an instant virtual meeting, transporting yourself and your colleagues…

ABOUT THE AUTHOR MARC ANDREW w: www.sketchcamp.io t: @sketchcampHQ job: UI designer and author areas of expertise: Design, prototyping q: what’s your favourite way to procrastinate? a: Finding a new planet on No Man’s Sky Exclusive offer! EXTENDED TRIAL net readers can get a full 28-day Flinto trial. Just email hello@flinto.com VIDEO Marc Andrew has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/flintovid-287 Prototyping is playing an increasingly vital role in the digital creative process, and has pretty much become an essential part of the workflow for a modern-day designer and developer. The situation is very different to when I started in the industry many years ago, where your role as a designer pretty much came to a stop – give or take a few revisions…

ABOUT THE AUTHOR BRAD CERASANI w: bradcerasani.me t: @bradcerasani job: Director of web services, Black Pixel areas of expertise: Design, frontend development, memorising hip-hop lyrics q: what’s your preferred way to procrastinate? a: Cleaning. Procrasticleaning View source files here! All the files you need for this tutorial can be found at netm.ag/IoTGit-287 VIDEO Check out a video of this immersive photo viewing experience in action at netm.ag/huevid-287 In 2008, the number of internet-connected things exceeded Earth’s human population. At home, the Internet of Things (IoT) is finding its place in people’s everyday lives. One such example is the Philips Hue wireless lighting system. Hue light bulbs look and function like any other bulb, but can be controlled wirelessly with the Philips Hue app or API. Each bulb contains three different types…

+ When someone visits your web page, which resources load first? The order in which files are referenced in the HTML matters, but browsers also have their own ideas about what kinds of resource should have priority. Preloading is one way to take some of the control back. It can be useful on pages that reference large numbers of JavaScript files. Even if they’re placed towards the end of the document, they can tie up connections that you might prefer to use for lower-priority resources, such as images. Preload allows you to tell the browser about files you know will be needed but that tend to be discovered late – font files and CSS background images are good examples. However, it can also be used to get images referenced in…

CONTACT US @netmag /netmag netmag@futurenet.com net.creativebloq.com medium.com/net-magazine BEHIND THE COVER This issue’s Cover Feature explores techniques web designers can use to boost their productivity. The cover illustration features a web page (which sits in the centre), surrounded by designs representing all the different processes and stages that go into creating that page, and how you might streamline or track them. Here, the designer behind the illustration explains how he did it: My illustration process always starts with rough sketches – I made two for this cover. The idea is to show different web developers’ workflows. I only start working in front of the computer once an idea/sketch is approved. I make the main elements in Adobe Illustrator first, and then I transfer to Photoshop to apply textures and do the brushwork.…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... JONAS DOWNEY Jonas is a product designer at Basecamp in Chicago w: www.jonas.do t: @jonasdowney MIKE HORTON Mike is a UX/UI designer for New York digital agency SWARM w: www.themikehorton.com t: @TheMikeHorton KATHERINE LIU Stanford student Katherine was a product design intern at Facebook w: www.katherineliu.me t: @tokatherineliu CLARE BARNETT Clare is a user experience designer and accessibility consultant working in government t: @clarebarnett QUESTION OF THE MONTH What are the biggest challenges of transitioning from another career to UX/UI design? Neil Ranada, San Diego, CA MH: When I transitioned from video producer to product designer, the UX bootcamp I went through with Bloc (www.bloc.io) was a great foundation. But there was still a lot of work required – I spent the better part…

Many people in technology want to use their skills to help others. However, creating a digital product that improves society is harder than it sounds. Countless social good hackathons have been organised, yet many products created during these events fail to become anything more than a mention in a recap article. I’d like to explore the reason why this experience is so common and how to avoid it. Technology has impacted our lives a lot, especially in the last century. Just look at the size of a 32GB SD card now versus 5MB in 1956. It’s mind-blowing to think that they had to airlift storage drives smaller in disk space than a modern high-res photo. The impact of technology was felt across different fields. Bullet trains are amazingly fast. We…

MATT COOK Digital producer www.mattecook.com Let everyone know it’s coming beforehand and don’t bring it up during project turmoil. You want to create a safe space for honesty, not draw lines in the sand. Start by asking participants to phrase the pros and cons of the project in ‘I’ statements to avoid finger-pointing and scapegoating. Allow for group discussion of individual insights, and make sure you have a clear facilitator for the meeting. ROBERT JOLLY Digital project manager @iamjolly As an independent project manager working with other independents, post-mortems can still be quite valuable, even if team members on the next project are different. Ideally, effective postmortems involve everyone who was active on the project. Before the meeting, I like to identify the main discussion points as well as set…

Build in Amsterdam www.buildinamsterdam.com Cantor Fine Art is a new gallery based in West Hollywood, run by a father and son team with a diverse set of skills, but similar taste in art. They reached out to their favourite agency, Build in Amsterdam, to help them define their online presence. From the homepage you can quickly see the gallery’s current and upcoming shows, dive deeper into longform stories about recent exhibitions, explore art pieces in depth and preview featured artists. “We wanted storytelling and design to be part of our focus, which is something you don’t see a lot from galleries,” says co-founder and son Sam Cantor. The white background feels inspired by the interior design of a typical gallery, with special emphasis placed on typography, photography and interactive elements to…

This month ... INDIE CINEMAS PROFILES BENJAMIN CHRISTINE Benjamin is head of design at investment crowdfunding service Crowdcube w: www.benjieboo.com t: @Benjieboo AL POWER Al is a designer and frontend developer at DabApps in Brighton w: www.alpower.com t: @alpower SHAMAL RAJAPAKSE Shamal is a creative director and frontend designer at EL89 in Sri Lanka w: www.el89.com t: @EL89studios BRIEF We’d like you to design a website for an independent cinema. It could be an old-style place that’s been going for years, or a brand new, architect-designed venue. Think about the visitors that will be attracted to your cinema, and what they are looking for on your site.…

Reels Colombo is an independent cinema located in the heart of the commercial capital of Sri Lanka. The revamped PHP-based website and online ticket counter have been created with three aims in mind: to capture the essence of the Reels cinema; to ensure easy usage across all devices; and to convey that this is a high-class establishment. In-keeping with these requirements, this site was built mobile-up, following a greyscale, off-white theme complemented by dark orange accents. The components across the site have been arranged in a responsive layout to accommodate most devices. Base-level filtering options are displayed, with more advanced filtering options easily available. While the site provides access to a range of information, a three-step booking process makes getting tickets simple across all user demographics. CLOSE UP (1) Navigation…

What’s on your desktop? Slack is always open somewhere, and Sketch – I use it to compile my thoughts. I like Apple Notes as I use an iPad Pro with a Pencil to take notes and sketch throughout the day. What little things make your life worthwhile? It’s important for me to keep making things. I’m lucky to live in San Francisco where I’m constantly inspired by others and asked to participate in interesting projects. We’re also surrounded by incredible natural beauty – it’s a good way to disconnect and recharge. What do you have on the walls? At work, there’s an incredible amount of work our teams have created; things that inspire us, our hosts, art and ideas. What hours do you work? I’ll check emails early-morning, but work…

KATIE SYLOR-MILLER, ETSY As part of the design systems team, you work on Etsy’s Web Toolkit (the code used for the website’s frontend). What are your considerations when adding new features to the codebase? KS: A lot of our new features come from internal requests. We’ll run ideas by the rest of the Toolkit team and sometimes reach out to a larger audience to gauge if a new feature is something that multiple teams can use. Since our code is used by everyone, we try to be strict about what we include, since theoretically it is adding to the payload of every page on the site! Deployment is paramount to an application’s efficiency. How do you approach this? KS: You start in Git with a new commit. Then you run…

GIF design can be challenging for illustrators and developers alike. Here is a list of resources that should help you get off to a strong start. Ezgif www.ezgif.com A fast, online animated GIF maker and editor, Ezgif offers a good compression tool to reduce file sizes with ease. Gifsicle www.lcdf.org/gifsicle If you’re feeling particularly techy, Gifsicle is a great little command-line GIF tool. Giphy www.giphy.com/create/GIFmaker A lot of GIFs are videos broken down into frames. Giphy is very good at doing this and it’s both free and simple to use. After Effects tutorial netm.ag/AEtut-287 Learn everything to make your own animated loops with this tutorial on using After Effects. Web Accessibility www.webaccessibility.com Wise up on accessibility with this essential guide to best practices for developers and designers.…

ABOUT THE AUTHOR MATTEO PELUCCHI w: www.fingo.co.uk t: @mpelucchi90 job: Frontend developer, Fingo areas of expertise: Frontend development, web animations and JavaScript q: what’s your preferred way to procrastinate? a: Playing table football in the office FACT FILE ALTERNATIVES Velocity.js (velocityjs.org) is a very good alternative for GSAP. It works with and without jQuery, is fast and useful if you have to animate SVGs or create a one-page scrolling website.…

+ ZigBee is a wireless protocol commonly used for mesh networks with simple data requirements. In a mesh network, nodes are interconnected and each acts as a wireless transceiver and repeater. This means nodes can receive and transmit data to and from neighbouring nodes, allowing a network to scale to great numbers. ZigBee supports tens of thousands of nodes per network and consumes very little power, but it can only transfer simple packets of data. As a result, it is a good candidate for wireless sensor networks, security systems, and smart lighting. Bluetooth, on the other hand, is primarily used for point-to-point networking where one device sends data to another. The standard is ubiquitous in that most mobile phones, tablets and computers today ship with Bluetooth support included. ZigBee does…

ABOUT THE AUTHOR NICK BABICH w: babich.biz t: @101babich job: Software developer areas of expertise: Interface design, UX q: what’s your preferred way to procrastinate? a: Daydreaming View source files here! All the files you need for this tutorial can be found at netm.ag/formpen-287 RESOURCE Chris Coyier’s A Complete Guide to Flexbox is a fantastic resource that breaks down each of the 13 different Flexbox properties: netm.ag/coyier-287 We live in a mobile-internet era. Users love to surf the web on their phones. Therefore, more focus is required to make your sites mobile-friendly – and this is especially true for things like forms. Whether it is a signup flow or a multi-view stepper, forms are one of the most important components of digital product design. They are a necessity and often a…

ABOUT THE AUTHOR ALEX PAINTER w: www.nccgroup.trust t: @alexrp job: Web performance consultant, NCC Group areas of expertise: Web performance, HTML, CSS q: what’s your preferred way to procrastinate? a: I’ll tell you tomorrow … RESOURCE Background images tend to get loaded and displayed even later than images referenced in the HTML. This article explains how to make them appear faster: netm.ag/background-287 Where would websites be without JavaScript? The preeminent programming language for the web has helped turn the internet from a sea of static documentation into a rich, interactive experience. But have we come to rely on it too much? A web page may contain references to dozens of JavaScript files, all adding features and functionality designed to enhance the user experience. However, some years ago we realised that scripts…