Inhoudsopgave van May 2017 - net

LOSSLESS WEB NAVIGATION WITH TRAILS A team at Mozilla are working on a project to evolve the model of tabbed browsing into something that preserves information about how you got from one page to the next via a ‘trail’. The aim is to make the browser into a tool that “enhances our cognitive process, rather than increasing our cognitive load.” netm.ag/trails-292 DO WE NEED A NEW HEADING ELEMENT? Jake Archibald discusses the prospect of a <h> element, which would have some benefits around making headings portable within your document. If you’ve ever wondered why it’s so difficult to get such things implemented, this article and discussion provides an interesting insight. netm.ag/heading-292 WHAT’S AMP? Episode 248 of ShopTalk Show is all about AMP, the open source web components format and library…

SIDE PROJECT OF THE MONTH INFO job: Freelance designer/ developer w: griffinjohnston.net t: @GriffinJohnston net: In a nutshell, what is #GiveProgress? What inspired the idea? GJ: Give-progress.org is a website that lets its users create a digital wishlist of high-quality, vetted charitable organisations. They can send these wishlists to friends and family to ask for donations instead of gifts on holidays, birthdays and so on. I came up with the idea after Trump won the election. The holidays were coming up, and I started thinking about all the money that would go into buying gifts, and how that money might be better spent. net: How did you go about putting it together. Was it a collaborative effort? GJ: I started by sending out a short survey to friends and colleagues to gauge…

What we think (1) The Opera browser has a new refresh of its UI in the developer stream, complete with a new look and more features. Head to netm.ag/ opera-292 for more info. (2) Find out how to learn frontend engineering and what tools you should be investing in (netm.ag/frontend-292). (3) New from Airbnb design is Lottie (netm.ag/lottie-292), an iOS, Android and React library that renders After Effects animations in real time. (4) Ever wanted a quick and free way to create beautiful vector designs? Check out the beta version of Vecteezy Editor (netm.ag/vecteezy-292). (5) Version 3.0 of datedropper (netm.ag/datedropper-292), the award-winning jQuery UI datepicker, gives you completely redesigned scripts. (6) It’s not out until October 2017, but that doesn’t stop you pre-ordering New York Bestseller Eric Ries’ The Startup…

In 2015, I was asked to help establish and mature a new department at Lego focusing on the UX of its enterprise software. Around one and a half years into the process, I’ve learned the following: 1 GET LEADERS TO COMMIT A UX department will only be successful if it has commitment from leadership. And not only a ‘yeah sure, let’s do that’ – the commitment should include economy, a willingness to hire, and be long-term. And most importantly: it cannot dwindle when things become hard and painful. 2 CHOOSE ROLES CAREFULLY A new department is like a blank piece of paper. You can organise it any way you like, and with any roles you prefer. But once it’s done it is difficult to change, so choose how you organise…

On a rainy day, when time permits, I try to curl up on the couch with a nice design book. It’s a good habit to get into to read or re-read certain design books and soak in the process side of things. It’s self-care. Rarely during deadlines do we get to grow ourselves as designers. While we continue to learn, adapt and be agile during a project, we don’t always have the luxury, timeline, or support from clients to learn and grow our processes as designers and developers. When we consider design projects and process, I think a lot about timelines and stages, but mostly I think about problemsolving. That’s what we’re doing, after all. Here are some books that will help you re-evaluate and improve your problemsolving process. Sprint…

APR 2011 Lands first web design project OCT 2011 Got his Dribbble invite AUG 2012 First job/first dashboard projects JAN 2013 Became fully focused on rich web applications/dashboards SEP 2013 Joined Badoo and moved to London AUG 2014 Joined Tapdaq as a lead designer DEC 2014 Leads every design decision in every Tapdaq product JAN 2015 Became fully remote – spending every month in a different country FEB 2015 Created first UI kit – Night & Travel MAR 2016 Released Dashboard UI Kit (sold over 1,500 licences)…

