netOctober 2016的目錄

One of the privileges of editing net magazine is having a front-row seat in a fast-changing industry, and right now, the pace shows no signs of slowing down. So it’s useful to stop for a moment and look at where this is all taking us. That’s exactly what Mike Kus does in this issue on page 37, where he sets out his prescription for surviving as a web designer beyond 2020. How can we withstand competition from a booming number of designers, not to mention automated web creation tools? Kus has some useful answers. Another thought leader taking a future-facing look at the web is Peter Smart, who asks on page 28: are we seeing the beginnings of a truly emotionally intelligent web? It might sound like sci-fi, but Smart…

From our timeline What’s the next technology or technique you want to learn? @melaniersumner How to accurately express business value, since that’s how things happen at work. @hugocbp Phoenix/Elixir and Elm! @mgasparel I’m a C# guy, but want to give Rails a go. Laravel looks hot, but then I would have to touch php. @bluemwhitew Lumen (lumen.laravel.com). @jepster_dk Meteor seems cool. @erinlynch How to keep up. @smartwrks We’re on track to learn Angular 2! #gotsmart @kyle__dempsey React ... Handlebars is feeling dated. @markusfreise Mindfulness – I guess it’s the key to genuine creativity. @ollilinde Polymer and progressive web apps. @Seth_Dorris Xamarin or Swift. @Nickylewlew Flexbox. Not had the chance to use it fully yet, and I think it’s really powerful.…

CLIENTS FROM HELL I’d designed a logo and site for a client who imports rugs. My emails had outlined my fees and they’d agreed. Then we had a meeting... Client: We can’t pay you, but we will let you put your name on it for portfolio purposes. Me: Sorry, but we agreed on a price via email. Client: That’s not a written contract! It doesn’t count! Besides, design work is just typing things on the screen. Anyone can do that. Me: Fine, but I’m not giving you my work for free. Client: My friend, people will see your designs, and you will get more work. Me: No. Months later, I get a call from a printer asking me if I have a higher quality file for the logo I’d made…

DATE: 20-22 JULY 2016 LOCATION: VANCOUVER, CANADA URL: www.designcontentconf.com The web design discussion is shifting beyond pixel and code towards the effects our work has on people. At Design and Content 2016, that shift was in full display. Sara Watcher-Boettcher set the tone for the two-day event with a new talk on how the things we design affect real people, often in negative ways, and Anil Dash closed the conference out by recounting how our desire for “disruption” has blinded us to the cultural damage our design decisions have made. In between, there was no shortage of practice and technique – Val Head, Jen Simmons, and Sam Kapila all brought their immense knowledge of animation, the bleeding edge of CSS, and the responsive web (respectively). But the tone this year…

Google www.google.com The Google Fonts site just got a makeover. Originally launched in 2010, Google fonts are now viewed on the web over 15 billion times a day, in over 135 languages worldwide. The redesign is clean and fully responsive, using Material Design for its grid and styling. In her blog post about the project (netm.ag/fonts-284), designer Yuin Chien explains that “by building in the ability to play with scale, colour and font pairings, we invite everyone to discover and seamlessly use typefaces in their projects.” And she’s right; the interface is inviting and beautiful. It’s also intuitive and fun to explore. Today, the main concern around web fonts is performance, but the new Google Fonts site feels downright zippy. Content and animations respond quickly and smoothly. Google is removing…

Javier Valencia Romero www.jvrpath.com I’m a big fan of pixel art. So is Javier Valencia Romero, creator of Pixelart to CSS, a web app that coverts pixel art creations into CSS using the box-shadow property. It helps you animate your artwork too, utilising CSS keyframes. “I grew up playing C64, SNES and Game Boy,” explains Romero. “Most of the games had amazing art. With a very few dots on the screen, the player could recognise whatever the creators wanted to express.” While doing his pixel art, he wondered if the drawings and animation could be achieved using only CSS, with no additional image files. “Browser support is getting better (finally!) so the CSS properties are much more reliable,” Romero adds. Building the app allowed Romero to experiment with a number…

