Table of contents for December 2017 in net

When I first took over the magazine earlier this year, one of the first things that grabbed my attention – only a few months on the horizon – was issue 300. What an unbelievable milestone, and what a pleasure to be in the editor’s chair for this celebration of the past, present and future of web design. In a world where print magazines are an endangered species, it really is an achievement worth celebrating in style. Hopefully we’ve done it justice in this special anniversary edition of net. Our cover feature looks at what lies ahead for the web design industry across the next 300 issues. We asked web visionaries to investigate for us, and their findings show what The Future of Web Design is. net began back in 1994,…

SIDE PROJECT OF THE MONTH INFO DARREN PINDER job: Owner of Vatu Ltd and Raccoon Events. Organiser at WordCamp London. w: rocketsquirrel.org t: @dmpinder Tell us what Rocket Squirrel is... It is a Slack-based community of (currently) 572 developers of many varieties. How did it come about? Rocket Squirrel started in November 2014. At the time, I was a web developer working from home. I had no one to chat to or troubleshoot problems with. It was a bit lonely. I realised there must be many others like me, so I decided to find and connect them. Who was it set up to help? Everyone in the web development (and any related) industry. The concept was to create a community that could help each other out with problems, share knowledge and…

INFO Job: CTO, Special Projects, Opera w: www.wiumlie.no/en t: @wiumlie net: How did you get CSS so right: was it more about luck or judgement? HWL: CSS was designed with longevity in mind. New selectors, properties and values can be added without changing the syntax due to the forward-compatible parsing rules. I can’t claim credit for that, though, Dan Connolly first brought this issue up and Bert Bos wrote the formal grammar. Another reason for the vitality of CSS is the community that formed around the specifications. Designers wanted CSS to succeed even if they could charge customers more by writing browser-specific code. Todd Fahrner, Jeff Zeldman, and Eric Meyer must be mentioned. Also, the Acid2 test was crucial for getting CSS implementations aligned, without it CSS may have fractured.…

INFO job: Writer, designer and educator t: @fehler w: tinybooks.org In this latest addition to my series examining the design of business, I’ll explore the benefits that creating a product pipeline can offer and how every new product you release boosts your other products’ sales thanks to a ‘halo effect’. A single product will only maintain momentum for so long and, as such, over time you’ll naturally see a fall-off in sales. This is where building a ‘pipeline of products’ comes in. The secret is to release new products often and maintain contact with your customer base. With your first product under your belt, it’s a good idea to take a step back and consider how your catalogue might evolve. Ask yourself: what additional products might you create, and how might…

womenforwomen.org.uk The redesign of Women For Women had common goals with other charitable sites, looking at awareness, engagement, donations, and lead generation. What results is a beautiful site with strong photography and a dynamic typographic hierarchy. Big Mallet, the agency behind the redesign, supported those strategy goals with its own technical goals of making the site usable, accessible, and performant. Sacha Harmsworth says it doesn’t use a lot of trendy tech tools, but developed a lightweight Less framework on top of Drupal 7 with its own semantic, performant and accessible base theme. With accessibility a priority, Big Mallet incorporated inclusive design from the very beginning, using WebAIM’s contrast checker to ensure the colour scheme was accessible. It then built upon that using techniques from Heydon Pickering’s book, Inclusive Design Patterns,…

“The web I grew up with is like a fancy book, with countless pages all connected together by strange magic. Now the web is becoming more of a service; a presentation-agnostic repository. In the next 10 years, more people will access web pages through voice and camera interfaces, not browsers. They’ll ask Google Home or Siri to find answers on the web for them, instead of manually parsing pages. My job as a designer will be to bring the same accessibility and clarity to information in these new contexts as I visually do now.” CALEB MISCLEVITZ, WEB DESIGNER AT FINE (WEAREFINE.COM) “A longer term trend is the reduction in the number of developers needed for the day-to-day creation of basic digital stuff. There’s an app called RBA (Robot Process Automation),…

+ This experiment couldn’t have been possible without libraries. Always try finding one that suits your needs and possibly combining them to make a unique piece. Three.js https://threejs.org Still the most popular WebGL library out there, three.js was created by Ricardo ‘Mr. Doob’ Cabello in 2010. It is currently being updated with WebVR components. Backed by a huge following, you are sure you can get support from its community. Physijs http://chandlerprall.github.io/Physijs In order to extend three.js with physics, we are use Physijs. Built on top of the Bullet Physics Library, this is one of many physics libraries that you can explore. Heroku https://www.heroku.com This experiment is running on Heroku. You can sign up for a free account and immediately start deploying Node.js apps. Some of the other languages that are…