Clearleft shows us the sketches and photography that made the new site possible 1) During an immersive hack week we looked at inspiration and sketched out various areas for the site. (2) We examined aspects of the visual language including typography, application of the brand and how we represent individuals. (3) We explored our case studies in depth, asking compelling questions that resonated with our personas and matched their needs. (4) We revamped our in-house photography by creating a brief and shooting it all ourselves; a huge upgrade on our existing site. (5) We iterated through loads of designs while maintaining the basic visual language – strong typography, minimalist and confident. (6) Elements of the brand story bubble up across the website, including the bold tone of voice for headings…

ABOUT THE AU THOR RAY VILLALOBOS w: www.raybo.org t: @planetoftheweb job: Senior staff author, Lynda.com areas of expertise: Frontend and fullstack web design and development Layout on the web has been a nightmare so far, because the tools we’ve had for even the simplest layout tasks have been wholly inadequate. The browsers laughed in the face of your attempts to lay something out consistently as they thwarted your feeble attempts at vertically centering things ... how dare you? We have worked around it, stressed over it, lost hours of sleep and welcomed anything that made it simpler. Well, all that’s about to change for the better with this new version of Bootstrap. If you live on the bleeding edge of frontend development, you won’t mind using the very latest tools like…

ABOUT THE AUTHOR MAX IGNATYEV w: sympli.io t: @MaksimIgnatyev job: CTO and founder, Sympli areas of expertise: iOS/Android development, backend development Anyone who has worked on a web or mobile app development project has experienced it: the seemingly endless back and forth between developer and designer for all things related to the design. Developers asking for fonts, sizes, positioning and colours. Designers sending the latest updates of images and assets. Files sent via email, Dropbox, Google Drive, Slack – you name it. It’s a messy and time consuming process and, inevitably, things are lost in the shuffle. Well, we’ve seen it too. So we decided to do something about it with Sympli (app.sympli.io). We wanted to offer a simple way to connect designers and developers so that specifications, assets, notes and…

ABOUT THE AUTHOR JEREMY WAGNER w:  www.jeremywagner.me t: @malchata job: Performance engineer, General Mills areas of expertise: Frontend development, web performance Have you thought about the size of your site’s CSS? If your style sheet is ballooning, it could be delaying page rendering. Though CSS isn’t the largest asset type you’ll serve, it’s one of the first that the browser discovers. Because the browser is blocked from rendering the page until CSS is downloaded and parsed, you want to keep it lean as possible. Here’s some tips to help you get there. 1 USE SHALLOW SELECTORS Your parents told you that shallowness isn’t a virtue, but when it comes to CSS, they’re wrong. Used consistently, shallow selectors can trim kilobytes off big style sheets. Take this selector: As well as…

ABOUT THE AUTHOR MARK HYNES w: www.errozero.co.uk t: @errozerodesign job: Web developer areas of expertise: JavaScript, HTML5 apps and audio View source files here! All the files you need for this tutorial can be found at netm.ag/synth-292 In this tutorial, we are going to use JavaScript to create a web-based synthesizer instrument that can be played with the computer keyboard or a MIDI device. The Web Audio API will be used for sound generation, jQuery will handle events like button clicks and we’ll use a bit of Handlebars.js to help out with the HTML templates. All the files you need can be found in the GitHub repo at netm.ag/synth-292. There are no special build tools required so it’s really simple to get up and running: just download the files and place…

ABOUT THE AUTHOR RAÚL JIMÉNEZ w: www.bytedefault.com t: @elecash job: CEO, Byte Default areas of expertise: Angular, video streaming, frontend architecture Video on the web has been gaining relevance ever since Adobe made it available worldwide through the Flash plugin and websites like YouTube became popular. Nowadays, video continues to grow every year – some predictions indicate that by 2019, 80 per cent of traffic on the web will be video streaming (netm.ag/traffic-292). The most relevant APIs are Media Source Extensions (netm.ag/MSE-292), which allows us to stream adaptive video to the users with HTTP Live Streaming (HLS) and dynamic adaptive streaming (DASH), and the combination of WebGL with WebVR. Together these make it possible for us to deliver 360-degree and VR video. In this tutorial, I’m going to walk through an…