We use icons to convey an idea, an action or an object, in a split second. Icons work well on the web because they are ideal for non-verbal communication; they break the language barrier. This is why music players have rewind, fast-forward, and play icons; why airport customs always include an officer icon; and why three lines are known as a ‘hamburger menu’. CREATING ICONS When it comes to designing icons for the web, the treatment of line, shapes and space have everything to do with how the icons stand individually and as a group. Lines should be similar in thickness and ends (capped, beveled, and so on). Whenever possible, repeat similar shapes, angles and negative spaces. For example, if an icon set includes a 4px radius on all corners,…

BRIEF The FWA asked Hello Monday and Konform to completely overhaul its awards site, putting it back on the cutting edge and implementing a live judging feature, so it could carry on celebrating the best of digital design. CLOSE UP (1) A major change for the site is that all entries, regardless of device or medium, now compete for one daily award: FOTD (FWA of the Day). (2) Live judging takes the user behind the scenes so they can see how the jury is voting. They can follow a site’s progress and get an idea of which project will win next. (3) Being able to access the site from any device was the top priority, as we wanted to deliver a great experience for both users on the go and…

Responsive web design has been around for over five years now, and in that time we’ve seen a drastic shift in how we approach website development. Media queries let us write CSS based on a variety of conditions, such as resolution, media type and – most popularly – browser viewport dimensions. Design patterns have emerged to help us manage the complexity of building websites that respond to a range of different screens. Brad Frost conveniently maintains a compilation of patterns that you can use for your sites: netm.ag/ frost-285. Generally speaking, these patterns target content based on the full width of the browser’s viewport. In other words, they target elements at a macro level, not at a micro level. On Shopify.com, for example, each band of content is dealt with…

There are plenty of articles and videos to learn more about Flexbox and PostCSS. Here are some that I like: An introduction to PostCSS netm.ag/minns-285 A great introduction by Drew Minns covering what PostCSS is, its history, and detailed setup instructions for how to include PostCSS in your workflow. A complete guide to Flexbox www.css-tricks.com/snippets/css/a-guide-to-flexbox Chris Coyier wrote this article explaining the basics of CSS3 Flexbox and how to use all its properties and values. This can serve as a helpful cheatsheet. Building your own PostCSS plugin netm.ag/bracey-285 Kezz Bracey has put together a PostCSS Deep Dive series on Envato Tuts+, containing multiple informative and actionable articles. This one helps you build your own PostCSS plugin from scratch. PostCSS Plugins collection www.postcss.parts PostCSS.parts lists the plugins available in PostCSS categorised…

I define a design system as follows: a set of rules and assets that define how to express everything a visual language needs to say. Let’s break down exactly what that means. Rules The rules you create for your design define the universe that you’d like your code to exist in. These rules cover your chosen methodologies (OOCSS, BEM, SMACSS, and so on), as well as any rules of thumb such as the single responsibility principle, and a single source of truth. Assets Rules are nothing without the assets that have been created to follow them. Our design systems need to include all the markup needed to display each component, as well as all the associated assets (CSS, JavaScript, images, fonts and so on). A design system will also include…

Nimbus Hosting is a friendly face in the often cold tech world. Providing high-quality cloud servers for businesses of all sizes, the UK-based hosting company puts human interaction at the heart of everything it does. What’s more, the team specialises in working with developers and digital agencies to meet their specific hosting requirements. Currently celebrating its fifth birthday, Nimbus has grown significantly but sustainably since its launch. It now provides hosting services to over 2,000 companies, and has played an important role in projects run by the likes of Safestore, the BBC, Screwfix and Time Inc. Nimbus will take care of everything from website and database backups to SSLs and domain management. The same people who undertake the original set-up and migration are also responsible for server maintenance, so you…

INFO job: Deputy CTO, Opera t: @brucel w: www.brucelawson.co.uk “Everybody, regardless of their ability or disability and regardless of where they are, has an equal right to say ‘LOL’ at someone’s kitten picture.” So sums up Bruce Lawson’s approach to the web. A spokesperson for Opera, Lawson and his eye-catching outfits are a regular presence on conference circuits the world over. But hidden behind his goofy sense of humour is a fierce passion for the web, and a willingness to fight hard to ensure its benefits reach as many people as possible. Lawson’s passion for inclusivity has its roots in a personal experience: his first explorations into the web were prompted by a diagnosis with multiple sclerosis. Lawson’s symptoms are luckily relatively mild, but in that moment he was very…

