Table of contents for November 2016 in net

@woodss That it can’t look exactly the same on a huge number of browsers and devices, despite our best efforts @7strel That they are not the end user. We are making a website for their clients’ needs, not theirs @caroseuk That they need to supply the content for the site to look/function as expected @petebarr Hi-fidelity concept sign-offs to an actual launch-ready site bridge. Makes you want to jump off a real bridge sometimes @andybudd The variance of price between agencies is hugely confusing for clients @maxray We have had to return to desktop mockups to get sign off as they can’t grasp prototypes @LittleDotChris Clients forget they are paying for a service not just the end product. It costs £X because I spent a month building it @TazJohnston I’ve…

Ben Furfie, North-West England, UK BS: Yes. Building frontends using exclusively client-side code (HTML, JavaScript and CSS) and hooking them to APIs via AJAX has two clear advantages over the server-rendered-HTML model (PHP, ASP, JSP and so on). BENEFIT 1: UBIQUITY + Client-side code is based on open standards and can run virtually anywhere. These days, with technologies like Cordova, React Native and Electron, ‘anywhere’ includes desktop and mobile apps too. This provides an incredible opportunity for code reuse across platforms. We see many apps taking advantage of this today, including Slack, Twitter, Medium and Facebook. BENEFIT 2: COST + Static hosting is unbelievably cheap. Cloud providers like AWS, Azure and Google Cloud let you host static files (JavaScript, HTML, CSS, images and so on) on a global, distributed infrastructure…

GAUGE THEIR ABILITY “I drop a few key terms in and see how they react, and then gauge it from there,” says @myfirstraygun. Tailor your language to suit them, and use examples as much as possible to ensure things are clear, recommends @welshfruit. She also points out: “They might not clarify assumptions for fear of looking stupid.” FOCUS ON PROCESS A process-led approach can help you get what you need from clients to make the project work. “We explain how we manage the work (Basecamp, etc.) and the ‘usual’ process a project follows in terms of delivery,” says @woodss. This is echoed by @welshfruit: “Focus on the journey, not the deliverable”. BUSINESS GOALS Showing how the work aligns with what they want to achieve in their business is a good…

LLOYD JAMES Developer bopgun.com TOWER AND BEANSTALK If you’re still manually putting files up onto your server then this is a great combo for Mac users. Even if you’re not in a development team, I’d highly recommend setting it up because it helps you keep on top of your workflow. www.git-tower.com beanstalkapp.com PREVIEW MY WEBSITE Unless you’re very lucky, most clients won’t have access to multiple devices when you’re sending over a link to their site. This simple site lets you view complete working sites on the three main viewports, in one place. www.previewmywebsite.online SEARCH AND REPLACE Moving sites from staging to production in WordPress can take a lot more time than you’d think. This great little script does all the hard work for you – just bung it into the…

GATHER NORTH DATE: 11-13 NOVEMBER 2016 LOCATION: ONTARIO, CA Gather North is an event for the women that create the web. This year’s weekend will take place in an old knitting millturned luxury inn, and places are limited, so book soon! gathernorth.com HALFSTACK DATE: 18 NOVEMBER 2016 LOCATION: LONDON, UK Since its launch in 2010, London Ajax has brought together tecchies in the UK capital at least once a month. It’s next event, HalfStack, will offer a range of JavaScript talks in a pub, followed by an after party in another pub (complete with JS pub quiz). halfstackconf.com DOTCSS DATE: 2 DECEMBER 2016 LOCATION: PARIS, FR The largest CSS conference in Europe returns to the stunning Théâtre des Variétés in Paris this December. Val Head, Philip Walton and Kevin Mandeville…