CONTACT US @netmag /netmag netmag@futurenet.com net.creativebloq.com medium.com/net-magazine BEHIND THE ILLUSTRATION Often in illustration we are asked to visualise the abstract… whether it’s a feeling, a far away future or a new concept. This month’s commission was no different – how best to communicate the 15 modern APIs we need to keep an eye on? The idea came very quickly to me but required a little fleshing out. What if there was a technological crystal ball that allowed us to see into the future? What if it cut through all the noise and showed us the essential tools that we will need, without having to sift through all the stuff we don’t. I love testing myself with new illustrative styles and this piece is no different. I wanted to keep the…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... SURAJ KIKA Suraj is founder and group CEO of Jadu, a global content management system provider w: jadu.net t: @surajkika SYD LAWRENCE Syd is CEO and co-founder of The Bot Platform, a platform for building bots on Messenger w: Thebotplatform.com t: @sydlawrence QUESTION OF THE MONTH What do you think the limitations of chatbots will be? Ben Nipper, Lincoln SL: Even though I’m the CEO and co-founder of The Bot Platform, I’m not a ‘hyper’; I don’t think we’re on the verge of bots taking over. I also don’t think we’re even at a point where AI is useful in these situations; I believe we’re far from a machine passing the Turing test. I’m not saying it will never happen, but we’re years away from it.…

BEYOND PIXELS My love for photography began at five years old when my mother let me take a whole roll of photos with her 126 Kodak Instamatic. Getting those pictures back was like magic! At seven, I got my first camera: a Kodak Pocket Instamatic that used tiny 110 film. Then, at nine, I got a 35mm SLR Minolta XG 1 with a 45mm lens. That was the camera that taught me how to see. I became a keen observer of life; obsessed with capturing ideas and moments. During college, I discovered my passion for fine art photography and began taking self portraits to make political statements about gender roles in society and the idea of ‘women’s work’. I even worked out a system of coordinated mirrors, a tripod, and…

Progress in web design techniques shows no signs of slowing up. As the proponents of the early web are staggering round with 1,000-yard stares, you can’t help but feel a little overawed by the plethora of techniques and frameworks available nowadays. People are championing the new approaches that are about to change the way we work once again, for example Flexbox (already available) and CSS Grid. Rachel Andrew and Jen Simmons have been encouraging developers to look at these technologies now, in readiness for their arrival. There have been murmurings and posts in recent months from some of the current web industry’s founders – such as Andy Clarke and Jeffrey Zeldman – asking if it really needs to be this complicated, and whether web it losing its soul or becoming…

Sensational design and superb development SENONGO AKPEM Senongo is a New York-based dsigner,illustrator and art director.He's also the founder of Pixel Fable,a collection of Afrofuturist stories w: senongo.net t:@ senongo The Outline aims to ‘tell the right stories for right now’. An in-house design team worked with New Yorkbased agency Code and Theory to design its striking site. “We built a custom CMS so the ‘template-isation’ is quite smart and easy to use,” says Stephane Elbaz, design director for The Outline. “The system Code and Theory helped us put together gives a lot of options for layouts and colours. It permits diversity without losing the global consistency of the design aesthetic.” There are a number of repeated, highly visible design elements, and pages with infinite scrolling mean the mix of story…

The site for the upcoming Max Cooper album Emergence is a joy of minimalism and gorgeous visuals. As not only a musician but a doctor of computational biology, Cooper wanted to create a site that served as a guide and companion to his live shows. “Max has got such fantastic visual imagery, we let that be the star and kept the interface as clean and minimal as possible,” says Henry Gibson from Somerset studio Engine. The aim was to cater for both casual visitors who might not know Max Cooper’s work yet, and the artist’s core fans who wanted an in-depth resource. “We also wanted to retain the structure of the show and the flow of the pieces from one to the next,” adds Gibson. “So we tucked away all…

Ahoy! is like an Airbnb for short-term boat renting, whether you are an owner of a huge yacht for parties or running a local boat renting business to the closest island, it’s open for everyone. The web app is location-based, so the users are always getting the available boat offers from their current surroundings, but they can also search manually of course. The app provides rich offline experience as well, so for instance a family can download the data for free at the hotel and then they’ll be able to find all of the best boat deals right there on the shore without eating up their data plan. Thanks to the service workers the users can also receive some exclusive last-minute notifications, which might help to fill up those empty…