INFO Job: Comedian, director, writer, producer w: www.veitch.me t: @veitchtweets net: What first gave you the idea of responding to internet spam and compiling the conversations? JV: It was an email, received first thing in the morning, from my friend Alex that sowed the seeds of what’s become Dot Con. It described an unexpected trip followed by a mugging. It didn’t take me long to realise this wasn’t Alex and, I reasoned, this gave me the upper hand. I was sitting up in bed now, finger poised over DELETE on my iPhone when this question came quite unbidden: ‘What would happen if I replied?’ net: What scam were you being targeted by? JV: The ‘marooned friend’. It’s one of the best known scams, principally because it’s the one that dodges…

Matan Stauber www.cargocollective.com/matanstauber SITE OF THE MONTH If you’ve ever watched Cosmos, you may remember Carl Sagan talking about the Cosmic Calendar. If the age of the universe was condensed into one year, recorded human history would fit within the very last seconds of 31 December. 14 billion years of events is a huge dataset, and displaying it in a browser is no easy task. But designer and developer Matan Stauber rose to the challenge – although even he wasn’t sure it would be possible: “I think the main obstacle would have to be proportions,” he explains. “How do you create a timeline when 99.9 per cent of the history we know will have to be condensed into less than one pixel of the screen?” The son of a historian,…

Supremo www.supremo.tv Type Terms is an animated cheatsheet created by the team at Supremo, a web design agency in Manchester. After doing some research, they found that most existing online information about typographic terminology used simple, static images. The team was looking for a reason to experiment with SVG and CSS animation, and this was the perfect opportunity. “I decided to create something that was more visually engaging, which would help new designers learn all the key typographic terms in an instant,” says designer Dan Heywood. The team emphasise the importance of designers having a good grasp on typography. For those learning the rules for the first time, or for experienced designers needing a refresher, this cheatsheet is both educational and a delight to explore. The content is focused, the…

Cheers Drive (a Bristolian expression meaning ‘Thanks, driver’) is a South West car-share service for festivals, which enables users to save both money and the environment, as well as connecting with fellow festival-goers. A social network facility that boasts a safer journey for travellers and lowers drink driving, the site also connects with sites such as Ticketmaster. The homepage backgrounds change every 10 seconds, leaving it open to host short video content. Potentially, the company could run a competition for a user’s video to be used as a background, adding to the ‘brand for the people’ feel. A clear dashboard enbles the user to easily see the steps needed to complete their journey. Keeping the information to a minimum and positioning it centrally aids with responsive design, making both journeys…

www.kultur.design The creative coder transforming real-world data into revealing design Over the past 20 years, Mike Brondbjerg’s career has taken him from the world of multimedia CD-ROMs to the cutting edge of data-driven design. The self-taught designer and coder recently rebranded the two-man studio he runs with his partner Polly Vinyard. As Kultur Design, the duo are now exploring the boundaries of data visualisation, illustration and motion. We caught up with him to discuss the joys of data and the challenges of pitching unpredicatable generative work to clients. net: Are you more of a design or data person? MB: I’ve always sat between creative and technical roles, so using technology to create is a comfortable place for me. I love building systems that create surprising, revealing or serendipitous output, seeded…

‘THIS IS MORE CODE TO WRITE’ Yes, this is true. However, the time you spend writing tests early on should save you time in the future, as you’re catching regressions sooner rather than later. Tests change where your coding effort is spent. It also may not make sense to write tests around code that will only be around for a short period, like prototypes. You must weigh the cost-over-time benefit for your particular project. ‘I WILL STILL HAVE BUGS!’ This is also true. Testing your code will not prevent bugs from happening. However, hopefully you and your team will see a decrease in how often bugs come up, and how often you are fixing the same bugs. This saved time should give you the chance to build new features, instead…

Sketches and words are great partners. Visuals are great at showing overall relationships, such as spatial relationships between elements, functional and logical relationships in a flow, or hierarchical relationships in a sitemap. Words are great at adding precision and detail to the picture. That’s where labels and annotations come in. They complete the sketch by explaining the what and the how in more detail, by giving context and describing any invisible processes happening beyond the screen. A good way to decide which annotations to add is to talk a colleague or stakeholder through your sketch. The key words you are using in your explanation are the ones you should add as labels to make your sketch understandable as a standalone piece.…