React, the JavaScript library from Facebook for building UIs, continues its meteoric rise in popularity, capturing more mind share and usage throughout the ecosystem. What many developers are not familiar with is React’s relationship to web standards, including its promotion of new paradigms, its efforts to embrace standards, and calls to create a brighter future. This article, a condensed version of my talk at React Alicante (http://reactalicante.es/talks#karl-talk), aims to illuminate on these points. React’s introduction brought new paradigms to the mainstream JavaScript community and improved on existing ones. For instance, the data binding paradigm in Angular and Ember was improved so developers didn’t need to think about the implementation details. With new paradigms introduced by React, such as functional programming and a ‘virtual DOM’, no longer was it necessary to…

Graph Databases book http://graphdatabases.com The graphista’s bible – this book, published in 2015 by Ian Robinson, Jim Webber & Emil Eifrem, is still the guide to graph databases, providing a great overview in graph data modelling and use-cases, applying those to Neo4j-based applications and insights in implementation details and use of graph algorithms. Neo4j free download http://neo4j.com/download Download the latest version of the open-source Neo4j database and get up and running in a matter of minutes. Decyphering Your Graph https://www.youtube.com/watch?v=5d4wh2wBxCU A superb guide on how to model your graph filmed at Graph Connect 2017 in London by Dom Davies, CTO of Tech Marionette. GraphGists https://neo4j.com/graphgists Hundreds of graphs across eight use cases including examples from Real-Time Recommendations to ‘Graph of Thrones’. APOC https://github.com/neo4j-contrib/neo4j-apoc-procedures A community-driven library of procedures covering everything…

CLIENTS FROM HELL Me: Here’s the design for your business card. Let me know what you think, and once you’re happy with it I’ll send it to the printer. Client: Oh WOW! That is fricken’ awesome, man. Seriously. This is the best card that I have ever seen! Please print them ASAP so I can show them off to everyone. I was still a junior designer, so I was pretty happy he was so excited by them. I sent them to the printer, and he picked them up. He contacted me soon after: Client: Oh, I wasn’t expecting this. These are lame. Me: This is what you signed off. You said you loved it. Client: These are nothing like the ones that you emailed me. Me: I’m sorry that you…

halifax.co.uk The recent redesign of the Halifax banking website was done with accessibility in mind, resulting in a content-led and clean design rarely seen in the financial sector. Ady Borkala explains why incorporating accessible design was so important: “Making your content accessible to everyone is simply the right thing to do, it also makes business sense – why would you make it difficult for 13 million people across the UK who have a disability, to access your content and services?” Borkala also “didn’t want accessibility to simply be a tick box exercise,” so it was important that the design was inclusive in its approach to delivering content: “I didn’t want anyone to realise that they were ‘in’ an accessibility journey. For instance, if a BSL (British Sign Language) user wanted…

I wanted to design a 404 error page that celebrated net magazine having 300 issues printed since the 90s. What a truly amazing achievement. My goal was to keep the design clean, elegant and simple. I decided to use a mixture of light and dark blues to highlight the night sky and buildings on the skyline. Doing this enabled me to bring greater focus and attention on the two key messages; letting the visitor know they have arrived on a 404 error page, and the success of net magazine for reaching its 300th issue milestone. I needed to make sure that the dark colour scheme didn’t make the text hard to read. Keeping that in mind, I decided to use Bryant and Montserrat, two of my favourite fonts, which work…

CLOSE UP (1) Book a Pitch – A key user functionality. This needed to be prominent, easy to access and simple to use. 2) Newly developed APIs – These help facilitate the purchase of other products and services, eg corporate events, increasing eCommerce revenue opportunities. (3) Customisable modular templates – These offer engaging locations to advertise the latest headline promotion, (for example, Circle Play). (4) Join a League – This is another key offering on the updated site, and is used for attracting new players and new teams to the Powerleague world. (5) Social engagement – Live social media updates and the different ways to connect with Powerleague. BRIEF Five-a-side football company, Powerleague, underwent a major rebrand this year, and as part of this process it needed to give its…

ABOUT THE AUTHOR VIRGIL SPRUIT w: www.klash.nl t: @virgilrocks job: Creative Developer areas of expertise: HTML, CSS, JavaScript This project will be split up into different parts. We will give a short introduction to Heroku, show how to use Physijs with three.js, explain how to handle socket events over Node.js and also how we go about handling the sent data. 1 HEROKU This project will be hosted on Heroku, which is a cloud platform to host your apps. It has a wide variety of supported languages such as Ruby, Java, PHP and Python. We are going to use Node.js. Sign up for an account and choose Node.js. For this project we can use the basic server, which is free of charge. After registration you will come to your dashboard where you…