ABOUT THE AUTHOR JAMES CHAMBERS w: Boords.com t: @boordsapp job: Co-founder and CTO areas of expertise: Design, dev, data Boords started as a conversation over a burger. Myself and childhood friend – and fellow founder of animation studio, Animade – Tom Judd, were bemoaning the painstaking process of formatting and editing storyboards, and wondering why on earth there wasn’t an easier way. Then the thought struck us – why don’t we make one? Twelve months later, Boords has been helping creatives the world over save time, hassle and the occasional desire to break a computer. Boords is a web-based storyboarding app that makes it easy to create perfect storyboards quickly and easily. For us, it was the beginning of the end of those familiar old pain points of copying, pasting and…

SK: Any framework, including a CMS, is going to have a set pattern you need to follow to benefit from its features. KNOW HOW + It’s key to know how to manipulate features in your CMS to enhance the UX. You can make any good CMS work hard for you. + PICK THE RIGHT METHOD Jadu’s out-of-the-box templates follow Atomic design methods (atomicdesign.bradfrost.com), which allows for modular, reusable components. + USE TOOLS Templating engines like Twig (twig. sensiolabs.org) help designers craft beautiful experiences, as do tools like patternlab (patternlab.io). At Jadu, we’ve open sourced our design system Jadu Pulsar for creating UIs; that’s been made possible by tools like Twig.…

If you’re intending to take a new step in your career this year, it’s a good idea to consider what skills employers are looking for. We asked the @netmag followers what skills they think are in highest demand at the moment. BUZZWORDS RULE A few people mentioned UX as a sought-after skill. “Anything with a saleable buzzword attached,” said @thepixelgrid. “Being ‘good at UX’ seems to be a hot-button as companies try to save their bounce rate!” @simonminter agreed, ”though it has no real meaning.” DESIGN SYSTEMS The implementation and maintenance of design systems was @Benjieboo’s pick, seconded by @mattecook. Top picks for him are “designing animation within a design system, and developers who can collaborate on design via in-browser prototyping.” @simoncarr chose SVG use, OnScroll animations as well as…

TIMOTHY SMITH Designer and developer theboldreport.net CSS LAYOUT NEWS With new tools like CSS Grid Layout and Flexbox, it can be difficult to know what to read to stay informed. Rachel Andrew curates this incredibly helpful newsletter with links to tutorials, conference talks and workshops, and other layout-related news. csslayout.news CSS REFERENCE I’ve been writing CSS for ten years but I forget properties and rules all the time. CSS Reference is a guide to some popular properties with live examples you can play with. The search and collections grouping helps you find what you’re looking for quickly, too. cssreference.io PIGMENTS Pigments is an Atom package that displays colours in CSS, Sass, Less and Stylus files. It’ll even display the colour of variables. It’s easy to search for colours, see a…

LONE STAR PHP 2017 DATE: 20-22 April 2017 LOCATION: Dallas, US Back for its seventh year, Lone Star PHP is once again packed with a great line-up of speakers. The Training Day returns by popular demand too, offering hands-on help to attendees. netm.ag/lonestar-292 GENERATE DATE: 27-28 April 2017 LOCATION: New York, US Brought to you by this very magazine, Generate heads back to New York for two days of insight, inspiration and practical advice. Get your tickets now. netm.ag/generate-292 SDD 2017 DATE: 15-19 May 2017 LOCATION: London, UK SDD 2017 features over 100 in-depth sessions and workshops on a wide range of key software development topics, delivered by 40 world-class speakers. netm.ag/SDD-292 BEYOND TELLERRAND DATE: 15-17 May 2017 LOCATION: Dusseldorf, Germany Design, technology and inspiration will once again be the…