Condé Nast creativity.condenast.com GQ, Condé Nast’s revered men’s fashion and style magazine, recently launched a redesign for its homepage, based around the quest to increase traffic and recirculation. In a piece for Digiday, Mike Hofman, GQ’s executive digital director, says: “Your mobile homepage can become an important recirculation moment.” GQ made conscious design decisions across the site to help drive traffic back to the homepage; for example, increasing the size of the navigation bar on small screen sizes to push users there when landing on an article from another source. The page feels, appropriately, like a glossy magazine cover, with its use of punchy imagery, typography and layout. When landing on the page, clearly defined sections of content determine which stories GQ thinks are the most important – a splashy…

Get Involved is a UK-based portal that allows users to quickly and easily find nearby volunteering opportunities. The major goal was to make volunteering accessible and overcome the clunky interfaces often associated with these websites. The design has been created content-first, with positive and cheerful character – but not so much as to get in the way of functionality. I’ve chosen to use date- and location-based search parameters to make it easy to find opportunities to fit around the user’s lifestyle. A ‘How you help’ section and user testimonials communicate quickly and efficiently the positive impact volunteering can have. I’ve tried to instil a colourful, upbeat tone while remaining gender-neutral, and have used rich imagery and spacious layouts to lead users towards focal points and calls to action, to increase…

 ‘We tested that, and it failed.’ This excuse is rampant in the world of A/B testing, but it can overlook the fact that a concept in itself is fundamentally different from the execution of a concept. Ideas often resurface over time. Ones that failed before tend to be labelled as failures, and they never make it out of a new gate. As Booking.com has more than 10 years of A/B testing experience, much has been tried. We’ve failed many times and won occasionally too, but there’s always room to improve. That’s why my reaction to dismissive statements towards a solid concept is, ‘OK … What exactly did you try and when?’ This curiosity stems from my experience that there are far more ways to fail than there are to succeed.…

ABOUT THE AU THOR SHIKHAR KAPOOR t: @kapoorshikhar job: Frontend engineer, Flipkart areas of expertise: JavaScript, web performance, dev productivity q: what’s at the top of your bucket list? a: Watch Dave Matthews Band live! View source files here! All the files you need for this tutorial can be found at netm.ag/pwagit-286 GENERATE Shikhar Kapoor will be speaking at Generate Bangalore on 2 December. His talk will explore how we can reignite the web with PWAs. Find out more and pick up a ticket at netm.ag/kapoor-286 Native mobile applications have set a high benchmark for the web by providing a rich and reliable internet experience for users. However, in terms of discoverability, the web has been the undefeated leader for over a decade now. With more and more browser vendors…

ABOUT THE AU THOR NINA GEOMETRIEVA w: www.dribbble.com/ni t: @geometrieva job: Design lead, Grab areas of expertise: App design, illustration q: what’s at the top of your bucket list? a: To live forever. Technically, I’ll never be able to cross that off the list, because either I’ll be too dead to do it, or I will succeed in living forever RESOURCE Illustrator Justin Mezzell has put together this great tutorial that explores Photoshop techniques for creating perfectly harmonious colour palettes: netm.ag/mezzell-286 I sat down, played some music, dimmed the lights and opened my laptop. I had lots to do. In an effort to summon inspiration, I started doodling lines from one corner of the screen to the other, when I saw a comet form. “Hmm, ” my brain slowly started up,…

ABOUT THE AU THOR CORY SIMMONS w: github.com/corysimmons job: Frontend designer areas of expertise: Design, frontend, backend q: what’s at the top of your bucket list? a: Introducing a new form of online government that puts the power back into the people’s hands View source files here! All the files you need for this tutorial can be found at: netm.ag/postgit-286 TOP TIP Build all your preprocessor libraries in PostCSS. This way anyone can use them – not just a single preprocessor’s audience Flexbox is a great tool for reducing CSS bloat, and has some sugar built in to deal with things like source order and alignment. But it doesn’t offer any help for doing the maths that creates column and gutter sizes. As many experts repeatedly state: Flexbox is nice, but…