View source files here! All the files you need for this tutorial can be found at netm.ag/postcss-285 As engineers, the thing we dread most is product designers coming to us with beautiful and intuitive experience designs and high hopes of having them translated to web perfectly, pixel by pixel. It’s even more of a problem when we are dealing with laying out different user interface elements. We have to employ various combinations of float , vertical-align and table-cell to achieve even simple layouts. But with CSS3 Flexbox, building these layouts has become easy, simple and quick. Flexbox allows us to arrange items horizontally or vertically inside a container, and specify the alignment and spacing for those items. Flexbox provides properties and values to position items anywhere in the container, and…

Loading a custom web font for the first time incurs a performance penalty on a web page. As web developers and designers, we always strive to create beautiful and performant websites. However, often these two goals clash. The CSS property font-display enables a better balance between aesthetics and performance. With font-display , you can give your browser hints about what font-loading strategy to use – for example, the importance of your web font, and how a system font fallback should be used in the case your web font download takes too long. You can add the font-display property to your @font-face rules. @font-face { font-family: ‘My-Custom-Font’; font-display: fallback; } FALLBACK If you specify a font-display property value of fallback , the browser will wait less than a second for your…

Fractal is just one of the many ways you can document your design systems. If you find that you need something more tailored to your needs, you should check out these other options. Pattern Lab patternlab.io One of the first (and certainly most popular) pattern libraries on the market, created by Brad Frost and Dave Olsen. Drizzle github.com/cloudfour/drizzle A new entry on the scene from the folks at Cloud Four. Pattern Kit github.com/PatternBuilder/pattern-kit A Twig-based, open source library that uses JSON schemas to create composable, interactive patterns. Hologram trulia.github.io/hologram A Ruby-based style guide made by the team at Trulia, which turns comment blocks in your code into a beautiful website. Frontend Architecture for Design Systems fea.pub My book, covering how to build scalable and sustainable sites. SassDoc sassdoc.com Document your…

Monica Felder, Cambridge, UK DS: It depends on what I suspect isn’t working. If I’m not sure that people are enjoying or understanding the purpose of the feature overall, I’m likely to conduct more qualitative research, to see if I really get their motivations, expectations and goals. If people are just stumbling through the feature, it’s more usability testing to see what’s tripping them up. There are great ways these days to figure out which is which, often via analytics. And then you have data to watch to see if the improvement you made is actually an improvement. GIT WORKING WITH WORDPRESS What’s the best way to use Git if the site is built on WordPress? Michael Russell, Dublin, IE KH: While you could manage and even deploy your entire…

Stela Ilieva regularly sets herself tasks to practice her CSS, and now she’s sharing them with you SIDE PROJECT OF THE MONTH net: What is CSS Quests (cssquests.com)? SI: I regularly challenge myself to draw with CSS. I wanted to share the tasks I set myself with other people, so I launched a website where everybody can take part in the quests if they want to. net: What inspired you to launch this challenge? SI: I thought that it would be a good way to practise CSS. There are a lot of tutorials online to prepare you for the real web development world. But I believe that people learn best when they’re unaware they are learning. Usually when you have an idea of what you want to draw, you put…

WORKSPACE My wife and I moved house about a year ago, and one of the things we instantly loved about this property when we viewed it was the stone-built outbuilding with power running to it. The previous owners had let it go, but we gave it some love and it’s now our studio. Having a dedicated studio in a separate building to the house works so well: it means there’s a healthy degree of separation for concentration purposes, but I can also be around for parenting duties when required. Ironically, because almost everything I do for ‘work’ is computer-based, most of what I have in the studio in terms of hardware is actually for my music-making project Other Form (soundcloud.com/otherform). Apart from my bookshelf, which is out of shot, the…

Graphic design on the web is becoming standardised. Visual trends are being adhered to like rules, and organisations are losing their identity online. The likes of Squarespace and Wix are offering seemingly high quality templates for a fraction of the price of a bespoke site design. Platforms such as Dribbble and Behance make it a lot easier to find designers. Supply is high and so is the competition. This can force prices down. So, why should anyone hire us? What makes us unique? With stiff competition, how can we maintain a premium price point for the work we do and continue to forge a successful career in web design? The answer lies with our clients and our approach to design. We need to remove ourselves from this race by competing…