ABOUT THE AUTHOR ADAM COWLEY w: adamcowley.co.uk t: @adamcowley job: Delivery consultant, Neo4j areas of expertise: Web apps, graph databases, Node.js In an ever-increasingly connected world where electronic devices in our hands and our pockets are generating terabytes of data per day, the big challenge is to make sense of the sheer volume of data. Graph databases help with this, by allowing for the combination of disparate, siloed datasets into a single view and enabling DBAs to ask questions that were previously not possible with existing relational or document databases. Although there is certainly value in the data we hold, it is the connections between data that starts to add colour. Creating or inferring relationships between your records can yield real insights to a dataset. Traversing a hierarchical list of categories…

ABOUT THE AUTHOR JAMIE MURPHY w: www.jamie-murphy.co.uk t: @jjmu15 job: Frontend developer and CRO consultant areas of expertise: Frontend, eCommerce, Conversion Rate Optimisation THE PROBLEM Practically every website now is built with at least some level of responsiveness. The way we structure these responsive styles has a direct relation to how complex the project will be to maintain and edit in the future as updates are made and the project grows in size. Despite this, it seems as though a widely accepted approach for how and where to structure these responsive styles is yet to be adopted consistently by developers. Although nowhere near as bad as ‘the old days’ of CSS, before preprocessors and naming methodologies, this is causing an inconsistent and often messy approach to structuring the responsive styles for…

+ To understand Media Query Bubbling you should first have an understanding of CSS naming methodologies and Modular CSS. Here are some useful resources to get up to speed. Modular CSS http://thesassway.com/advanced/modular-css-an-example Here is a comprehensive and well written example of what Modular CSS is and how to apply it in a real-world scenario. CSS naming methodologies http://www.hongkiat.com/blog/css-writing-methodologies To discover what CSS methodologies are and see examples of the different methods that exist, look here. I personally prefer the BEM methodology but work with whatever makes sense to you. Writing tidy CSS https://csswizardry.com/2017/05/writing-tidy-code For some general tips on writing clean and tidy CSS, read this article by CSS Wizardry, which has many great tips.…

Many companies that build things for the web are guilty of neglecting accessibility, and trivago was one of them. Over the last year and a half we have been making an effort to correct this and are slowly improving things. First of all we had to overcome a number of internal issues. Some in our department either lacked awareness of the topic or they didn’t see the need for changes to be made; they didn’t want to spend time on accessibility but rather on something ‘more important’. Management also showed indifference towards any improvements because there was no tangible way to measure how many users were impacted. One of our company values is ‘power of proof’; we can measure the number of visitors to our site who use outdated browsers,…

Send your questions to netmag@futurenet.com QUESTION OF THE MONTH I read CSS Grid is the new native CSS framework. Will all those well-known CSS frameworks become obsolete? Darinka Kostelnik, Slovak Republic CC: Nah. The well-known CSS frameworks do a heck of a lot more than layout. They are more like component libraries. The parts of them that are exclusively for laying out columns will become obsolete, just in the sense that using CSS Grid will be easier, faster, and more robust, but even then I doubt those parts will be removed. If anything, the class names that control layout in those frameworks will use CSS Grid to do what they do. We saw that happen in a number of frameworks when Flexbox support got more robust. THIS MONTH FEATURING... CHRIS…

WORKSPACE BML is a branding and design agency in Leeds. We’re a small team, passionate about our work and are hands-on with every project. I’ve been here almost two years, but the attitude and atmosphere feels as refreshing as it did on my first day. [1] It’s BML tradition that everyone in the studio has a terrible mug. It’s always Kevin’s mug – a joke present from Dave and Natalie – that comes to mind first. It’s impossible to clean, difficult to carry and feels far too fragile to have lasted this long. [2] At the start of this year I got this stand-up desk for a trial but felt the benefits within days. As well as feeling physically better (my back is so grateful), it’s great for impromptu meetings…

INFO job: Independent designer w: ethanmarcotte.com t: @beep As we reach our landmark 300th issue, it’s only natural to think back to some of the seminal events that have shaped web design since our launch in 1994. So on page 33, we celebrate the introduction of CSS in that same year, in our interview with its creator, Håkon Wium Lie. And here we take a look back at another ground-shifting development: the introduction of responsive web design in 2010. In the year that Apple launched the first iPad, the old approach of coding one ‘desktop’ site and one ‘mobile’ site was becoming increasingly untenable. With more and more devices coming online, web design was crying out for a bold new strategy. It arrived in the form of an article by Ethan…