ABOUT THE AU THOR SHAWN JANSEPAR t: @shawnjan8 Job: Director of engineering, Mobify Areas of expertise: Full-stack development q: what’s at the top of your bucket list? a: Cycle across Canada View source files here! All the files you need for this tutorial can be found at netm.ag/astrogit-286 VIDEO Shawn Jansepar has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/astrovid-286 When you decide to build an iOS or Android app, you have a couple of choices: build it natively, or build it as a PhoneGap app. The downside of building a fully native app is that it’s a very costly endeavour – both in terms of initial setup and maintenance. Adding a new feature to the iOS app will usually mean a corresponding update to…

much of an app can and should leverage web content, there are plenty of features that should be native in order for the app to feel at home on the platform it’s running on. Astro comes with a number of default plugins/components to help you build fantastic progressive apps. The UIs for these plugins leverage the native UI kits for iOS and Android. What follows is a list of the most important plugins that ship with Astro. For more options check out our docs, or if you want to write your own take a look at this guide: netm.ag/native-286. Navigation Allows you to manage a stack of views (native or web), and comes with the standard transition between views for each respective OS (for iOS, it’s a right to left…

ANNA STOUT Anna is the owner of web design and marketing agency Astute Communications. From page 68 she runs down the five critical steps of site planning w: www.astute.co t: @Astute_Anna MICHEL FERREIRA Michel is a UX designer for Booking.com, which swears by designing with data, and from page 76 he takes you on a deep dive into A/B testing best practices w: www.michelferreira.me t: @multimichel SOPHIA VOYCHEHOVSKI Sophia is the founder of UX studio Rewired, and teaches object-oriented UX, which she introduces us to on page 28, to companies around the world w: www.rewiredux.com t: @sophiavux SHIKHAR KAPOOR Shikhar is currently a UI engineer at Flipkart, India’s biggest ecommerce company. On page 84 he explains how to build a progressive web app w: www.flipkart.com t: @kapoorshikhar…

AUTOFILL + Did you know that you can scan in credit card information with mobile Safari? It’s even possible to create a form that supports this feature. This article by Jason Grigsby of Cloud Four explains how autofill works, why it’s important (forms get filled in 30 per cent faster, apparently) and how to use it in conjunction with other advanced features. netm.ag/autofill-286 FEATURE QUERIES + Modernizr has long been a great way to find out if a new CSS feature is supported by the browser, but it requires JavaScript. In this article Jen Simmons introduces feature queries (or the @supports rule) as a faster, more robust alternative solution. netm.ag/queries-286 PATTERN LAB NODE + Pattern Lab is a set of tools that helps large teams to build atomic design systems.…

What we think…

We are the essentialists. You will be assimilated. Resistance to simple design is futile. Sorry to be so blunt about it, but those are the facts. That may scare statusconscious designers, but it’s great news for users, who will continue to be empowered by essentialist design’s emphasis on content and ease of use. Skeuomorphism has served its purpose. By referring back to the pressable buttons and manila envelopes of the physical world, it helped early PC users get their bearings in the digital one. Next came Web 2.0, all bubbly and colourful, like a cluttered candy shop. But that didn’t stick either, and for good reason – users wanted still more content and fewer distractions. So in about 2012 a new generation, raised online and unsentimental about leaving the ‘real’…

Gather Kent is a charity tasked with getting young people involved in the rewarding world of volunteering – it targets 14-25 year olds around the county. I’ve tried to balance youthfulness with professionalism. Overall, the design sports an energetic colour palette with a colourful treatment applied to images, but for the more formal areas of the site, a clear and flat colour design is utilised to help ensure the focus remains on the important messages the site is communicating. I was torn between presenting a radical layout to satisfy a tech-savvy youth audience and sticking to something more familiar as a web service. In the end, I decided gamification would play a heavy role. Volunteers earn virtual points and achievement badges for a variety of online and offline tasks. When…

At Booking.com, because A/B tests are central to the way we build our product, we developed an internal experimentation tool. This allows us to maintain a much deeper level of flexibility and control of how and what we want to measure. If you and your company don’t have this luxury of a personal tool, here are some great options for you to start your experimentation today. Hosted services These are some of the hosted options available out there, presented in no particular order. All of these options can provide you with an easy interface and quick start into the world of A/B tests. Some of these hosted services are WSIWYG and do not even require any coding skills. Not only that, but they have several learning resources, offer very good…

Let’s take a closer look at how the rules covered in this article fit with my most liked illustration (shown opposite). Illustration style and aesthetic rules I only use a few colours, I create every object using only a rounded wavy geometric pattern, and I direct all objects at 30 degrees. These rules might seem nonsensical and redundant, but they synchronise the style and bring unity to the disconnected elements. Colour choices It turns out that my brain has decided to label this illustration as simple, because of the amount of elements and details in it. This gave me the freedom to go crazy with the colour palette, which comprises a roughly triadic choice of magenta, cyan and yelloworange. The yellow-orange colour is more of an accent, to create a…

+ Grid systems are full of bloat. You could master the preprocessor mixins associated with whatever framework you’re using to mitigate this problem, but these mixins can be complicated, and they still limit your creativity by tying you to a fractional (e.g. .col-1-16 { width: calc(100% * 1/16); } ) grid that forces you to use a particular type of markup throughout your site. Wouldn’t it be nice if grids were easy? Wouldn’t it be nice if we could create bespoke, lightweight grids with our own locally sourced syntax, along with a range of irregular (and/or regular) sizes and capabilities like offsetting and source ordering, in just a few lines of code? With postcss-ant, grids stop being a boring, bloated burden. Want columns in 100px 1/7 auto 25/100 15em ?…

ABOUT THE AUTHOR RAY VILLALOBOS w: www.raybo.org t: @planetoftheweb job: Senior staff author, Lynda.com areas of expertise: Frontend and fullstack web design and development q: what’s at the top of your bucket list? a: Definitely snowboarding – but living in Florida, it might take me a while to accomplish View source files here! All the files you need for this tutorial can be found at netm.ag/reactgit-286 VIDEO Ray Villalobos has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/reactvid-286 Learning React, the JavaScript library for creating user interfaces from Facebook and Instagram, is just crazy. Rather, it seems nuts until you give it a chance. Things get much easier when you understand five key concepts. I call these the five mind shifts. They are: Components, JSX, state,…

ABOUT THE AU THOR THEO NICOLAOU w: theo-nicolaou.co.uk t: @theonico85 job: Frontend developer, Natural History Museum areas of expertise: HTML5, CSS3, Sass, responsive design q: what’s at the top of your bucket list? a: To travel to all the countries that host a Formula 1 Grand Prix in one year, conveniently while the races are on! FACT FILE DEVELOPMENT Alfred has been in development since March 2013 and recently released version 3.1. Judging by its GitHub page, Quicksilver has been going since 2011 and appears to be actively developed. GETTING INVOLVED Both apps have active communities. You can join the discussions for Alfred at www.alfredforum.com, and check out the Quicksilver discussion groups and Slack channel at www.qsapp. com/support.php.…

Mail, tweets, posts and rants CONTACT US @netmag /netmag netmag@futurenet.com net.creativebloq.com medium.com/net-magazine FLEXBOX AND SUSY Comment on Wes Bos’ guide to Flexbox (netm.ag/bos-286): Flexbox does some exciting new things with grids, but if I’m not mistaken, it still forces you to calculate/set width percentage. Although not a framework, Susy auto-calculates widths, saving a tremendous amount of tedious work. Combining the two is certainly an interesting option though. Just my $0.02! Joel Paterson Wes Bos: Hey Joel. While you can still set widths in pixels and percentages with Flexbox, it’s not necessary to do the ‘add everything up to 100 per cent’ dance you used to with floats. I often tell people to ‘embrace the flex’ - meaning that Flexbox is, well, flexible! One of the fundamental ideas behind Flexbox is…

Send your questions to netmag@futurenet.com   THIS MONTH FEATURING... NILS SKÖLD Nils is design director at Ape, a digital product studio in Sweden w: www.nilsskold.se t: @nilsskold BILL SOUROUR Veteran programmer Bill is the founder of Dev Mastery w: www.devmastery.com t: @billsourour SALLY JENKINSON Sally is a solutions architect focusing on transformation w: netm.ag/jenkinson-286 t: @sjenkinson JASON GRIGSBY Jason is the co-founder of Cloud Four and co-author of Head First Mobile Web w: www.userfirstweb.com t: @grigs QUESTION OF THE MONTH How do you remedy the isolation of working alone or in a small team? Kris Jeary, Kent, UK SJ: Being able to celebrate your successes and talk honestly about struggles is invaluable. So I’m lucky in that some of my closest friends are people that I used to, or still, work with. We…

BEYOND PIXELS Painting models for board games is intricate work. I collaborate with sculptors to bring small pieces of the world they’ve imagined to life. It takes an odd mix of focus and brainlessness: while I hold my brush by its ferrule and add minuscule highlights, or glaze a surface for the 54th time, my left brain has time to draw parallels between painting and programming. My primary tool, acrylic paint, is made by countless companies. An online retailer I use lists at least half a dozen lines for miniature and model painting. All are made up of some combination of the three primary colours in subtractive colour spaces: red, yellow and blue. Rather than learn them all, I focus on a few as my tools for a task, and…

How do people understand their worlds? How do people draw pictures in their heads? What is the stuff of mental models? If you design digital products, the answers to these questions might change the way you work. For the last three years I’ve been teaching something called object-oriented UX (OOUX). In a nutshell, OOUX gives definition to the system of real-world objects you are working with, before jumping into designing features and interactions. Developers who code in object-oriented languages have been doing this for decades. In fact, OOUX dramatically improves communication with developers and results in designs that are more intuitive to build. Currently UX designers are, by and large, still thinking procedurally. We draw storyboards based on use cases. We concern ourselves with actions before considering the things being…

MIKE MONTEIRO Co-founder, Mule Design Studio www.muledesign.com Stop being shitty to women. Stop being shitty to minorities. We keep talking about ‘building things for us’ and ‘building the tools you need’ as if they’re some brilliant idea, instead of the selfish mantras of entitled baby men that they are. I look around at our industry and I see an ocean of white men ‘building things for us’ and it’s led to a toxic web. It’s time to grow up. BRUCE LAWSON Open standards advocate, Opera www.brucelawson.co.uk If you ask a question on a forum, and find out the answer elsewhere, post it so the next person with that question can find it. If you have an idea for a new web feature or API, tell the Web Platform Incubator Community…

This month... VOLUNTEERING SITES PROFILES ASH CONNOLLY Ash is a frontend developer and designer living in Sheffield and working at Techdept w: www.ashconnolly.com t: @AshConnnolly MAT THEW CROUD Matthew is a designer, frontend developer and digital illustrator based in Kent w: www.octavector.co.uk t: @octavector DAVID PALIWODA David Paliwoda is a product designer at W12 Studios, East London w: www.davepaliwoda.com t: @davepaliwoda BRIEF This month we’d like you to design a site people can use to find volunteering opportunities. You might want to make a local site for a particular city or region, or you may wish to provide a global portal that people can use to find international opportunities.…

 What’s on your desktop? A handful of Keynote decks for the 2016 Studios Summit – a recent event I produced for IBM Studios leaders from around the world. A few animated GIFs I used for this week’s Austin studio update email. My desktop wallpaper is a photo I took of Jasper John’s amazing piece ‘According to What’. What little things make your life worthwhile? My ampersand baseball cap from Hoefler & Co., a bottle of 2007 High Roller Cabernet Sauvignon, the Double-Double from In-N-Out, and an Oliva Serie V Melanio Maduro Torpedo. And travel; whenever, wherever. How often do you hang out with other designers? I typically hang out with non-designers; people who work in a diverse array of industries. I like learning about what other people do and the…

Life planning and care management startup Elder Tree Lifestyle Solutions, Inc. (eldertreelifestyle.com) approached Astute Communications to create its website. Often the websites we create are redesigns, so we have some content to start with. As this was a new company, we were starting from scratch. We worked closely with the owner to plan and develop content for the site. We created a preliminary sitemap and user flow, formulated a customer acquisition funnel, and moved into content development. Halfway through writing the site content we discovered the sitemap could be adjusted to better accommodate the people we anticipated would be using the site. We were able to quickly identify improvements that could be made to the site architecture, adjust the sitemap accordingly and finalise content before beginning design. A thorough content…

BROWSER SUPPORT We feel it’s important to inform our readers which browsers the technologies covered in our tutorials work with. Our browser support info is inspired by @andismith’s excellent Can I Use web widget (andismith.github.io/caniuse-widget). It explains from which version of each browser the features discussed are supported. EXCLUSIVE VIDEOS Look out for the video icon throughout our tutorials. This issue, two authors have created exclusive screencasts to complement their articles: Ray Villalobos’ five ‘mind shifts’ you need to get your head around if you want to master React, and Shawn Jansepar’s guide to building progressive apps with Astro.…

ABOUT THE AU THOR PHIL GARNHAM w: www.fontsmith.com t: @philgarnham job: Type design director, Fontsmith areas of expertise: Typeface design, branding, accessibility q: what’s at the top of your bucket list? a: Watch a space shuttle launch Responsive design has come of age and new modes of reading text have emerged. As a result, accessible type selection is more important than ever. The plethora of information regarding accessible type design, application and code methodology is quite staggering, but one thing is clear: readability of content is probably the main goal for almost every website. Fontsmith has worked with Mencap to research, test and design accessible typefaces for those with disabilities. Here are some of our findings. TYPEFACE DESIGN Legibility vs readability Legibility is concerned with questions like: Can you recognise this…

+ You can do some insanely cool stuff with postcss-ant and loops. ant provides a helper property aptly named generate-grid that will do this cleanly and easily. Just pass it some sizes ( pluck() isn’t needed in this context) and put it inside your grid container. Dump about 50 <div> s in that grid and roll up your sleeves. Let’s create a row-looping, minimal markup/styles, asymmetrical, content-out layout, using the golden ratio ... in a single line of code (we can break ant sizes and params to new lines to help with readability if we like): Looks crazy, but we’re just multiplying the numerator by the golden ratio (1.618) to create the next numerator in our list. The denominator is just the sum of all the numerators. ant also provides…

+ If there’s one thing about React that will win you over it’s the way it manages the DOM using something called the Virtual DOM. Managing the DOM means worrying about inconsistencies between the way browsers handle events and nodes, which is one of the reasons jQuery became so popular. But ask yourself: Why are you mucking with the DOM in the first place? It’s because the state of your application has changed and you need to update your views to match the changes. This is the type of task that would be better managed by a machine, and that’s exactly what React does. React automates the process, so a change in state will render views for you. React’s Virtual DOM is an independent copy of the regular DOM. Why…

CONTACT US To advertise here, contact our sales team: +44 01225 68 7832 chris.mitchell@futurenet.com FEATURED HOST “A wonderful company with the best UK support I have come across. High performing servers and service. Thanks so much for the last 10 years!” Glen Wheeler, web designer EXPERT TIP AVOID CHEAP HOSTING Cheap hosts can’t offer you a quality service. They can’t afford the best hardware, and in order to make any profit they would have to overload their server with thousands more websites than it could handle, which would slow your websites down. Cyber Host Pro is a cloud hosting company offering superfast web hosting using SSD disks. It has been around since 2003, and some of its first customers are still with the company today. It continually introduces the latest…