Let’s make sense of the front-end and UX madness. Meet Smashing Book 6 with everything from design systems to accessible single-page apps, CSS Custom Properties, Grid, Service Workers, performance patterns, AR/VR, conversational UIs & responsive art direction. And you can add your name into the book, too. About the book ↓.
Smashing Book 6 is dedicated to the challenges and headaches that we are facing today, and how to resolve them. No chit-chat, no theory: only practical, useful advice applicable to your work right away.
PDF, ePUB, Kindle. First chapters are already available.
About The Book
With so much happening in front-end and UX these days, it’s getting really hard to stay afloat, isn’t it? New technologies and techniques appear almost daily, and so navigating through it all in regular projects is daunting and time-consuming. Frankly, we just don’t have time to afford betting on a wrong strategy. That’s why we created Smashing Book 6, our shiny new book that explores uncharted territories and seeks to establish a map for the brave new front-end world.
You know the drill: the book isn’t about tools; it’s about workflow, strategy and shortcuts to getting things done well. Respected members of the community explore how to build accessible single-page apps with React or Angular, how to use CSS Grid Layout, CSS Custom Properties and service workers as well as how to load assets on the web in times of HTTP/2 and bloated third-party scripts.
We’ll also examine how to make design systems work in real-life, how to design and build conversational interfaces, AR/VR, building for chatbots and watches and how to bring responsive art-direction back to the web.
Print shipping in late September 2018., hardcover + eBook. 432 pages. Written by Laura Elizabeth, Marcy Sutton, Rachel Andrew, Mike Riethmueller, Harry Roberts, Lyza D. Gardner, Yoav Weiss, Adrian Zumbrunnen, Greg Nudelman, Ada Rose Cannon and Vitaly Friedman. Pre-order the book today.
PDF, ePUB, Kindle. First chapters are already available.
Why This Book Is For You
We worked hard to design the book in a way that it doesn’t become outdated quickly. That’s why it’s more focused on strategy rather than tooling. It’s about how we do things, but not necessarily the tools we all use to get there.
Table of Contents
The book contains 11 chapters, with topics ranging from design to front-end. Only practical advice, applicable to your work right away.
Making design systems work in real-life by Laura Elizabeth
Accessibility in times of SPAs by Marcy Sutton
Production-ready CSS Grid layouts by Rachel Andrew
Strategic guide to CSS Custom Properties by Mike Riethmueller
Taming performance bottlenecks by Harry Roberts
Building an advanced service worker by Lyza Gardner
Loading assets on the web by Yoav Weiss
Conversation interface design patterns by Adrian Zumbrunnen
Building chatbots and designing for watches by Greg Nudelman
Cross Reality and the web (AR/VR) by Ada Rose Cannon
Bringing personality back to the web by Vitaly Friedman
PDF, ePUB, Kindle. You can start reading right away.
Download the Sample Chapter
To sneak a peek inside the book, you can download Vitaly’s chapter on bringing personality back to the web (PDF, ca. 18MB). Enjoy!
Goodie: New Frontiers In Web Design Wallpaper
To celebrate the pre-release of the book , Chiara Aliotta designed a set of mobile and desktop wallpapers for you to indulge in. Feel free to download it (ZIP, ca. 1.4MB).
About The Designer
The cover was designed by the fantastic Chiara Aliotta. Chiara is an Italian award-winning designer with many years of experience as an art director and brand consultant. She founded the design studio Until Sunday and has directed the overall artistic look and feel of different tech companies and not-for-profit organizations around the world. We’re very happy that she gave Smashing Book 6 that special, magical touch.
Add Your Name To The Book
We kindly appreciate your support, and so as always, we invite you to add your name to the printed book: a double-page spread is reserved for the first 1.000 people. Space is limited, so please don’t wait too long!
Even though hooks in WordPress are amazing and everyone uses them knowingly or unknowingly, I get the impression that some advanced users and especially front-end developers still seem to avoid them. If you feel like you’ve been holding back on hooks, too, then this article will get you started. I am also going to reveal some interesting details to anyone who thinks they are familiar enough with hooks.
You’ll want to read this article especially if you’d like to: understand code snippets with hooks such as those found in forums, extend WordPress, plugins and themes without breaking updates, learn how to avoid common problems, allow others to extend your code.
React is one of today’s most popular ways to create a component-based UI. It helps to organize an application into small, human-digestible chunks. With its “re-render the whole world” approach, you can avoid any complex internal interactions between small components, while your application continues to be blazingly fast due to the DOM-diffing that React does under the hood (i.e. updating only the parts of the DOM that need to be updated).
But can we apply the same techniques to web graphics — SVG in particular? Yes! I don’t know about you, but for me SVG code becomes messy pretty fast. Trying to grasp what’s wrong with a graph or visualization just by looking at SVG generator templates (or the SVG source itself) is often overwhelming, and attempts to maintain internal structure or separation of concerns are often complex and tedious.
Exactly 9 years ago we published the very first article on this very website. Many things changed since then, but one thing remained the same: our obsession for publishing valuable, practical quality content. We proudly stand behind our work — the books, the eBooks, the conferences; our craft is ours, but our work serves the community and belongs to everybody.
As a team, we are happy and privileged to do what we truly love, and we know that this wouldn’t be possible without your kind and generous support. So thanks for sticking around. Now, a birthday calls for a birthday party, so we’ve prepared a little something for you to celebrate the day: a free chapter on responsive design patterns (PDF), a Mystery Riddle, a new free eBook and a birthday special: if you grab the hardcover of the Smashing Book 5 today, you’ll get five Smashing eBooks as a gift for your kind support.
If you work in the tech industry, it’s easy to forget that older people exist. Most tech workers are really young1, so it’s easy to see why most technology is designed for young people. But consider this: By 2030, around 19% of people in the US will be over 652. Doesn’t sound like a lot? Well it happens to be about the same number of people in the US who own an iPhone today. Which of these two groups do you think Silicon Valley spends more time thinking about?
This seems unfortunate when you consider all of the things technology has to offer older people. A great example is Speaking Exchange3, an initiative that connects retirees in the US with kids who are learning English in Brazil. Check out the video below, but beware — it’s a tear-jerker.
While the ageing process is different for everyone, we all go through some fundamental changes. Not all of them are what you’d expect. For example, despite declining health, older people tend to be significantly happier5 and better at appreciating what they have6.
But ageing makes some things harder as well, and one of those things is using technology. If you’re designing technology for older people, below are seven key things you need to know.
(How old is old? It depends. While I’ve deliberately avoided trying to define such an amorphous group using chronological boundaries, it’s safe to assume that each of the following issues becomes increasingly significant after 65 years of age.)
Vision And Hearing
From the age of about 40, the lens of the eye begins to harden, causing a condition called “presbyopia.” This is a normal part of ageing that makes it increasingly difficult to read text that is small and close.
Color vision also declines with age, and we become worse at distinguishing between similar colors. In particular, shades of blue appear to be faded or desaturated.
Hearing also declines in predictable ways, and a large proportion of people over 65 have some form of hearing loss10. While audio is seldom fundamental to interaction with a product, there are obvious implications for certain types of content.
Avoid font sizes smaller than 16 pixels (depending of course on device, viewing distance, line height etc.).
Provide subtitles when video or audio content is fundamental to the user experience.
Our motor skills decline with age, which makes it harder to use computers in various ways. For example, during some user testing at a retirement village, we saw an 80-year-old who always uses the mouse with two hands. Like many older people, she had a lot of trouble hitting interface targets and moving from one thing to the next.
It’s safe to assume Dustin has never watched a 75-year-old use a mobile phone. Eventually, changes in vision and motor control make small screens impractical for everyone. Smartphones are a young person’s tool18, and not even the coolest teenager can escape their biological destiny.
In our research, older people consistently described phones as “annoying” and “fiddly.” Those who own them seldom use them, often not touching them for days at a time. They often ignore SMS’ entirely.
But older people aren’t afraid to try new technology when they see a clear benefit. For example, older people are the largest users of tablets22. This makes sense when you consider the defining difference between a tablet and a phone: screen size. The recent slump in tablet sales23 also makes sense if you accept that older people have longer upgrade cycles than younger people.
Avoid small-screen devices (i.e. phones).
Don’t rely on SMS to convey important information.
Older people have different relationships than young people, at least partly because they’ve had more time to cultivate them. For example, we conducted some research into how older people interact with health care professionals. In many cases, they’ve seen the same doctors for decades, leading to a very high degree of trust.
I regard it like going to see old pals.… I feel I could tell my GP almost anything.
– George, 73, on visiting his medical team
But due to health and mobility issues, the world available to the elderly is often smaller — both physically and socially. Digital technology has an obvious role to play here, by connecting people virtually when being in the same room is hard.
Enable connection with a smaller, more important group of people (not a big, undifferentiated social network).
Don’t overemphasize security and privacy controls when trusted people are involved.
Be sensitive to issues of isolation.
During a user testing session, I sat with a 66-year-old as she signed up for an Apple ID. She was asked to complete a series of security questions. She read the first question out loud. “What was the model of your first car?” She laughed. “I have no idea! What car did I have in 1968? What a stupid question!”
It’s natural for a 30-year-old programmer to assume that this question has meaning for everyone, but it contains an implicit assumption about which life stage the user is at. Don’t make the same mistake in your design.
Beware of content or functionality that implicitly assumes someone is young or at a certain stage in life.
Experience With Technology
I once sat with a man in his 80s as he used a library interface. “I know there are things down there that I want to read” he said, gesturing to the bottom of the screen, “but I can’t figure out how to get to them.” After I taught him how to use a scrollbar, his experience changed completely. In another session, two of the older participants told me that they’d never used a search field before.
Generally when you’re designing interfaces, you’re working within a certain kind of scaffolding. And it’s easy to assume that everyone knows how that scaffolding works. But people who didn’t grow up with computers might have never used the interface elements we take for granted. Is a scrollbar a good design for moving content up and down? Is its function self-evident? These aren’t questions most designers often ask. But the success of your design might depend on a thousand parts of the interface that you can’t control and probably aren’t even aware of.
Don’t make assumptions about prior knowledge.
Interrogate all parts of your design for usability, even the parts you didn’t create.
The science of cognition is a huge topic, and ageing changes how we think in unpredictable ways. Some people are razor-sharp in their 80s, while others decline as early as in their 60s.
Despite this variability, three areas are particularly relevant to designing for the elderly: memory, attention and decision-making. (For a more comprehensive view of cognitive change with age, chapter 1 of Brain Aging: Models, Methods, and Mechanisms24 is a great place to start.)
There are different kinds of memory, and they’re affected differently by the ageing process. For example, procedural memory (that is, remembering how to do things) is generally unaffected. People of all ages are able to learn new skills and reproduce them over time.
But other types of memory suffer as we age. Short-term memory and episodic memory are particularly vulnerable. And, although the causes are unclear, older people often have difficulty manipulating the contents of their working memory25. This means that they may have trouble understanding how to combine complex new concepts in a product or interface.
Prospective memory (remembering to do something in the future) also suffers26. This is particularly relevant for habitual tasks, like remembering to take medication at the right time every day.
How do people manage this decline? In our research, we’ve found that paper is king. Older people almost exclusively use calendars and diaries to supplement their memory. But well-designed technology has great potential to provide cues for these important actions.
Introduce product features gradually over time to prevent cognitive overload.
Avoid splitting tasks across multiple screens if they require memory of previous actions.
During longer tasks, give clear feedback on progress and reminders of goals.
Provide reminders and alerts as cues for habitual actions.
It’s easy to view ageing as a decline, but it’s not all bad news. In our research, we’ve observed one big advantage: Elderly people consistently excel in attention span, persistence and thoroughness. Jakob Nielsen has observed similar things, finding that 95% of seniors are “methodical”30 in their behaviors. This is significant in a world where the average person’s attention span has actually dropped below the level of a goldfish31.
It can be a great feeling to watch an older user really take the time to explore your design during a testing session. And it means that older people often find things that younger people skip right over. I often find myself admiring this way of interacting with the world. But the obvious downside of a slower pace is increased time to complete tasks.
Don’t be afraid of long-form text and deep content.
Allow for greater time intervals in interactions (for example, server timeouts, inactivity warnings).
Avoid dividing users’ attention between multiple tasks or parts of the screen.
Young people tend to weigh a lot of options before settling on one. Older people make decisions a bit differently. They tend to emphasize prior knowledge34 (perhaps because they’ve had more time to accumulate it). And they give more weight to the opinions of experts (for example, their doctor for medical decisions).
The exact reason for this is unclear, but it may be due to other cognitive limitations that make comparing new options more difficult.
Prioritize shortcuts to previous choices ahead of new alternatives.
Information framed as expert opinion may be more persuasive (but don’t abuse this bias).
A lot of people in the tech industry talk about “changing the world” and “making people’s lives better.” But bad design is excluding whole sections of the population from the benefits of technology. If you’re a designer, you can help change that. By following some simple principles, you can create more inclusive products that work better for everyone, especially the people who need them the most.
If you’re a graphic designer, you will often have to work with off-the-shelf material created by others — for instance, combining ready-to-use fonts with images from a photographer or stock website. Also, you’ll often have to follow the branding already developed by someone else. It’s OK; it’s a part of the job, and you shouldn’t be bothered by it.
But the part of a project that almost every graphic designer likes and is proud of the most is something that you can do from scratch, something that you have control over and can sign off on confidently: illustration.
Remember the Smashing Book Mystery riddle from a couple of months ago? Guess what: the Mystery continues! To celebrate the launch of the SmashingConf NYC and our lovely book, we’ve prepared a new riddle, and this time it’s not going to be any easier, but the reward is definitely worth the effort.
How does it work? Below you’ll find an animated GIF that contains a hidden message. Once you’ve resolved the mystery, you’ll see a Twitter hashtag displayed in plain text.
The Smashing Library grants you immediate unlimited access to all Smashing eBooks, released in the past and in the future, including digital versions of our printed books. The yearly fee of $99 covers the immediate access to the complete Smashing library with 38 eBooks — you save up to 70% off the regular eBook prices! We think that’s a reasonable price for a total of 60 quality eBooks during the first year.
Two and a half months ago, the Smashing Book 2 was released. For us, a small independent publisher, it was a big deal, because this ambitious project on which we had been working since July 2010 was also very important for Smashing Magazine. We spent a tremendous amount of time and effort on the little and big details of the book. It was very important for us to get it right this time: to create an outstanding, high-quality book and provide outstanding, high-quality service to our readers.