September’s Apple event promised much and, many would agree, delivered on the hype. Two new features rolling out in iOS 11 peaked my interest, both of which have the potential to push digital makers into the kind of gold rush we saw when Flappy Bird was pulled from the App Store. Software platforms capable of algorithmic heavy lifting have been centre stage of late, and Apple’s Core ML brings machine learning in a format never before so easily deployed on iOS. Things like face tracking and language identification will make previously complex and industryleading app ideas accessible to all. THE BREAKTHROUGH However, it’s with ARKit that Apple has given its development community something to get excited about. ARKit is AR (augmented reality) for the masses. AR apps have existed for…

joinmastodon.org Mastodon, the decentralised, free, open, and interoperable alternative to Twitter, has been around for just over a year, and its design is a gradual and iterative process. However, the Mastodon landing page at joinmastodon.org has a very different goal: explaining Mastodon. As Eugen Rochko, the creator of Mastodon says: “It needs to be the kind of page anyone could send to their friend to introduce them to the idea.” As people can install their own Mastodon instance on their own server, the page has to be sufficiently distinct from the About page of each instance to prevent confusion about what’s the software and what’s the server. The page is an entirely static website, built using the create-react-app from React. The JavaScript generated during the build process is scraped into…

radesign.in Portfolio redesigns provide a particular challenge to designers as they require developing a personal brand. Rakesh started his redesign by writing the content of the entire site. “My goal was to communicate my design expertise to a potential client and encourage them to contact me to discuss their project. While at it, I wanted my site’s design itself to talk about my creativity and skills.” He continued the process with rough sketches and then Photoshop mockups to help him plan for writing the HTML and CSS from scratch, but he still wasn’t making typography or colour choices: “At that stage I didn’t worry about the colour schemes or even typography to some extent because trying them out in code would be easier.” It’s fascinating that Rakesh didn’t start with…

404 pages give the opportunity to be creative, humorous and to grab attention, but they should also provide function – for example, site navigation, search and context awareness where possible to funnel users back into the site. In this example, we’re making use of a call to action to encourage users to purchase the 300th issue of net magazine itself. For this 404 page, I felt the design should have a touch of the 90s (since this was when the magazine was first launched) with bold vivid colours, but it should also reflect a more contemporary aesthetic. I wanted to make use of unique cheerful animations with a lot of bouncy movement on the two main focal points – the error response and the CTA – to give a sense…

“The future, always so clear to me, had become like a black highway at night We were in uncharted territory now, making up history as we went along” Thus spoke Sarah Connor at the end of Terminator 2. But these prophetic words could just as easily apply to the state of the web industry today. With new techniques, technologies and movements constantly arriving on the scene, our sense of where things are going is more uncertain than ever. So as net magazine reaches its 300th issue, we wanted to investigate what the landscape of web design might look like in another 300 issues’ time. We’re not WIRED magazine, though. So don’t expect to hear from self-styled ‘futurists’ and ‘thought-leaders’ who spend more of their working days giving TED talks and…

World Wide Web, not Wealthy Westerners Web netm.ag/300- worldwideweb It’s up to us to make sure the web of the future serves the whole world, not just the rich. Bruce Lawson tells the audience at last year’s London Generate conference how we need to go about it. Designing for our Next Billion Users netm.ag/300-nextbillion In 2016, India surpassed the US to become the second largest market in the world after China. Talking at Generate London, Rachel Simpson, a UX designer on the Google Chrome team, explains how to cater for users in both these and other emerging markets. AR Experiments netm.ag/300- ARexperiments Since Google’s 2017 keynote, Active Theory has been thinking about augmented reality and how it fits with the future of the web. Here they explain how they developed…

+ This example code project combines a couple of libraries into a playful demo that demonstrates how to use your phone to control a WebGL game with physics. We’re using the following tools: three.js, Physijs and Heroku Node.js. The idea is to have an abstract pool table that you can tilt using your phone as the controlling device. You are basically projecting your phone on your desktop. An 8-ball is the object being balanced on the table. We will be using basic shapes. Using WebGL, the pool table will be represented by a plane and the pool balls will be spheres wrapped with a texture. There is no objective to this game. Just a fun experiment where you balance the 8-ball. When it falls off the table, the 8-ball will…