Green Chameleon www.craftedbygc.com One of the coolest things about the web is how we can connect with information and places we wouldn’t normally have access to. Step Inside Asia is a great example. Inside Asia Tours hired the team at Green Chameleon, a Bristol-based design agency, to highlight the best places to visit in Japan, Burma, Vietnam, Cambodia and Laos. The site features custom (and ridiculously charming) map and landmark illustrations, and the animations were created using the GreenSock Animation Platform. Users can browse the map, select a location, and find themselves in a sweeping 360-degree picture via the Google Maps API (try the ‘random location’ feature – it’s pretty fun). During the project, Green Chameleon’s biggest obstacle was performance. “Due to the sheer number of animations and the size…

Rideal is a new startup based around lift sharing. At the top of the homepage, an impactful video autoplays to enhance the brand image. Overlaying this is a simple, centrally aligned form in which you can either search for a ride with or offer a ride to others. This layout lets visitors interact quickly with the site. Underneath, a ‘Why use Rideal?’ section lists key benefits, each animated into view with a subtle slide-and-fade followed. A call to action to ‘Get started now’ sits below, to capture those who have been convinced by these arguments. There is also a section detailing the latest lift offers and requests, giving an overview of what others are doing on the site. Expanding trays show more key journey information. On mobile, the form is…

The conversations around the changing times of frontend development are vast and many. It’s hard to go a single day without seeing some discussion around the rise of JavaScript frameworks, progressive web apps, the web is dead, the web isn’t dead. Regardless of your stance, it’s obvious that frontend development has drastically shifted into a more complex environment. As developers accept this change, we must also remember that we’re responsible for stability and consistency like never before. This means fully embracing frontend testing as an equal citizen within your codebase. Frontend testing is a blanket term that covers a variety of automated testing strategies. Some of these, like unit and integration testing, have been an accepted best practice within the backend development community for years. Other strategies are newer, and…

People often ask me which pens I use. Let me tell you: the pens are the least important part. Similarly, any simple piece of paper will work. Or even a whiteboard. It doesn’t matter that much. The one piece of advice I do give is to use a pen rather than a pencil. A pencil can be erased and that’s what we want to avoid. When you make a line on the paper, commit to it. If the line is not quite right, just put a second line on top of it. And if it’s still isn’t quite right, add another. If the sketch gets too messy, just make another, better sketch with what you’ve learned from the first try. Sketching is all about moving your thoughts forward. Eliminating the…

View source files here! All the files you need for this tutorial can be found at netm.ag/fractalgit-285 ABOUT THE AUTHOR MICAH GODBOLT w: micah.codes t: @micahgodbolt job: Frontend architect areas of expertise: Design systems, Sass, frontend testing q: if you could have any superpower, what would it be? a: I’d certainly go with flying. I love a good view and hate a long commute RESOURCE Styleguides.io is an amazing resource that collects articles, books, podcasts, talks, tools and examples from all over the web. By now, many of us are familiar with style guides. But there is a new breed of design system documentation gaining steam: the pattern library. The major difference between the two is the primary source of the tool’s documentation. A style guide’s documentation tends to originate…

UI animation can be an incredible asset in user experience. Mobile developers know this all too well. Mobile app animations are a core part of the experience, rather than an afterthought. However, on the web, animations are commonly seen as ‘the icing on the cake’ , and are omitted as they are deemed unnecessary, excessive or too complex to implement. Worse, animations that lack meaning can detract from the UX. In this tutorial, we’re going to learn about a certain category of meaningful animation that you might be familiar with; one that enhances the user experience. VIDEO David Khourshid has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ flipvid-285 ABOUT THE AU THOR DAVID KHOURSHID w: github.com/davidkpiano t: @davidkpiano job: Frontend engineer, Counsyl areas of…

Designers are of course responsible for the visual accessibility of a web page, and ensuring content can be read in imperfect conditions – or with imperfect eyes. But a good design also describes meaning for those who cannot see the design at all. In a well-designed website, visual style is not decoration; it is nonverbal communication. The layout, colours, fonts and so on all communicate branding and style, sure, but also the fundamental structure and purpose of each component and the relationships between them. For screen readers and other assistive tools, however, structure and purpose are identified using markup tags (semantic HTML) and ARIA attributes. Markup and text are the substance of your web page, independent of style. Semantic markup is essential for interactive widgets, and it can also help…