INFO job: Information architect w: abbytheia.com t: @Abby_the_IA Websites used to be reasonably straightforward things, but as the web marched forward from niche interest to omnipresence, things got more complicated. Not merely in terms of technology, but also in terms of volume. Back in the Nineties a corporate site could get away with being made out of flat pages and a sidebar navigation. Today, though, it might consist of hundreds of pages, if not thousands. Organising such massive web presences is an increasing challenge; not merely the nuts and bolts of taxonomy, but also the messier business of implementing it all within organisations where political and technological arguments can hamper the process. People can agree that they need a better website, but no one likes to be told that they’ve been…

AMY PARKER Co-owner, Fore Design foredesign.co I had a client who wanted a minimal, ‘Bauhausinspired’ website. I’ve always been a minimalist but this particular client meant what they said: absolutely nothing extraneous whatsoever. I really had to push myself to create a unique, interesting design that presented the content as simply and purely as possible, with every single element on every page serving a purpose. Now I try to apply that principle to all of my work. MELANIE DAVEID Product design lead, Onefootball melaniedaveid.com The brief was to create a running app for a leading sports brand, and I didn’t have a lot of experience in designing products back then. Plus, the brief was rather vague. A feeling of panic was slowly rising because this product was going to last.…

This month ... BOAT HIRES PROFILES BARBARA MARCANTONIO Barbara is a freelance UX/UI designer. She works with digital agencies all over the world w: dribbble.com/grarighe t: @grarighe PE TER JAVORK AI Peter is a UI designer and creative athlete at the Adidas Group w: peterjavorkai.com t: @javpet ELLIS ROGERS Ellis is a graphic/web designer from Milton Keynes, England w: ellisrogersdesign.com t: @EllisDesigner BRIEF This month we’d like you to design a website for a boathire company. It could be a small company that hires out narrowboats for use on the canal that goes through your village, or a big organisation that lets you charter yachts somewhere fancy; the choice is yours.…

JAN LOSERT What’s on your desktop? Wacom tablet, chalkboard globe, cinema display and a mug with ‘Don’t fucking procrastinate’ written on it. Little things that make your life worthwhile My Crossfit training in the morning, days when I release something new to the world or post something on Dribbble and definitely every day I spend in a different country. What will you do for lunch? I’ve recently started to live healthy so I’d say salad or some decent pasta. What hours do you work? I’m in constant process, I think about design all day. But I usually become super productive between 8pm to 3am. All the best projects of mine happened during the night. What else do you do in the office? Shoot Nerf guns at my colleagues. I love…

JAN 2016 We research our visual and verbal brand language as part of the rebrand. FEB 2016 We conduct stakeholder interviews (on ourselves) and collate the findings. APRIL 2016 We flesh out brand, personas, user journeys, messaging and tone of voice. SEPT 2016 Hack week: collating discovery findings, creating principles, refining the project canvas, sketching. OCT 2016 Case studies are pieced together. NOV 2016 We create the underlying infrastructure for the IA to futureproof the site. DEC 2016 We put Fractal to use and create the components for our pattern library. JAN 2017 We piece the pages together in Craft CMS. FEB 2017 We open up our work to the wider world, with many more releases to come.…

Navs and navbars You now have to add nav-items to nav elements and nav-link to links. You can use these with or without list elements. There are many more alignment options now and it’s super-simple to control the alignment within navs . nav-fill will make the links fit the horizontal space, but the space of each link will be different depending on the width of the text. If you want the spacing between the links to be the same, you can use nav-justified . Navbars used to be a real pain to style, but now they’re a lot easier to handle with regular background colour classes. You can simply use a bg-color class to change the colour of the background, and if you don’t like those colours, you can use…

ABOUT THE AUTHOR STEVE FAULKNER w: southpolesteve.com t: @ southpolesteve job: Director of engineering, Bustle areas of expertise: Serverless architectures, JavaScript development, product engineering In 2016, we witnessed the rapid rise of a new buzzword: serverless. At face value, the term makes it sound like servers no longer exist. Of course, this is absurd. Every serverless application is running on a server somewhere. What has really changed is that servers are no longer a primitive exposed to the application developer. Platforms and services have matured to the point that entire applications can be successfully built without deploying code to your own servers. While the term ‘serverless’ may be misleading, the value of delegating server management to a third party is very real. The dream of spending less time worrying about servers…