Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!

Home Explore Net_Sep 2017

Net_Sep 2017

Published by Saigon Design Center, 2019-01-10 13:31:58

Description: Net_Sep 2017


Read the Text Version

Profile Profile DogstuDio This canine crew from Belgiumpride themselves on making good shit every single day Founded in 2006 in Namur, Belgium, Dogstudio ( has grown from an informal group of four to a team of 35 people crafting digital experiences the Belgian way. Priding themselves on making good shit every single day, Dogstudio has accumulated an impressive roster of clients as well as winning plenty of awards, and runs its own annual festival. The studio has recently gone international, too. We spoke to studio co-founder Henry Daubrez (AKA Border) to discover some of their canine secrets. How and why did Dogstudio come together as a pack? Dogstudio was founded 11 years ago by two brothers and two childhood friends. The initial goal was just to join different skills, work on cool graphic design stuff and do it with people we liked to work and have fun with. Back in the day, it was mainly a matter of doing a lot of branding and printed stuff; web design still being super marginal at the time. When thinking about it, it’s actually funny to see how much this trend changed over the years to the point of a complete flip over and us becoming a digital-first agency. What kind of projects do you have on the go at the moment? We’re currently starting a project for Here Be Dragons in New York. Those crazy guys september 2017 51

ShowcaSe Profileare probably the current best virtual reality conferences to an incredible 15,000 people. KIKK Dogstudio’s own KIKK festival has beenproduction company with their super This year it’s going to be held between 2-4 running since 2011impressive knack for storytelling. November 2017. then, thanks to our friend and now partner They deliver breathtaking experiences Every year, based on the decided theme, Nico, who moved to Chicago with hisfor the likes of the Ghost In The Shell movie, we go and explore the best visual concept whole family to start the adventure.the Mr. Robot TV show and The New York fitting in; with new branding every year!Times to name but a few. Those guys are Last year’s theme was ‘interference’ and it Things are already looking great andalways a step ahead and we’re super all started with a soap bubble. Why? we’re pretty confident about the futureexcited to collaborate with them. Because the colours we can see on the with a lot of new opportunities and an surface of soap bubbles are actually light increasing momentum. Back in Belgium, we’re starting to work interferences. Boom… and well... youon a virtual reality game for a huge burger know… bubbles look great and shiny. We Which tools do you enjoy working with?brand and we’re also starting on some prototyped the WebGL bubble, started to Weirdly… markers and sketchbooks neverstrategy and product design for a big design screens while early coding some felt as hot as they do now. We spend somobility company. other kind of interferences: text glitches, much time trying new tools on the image glitches, weird transitions, a few computer that we felt an increasing needEmotion is a vital part of your thinking; rainbows here and there… and then a to practise the basics. Apart from that,how does this idea carry through into whole lot of luck also happened I guess. we’re still rocking that good ol’ Photoshopyour designs? like it was 2002 (give us back Photoshop 7When you’re starting a new project, we not You recently opened an office in Chicago; please). We’re also using a lot more ofonly cover the basic strategy and UX sides what brought that on and how’s it Sketch lately.of the project but we also involve ourselves working out?more into the storytelling part of it. You Well, let’s say it came a long way. Years You’ve just unveiled a new site forcannot prevent your audience feeling passed and Dogstudio evolved from this Landmark Public Affairs; could you talksomething when they first see your little family-and-friends-run design shop us through it?product, or when they use it on a daily to this bigger family-and-more-friends- Landmark ( isbasis. You don’t need them to read or run design shop. We soon started to another totally different part ofunderstand that you’re investing in their collaborate with great companies and Dogstudio’s project scope. They came to uscapacity to instantly feel something. organisations from San Francisco, Chicago looking for a simple, yet effective website and New York and quickly moved from the to present their consulting activities. I would tend to say our method relies a idea of continuing to deliver good shit tolot on consistency and impact through a the outside world while operating from Over the years and thanks to a longmix of typography, strong colour Belgium, to shortening the distance and experience of budgetless projects, wedirections and a capacity to integrate a opening a US office. developed a certain aptitude to make thecinematic approach in our work when most out of a lack of assets. We thereforesuitable. If it feels like a blockbuster, Dogstudio is now something 35-ish rebranded their company to start with, andchances are we’re onto something great. people strong and as we don’t want to quickly moved onto this emotional side we become a cultureless behemoth, opening a were speaking about earlier: creating anYour KIKK Festival site was an Awwwards new office sounded like the right way toSite Of The Year; tell us about it. keep on growing while staying lean.KIKK Festival ( is our ownfestival. We started it six years ago and it So in January 2017 Dogstudio, inc. wasgradually went from 500 visitors and a few born and has been fully operational sinceFeeding time Dogstudio take lunchtime very Quanta For science magazine Quanta, Dogstudioseriously and take it in turns to cook for each other strove to create a clean and uncluttered online UX52 september 2017

Profile office cultureLandmark Public Affairs The site for Landmark Public Affairs saw Dogstudio pulling out all the stops to do SiSSe aka WeStiesomething special with a traditional corporate client Project manageremotional connection through fonts, experience to anybody with a strongcolours and shapes. When life gives you interest in physics, mathematics and What’s on your desktop?lemons, make websites and drink them… biology. We had a super strong focus onno that doesn’t make sense… designing a clean and uncluttered A screenshot of a client promising me experience while enabling visitors to and my team a round of beers. OtherWhat would you say are Dogstudio’s immerse themselves in what are pretty than that my desktop is very neatlydefining principles? technical articles. organised with folder structures – justDogstudio grew on a quality-driven culture cleaned it up. It will only last for a fewand a capacity to believe that the best You pride yourselves on making good shitthings can come out of persistence. We every single day; how do you keep on more days.have the courage of our convictions and doing that?therefore it may somehow come across as With as few compromises in our approach What hours do you work?cocky, but believe us, this is all part of our as we dare to say. We’re collaborating withawkward style. our clients and we always try to find the From 9am to 6pm – in fact, I would say right way through the products we’re that we are really good at notTell us about Quanta magazine and the designing, but we also truly think we’resite you built for it. hired for a certain purpose. overworking, and unnecessarily burningQuanta ( is among our the midnight oil. There is a bigcrown jewels. Quanta magazine, whose If we want to achieve our targets andvocation is to “illuminate science”, is one goals, then we will also need to act as a understanding from all managers thatof the best and most accurate online proper leader. There’s still an awful and all dogs needs to get their rest and sparescience magazines out there. Based in New yet too often applied habit of saying thatYork, it’s syndicated by other magazines the client is king. We love to think time to practise our endless talents.such as Wired, The Atlantic or Scientific otherwise. Our clients are no kings orAmerican to name but a few. You can only queens and often end up becoming friends. What goes on in the office?imagine our excitement when we were Building a product with a client is, beforechosen to take care of the rebranding, anything, building a strong relationship. It We make sure we keep up with all theusability and design of their entire takes compromises, hard work, good latest trending memes and viralplatform. It was also our first chance to listening and adapting capabilities butcollaborate with our good friends at Barrel also, somehow and sometimes, a real need sensations. If we can do so by pulling aNYC, who took super good care of slicing for tough love. joke on one another at the same time, itand development. We’re not always right but when we can’t get much better. The website is aimed at being an strongly feel we are, we tend to go for it.integrated, multidevice and frictionless How often do you hang out? The other side of our approach is to focus on details: quality does matter and what is We have a bunch of traditions that all dogs do look forward to every year. A very proud recurrent tradition is Fêtes de Wallonie, where Namur’s streets are the host of a massive party. We dance, drink beers and eat the local dish dispouille, which every new dog has to taste to call him/herself a true dog. Describe your office culture in three words… At Dogstudio we aspire to be what we like to call ‘Dogminded’. This means being curious, positive and passionate. I very much recognise these traits in our office culture every day, both in our collaborations and work and at the lunch table discussions. september 2017 53

ShowcaSe Profile timeline La Perle Dubai-based spectacular La Perle needed a site that would excite potential visitors – and get them to buy tickets to its incredible experience A look at the key dates in the work of Dogstudio going to make the difference between a as a bit tacky, it is all part of our goal to good and a great experience is somehow design for entertainment in a really APril 2006 often linked to five per cent of the details. specific market. Our challenge here was to convey the mood of the show, based on Dogstudio is officially founded in What do you think attracts clients to you? their numerous key visuals, and translate Namur by two friends and two brothers Our eye for detail and for consistent and it into a usable user experience aimed at (Antoine, Thomas, Mathieu and Gilles) strong experiences. When we speak about exciting potential visitors and easily the importance of moving people, it’s not directing them to the ticketing page. mAy 2007 just marketing bullshit but a real credo. We often quote Maya Angelou for this: “I’ve Your home’s in Namur; what’s the design Release of, which learned that people will forget what you scene like there? would be become a running joke at the said, people will forget what you did, but Well… considering Namur is pretty small agency for the next ten years to come people will never forget how you made (100,000 people), we’re kind of an them feel.” anomaly in here. Indeed, the city has this APril 2011 big village vibe and it’s definitely not the What’s La Perle and how did you go about first place you think about when I speak Superbe, our art and interactive creating its site? about creative places. On the other hand, installation shop, is born thanks to La Perle ( is the brand-new we managed to grow in here and this kind more friends from the entourage show created by the visionary show of outsider location is also good for us. It’s designer Franco Dragone. That great dude indeed somehow harder to seduce talents november 2011 used to be creative director at the Cirque interested by the New York or London life, Du Soleil for 20 years before moving on to but it’s definitely a cooler one for people First edition of our ever-growing digital his own adventure: Dragone. A few years looking forward to go back to a calmer one, culture festival. KIKK Festival is born ago, we started collaborating with their grow a family, travel and so on. amazing team when we were chosen to APril / December 201 design and develop a new website for What’s your favourite breed of dog? (which is our other Awwwards Easy one, it’s’ a border collie (trivia: we all Two new partners join the adventure: Site Of The Year). have to pick dog nicknames when we enter Henry as creative director and Jules as the company, so you’’ re not only speaking Two years have now passed and to François, Annelies, Romain or Sisse, but business advisor Dragone’s’ team came to us to discuss their to Fox, Chowchow, Smoky or Westie.) upcoming crazy show taking place in mArch 2014 Dubai, one of the craziest temples of Next month: Freelance designer and luxury in the world. While some design front-end developer Ally Long We win and build, which elements of this experience may come out soon becomes our first Awwwards Site Of The Year (User’s Choice) mAy 2015 Starting the revamp of the Museum of Science And Industry of Chicago: a definite game changer for Dogstudio December 2016 The 2016 KIKK Festival website wins our second Site Of The Year (User’s Choice) at the Awwwards JAnuAry 2017 Opening of Dogstudio, inc. our American subsidiary with its first office in Chicago APril 2017 We’re now renting more office spaces in Liège and Brussels (Belgium) to relieve employees from their daily commute to Namur54 september 2017

The number one destination for web design news, views and how-tos Get Creative Bloq direct to your inbox with our weekly web design newsletterGraphic design Art Web design 3D Digital art

ShowcaSe How we built How we built 86 ½ Years The team from Clubhouse tell us how they took one of their favourite books and turned it into a full-sensory digital experience 1234 5 brief Close upFor a self-initiated project, London studio (1) A natural successor to the original experience it. (3) A simplified navigationClubhouse turned to Hoxton Mini Press’s I’ve photography book that documented the is implemented to make the experienceLived In East London For 86 ½ Years, and set about musings of Joseph Markovitch – an East seamless. It also gives the user a feeling ofcreating a digital experience that captured the London pensioner with an infectious outlook control in between the intro and finale. (4) Wepurity and authenticity of the original book. on life – Clubhouse reimagined the book for included a cinematic experience for tablets digital audiences. (2) It’s a cross-browser and desktop; they have screens big enough and cross-device experience, even though to cater for it. (5) A simplified and optimised the technology used is advanced. We wanted mobile experience means everyone gets to to make sure as many people were able to view the story on the go.56 september 2017

How we builtNick MulleY adaM WilkiNsoN laura FoNtesNick is co-founder and Adam is the associate UX Laura is one half of Bruck + timelinedesign director at Clubhouse director at Clubhouse Fontes, a digital creative team at Clubhouse Key dates in the 86 ½ Yearsw: t: @weareclubhouse website-building process t: @bruckandfontes early february 2017 Clubhouse ( is been looking for an opportunity to a London studio that prides itself collaborate ever since. They were the Project launches with the whole studioon creating beautiful and engaging first to come to mind when we explored working together to share ideas andinteractive experiences and content early concepts, and after finding out define the projectfor brands. Every year it tries to about the recent passing of Joseph justproduce a meaningful self-initiated a few days short of turning 90, we knew mid february 2017project, and most recently it set out to we wanted to give him the perfectcreate a digital experience based on tribute, and this was the time to do it. Creative and design teams work throughits favourite book, Hoxton Mini a selection of ideas until a final approachPress’s I’ve Lived In East London For You’ve described it as a full-sensory86 ½ Years, with stunning results digital experience. Tell us more… is selected( NM: The experience follows a dual narrative that draws the viewer into marCH 2017Tell us about I’ve Lived In East London For a story of parallels between Joe’s86 ½ Years… musings on life and the effect he had on Interactive design teams work togetherLF: Martin Usborne and his wife, Martin’s. At key moments, we encourage to build out a few visual examples toAnn, run Hoxton Mini Press (www. you to close your eyes, transporting you bring the idea to life. Final route, a small, into Joe’s imagination where ambient chosen and pursuedindependent publishing company from sounds are overlaid with his thoughtsEast London. Martin is a photographer on life. On opening your eyes, an marCH—april 2017and writer, and ten years ago he met abstraction of his portraits come to lifean old man called Joseph Markovitch with increasing clarity, and Martin’s Throughout the design process, constantwho had lived in East London for 86 narration begins, giving deeper insight prototyping in Principle, After Effects andand a half years. What started as a into the friendship. This combination ofphotography project developed into a sensory audio on closing your eyes and in code were produced for proof offriendship, and eventually turned into visual storytelling on opening creates concept for developmenta beautiful book called I‘ ’ve Lived In East an experience we hoped would fullyLondon For 86 ½ Years.‘ The success of immerse the viewer, offering a new, marCH 2017the book is what inspired the founding sensory approach to digital storytelling.of Hoxton Mini Press, which now has Working closely with SMP, ambientmore than 20 publications. The site’s pacing feels deliberately sounds and a custom music track were sedate; what brought that on and howHow did the project come about? did you implement it? created and recordedLF: We’ve always been fans of AW: One of our overarching designHoxton Mini Press, having had their principles was to pursue an experience marCH—april 2017publications in the studio from the that wouldn’t ‘feel’ like a website.beginning. Their story, values and the We wanted to respect the traditional Build starts a couple of weeks behindfact that they’re another independent medium that inspired the site by design and UX to ensure work islocal business inspired us, and we’ve creating something that would offer completed swiftly and agilely late marCH 2017 Voice recordings with Martin and our voice-over artist, and merged with the ambient sounds early april 2017 The painstaking task of deconstructing and reconstructing images so they are suitable for animating in video late april 2017 The team work like clockwork to deliver the product on time september 2017 57

ShowcaSe How we built 2 13 replace With 4 evolution58 september 2017 evo2 NeW How the 86 ½ Years website came to be (1) We initially draw the full flow out on our sketching wall (tiles make a great sketching surface by the way). It gives us space to change and tweak the process collaboratively, and also a greater overview of the experience. (2) We run a lot of our design thinking through prototyping software like Principle or After Effects to test interactions, and also for proof of concept for development. This example was for the pulse of the timeline. It was important to make sure it felt subtle but effective. (3) All of the images we used for the site were crops of Martin’s original book photography. These were painstakingly stripped apart and edited into coherent layers suitable for animating in After Effects – the rivets in the photo seen here allowed us to really play with the notion of movement, but involved quite intricate detailing to get the hand structure to look correct where rivets had been cut away. (4) In After Effects we augmented the image layers with subtle parallax and animation to bring the moments of the book to life – here the obvious things we adjusted were the tilt of Joseph’s head as well as scaling his hand to add depth to the photograph. (5) We also had live editable builds of subtle transitions and interaction that allowed the interactive team to adjust parameters before going into the final build. Pictured here are the timing and transition adjustments for the introduction loading title. Adjusting blur speeds and levels along with scale and their randomisation can become quite a question of contest! 5

How we builtmore value with the time you invest,just like a good book. We were awarethat it would be a big ask for people toview the whole experience in an age ofbite-sized content. For this reason, wedesigned the navigation in a way thatwould encourage discovery, but wouldalso offer full control over how manychapters you view. The random orderthey appear in is part of the charm andone element that offers value to returnusers who want to view a few chaptersat a time.Tell us about eye-tracking technology. Up close A portrait of Joseph Markovitch shot in The cover The book is a great read, and a niceAW: On the surface, one of the most Martin’s studio addition to anyone’s collectiontechnically sophisticated elementsin the site is the eye-tracking able to implement a simple FSM (Finite- lot of prototyping and testing acrossfunctionality, which detects when State Machine) to manage the flow of devices and browsers. Sometimes wea user closes and opens their eyes. the application. were able to find technical solutionsHowever, this was one of the most to the performance bottlenecks westraightforward elements to deliver, We employed Pixi.js (a 2D WebGL encountered; other times we had toas we leveraged Visage Technologies renderer) to help us create the chapter tweak the execution or the timing andHTML5 face tracking library; we found transitions and canvas animations sequencing of outperformed the other open- you see throughout the site. Pixi.js issource libraries we trialled in both a fantastic and powerful library for A good example of this was our switchaccuracy and reliability, and so was creating highly 2D sites and apps that from pixi.js to CSS for all the textworth the investment. use a lot of animation and motion. effects. We were using pixi.js to handle the rendering of the text effects but sawWhat technologies did you use? Could you tell us about your big drops in performance on mobile. WeAW: 86 ½ Years is a single page testing process? thought that the performance hit couldapplication built using open web front- AW: Our site relies heavily on be due to the blur filters being used, andend technologies (HTML, CSS3 and animations and motion created as they can be hardware accelerated inJavaScript ES6) and Sass and Webpack. through code and video. Managing the CSS, we rebuilt them outside of pixi.js performance of these two elements using CSS. This solved the performance The site is relatively straightforward was time-consuming and required a issues and also gave us crisper textin terms of its functional requirements, rendering as an added bonus.structure and architecture, so we didn’tneed to use an MVC JS framework, suchas React or Angular. Instead we were Did you learn any useful lessons building 86 ½ Years? LF: I’d say our biggest learning has been the power of collaboration. It may sound like a bit of a cliché, but it truly is the key to doing incredible things. Every department has been involved and every voice was heard at all stages of the process. We are a very open and collaborative studio, and 86 ½ Years is the living proof.In remembrance Hoxton Mini Press commissioned Subtle interaction Advanced eye-tracking Next month: Wrangler’s speciala bench in honour of Joseph technology combines with beautiful interactions 70th anniversary site by Retro Fuzz september 2017 59

FeatureS Accessibility 60 september 2017

Accessibility Behind every great site or Author application lies thought, empathy and inclusion. This Henny Swan doesn’t happen by accident – henny is Accessible it happens by design user Experience and Design Lead at theIargues Henny Swannclusive design is about putting people first. Paciello Group with over It’s about designing for the needs of people 12 years’ experience in with permanent, temporary, situational or making web, mobile and changing disabilities, placing an emphasis apps accessible, with on how a disabled user might experience a focus on accessible content. The Inclusive Design Principles user experience, audio/ are a set of seven considerations to help video and mobile. inform design thinking. They are not a set of ‘how tos’ but a framework that can be used @iheni alongside established accessibility guidelines to take products beyond compliance. Accessibility is ensuring disabled users can perceive, operate and understand content regardless of the hardware or software used to access a website or application. Products should adhere to the Web Content Accessibility Guidelines ( WAI/intro/wcag) so that the output – code, styling and behaviour – is both accessible and compliant. It’s a technology-led approach to complex human experiences that places september 2017 61

FeatureS Accessibilitya greater emphasis on code over design, seeing the expressions on charactersoutput over the final outcome and faces? Are subtitles ever going to be ablecompliance over experience. to convey that sense of dread in a horror movie so expertly created by ominous The Inclusive Design Principles remind music in the build-up to a gory climax?us to put people, not their disability, first.We are not designing for stereotypes of Often an equivalent experience is‘screen reader users, ’‘voice input users’ rooted in well-crafted editorial foror ‘keyboard users’ but parents, alternatives. When creating the logocolleagues, friends, children, students, for the Inclusive Design Principles weteachers – you name it. decided to give it alt text rather than consider the image decorative and hide Disabled people access the web at it from people who use screen readers.home, the office, while travelling, while If the logo is there to provide the visualunder pressure, passing the time, or look and feel, why shouldn’t it providefor the first time, or for the hundredth the ‘audible’ look and feel?time. All of this has a big impact on howwe interact with and utilise the web, As Léonie Watson said: “I used toregardless of disability. have sight so I appreciate descriptive alt text on decorative images because it So, let’s look at what the principles are, evokes memories of things in my mind.”with examples of how they can be appliedto make products both accessible and However, one size does not fit all whenusable for disabled people. it comes to text alternatives, as explained“Design Principles remind us to putpeople, not their disability, first. We’renot designing for stereotypes”Provide comparable in the case study (Boxout 1: Alternative for subtitles such as text size, style,experience formats at Brighton Pavilion). We cannot positioning and colour coding for assume that one disabled person’s different speakers. All of which makeEnsure your interface provides a experience is everyone’s. For this we have subtitles easier to read and the editorialcomparable experience for all so people user research and usability testing – two more comparable to the originalcan accomplish tasks in a way that suits key areas where the Inclusive Design experience. To pick just one example,their needs without undermining the Principles can be included and referenced colour coding different speakers makesquality of the content. in day-to-day project work. following dialogue and understanding who said what much clearer. This principle challenges us to really To be accessible to deaf people,try and understand what the experience audio in video must be subtitled and Just because an exact equivalentis for someone with a disability when synchronised. If you did just those two experience can’t be provided doesn’tusing your product – not how accessible things you would be meeting WCAG mean you don’t aim for equivalence. Thisor compliant it is, but if it’s easy, requirements for captioning: is a good example where accessibility isusable and engaging rather than time- a champion of creativity and innovationconsuming, frustrating or confusing. • 1.2.2 Captions (Pre-recorded): rather than the enemy. Captions are provided for all pre- You may wonder why we use recorded audio content in synchronised Consider the situation‘comparable’ rather than ‘equivalent’. media, except when the media is a mediaWe questioned whether it was possible alternative for text and is clearly labelled People use your interface in differentto provide an equivalent, like-for-like, as such. (Level A) situations. Make sure your interfaceexperience for someone who cannot see delivers a valuable experience to peopleor hear. Consider alternative formats While content complying with the regardless of their circumstances.such as alt text, Audio Description and WCAG checkpoint is accessible, is itsubtitles (Closed Captions in the USA). usable for people who are deaf or hard We need to consider how disabilityIs hearing alt text in place of seeing a of hearing? The BBC Subtitle Guidelines impacts an individual’s situation ascartoon a like-for-like experience? Is ( well as how situation might impactlistening to an Audio Described horror provides numerous guidelines around disability. Mobile is disabling due to smallmovie ever going to be an equivalent to editorial and visual presentation screens, glare from the sun and small62 september 2017

Accessibility Left Subtitles on alternative formats at BBC iPlayer shown Brighton Pavilion on ioS use colour coding for different speakers, Victor, who lost his sight aged five, and making content easier Karo, who is low vision, used audio guides to read when visiting Brighton Pavilion. Initially they were happy that an alternative format was available for free, but not long after they started listening, Victor said to Karo that the descriptions were too visual, which was useless for him. Having never seen “embossed Chinois style wallpaper” it was clear that the alternative format did not provide a comparable experience for Victor. The Pavilion was prepared for this, however, and on request provided them with a real guide who walked them round the building, let them touch the furniture and ornaments and, more importantly, told stories about its history that they were both able to enjoy. This was more of a comparable experience for them both, but especially Victor.fonts, noise and so on. Our dexterity can above Facebook on mobile automatically shows above the Inclusive Design Principles logobe reduced due to rain on the screen, or subtitles on the assumption that the majority won’t be has the alt text of “three hot air balloons hangusing devices one handed. Our hearing isreduced due to noisy environments and able to hear content when out and about together in a calm, sunny sky”no headphones. To accommodate for a lack of hearingdue to the situation an individual is in,content providers are now producingmore subtitled video. Facebookautomatically shows subtitles on theassumption that most users will not havesound available. This is a good example of how meetingthe needs of disabled people solves issuesaround situational disability for all.Be consistentUse familiar conventions and apply themconsistently. This principle cuts acrossdesign, editorial, hierarchy, structure,functionality and behaviour. As a result,it’s the principle most often referencedwhen I am reviewing designs andproposed functionality for accessibility.Heydon Pickering categorises consistencyinto two broad groups: september 2017 63

FeatureS AccessibilityUser stories above the ArIA Authoring Practices Guide documents explains keyboard interaction, names, roles, states and propertiesIncluding disability in user stories is key. l Internal consistency – ensuring is a crucial way of supporting people whoMapping these back to the Inclusive an interface is consistent within use screen readers, such as people whoDesign Principles is an excellent way of itself. For example, via an accessible are blind, low vision or have reading orensuring that the principles are considered pattern library. cognitive impairments. If you have athroughout the entire design and build website, iOS and Android app using theprocess. The following user story touches l Cultural consistency – ensuring same editorial for linked images, buttonson prioritisation: an interface is consistent with and controls, it has the dual effect of the external design patterns across making the website and app sound \"As someone with Attention Deficit the web. more familiar as well as providing audioDisorder, my attention when completing branding much in the same way thata task often only lasts until the next The Web Accessibility Initiative visual design does.distraction occurs or I forget what I wasdoing. When I'm shopping, I want features “It’s about avoiding content changes thatto add items to my shopping bag to be haven’t been initiated by the user unlessprioritised without being distracted there is an obvious way to control it”by other information on the page thatcan make me forget to order the item. Accessible Rich Internet Applications Give controlAlso, when I forget if I already ordered Authoring Practices Guide (https://something, I want an obvious, quick and Ensure people are in control. Peopleeasy way to see what is in my cart. This (WAI ARIA APG) describes approaches should be able to access and interact withwould be especially helpful.\" to making widgets, navigation and content in their preferred way. behaviours accessible using WAI- The following focuses on adding value: ARIA roles, states and properties. The Control is about functionality. It’s about \"As a person who is legally blind I use APG is primarily aimed at developers, avoiding content changes that have nota screen reader for everything I do on my however, designers should have a level of been initiated by the user unless theremobile when I am out and about. I want to familiarity with this document in order is an obvious way to control it. It’s alsobe sure no one is watching when I enter to design and document features that about not taking away platform settingssensitive data such as passwords. As are consistent with both internal and that give the user control over content.such, I want a choice between using Touch external design patterns. This ensuresID and keyboard input when logging into that the keyboard behaviour for widgets, Seemingly simple things such as fixedmy bank account.\" such as a tab panel, behaves consistently screen orientation on a mobile device Find out more about how to include the with tab panels internal and external to can prevent access. Fixed orientationInclusive Design Principles (https://www. the website. is not covered by WCAG 2.0, and not supporting changes in orientationuse-the-inclusive-design-principles) on the This is important so that people with renders content completely inaccessiblePaciello Group blog. a screen reader, keyboard or other non- for someone in a wheelchair with no mouse input device don’t have to work upper body movement who has a tablet64 september 2017 out how to use different tab panels. fixed in portrait mode on the front of Editorial consistency for text alternatives their chair. This is a good example of where WCAG, which was written before mobile took

Accessibility Left the ioS Mail app supports swipe to delete as well as tap to delete, therefore supporting people with different dexterity needsoff, overlooks key features on mobile above the Amazon site has a grid and image view as well as filtersthat can be broken by design. The MobileAccessibility Taskforce (https://www. auto playing content for catch up TV. Offer have They were frequent iPlayer users whoproposed this for inclusion in WCAG 2.1: understood the site and what to expect. Consider providing different ways for They wanted to activate a link to a people to complete tasks, especially those • 3.4.1 Orientation: Orientation of programme and watch it. They didn’t that are complex or non-standard.the content is not locked to landscape or want to open the page, navigate to theportrait, except where orientation media player, and find the play button. While not limited to features, thisis essential. principle has a huge impact on what To balance the conflicting needs of features are provided and how they are You can see more details on Mobile screen reader users who are frequent implemented. As we know one size doesAccessibility WCAG Extension here: iPlayer users with the needs of first-time not fit all, even when highly accessible.( users who may not want auto play, theExtension/#x[proposed-new-mobile- solution is to provide a setting to opt The iOS Mail app is built with choiceguideline]-guideline-3.4-make-content- in and out of auto play. This means the in mind. Via the inbox, you can eitherusable-in-device-orientations.[mobile]). content is both accessible and a better swipe to flag, delete or perform more user experience for disabled users. actions. Alternatively you can tap an Auto playing video is another example email to open it and reach the sameof loss of control. Screen reader audio functionality. The impact for end users isbecomes drowned out by the videoaudio. People using screen magnificationsoftware may not see the video if it’slocated off screen. People who are deafmay miss the opening subtitles. However, it’s wrong to assume allblind, low vision and deaf people willnot want auto playing video. This iswhere considering the situation in whicha user is consuming content has animpact. When I worked on BBC iPlayerblind screen reader users requested september 2017 65

FeatureS Accessibilitysignificant. Some people with dexterity diluting what people with screenissues find swiping difficult, others readers need to hear or people withwith shaking hands may find tapping learning difficulties can read. It’s alsobuttons accurately problematic. Equally, a significant overhead for people withwhile swipe to delete is a standard iOS alternative input devices such as speech,function, there is no visual affordance. head or foot switches or sip and puff toThis means people who are not familiar navigate to content when it’s low down inwith the feature may miss it entirely if no the content order.alternative is provided. Extraneous content such as banner ads, When layouts are complex, giving especially video, are an inconvenience forthe user control over the page can all users, but they can stop people withhelp. People with reading or learning cognitive or learning difficulties goingdifficulties might find a grid layout with any further. They are too distractinglarge images easier to negotiate than and easily confused with the maina listings page with more text. When content, which prevents people gettingdesigning screens with listings consider to the content they want. People withadding a button to switch between a grid cognitive or learning impairments whoand list layout as well as filters to remove are more familiar with the tools availableunwanted results. in the browser often zoom into content so they can minimise the amountPrioritise content of secondary information they are otherwise forced to see.Help users focus on core tasks, featuresand information by prioritising them Zooming content can make the issuewithin the content and layout. worse for some, however. The Channel 5 website has a banner ad at the top Prioritising content is about editorial, of the page followed by navigationlayout and presentation. As a disabled underneath and an image. When theuser, it’s likely you must work harder to page is not zoomed the only priorityunderstand the landscape of a screen content you see is the navigation, whichand what the editorial is telling you. This is not much. When zoomed 300% only aimpacts us all, but if key content is not small portion of the banner ad is visible.prioritised pages can become verbose, This makes locating priority content particularly challenging if you are low vision or use zoom due to cognitive or learning impairments. Editorial for links, headings and paragraphs should also prioritise primary content at the start. add value device such as voice. It also helps people with learning or cognitive disabilities as Consider the value of features and how well as non-native English speakers. But they improve the experience for different why stop there? Consider adding support users. Adding value is where you can get for voice search – this also supports the creative. This is less about the content principle of providing choice. and functionality of your product and more about utilising the brilliance of Inputting passwords is particularly features available in the platform. difficult as they require text input but cannot be seen. James Williamson, Everyday tasks such as logging in and a web design and development filling out forms can be a real struggle. author who has Amyotrophic lateral Autocomplete is hugely beneficial if you sclerosis (ALS) explains the problem he have dexterity issues, struggle with a and many other users will face when keyboard, or use an alternative input trying to access certain data. Left Youtube on ioS search uses autocomplete and “Whether I’m using voice dictation voice search, which supports people who struggle or a single finger on my keyboard, with inputting text66 september 2017

Accessibility Below Nationwide bank supports touch ID, which Resources helps people who are blind, low vision or have Inclusive Design Principles cognitive or learning disabilities ( The Inclusive Design Principles are aboutabove the Channel 5 website when it’s not putting people first. It's about designingscaled shows no priority content other than the for the needs of people with permanent,navigation panel temporary, situational, or changing disabilities – all of us really.Left the Channel 5 website scaled to 300%shows only a small portion of the banner ad Microsoft Inclusive Design Toolkit ( inclusive) This offers an introduction and practical tools for teams who want to ensure they design inclusively. Lipstick on a usability pig ( lipstick-on-a-usability-pig) Applying accessibility techniques to an unusable site is like putting lipstick on a pig. No matter how much you apply, it will always be a pig.“Inputting passwords is particularly Inclusive Design Patternsdifficult as they require text input ( cannot be seen” inclusive-design-patterns) Heydon Pickering’s book explores how weprecise input is extremely difficult. This an alternative for those who have the can craft accessible interfaces withoutdifficulty is increased when you introduce dexterity to use it. extra effort and examines what front-special characters and many of the end design patterns we can use to createrequirements found in passwords. Not Conclusion inclusive experiences.being able to see what I’ve input equatesto a high degree of failure when entering We need to shift our thinking away a web for everyonepasswords.” ( from ‘making things accessible’ to ( enabling people by design. Integrating Designing-Accessible-Experiences/ the Inclusive Design Principles early on dp/1933820977) Including the ‘show password’ feature in projects can help teams to better This book by Whitney Quesenbery andallows people to check their entry understand who will be using their Sarah Horton explores how you can makebefore continuing, therefore minimising products and how. Referencing the your site accessible without sacrificingmistakes that can take time to correct, principles when writing personas, design or innovation.adding a frustrating delay to what should user stories, building prototypes andbe a straightforward process. Offering in user research will all help teams to september 2017 67Touch ID as well as the ‘show password’ build better features that will be able tofeature provides further choice and properly support all disabled audiences.

FeatureSBrutalist web design… Jim McCauley speaks to some of the people behind an uncompromising new trend and asks whether this is web design’s punk rock moment68 september 2017

Brutalist web design here comes a time in every creative movement when some of its practitioners decide to push back against the accepted way of doing things and start breaking the rules, usually to the outrage of the establishment. You can see it throughout the history of art, music and literature, and it’s happening in web design now. Named after the architectural movement from the mid-to-late 20thTcentury, web brutalism gleefully ignores all the best practices established over the past 20 years and is throwing out work that’s inventive, exciting and challenging – even confrontational. Brutalist sitesautHor range from the wilfully chaotic to theJiM Mccauley obstinately minimal, but they’re unitedJim McCauley is a by a rejection of mainstream web trends.freelance writerspecialising in the origins of brutalismtechnology, design andgames, an occasional Brutalist architecture is unconcernedvideogame soundtrack about looking attractive, and it’s this –composer, and also a– s well as the idea that brutalism wasclaims to be the uK’s conceived as a reaction to the moreleading expert on the frivolous architecture of the Thirtiesmusical, Hamilton. and Forties –– that led Pascal Deville, cofounder and creative director [email protected] Illustrator Freundliche Grüsse (freundlichegruesse. com) to co-opt the term.Marcus FaintMarcus (@MJFainty) “I’ve had a high interest in digitalis a graphic designer design and the web design communityrunning MJ Faint Design since the early days of the web, ” he tellsCo. in Bath. He also us. “In the last couple of years I noticedworks as an art editor a trend toward streamlined, almoston a national film and neutralised interfaces that completelytelevision publication. missed any sense of brand attributes or characteristics regarding the content purpose they serve.” Deville also noticed designers starting to experiment with a kind of web design anti-trend: a rough and back-to-basics approach on how websites could work outside a perfect UX world, and it’s this aspect that reminded him of the original brutalists. Since then Deville has been curating, where he gathers sites that fit in with his ideas of web september 2017 69

FeatureSBrutalist web design…brutalism and interviews their creators. web colours, a simple colour scheme“It serves as an inspirational platform for and stuck to the original UX of the app.young designers” , he says, “Something I My objective was to start a conversationwant to give back to the community.” about what’s coming UI-wise and how it should be done.”Defining features For Giacomo Miceli, whoseA trawl through Brutalistwebsites. monochrome portfolio site ( will quickly demonstrate that is a masterpiece in Courier, it’s aboutit covers a broad range of styles and simplification, and there’s nothing newaesthetics; nevertheless there are a few about it. “Just look at the homepage ofcommonalities. Interactive designer Google, ” he observes. “17 years ago,Bruno Landowski (, AltaVista was a thing and its homepagewho in 2013 worked on an early example was cluttered with useless stuff. Googleof a brutalist site for the 13th Istanbul came in with a website that did one thing,Biennial (, sums up the did it really well, and was unconcernedbrutalist approach like this: “It uses with looking pretty. Google definitelybig fonts, solid-colour backgrounds, gives more attention to the eye thesegeometric shapes and raw features… It days, but the core remained the same.”doesn’t care about the general public.” It’s Detroit-based designer Kikko Jakob Kornelli from Any Studio in Paradela ( who sumsBerlin, which boasts a gloriously brutalist web brutalism up most succinctly,website (, also points out the though: “Typographic. Content-driven.movement’s use of bold and somewhat Straightforward.”We believe that a brutalist websitepushes the boundaries of its mediumradical typography. “But even more How to build brutalist sites recently designed for the film productionthan that” , he tells us, “we believe that a company Very Film ( showsbrutalist website pushes the boundaries Perhaps a great part of brutalism’s appeal this approach” , he tells us, “with its boldof its medium, especially in terms of is that you can neatly sidestep all the and crisp black-and-white typographyinteraction. Even though web design initial preparation that traditionally combined with only one distinctivehas been around for some time now, the comes with building a site, and simply interaction that is reminiscent of ainteractive and aesthetic possibilities of it get on with it; many creators of brutalist curtain closing and opening.”are seldom used to their full potential.” sites take a distinct pride in the fact that they do virtually all of their design and For a donation-based poster design French multidisciplinary designer development work in that venerable service called This is Shit (,Pierre Butin has made a name for himself Windows mainstay, Notepad. web designer Jon Matheson had otherwith his Brutalist Redesigns project priorities. “I think the whole point of(, Bruno Landowski quickly summarises brutalism in web design is not to bein which he reworked popular apps such his brutalist process: “Rock–paper– limited to what you’re expected to use asas Tinder, Google Maps and even Candy scissors to make choices, a pen to sketch a web designer” , he explains. MathesonCrush to striking effect, and he has his them, Photoshop and Illustrator to prefers to avoid looking at a screen if heown theories on brutalism. specify them, and a text editor to make really doesn’t have to, and so he designed them alive.” Although, he points out, This is Shit on paper, with an ink brush “Here is what I noticed” , he explains. this isn’t an approach that would work for the header and footer, Sharpie for“Some seem to define it as a crude for everyone; he comes from a graphic the menu tabs and white gel pen for theapproach, whilst others tends to embrace design background which, he says, makes social media icons. “Most of the site isthis loose definition. This got me him more sensitive to user experience. just scanned in sections of that design” ,wondering: is brutalism in digital design he reveals, and the results are brilliant.more about Swiss minimalism or just Jakob Kornelli agrees, noting thatraw coding? For this reason, I tried out much of their work focuses on strong And in Paradela’s case, both his sitedifferent styles that could be deemed typography, clear messages and the and his practice are influenced by whereas brutalist. I used system fonts, basic occasional unexpected twist to keep he lives and works. He explains that things interesting. “The website we70 september 2017

Brutalist web designclock-wise Bong Q&A: Pascal Devilleinternational BoNGmade waves with it work How long have you been runningon johnsonbanks’ website. out more about how it I set up in 2014 aswas built in net issue 294 a personal project. It took me about 15 minutes to set up the whole page. It’s stillBloomberg You can see a personal project, but one with aroundinspiration for brutalism 100,000 visitors per month and a lot ofin richard turley’s graphic attention from media outlets work, whichrevitalised Bloomberg What’s the appeal of brutalist web design?Businessweek magazine Ignoring the rules to come up within 2010 something unexpected. But to do so, you have to know the rules.any studio any studio’ssite features stark, bold What processes are involved in making atypography and big brutalist site?swipeable images, with A lot of submissions are created on a low-a playful use of emojis tech level by just using notepad. There’s nothrown in ‘best practice’ on how to create a brutalist website, but starting from scratch with justBrutalist websites an editor is a good start.Pascal Deville’s Brutalistredesigns site chronicles is this web design’s punk rock moment?this exciting trend and UX almost killed the web design culture inspeaks to many of the recent years. Remembering how the webcreators behind it design heroes of the early days (Kioken, K10k and Surfstation) played Giacomo Miceli’s the limitations with visual and technicalportfolio site, jamez. creativity – that was kind of what punkit, borrows brutalist rock did in music. Brutalist web designtechniques and proudly brings that back as a movement for today’sshows off his work using younger generation.the Courier font is there an element of nostalgia for the likes of Geocities to it? It’s not about nostalgia. It’s about shaping a culture around web design again. I think most sites from the Geocities era were just amateurish and bad. Where do you expect this scene to go? In web design or digital design in general it usually takes just a couple of months to evolve a ‘trend’. Web brutalism will gain the interest of a wider audience too and finally become part of a mainstream culture. september 2017 71

FeatureSBrutalist web design… Resources Brutalist Framework Veryfilm any studio’s site for Very Film focuses on stark black and white typography and features just one simple interaction his site is, “a reflection of my design There’s more to it than that, though; Many web brutalists pride themselves approach and thinking. I’ve always Daan Lucas feels that there’s an honesty on hand-crafting beautiful code in aligned myself with the anti-mainstream to brutalism that’s perhaps missing from Notepad, but if you’re just getting or ‘anti-Jesus’ aesthetic because it more polished, corporate offerings. “I started this open-source framework challenges conventional and convenient think brutalism intends to show the core could be essential, providing ready- truths including my own. This approach and deduct it from distraction” , he says. “I made templates, grids and effects, as is also pertinent to the current social and like that. I think it’s also the right thing well as typography class helpers. political environment of Detroit, which is to do these days. People know when they where I live and base my practice.” are bullshitted. In our work we always try it’s tough out there to make a real connection with people. the benefits of brutalism Make them wonder, invite them to play. If you bullshit people they will walk away Want to learn more about brutalism? Paradela’s philosophy resonates with and be annoyed.” This article on the less warm many of the reasons that designers have and fuzzy side of the web covers it given us for building websites that go You can see brutalism’s playfulness all, from its architectural origins so strongly against the grain of modern on sites such as Bong’s homepage (bong. through to code samples and plenty web design. So what are the benefits to international), featuring a giant Newton’s of helpful guidelines on fonts, palettes, this concept? “Instead of this tip-toeing cradle and links to the agency’s work imagery and language. around carefully crafting a modern, scrolling around the edge. It might go expected site” , suggests Jon Matheson, against the rules, but it’s a different and complexion reduction “it’s like the creators are going ‘Here’s exciting experience for users, and Any the site. If you don’t like it, your loss’ and Studio is keen to mine the possibilities of I love that.” this approach to web design. It’s not just brutalism; here Michael Horton from SWARM in NYC outlines thisisshit Jon Matheson hand-drew the site for his poster “Not playing by a certain set of rules Complexion Reduction, a minimalist design service on paper, and then simply scanned it in or applying different ones – like classic trend in app design that shares much Swiss modernist graphic design rules – of the web brutalism philosophy with has the advantage that the results tend its focus on bigger, bolder headlines, to be more unique and therefore more and simpler and more universal icons. captivating for the user, ” says Jakob Kornelli. “Also the influx of avant-72 september 2017 garde graphic design opens the field to tons of new and striking aesthetic possibilities, which in return generate more interesting experiences for users and clients.”

Brutalist web design youvsJesus Kikko Paradela describes web brutalism as typographic, content-driven and straightforwardistanbulbiennial the Istanbul Biennial 2013 site is a hard-hitting example of early web brutalism in action language so we can have it at our disposal to communicate effectively. We are selfStraightforward, brutalist elements critical with what’s going around us.”might improve the overall experience Where’s it all going?Punk as fuck? between brutalist sites and the work of designers such as David Carson, Like brutalism, graphic design often goesSo maybe this is more than just a punk Stefan Sagmeister and more recently to provocative extremes, but always inrock moment. While there’s a degree Richard Turley, who used audacious and the name of clear communication. Whileof that – Jakob Kornelli points out that provocative design to turn stuffy old graphic designers tend to go all-outthere’s been a glut in recent years of Bloomberg Businessweek into one of the for their portfolios, the work that theyboring UX-driven web design, creating most talked-about magazines. produce in the day job is generally a lotan environment of functional but bland less full-on; and this is how the brutalistwebsite clones, and in many ways Jakob Kornelli agrees that there’s approach will leave its influence on webbrutalism is a ‘fuck you’ reaction to that definitely a graphic design influence, and design in general.environment – designers see brutalism as Any Studio welcomes this development.a way of driving web design forward and “Until recently web design was, for some “I found that a fair amount of brutalistactually increasing usability. reason, kind of detached from the long websites are small scale; designers and great tradition of graphic design”, portfolios or personal projects, ” observes Pierre Butin explains: he tells us. “Graphic designers treated Pierre Butin. “Yet, an increasing number“Straightforward, brutalist elements web design as an unknown medium of designers work on (popular) mobilemight improve the overall experience and didn’t really know what to do with apps. It would then not be surprising ifusers have of an app. UX experts like it. Now there is a new generation of they transferred this taste for brutalism/Luke Wroblewsky show again and again designers emerging that feel at home minimalism to the products they design.”that, for example, the word ‘Menu’ in an in both worlds. Web design is becominginterface generates more engagement fully integrated into the vocabulary of Jon Matheson hopes that this couldthan the hamburger icon (as goes the contemporary graphic designers.” be a huge turning point for the web insaying, ‘obvious always wins’). For this terms of design. “I hope at least thatreason, I do not think that brutalism This matters, because graphic design more designers, artist and creativesin digital design is incompatible with a is a mature discipline that for many will have less fear of experimentingUX-driven approach.” years has been addressing and solving with brutalism” , he says, “or at least the issues that web brutalists are now the carefree approach to their work as And looking through the pantheon taking on. “This is the space where we more and more of these designs andof brutalist sites, it’s hard not to draw usually operate” , says Kikko Paradela. approaches reveal themselves.”comparisons with the world of graphic “We deconstruct and understand visualdesign. You can see clear parallels And Jakob Kornelli believes that brutalism is about to establish its relevance and will probably stay for a while, giving designers increasing reign to create a beautiful, communicative web. “Thanks to the evolution of interfaces and software, designers will soon be empowered to create top-notch websites without handing sketches off to a developer – the developers will provide the appropriate tools beforehand instead.” september 2017 73

CREATE THE ART OF THE FUTURE www.3dartistonline.comES EVERYISSUE DOW Available NLOAD FRE from all good newsagents and supermarketsE RESOURC ON SALE NOW:> ZBrush 4R8 > Blender to Substance Painter guide > Despicable Me 3TUTORIALS INTERVIEWS INDUSTRY INSIGHT BEGINNER ADVICE EXPERT GUIDES BUY YOUR ISSUE TODAYPrint edition available at Digital edition available for iOS and AndroidAvailable on the following platforms


PROJECTS Sketch About the Author DAniel SchwArz w: t: @mrdanielschwarz job: Co-Editor at SitePoint areas of expertise: Interface Design, UX, Sketch Sketch TOP 10 SKETCH PLUGINS YOU NEED TO DOWNLOAD Daniel Schwarz nails down the most powerful Sketch plugins and what problems they’re solving for designers With the introduction of Sketch Cloud, a Auto LAyout rethought file format and a brand new subscription-based pricing model, Sketch has had an Plugin Type: Added features exciting run. Besides a string of small but highly Free: Yes intuitive improvements, Sketch Plugins now update Summary: Responsive design for Sketch automatically, and outdated ones are disabled. Plugin management is heaps better, and the library is Group Resizing is a native feature that was added to getting bigger with every day. So let’s take a look at Sketch late last year. It lets the user change the way ten of the best Sketch Plugins that are drastically that objects react when their artboards or parent changing the way that we design user interfaces. groups are resized – it’s not exactly responsive design, but it’s close enough.76 september 2017

Sketch Auto Layout (, built by LaunchPad doesn’t make web design easy – Above left Auto Layout is aAnimaApp, takes this functionality a little further. nothing ever will – but it does give you some responsive design solutionWhere Group Resizing lets you create fluid elements pretty solid foundations to work with. After trying for Sketch designers,and pin objects to a corner (think: :fixed positioning it out with a couple of low-fidelity mockups, I can turning static layouts intoin CSS), Auto Layout also lets you offset elements see that the code output is relatively simple, which dynamic layoutsby a certain amount of px, define minimum and means that:maximum dimensions for elements (think: min-: and 1. We don’t have to worry about bloated code, and… Above right LaunchPadmax-: in CSS) and do everything that Group Resizing 2. It won’t replace developers by a long shot is an efficient way ofallows you to do but with a much less confusing UI. It converting .sketch designsalso does something else, which I’ll discuss next. into static HTML websites – domain and all LAunchPAd You can combine Plugin Type: Website publishing LaunchPad with Auto Free: Premium plans from $9/m Layout to export Summary: Convert designs to static responsive designs to HTML HTML webpages Okay, let’s talk features:You’ve designed a website in Sketch. Great – now ● Responsive design (if combined withwhat? Design handoff? Nope, no need! LaunchPadoffers an ultra-simple way to convert .sketch designs Auto Layout)to static HTML webpages. I’m always healthily ● Videos, links and formssceptical about ‘easy’ ways to ‘convert’ design to ● Font-family fallbackscode, but LaunchPad (https://launchpad.animaapp. ● Publishing and domain managementcom) delivers. LaunchPad was built by AnimaApp, ● SEO (title, meta description etc)the makers of Auto Layout. In fact, you can combine ● Social media meta tags (Open Graph etc)LaunchPad with Auto Layout to export responsive ● Version control (easy to rollback to older.sketch designs as HTML! Let’s have a look. versions) First, the expectations. LaunchPad doesn’t export ● Google Analytics (or similar) integrationa ‘finished’ design. You’re still expected to fine-tune ● Keyboard-centric workflow for faster designingloading times, further tweak the code to ensureresponsiveness and adaptability to alternative screen What LaunchPad can’t do:sizes, and overall optimise the code output to ensure ● Export dynamic websites with JavaScriptthat the site loads quickly and runs smoothly. september 2017 77

PROJECTS SketchImage compression ImageOptim brings a sophisticated image optimisation workflow into Sketch, a must- Easy prototyping Craft is a super useful toolbox that supercharges yourhave for serious designers design and prototyping workflow. It’s made by the guys at InVision coLor contrAst AnALysEr While Sketch offer their own solution (https:// for Plugin Type: Added Features optimising SVG files, compression for JPG and PNG Free: Yes image formats is still lacking the options to fine- Summary: Analyses Colour Contrast tune using a range of compression techniques. Since ImageOptim has been offering a solid service for Colour contrast between two elements, most often a number of years, it makes sense that they would between backgrounds and body text, is compared bring this functionality to Sketch (https://imageoptim. using a formula defined by the WCAG (Web Content com/sketch). Accessibility Guidelines). Nobody likes to deal with formulas on a daily basis (or ever, really), which Any designer who cares about loading times and is why Color Contrast Analyser ( image optimisation (which should be all designers!), getflourish/Sketch-Color-Contrast-Analyser) makes certainly needs to add ImageOptim to their toolbox, our top ten. While many Sketch plugins help you although it should be noted that you still need the accomplish little things easier and/or faster, Color core ImageOptim app ( Contrast Analyser also helps you to make solid (free) installed on your macOS system, and you still design decisions using internationally recognised need to mark layers as exportable in Sketch. Navigate design standards. to ‘Export and Optimise All Assets’ to begin. Color Contrast Analyser compares two colours and ExPort morE defines the contrast ratio between them. Contrast ratios are split into three levels (A, AA and AAA), and Plugin Type: Extended functionality the contrast ratio should always meet the minimum Free: Yes requirement of AA. Of course, you will never know Summary: Animated GIF export the contrast ratio without a tool that measures it, so the Color Contrast Analyser Plugin is a must-have for When you think animated GIFs, you think Dribbble designers trying to improve both the readability and shots and app demos. It’s no secret that GIFs are accessibility of their work. making a comeback, but the delicate art of making them isn’t exactly common knowledge. Do we use If only one layer is selected, the colour will Photoshop for this? After Effects? automatically be compared against the background colour of the artboard. Both of those are terrific choices, but you don’t necessarily need a full-featured Adobe app to create While there’s no available keyboard shortcut, cool GIFs, especially when creating relatively simple you can access the feature from the Plugins animations. Export More ( menu, or you can manually define your own Export-More) treats each artboard as an individual keyboard shortcuts using this super neat trick frame and combines them together. You can then in macOS ( choose whether to have the GIF play once or on a shortcuts). continuous loop. ImAgEoPtIm for skEtch Navigate to ‘Plugins E▸ xport More A▸ rtboards to GIF,’ choose the desired playback method (default or loop), Plugin Type: Added features then choose the desired frame rate. It’s really, really Free: Yes easy – and fun! Summary: Image optimisation in Sketch78 september 2017

skEtch Iconfont Sketch Plugin Type: Time saver hIStORY Free: Yes Summary: Manage icon fonts in Sketch MAJor chAnGeSIcon fonts are a highly efficient way of using virtually At the beginning of this article, I mentioned a number ofan unlimited amount of icons in your web designs changes that Bohemian Coding have made to Sketch in thewithout having to export and optimise a ton of last 12 months. If you haven’t used Sketch in a while (or ever), it’llimage assets. Typically we reference icon fonts in be useful to know what the Sketch team has been up to.the <head> section of HTML webpages, as we do with First, Sketch Cloud. Sketch Cloud is where you store your .sketchCSS and JavaScript. However, using them in Sketch files when you have Sketch installed on more than one computer, oris a little more complicated. Thankfully, Sketch when you’re sharing .sketch files in a team.IconFont ( Next, the new .sketch file format. Since it’s now written in JSON,makes it easy. the file format has become more human-readable, so we can expect developers to start taking advantage of this soon (think, After downloading and installing Sketch IconFont, better design handoff tools, visual version control etc).download SVG font files or download this font bundle Finally, there’s the new subscription-based pricing model. For(, which a number of years Sketch used a one-time fee pricing model,includes the font files for FontAwesome, Material and while the price tag has varied over time, it never exceededDesign Icons, Ion Icons and Simple Line Icons. When $99. However, now that Sketch is becoming a real powerhouse inyou’re done, navigate to ‘Plugins I▸ con Font I▸ nstall a the design space (more designers use Sketch for user interfaceFont-Bundle’ , select the downloaded fonts from the design than they do Adobe Photoshop), they’ve introduced a new subscription-based pricing model, which is $99 annually.Any designer who cares Best of all, when you stop paying for Sketch, you’re not lockedabout image optimisation out of the app unfairly – you’ll simply stop receiving updates. If youneeds to add ImageOptim ask me, this is more than fair for an excellent service!to their toolbox Award winning Over the years Sketch has received acclaim and awards, includingOpen File dialogue, then navigate to ‘Plugins ▸ Icon a prestigious Apple Design Award in 2012Font G▸ rid Insert [▸ your desired icon font]’ in order toinsert an icon. september 2017 79 Even if you’re intending to design a custom iconset for your design, having ready-made icons at yourdisposal can help you with rapid prototyping in theearly stages of design, adding a little more clarity/fidelity to your low-fidelity mockups. crAft Plugin Type: Prototyping Free: Yes Summary: Design and prototyping toolsCraft ( does alot more than sync your .sketch designs with theInVision web app: in fact, most of Craft’s featurescan be used without having an InVision subscriptionat all. Craft supercharges your design workflowby letting you build your design with realistic dataand images, rapidly tile objects horizontally andvertically, and create libraries of styles and assetsthat can be stored in the cloud, shared between yourteam and accessed at any time.

PROJECTS Sketch Recently added to this list of functionality is Craft Prototype, which not only lets you demonstrate ReSOURceS user flows, transitions and dynamic components such as fixed headers/footers, but also sync those eSSentiAl reADinG demonstrations into the core InVision app with Craft Sync, bringing your entire team into the loop Sketch has a huge collection of resources scattered around with an abundance of top-class communication, the interweb; in fact, I’ve even written a book on Sketch collaboration and design handoff tools. With design, myself. Here’s a list of useful resources you’ll want to bookmark, prototyping and handoff tools, Sketch + Craft + concerning everything from downloadable .sketch files to courses, InVision is a triple-threat! books, articles and even Sketch communities. InVision App subscriptions start at $15 a month, sketch hub ( which is suitable for small teams. However, Craft itself can be used for free. A directory of tools for Sketch skEtch dynAmIc Button sketch tricks ( Plugin Type: Time saver A treasure trove of Sketch tutorials Free: Yes Summary: Dynamic widths for buttons sketch tips ( Buttons are very common in user interfaces – we Clever tips and tricks for Sketch use them to activate functionality, visually alert the user of important tap targets, and submit data to a team sketch ( Sketch Dynamic Button A Slack community for Sketch lovers automatically resizes the button while keeping sketch App sources ( the padding intact A repository of free .sketch resources web server. The problem is, not all buttons are made equal. Among other things, they often vary in Jump start sketch ( size, depending on the character length of the text inside, which can make resizing each one in Sketch a jump-start-sketch): bit of a hassle. My book on getting started with Sketch Sketch Dynamic Button ( Adobe xd vs. sketch ( sketch-dynamic-button) isn’t a new Sketch Plugin, but it’s certainly one that can’t be stepped over. If sketch-will-result-best-ux): you’ve never used it before, it allows the designer to An article comparing Sketch to Adobe XD specify a fixed amount of inside spacing (known as padding: in CSS). 80 september 2017 When you change the value of the text layer inside the button, the button automatically resizes while keeping the padding intact. It’s very useful despite its simple nature. How it’s done: 1. Create a text layer and hit Command+J, or… 2. Create a Group > Text/Background structure yourself, then… 3. Rename the group using CSS padding syntax (eg. 10:10:10:10) 4. Press Command+J again if you edit the text or padding

Sketchtime saver Swap Styles uses a handy keyboard shortcut to swap styles with Quick shortcuts Sketch Runner is macOS’s Spotlight equivalent for Sketch – it quite literally does all of theanother later running around for you!swAP styLEs Sketch Runner ( solves these issues and does so in a way that macOS usersPlugin Type: Time saver are familiar with – Sketch Runner is the macOS Spotlight, but for Sketch!Free: YesSummary: Swap styles with another layerWith the help of a handy keyboard shortcut, Swap Feature breakdown:Styles ( quite ● Open Runner: Command+‘literally swaps styles with another layer. Although ● Run last action: Command+Shift+‘simple by nature, Swap Styles is a huge time saver ● Jump anywhere: type ‘goto’ ,when designing hover states. then an object name Let’s take a menu navigation, for example. A menu ● Insert symbol: type ‘insert’ , then a shared style/navigation would appear on every screen, althoughthe active state (the visually highlighted link that symbol namedescribes where you are in the navigation) would ● Create symbols and shared styles: type ‘create’ ,differ from screen to screen. On the settings screenthe ‘Settings’ menu item might be underlined, and then a nameon the newsfeed screen the ‘Newsfeed’ menu item ● Apply shared styles: type ‘apply’ , then a sharedmight be underlined… style name ● Install more plugins: type ‘install’ , then the extension nameYou have two options: how to InstALL skEtch PLugIns1. Awkwardly move things around for every artboard2. Create an insane amount of shared styles and/or Sketch Plugins can be installed in a variety of ways. Most developers simply upload their extensions to symbols GitHub in the form of a .sketchplugin file. This is easy enough, but you’d have to check back regularlyIn this example, Swap Styles lets you move the for updates as extensions are known to break whenactive state style to another menu item. Simple but newer versions of Sketch are released.powerful, right?Keyboard shortcut: Cmd+Ctrl+S We can also use Sketch Toolbox (http:// to search for, install and manage skEtch runnEr Sketch Plugins. However, there’s no assurance that you’ll be given the latest versions, and Plugin Type: Productivity some (like Craft and Zeplin) aren’t even included in Free: Yes the toolbox. Summary: Spotlight for Sketch SketchPacks ( is updatedSketch is well-loved for its minimalist keyboard more often and usually includes the big boys likeworkflow. That being said, there’s always two or AnimaApp – yet it’s still missing the private-sourcethree keyboard shortcuts that you always seem plugins like Craft and forget or confuse with another design app likePhotoshop. And let’s not forget those less common The newest version of Sketch (version 45) triestools and features that don’t have a keyboard to update Sketch Plugins when it can, but usingshortcut and are hidden deep in the Sketch menu. Sketchpacks or even the GitHub GUI (https://desktop. – if you’re familiar with GitHub – could serve as a suitable alternative. september 2017 81

PROJECTS HTTPSAbout the Authortim holmAnw: @twholmanjob: Engineer at CodePenareas of expertise:HTML, CSS, JavaScript CodePen HOW CODEPEN SWITCHED ITS WEBSITE TO HTTPS With over 15 million Pens, CodePen has a lot of data, which makes making the jump to a secure protocol (HTTPS) all the more important, and all the more complicated. Tim Holman describes how it was done moving to HttPS and private sessions online are fast becoming an expectation, rather than an option. CodePen provides its users with a development playground, whereby people can create small For a long time now (since Firefox 23, IE9 and the webpages that we call Pens. These Pens are a mix of early days of Chrome) browsers have prevented HTML, JavaScript and CSS and are used for a wide mixed content running on secure sites. HTTPS variety of reasons. Whether it be to show off a UI therefore will not allow scripts transferred from concept, an API, to debug a problem or to show off HTTP to run. some fancy Canvas work – CodePen aims to be the one-stop shop for quick, unhindered development. For us, this means that if someone is hitting The move for CodePen to being entirely HTTPS was an API that isn’t secure, their Pen could suddenly a large one. We have over 15 million Pens created and stop working, which is the absolute last thing that since CodePen puts no serious limitations of what we want. It would also prevent us from processing people can create, over three quarters of Pens created signups and accepting passwords when a page is have links, images and requests to outside sources insecure, and we don’t want that! that could possibly be insecure. HTTPS (Hypertext Transfer Protocol Secure) CommuniCation protects the integrity and confidentiality of data between the user’s computer and the site. Secure Before we get into the good stuff, a big part of making the move to HTTPS, especially if you have active users is communication. This can’t be82 september 2017

HTTPSSecure symbol You can see the green lock in Google Chrome, which shows the page is secure, unsecured page When the browser sees that the page’s security has been compromised,meaning any information that passes through remains encrypted the safe green lock is removedoverstated. We gave everyone on CodePen plenty exPert adviCeof notifications and information months before webegan making permanent changes to the site. WAtch outThe full information schedule went like this: Over the past few years, there have been several cases of popular ISPs (Verizon being one of the big ones in the United● Three months before the change, we told everyone States) injecting ads or tracking cookies onto other people’s that we would be moving to HTTPS and what this websites. This has been done so they can track people, or provide meant for them, especially if they’re using specific them with unsolicited advertising. APIs and libraries that may be served using the The worst part of this is that the ads could appear on any insecure HTTP protocol. This was about seeding website that you view, regardless of whether that website wants the idea that there will be change. to display ads at all, and of course, all the proceeds would be going back to the ISP rather than the website owner.● One month before the change, again reiterating To do this, the ISPs are injecting content directly into requests the date of change. that are sent using insecure HTTP. On the other hand, requests sent securely don’t have this trouble at all, since the content of the● One week before the change, releasing tools (we’ll request is encrypted, making it tricky for humans or machines to get into that later) and telling everyone about the inject anything. changes that have already been made. This is genuinely scary, considering that an ISP could begin to build a detailed map of your browsing habits and know much more● One day before, telling everyone that the majority than they need to know about you. of CodePen is secure, and the pages that actually This kind of attack is also very difficult to observe and monitor, hold their Pens, posts and collections were next. but is also the kind of thing that can lie dormant until there is a need for it (suddenly injecting advertising or pushing an agenda)Three months before the Really, this alone is a strong reason to begin serving yourchange, we told website, service, application or anything using a secure protocol.everyone that we wouldbe moving to HTTPS september 2017 83This may seem like a lot of emails and notifications,but in reality the more people know about changesthat could affect them the better. We wanted there tobe no excuse to not know. After telling over one million users, we receivednot one single email of complaint and just a fewasking for advice on fixing up their Pens.

PROJECTS HTTPS get into tHe nitty gritty reSoUrCeS There are a lot of things to do to get secure, the first one is getting a correct certificate! For us, this was A Subtle nudge done through the AWS Certificate Manager (aws., which enabled us When making any serious change, especially one that could to procure, manage and apply the certificate to our be ‘breaking’ to others, it’s important to give plenty of notice, servers with ease. emails and prompts about what could potentially be changing, and why it’s important that these changes are made. There are lots of smaller pitfalls that you can come That said, it’s also possible to go above and beyond these across making this jump which we won’t go into requirements by educating and encouraging best practices. here, but you can read more here ( There are several places we do this in CodePen – the image webmasters/answer/6073543). below is an example of this when people add external resources. They could be linking to literally anything on the internet, be it an HelPing PeoPle image, script, website or another Pen. Of these infinite possibilities we have absolutely no control of their source. After this was sorted, we wanted to begin trying By checking the HTTP/HTTPS strings at the start of their URL, to update people’s Pens, posts and collections, but we’re able to give them a small notice that they will more than alas this has to wait. To make this move without likely run into problems in the future if they want to use that disrupting anyone, we need to take measures to: specific link. We can provide clear information about the what and why of the particular problem and move on. a) Educate people about links that were using the Another important part of these educational aspects are to insecure protocol not seem intrusive at all. The best way to learn is to run into b) Prevent people from creating more insecure links the problem (in this case, a reference that will be blocked by the browser using a secure protocol), understand why it won’t work The first step we took was to make all new creations and fix your problem. For this reason we don’t block these type of begin on an HTTPS page. This meant that if anyone links outright. tries to use resources that were insecure, they will immediately see in their developer console that the direct users Showing users what the problem is is better than telling them just to browser has stopped the request. This alone was change with no explanation, especially when security is involved a big step silently nudging everyone into creating more secure Pens and projects, and this process was There are a lot of things to do immediately effective. to get secure, the first one is getting a correct certificate! Secondly, we started notifying people if they For us, this was done through were including something that could break in the the AWS Certificate Manager future, these included little alerts when you added an external resource to a Pen. These external resources 84 september 2017 are the main entry point for HTTP links in CodePen, where people would link to things like Google Fonts, external images and custom hosted scripts. redireCt Content Now that people were in a place where the majority of people building things were creating them in a secure way, we could start to migrate pages over to HTTPS. This was a gradual process, with a few quirks, ultimately making sure that some pages would only be accessible using the secure protocol. If they were requested in HTTP form, they would be redirected. Initially we moved over pages that didn’t contain any user creations, since with these pages we could ensure that nothing would break – things like the blog, documentations pages, jobs, meetup and the CodePen Spark. It turns out that these little moves were incredibly important to the bigger picture as we watched traffic slowly move to HTTPS. The real benefit of this was that once people were on any page in a

HTTPSsecure protocol, the rest of the links on CodePenwere protocol agnostic, meaning they would stay onHTTPS. Because of this, we found that the majorityof people using CodePen ended up browsing securelyfrom here onwards.exiSting Content tooling analysis Here you can see our tooling, which helps identify when a Pen has a particular problem. It also tells you how you could solve the issueNow that we can support a secure protocol, andpeople are actively browsing the site on it, we URL (if they had the resources hosted elsewhere) orcan begin the monolithic process of trying to fix they began providing those resources from a securepotentially broken content. protocol themselves. This is a vital piece of the process, since toolingCodePen hosts millions of embeds, in blogs anddocumentation all over the web. The last thing that Yes, there’s more! Now that the majority of Penswe would want is for CodePen to become some kind are secure, we wanted to do something for thoseof coding graveyard. who weren’t updated. Again, it’s important to be dedicated to your users. We created a tool that would The first step here, was to locate anywhere that allow people to see which of their Pens were inpeople could enter their own URLs. In the end we violation of the secure protocol.had a huge list. We then went over this list, andsaved any string that was a URL. When we had all For this, we created a dashboard page for everyoneof these individual links, we realised the size of the to see which of the Pens that they had weretask at hand was enormous, we had over ten million potentially compromised. This itself has its ownindividual links! Of these ten million, there were problems, since we need to parse through all theexactly 2,129,437 insecure links. code within each Pen. From a machine’s perspective it’s difficult to tell which of the URLs were going to We ran a script though these 2,129,437 links, that be used and which ones were harmless. For example,would check if there was a similar resource hosted an insecure link in a comment will not jeopardise theon the HTTPS version of the link. integrity of the page. So for something like For JavaScript, we used Esprima, an ECMAScriptthere would be an exact copy at compliant parser that was used to check if URLscom, which meant that we could change the URL, were in use within the code. For HTML, we used thewithout feeling intrusive or jeopardising the Pen’s browser’s DOMParser API.functionality or the creator’s privacy. Once we had these results, we provided a simple This process was lengthy, with us sending out page that would show which links you have that arehundreds of thousands of requests, although it was invalid, enabling everyone to see and fix up theirmade a little quicker by caching results. For example, remaining Pens.once we knew that there was an HTTPS version, we knew that every similar link WraPPing uPfrom that point on could be converted without doinganother check. All in all, the steps taken to secure CodePen were lengthy and involved a lot of hands-on action, as the That said, even after this was completed we would old saying goes. The best time to have your websitealso do a manual check over links to see if there were served from a secure protocol is 20 years ago, theany discrepancies. As much as you can trust your second best time is now.code, it’s always good to get another eye. Now, from these 2,129,437 URLs, we wereable to convert 1,787,411 of them to their securecounterparts, saving a lot of Pens from obscurity! From this point, we didn’t want to abandon thoseremaining resources. We parsed through those thatcouldn’t be fixed, and compiled a list of those mostused. Any resource that had over 500 uses that didn’thave a secure server was put onto a list; a lot of thesewere small libraries created by individuals, which arealso very important to us. We reached out to these people, and found a lotof them were happy to provide us with either a new september 2017 85

Discover another of our great bookazines From science and history to technology and crafts, there are dozens of Future bookazines to suit all tastes

AccessibilityAccEssIbILItyREACT DoCumEnTATionAlmero Steyn explains why his paper was necessary to help React developers and create accessibility awareness WebAIM recently conducted an automated applications. The section on accessibility contains accessibility scan of the Alexa Top 100 websites excellent resources detailing when and why a websiteand found that accessibility errors have increased by may become unusable to many people and how you60 per cent since its previous scan in 2011. The report can avoid these situations.mentions the use of JavaScript frameworks andlibraries as one possible cause of this increase. Do all What can I do? Whether or not you are new toof these tools automatically exclude accessibility or accessibility, the new page is a great place to we simply lack the knowledge to make our web Explore the text and resources and apply thisapplications accessible? knowledge in your React applications. Remember, We can most certainly create accessible breaking out of old habits can be hard, but it can alsoapplications in React, which is why I recently open up exciting new opportunities.authored a section on accessibility for the Reactdocumentation. Inside it you will find that although Is it useful if I am not a React developer? The newwe build React interfaces directly in JavaScript with page features many general accessibility resourcesJSX, a good understanding of writing solid, accessible that are helpful regardless of the technology stackHTML translates almost directly into your code. you prefer. Aside from HTML techniques, it also focuses onAccessible Rich Internet Applications (ARIA) patterns I am a tester. How do I test for accessibility? Youand tools (such as eslint-plugin-jsx-a11y3 and react- can also read the accessibility page as it mentionsaxe4) that can help with the development and testing a number of testing tools and techniques, many ofof React applications. In addition, it serves to create which can test the accessibility of websites built inaccessibility awareness and bundle the necessary any technology.information and resources together to assist theReact developer. Single-page applications, such as those created Why all the fuss about accessibility? Because with React, are here to stay. As the JavaScripteveryone should be able to use our React ecosystem itself becomes more accessible to developers of various backgrounds, these applications will only become more prolific. Only if we design, code and test for accessibility can we help turn the tide and build a more inclusive web. PROFILE Almero is front-end engineer and accessibility specialist at QDelft in the Netherlands, advocating a11y in design, development and testing. september 2017 87

PROJECTS Firebase + Push.js View source files here! All the source files you need for this tutorial can be found at the Authortyler NickersoNw: tylernickerson.comt: @tylernickersonjob: Freelancerareas of expertise:HTML, CSS, JavaScript Firebase + Push.js Add Push NotificAtioNs to Your WEBsitE Tyler Nickerson shows you how to push your site’s latest content directly to users with only a few simple lines of JavaScript As the popularity of smartphones has risen are achievable on websites as well. The JavaScript over the past decade, the demand for real-time Notifications API (and related Push API) can enable information delivery has grown exponentially. Gone modern web browsers to deliver push notifications are the days of commenting on a Facebook post and to both desktops and mobile devices. While the waiting for an email to inform you someone code behind these APIs might seem daunting, we’ll commented back. Today, all information comes in be using the insanely easy-to-use Push.js (pushjs. the sound of a buzz and in the form of a notification org) library, as well as its Firebase Cloud Messaging on your lock screen. Not only has this new form of plugin ( information delivery significantly streamlined a to effortlessly bring the power of these push user’s ability to receive information regarding the notifications to your website. platforms they use, but it has also managed to significantly improve user engagement as well. Users Before You Begin are much more likely to keep a clean lockscreen than a clean inbox. In order to complete this tutorial, you must have While push notifications are most often associated a registered Google email address and password. with native mobile apps, the same notifications Additionally, please note that the final code should be able to run on any desktop browser that supports88 september 2017

service workers ( Firebase + Push.jsworkers), as well as the latest version of GoogleChrome for Android. KeY FeaturesAdd Push.js the Power of PushTo begin, you’ll want to download Push and the PushFCM plugin from either npm, Yarn or Bower. For the The JavaScript Notifications API can be rather daunting bypurposes of this tutorial, we’ll be using npm: nature. When used in vanilla JavaScript, the developer is solely responsible for managing notification permissions, cross-$ npm install push.js --save browser ambiguities, as well as accommodating for both desktop$ npm install push-fcm-plugin --save and mobile. Push makes it easy: no hand-written permission checks, no conditional code execution – just a universal API capableNext, import the two libraries into your HTML via of sending notifications from any modern browser, on any modernscript tags. Make sure that the FCM plugin is loaded device. Creating a local notification in Push is as simple as:after Push. It is recommended that you configure Push.create(“Hello world!”, {your web server so that the library files can be body: “How’s it hangin’?”,accessed at a simpler location, but for now we’ll just icon: ‘/icon.png’,use the raw paths: timeout: 4000, onClick: function () {<script src=”/node_modules/push.js/bin/push.min.js”></ window.focus();script> this.close();<script src=”/node_modules/push-fcm-plugin/bin/push.fcm. }min.js”></script> }); For more information on using Push, check out or visit theBoth scripts require service workers to run properly, GitHub repo at by default look for the minified versions of thesescripts at your web server’s root directory. Service Service workers are workerworkers are worker scripts that allow browsers to scripts that allow browsers toperform certain functionality even when they’re perform certain functionalityclosed. Although the locations of these scripts can be even when they’re closedconfigured via the Push.config() method, it is advisableto instead configure your server to make them september 2017 89accessible from your server’s root directory (ie /) tomatch the default configuration and avoid errors.The two scripts are serviceWorker.min.js and firebase-messaging-sw.min.js and can be found in the samedirectories as the above files.Add fireBAseAlthough Push as a standalone library has theability to send desktop and mobile notifications, itcannot do so unless the browser is open. As a result,we need additional back-end code that can keeptrack of notification subscribers and send themnotifications even when the browser is closed. Thisis where Firebase comes in. Firebase is a freemiummobile and web development platform acquired byGoogle in 2014. Among the features offered in theplatform’s free tier is Firebase Cloud Messaging,which we’ll be using to send push notifications viaPush. The process of signing up and obtaining theneeded configuration values is pretty much painless:1. To begin, head on over to the Firebase homepage ( and sign in.

PROJECTS Firebase + Push.js 2. Once logged in, click Go To Console in the upper right-hand corner. resOurCes 3. Click Add project, enter a project name and region. AdditioNAl 4. Click Create Project. Firebase should redirect you reAdiNg to your new project’s console. This tutorial only scratches the surface of Push and Firebase. 5. Click Add Firebase to Your Web App and copy the To learn more about these two powerful frameworks, check out the resources below. generated config variable. 6. Paste the variable into a new JavaScript file Push Push.js: An introduction called main.js. 7. Lastly, go back to your HTML and import Firebase, t7o5izwi9 just above the line in which you had imported My personal introduction to Push.js, written last year, discussing Push. Seeing we only need the Firebase core the motives and goals of the library. + Cloud Messaging, we can import just the namespaced JavaScript: Quick tip: the easiest way to show browser notifications <script src=” firebase-app.js”></script> <script src=” notifications firebase-messaging.js”></script> A tutorial on setting up local notifications on your website via Push. Be sure to import main.js as well, after Push. Push.js fCm plugin Add fireBAse to Push Full documentation and source code for the Push FCM plugin. Hooking FCM into Push is super simple. Currently, your main.js should look similar to the following: fireBAse set up a Javascript firebase Cloud messaging var config = { client app apiKey: “<YOUR_API_KEY>”, authDomain: “<YOUR_AUTH_DOMAIN>”, databaseURL: “<YOUR_DATABASE_URL>”, Further documentation on the Firebase Cloud Messaging API, as projectId: “<YOUR_PROJECT_ID>”, well as how to send messages to multiple devices. storageBucket: “<YOUR_STORAGE_BUCKET>”, messagingSenderId: “<YOUR_MESSAGING_SENDER_ID>” name it In the project creation window, you can specify your project’s name }; and region. Make sure the name reflects your website. … where all of your information should be filled in 90 september 2017 above. To enter this data into Push, we simply set a configuration value for FCM: Push.config({ FCM: config }); Finally, to initialise FCM, we can just call: Push.FCM(); rememBer users Unfortunately, our code doesn’t do much yet. The FCM() method assigns users a unique Firebase Instance ID, which will be used to identify them when sending out notifications in the future. However, the server needs this information in order to send notifications. Fortunately, a configuration property exists precisely for this

Firebase + Push.jspurpose. In our config variable, we should now add Add firebase From your project’s console overview, select ‘Add Firebase to your web app’.another key:... sendTokenToServer: function(token, callback) { var http = new XMLHttpRequest(); var url = “endpoint.php”; var params = “token=” + token;“POST”, url, true); http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); http.send(params); callback(); }};This method sends any new Instance ID the Accurate key Copy the correct server key. Firebase no longer accepts the legacy key in request headersuser receives to your server. In production,endpoint.php should be replaced with your designated 2. Click Project settings.server endpoint. 3. Navigate to the Cloud Messaging tab. 4. Under Project credentials you should see a server While this method has not been enforced in thistutorial, your server should save these ID tokens in key beginning with AAAA (do not use the legacysome form of persistent storage, as they can be used key). Save it. Treasure it. You’ll need send notifications in the future. In some cases,you may wish to also pass on user information along Finally, from your web server, you can sendwith the Instance ID in the above request so that notifications by making a simple POST request toyou can map Instance IDs directly to the users they This request shouldbelong to. contain the following header:send notifiCAtions Authorization: key=<YOUR_SERVER_KEY> Content-Type: application/jsonThere are a few minor tweaks that you must makefirst before you can send notifications to a user. And the corresponding body (using the proper data):Firstly, you must place a proper manifest.json file inthe root of your web server. This JSON file will tell {Firebase that your site has been authorised to receive “notification”: {messages. Taken from the Firebase site, this JSON “title”: “<NOTIFICATION_TITLE>”,file should contain the following. Note that it should “body”: “<NOTIFICATION_BODY>”,not be changed: “click_action” : “<URL_NOTIFICATION_SHOULD_LINK_TO>” },{ “to” : “<INSTANCE_ID_TOKEN>” “//”: “Some browsers will use this to enable push }notifications.”, “//”: “It is the same for all projects, this is not your project’ssender ID”, “gcm_sender_id”: “103953800507”}Import the manifest at the top of your HTML:<link rel=”manifest” href=”/manifest.json”> And that’s all there is to it! Now you can send any user on your website a catered Push notification asNext, you’ll need your server key. long as you have their unique Instance ID.1. Go back to your project’s console and click the gear For a full example of what Push and FCM look like icon at the top of the left sidebar. in action, check out the GitHub repo ( Nickersoft/push-net-tutorial). september 2017 91

PROJECTS ExpoAbout the AuthorMArk GoodyeArw: markgoodyear.comt: @markgdyrjob: Co-founder ofBig Bite Creativeareas of expertise:JavaScript, HTML/CSS,React/React Native Expo Jump start react Native with expo Mark Goodyear teaches you to build React Native mobile apps with push notifications using the Expo toolkit Intro to react natIve that aren’t included in the React Native core, but are often used, such as icons, blurred views and so on React Native is a platform that lets us build without needing to write a line of native code. Expo native mobile apps using JavaScript. As the can also create submission-ready app builds without name implies it uses React, so composing mobile needing to build using Xcode or Android Studio. If interfaces is relatively the same as using React on you haven’t used either before, they can be a scary the web. Rather than creating components using place, especially if you’re just getting started with HTML tags, it has its own set of components that React Native – or mobile app development in general. bind to native UI components. React Native can be Apps (or projects) can also be published to Expo tricky to set up, especially when it comes to push rather than submitting to an app store, which lets notifications. We’d need to set up certificates and users try the project through the Expo mobile client. dive into Objective-C for iOS and Java for Android. Don’t worry, this will be covered later! However, Expo eliminates the need for this. Set up expo Intro to expo Installing Expo is a straightforward process. Head Expo lets us create React Native apps and deploy over to the site ( and download the latest XDE, them to the app stores using only JS. Additionally, then install the mobile app on your phone or tablet. it offers an SDK with access to native functionality The mobile client enables running apps on a real such as notifications, camera, contacts, location and device via their app without needing any developer so on. It also provides access to some UI components92 september 2017

Expolicences or certificate setup upfront. We can thenpublish apps to the Expo service so that users canrun our finished projects via the Expo mobile client,without needing to go through the App Store andGoogle Play review processes. Expo does support building stand-alone apps thatcan manually be published to the App Store or PlayStore, however we would require developer accountsfor the platforms we release on. Apple’s DeveloperProgram costs £79 per year and Google’s Play Consolecosts a one-time fee of $25 USD.create our fIrSt app expo details This XDE gives us detailed information for our easy scan Running an app on a device is a project. The left window is the React Native Packager and the no-fuss experience. Just scan a QR code withLet’s get to business and create our first app withExpo. Open up the Expo XDE, select Project>New right window shows any logs from devices the Expo app and it loads right awayProject and select the blank template. This willcreate a new project. Install all the dependencies and in focusstart the React Native packager, which bundles allthe assets. From here, we can publish the app, share whAt’s expo?the app to the Expo mobile client or run the app on asimulator. Our app is going to involve creating push React Native is a framework that lets you build native mobilenotifications, so we’re going to share to the Expo apps using just JavaScript. Getting started can be a scarymobile client, as simulators don’t support them. place with needing to learn tools like Xcode and Android Studio,Clicking the share button, we get a QR code to scan, setting up developer accounts and certificates, and diving intoor the option to send a link via SMS or Email. Scan Objective-C and Java to get things up and running on a device. Nothe QR code with the Expo client. This runs the app more! This is where Expo comes in. Expo is essentially a toolkit thatthrough the Expo client and it opens up to a screen bridges the gap and makes getting started with React Native a joy.with ‘Open up App.js to start working on your app!’. Also you don’t need to get your hands dirty with the lower level side of things. From development, to distributed testing, to publishing With the app running, open up the project in your an app, Expo has it all handled.favourite code editor and open up App.js. Find the textabove and change it to the classic ‘Hello world!’ , thensave. You should see the app reload automaticallyand have the text ‘Hello world!’ now visible. Magic! While you are developing, shaking the device willreveal a developer menu, which has helpful optionsfor debugging. From this menu we can also returnto the Expo home – helpful to exit out of the app orswitch to another.add notIfIcatIonSNow we have a basic app set up and running, let’sadd the ability to send and receive notifications.This would normally require Objective-C andJava, integrating a third-party service to send thenotifications, and we would also need to set upcertificates for iOS and create keys for Android. First, we need to import Permissions andNotifications from Expo and create a new functionin the App class:import { Permissions, Notifications } from ‘expo’; Simple things There’sexport default class App extends React.Component { no need to learn Xcode or async registerForPushNotifications() { Android Studio because } Expo does all the hard} work for you september 2017 93

PROJECTS Expo Here we use the async keyword to make use of the ES2017 async/await feature – React Native has REsouRcEs Babel working under the hood so we can leverage all the new JavaScript goodness. Now, let’s ask for certificAtes And keys notification permissions and retrieve the Expo push token – to identify the device – so that Expo knows Setting up push notifications can prove to be a tricky thing to where to send push notifications: accomplish, especially if you’re not familiar with native iOS or Android development. For iOS you will need to join Apple’s async registerForPushNotifications() { Developer Program at £79 per year. You will then need to create certificates that have push permissions and set up provisioning const result = await Permissions.askAsync(Permissions. profiles to be able to run an app on a device. For Android this is a similar process so you will need to sign up to Google’s Play Console, REMOTE_NOTIFICATIONS); and pay a one-time fee of $25. You’ll then need to set up a key for the Google Cloud Messaging Service. Both of these methods will if (result.status !== ‘granted’) { require native code implementations to complete the process. With Expo, this is all nicely handled for you out of the box so that you can return; get started right away. } expo alerts The toolkit makes sending and receiving push notifications effortless const token = await Notifications.getExpoPushTokenAsync(); developer menu This menu enables easy access console.log(token); to debugging tools } 94 september 2017 Here, we will ask for notification permission using the Permissions.askAsync() method. The alert will only show on iOS as Android enables notifications by default. Despite this, we actually still need to run through the same logic on Android, as it’s possible to turn notifications off. Next, we then check the response and if the notifications aren’t granted then we can stop and return out of the function. If notifications are granted, we then get the push token from the Expo service. Finally, we will log the token out for later use to test notifications and this will get logged to the Expo XDE. It’s worth noting at this point that – on iOS – this alert can only be triggered once by design; so, if a user denies permission, you may want to consider adding a custom notice or alert before returning out of the function. In order to enable notifications at this point, the user will need to go to the app settings (in our case, this will be Expo)>Notifications and enable them from there. Because of this, you will need to delete the Expo mobile client and then reinstall if you wish to test the permission alert on iOS more than once. Additionally, Expo provides a method called Permissions.getAsync(), and this works in a similar way to Permissions.askAsync(), just without firing off the iOS alert. This could be useful if you want to check the status first to create a custom flow that will ask you for permissions, for example. If the iOS alert has previously been triggered (remember, it can only be fired once per app install), the Permissions.askAsync() will return the same information as Permissions. getAsync(), so in our use case we don’t need to use Permissions.getAsync(). We then need to call this function in the componentDidMount lifecycle method so that it runs on app launch:

ExpocomponentDidMount() { curl \ this.registerForPushNotifications(); -X POST \} -H “Content-Type: application/json” \ -d ‘{Next, if we accept the notification permission, “to”: “<TOKEN>”,our app will be able to receive local and remote “title”: “Notification title”,notifications. Local notifications are then set up and “body”: “Notification body”,sent via the device directly to the app and doesn’t “data”: { “value”: “Hello world!” }require an internet connection. Remote notifications }’ \come from a server and sends the notification via Apple Push Notification System (APNS) or GoogleCloud Messaging (GCM) services. This process You can grab this cURL command from also require access to an internet connection If you’re not familiar with cURL, you can send theto receive them. Expo has a service to send request using something like Postman (getpostman.notifications at, all we com), which uses a GUI for sending requests.need to do is send some data to it. This will then looka little like the following: Once the request has sent, you should now see the notification come through. There are no limitations{ on using the Expo push service. In a real-world // The push token. scenario, it’s encouraged to use the batch API by “to”: <token from the app> sending an array of push notifications, in batches of // The notification title. 100, to be sent out for efficiency: “title”: “Notification title”, // The notification body. [ “body”: “Notification body”, { // notification object as above }, // Pass in data as an object, this can be used when handling { // another notification object }the notification. ] “data”: { “value”: “Hello world!” }} uSIng puSh notIfIcatIonS In a real-world exampleNote: you can check the Expo docs ( formore advanced configuration. Let’s take a news app as an example. Say the app uses a service which polls for breaking news stories, Before we test a notification, we will configure and it has a user system. We could store the Expoour app to handle notifications if the app is open. By token for a user in their metadata; then, when thedesign, iOS and Android don’t show a notification service finds that there is a new story, it can send awhen an app is open. We can also handle any data push notification about the story to users who havesent in the push message here, in case we need to act an Expo token stored.on it. Let’s create a new function to handle this andalert the data value property: publISh wIth expohandleNotification(notification) { So, now that we have a shiny new React Native alert(; app (even if it doesn’t do much yet!), how do we let} others use it without running it from Expo XDE? The simplest way is by clicking Publish from the XDE.Then in our componentDidMount lifecycle method we This will publish the project to Expo and a link willneed to set up a listener, which calls the notification appear on your profile, which you can find at https://handler we just created:<username>.componentDidMount() { When you are visiting the published project link, this.registerForPushNotifications(); there will be a QR code to scan (located among the Notifications.addListener(this.handleNotification); same options as the XDE) with the Expo mobile} client, just like during development. If we want to update the app, all we need to do is republish,We’re now set. Let’s send a push notification with a and the changes will be available to the user whencURL request: running the app again. You can find the app we just built here, with a few extra goodies: Happy building! september 2017 95

Hosting Partners Keyhosting directory contact us To advertise here, contact our sales team: +44 01225 68 7832 [email protected] Featured Host As well as selling domain private label website, and an names at rock bottom API for full automation. prices, offers great value cPanel Web Web developers and web Hosting, SSL Certificates, designers will appreciate our Business Email, WordPress low pricing, comprehensive hosting, Cloud, VPS and product range and UK support. Dedicated servers. Part of a hosting brand If you are a reseller, we started in 1999, we’re well offer a comprehensive product established, UK based, portfolio for your customers independent and our mission and resellers, a ready-made is simple: ensure your web presence “just works”. CoNtaCt 0370 321 2027 / [email protected] “… light years ahead of the competition in Free WItH eVerY doMaIN terms of continuity of service. On the very rare occasion when we have a problem it is ● Free Email Accounts Receive two personalised email addresses with free fraud, spam resolved immediately and courteously. and virus protection. A first-class technology-based company ● Free DNS Management with excellent customer care” Free lifetime DNS service that lets you manage DNS records on a globally distributed and highly redundant DNS infrastructure. expert tip ● Easy-to-use Control PanelDomain name choice... Use our intuitive Control Panel to manage your domain name, configure email accounts and renew your domain name.Before choosing a domain, make sure you check outthe range of new domain extensions now available. ● Free Email ForwardsThere are hundreds to choose from. Create free email forwards and automatically redirect your email to existing email accounts. ● Domain Theft Protection Protect your domain from being transferred out accidentally or without your permission with our free Domain Theft Protection.

Advertisement1&1 INterNet NetCetera1&1 Internet is a leading hosting provider that enables Netcetera provides hosting from one of Europe’s most energy-businesses, developers and IT professionals to succeed online. efficient data centres. It offers everything from reliable low-With a comprehensive range of high-performance and affordable cost hosting for single sites through to complex cloud, racks andinternet products, 1&1 offers everything from simple domain managed IT solutions. Netcetera has a large portfolio of green,registration to advanced eCommerce packages. zero-carbon solutions for businesses of all sizes.0333 336 5509 0800 808 CataLYst2Tidyhosts boasts a feature-rich selection of services from As one of the UK’s most experienced hosting companies,shared web hosting, WordPress hosting, hosted exchange, Catalyst2 has built a stable, reliable and well-supportedvirtual servers and streaming. Tidyhosts’ passion and drive hosting platform for organisations across the UK. Catalyst2has gained it a highly reliable and trusted reputation from its specialises in very high-availability hosting and exceptionalcustomers, making it the number 1 choice for hosting services. customer support. Contact the team today for a quote.0560 367 4610 0800 107 79 [email protected] INterNet aDvertise here!As one of the UK’s leading web hosting authorities, Heart Would you like to promote your hosting businessInternet focuses on designers, developers and technically and services to our audience of professional webadept businesses. It builds on our four tenets – speed, reliability, designers and developers? If so, please call or emailsupport and security – to create award-winning solutions for over Chris as below.500,000 customers. reasoNs to adVertIse+44 (0) 330 660 ● Reach professionals: 75 per cent of readers are working in or seeking work in the web industry ● Variety of projects: Future projects include mobile apps, web apps and CMS-driven sites ● Home workers: 51 per cent have a personal website under development CoNtaCt +44 01225 687832 / [email protected]

next monthCSS GRID laYoUT: THE SECRETS Rachel Andrew goes undercover to reveal the secret features you need to know aboutInside the world of PlUS Zell liew interview, UX, psychology & ally long profile &customer behaviour RetroFuzz explain how much, much more they built Wrangler’s 70th anniversary siteISSUE 298 on SalE 7 SEPT Print edition, back issues and sPecial editions available at editions available on itunes, google Play, kindle, nook and Zinio

9000 9012

Net_Sep 2017

The book owner has disabled this books.

Explore Others

Like this book? You can publish your book online for free in a few minutes!
Create your own flipbook