Community

Smashing Book 6: New Frontiers In Web Design

It’s about time to finally make sense of all the front-end and UX madness. Meet our new book with everything from design systems to accessible single-page apps, CSS Custom Properties, CSS Grid, Service Workers, performance patterns, AR/VR, conversational UIs and responsive art direction.

Finding your way through front-end and UX these days is challenging and time-consuming. But frankly, we all just don’t have time to afford betting on a wrong strategy. Smashing Book 6 sheds some light on new challenges and opportunities, but also uncovers new traps and pitfalls in this brave new front-end world of ours. Take a look at the excerpt.

Published on September 2018
Tags: Performance, UX Design, CSS, Accessibility
By: Laura Elizabeth, Marcy Sutton, Rachel Andrew, Mike Riethmuller, Lyza Gardner, Yoav Weiss, Adrian Zumbrunnen, Greg Nudelman, Ada Rose Cannon, Vitaly Friedman

Print + eBook

$ 48.75 $ 63.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 19.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with your Smashing Membership.

“The books published by SmashingMag and team are getting better each time. I was thrilled to be able to preview it... Every chapter is good! Having focused on accessibility for much of my career, Marcy Sutton’s chapter is a personal favorite.”

Stephen Hay, Author of Responsive Design Workflow

About The Book

Our books aren’t concerned with short-living trends, and our new book isn't an exception. Smashing Book 6 is focused on real challenges and real front-end solutions in the real world: from accessible apps to performance to CSS Grid Layout to advanced service workers to responsive art direction. No chit-chat or theory. Just things that worked, in actual projects.

Jump to table of contents.
Jump to frequently asked questions.
Peek inside and download a free PDF sample (21 MB, PDF).

*From left to right: Laura Elizabeth, Marcy Sutton, Rachel Andrew, Mike Riethmuller, Lyza D. Gardner, Yoav Weiss, Adrian Zumbrunnen, Greg Nudelman, Ada Rose Edwards, and yours truly.*

*From left to right: Laura Elizabeth, Marcy Sutton, Rachel Andrew, Mike Riethmuller, Lyza D. Gardner, Yoav Weiss, Adrian Zumbrunnen, Greg Nudelman, Ada Rose Edwards, and yours truly.*

536 pages, printed as quality hardcover + eBook. Designed with love from Italy by Chiara Aliotta. Free airmail worldwide shipping from Germany.

Print + eBook

$ 48.75 $ 63.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 19.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with your Smashing Membership.

Making Design Systems Work in the Real World — by Laura Elizabeth +

Design systems
Pattern library
Workflow
Strategy
Measurement

We’ve been there before. Once a source of hope and bright future for the entire organization, a thoroughly crafted design system is slowly becoming one of those legacy products collecting dust in an obscure Dropbox folder. Why are we still struggling to make a design system stick? What seems to be the main problem? Is it that working with a component-driven workflow is too difficult, or that maintaining the design system feels like too much work? We wanted to find the answers.

Often the team doesn’t use a design system; management doesn’t support it, and after a while, the system stalls and it never recovers. The interesting thing to note here is that none of these are technical issues. As we’ll find out in this chapter, despite its robotic name, design systems are predominantly about one thing: people, and how to organize them.

Accessibility in Times of Single-Page Apps — by Marcy Sutton +

Accessibility
JavaScript
Semantics
Structure
Interactivity
Focus Management
ARIA
Testing

An increasing number of web apps and websites are architected and rendered entirely with JavaScript these days, both client- and server-side. Accessibility is as important of a consideration as it’s ever been, with more products and services users depend on moving online–things like bill pay, shopping and education, among others.

Fortunately, we can apply web accessibility basics to our websites and web applications and start to make a huge impact. However, when developing Single Page Apps (SPAs), there are some unique accessibility requirements we must consider to avoid constructing barriers for users with disabilities. Designing and developing inclusively not only benefits the roughly 15% of people with some kind of disability; it benefits absolutely everyone.

Production-Ready CSS Grid Layouts — by Rachel Andrew +

CSS Grid
Flexbox
Fallback
Layouts
Strategy
Gotchas

CSS Grid has been around for a while, but what would be the right strategy to build bulletproof CSS layouts these days? Do we start building Grid-first, or Flexbox-first, or Fallback-first? In this chapter we won’t dive deep into the spec. Instead, we’ll look into the main things that trip people up when starting to use Grid Layout.

We’ll take a look at the fundamental parts of CSS: Grid and Flexbox. Key to both of these methods are concepts of sizing, space distribution and alignment. Our hope is that by reading this chapter, and building the examples, you’ll have a better understanding of CSS layout as a whole.

A Strategy Guide to CSS Custom Properties — by Mike Riethmuller +

CSS Custom Properties
Preprocessors
Components
Strategy

CSS Custom Properties have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components. They provide opportunities for well-organized stylesheets, but also the potential to add complexity to CSS. To get the most out of them, we need to know how we write and structure CSS with custom properties.

In this chapter, we aren’t going to focus on the syntax and how they work — there are many tutorials about it. Instead, we’ll explore how dynamic properties are different from variables in preprocessors, how to organize stylesheets with preprocessors in mind, and how to choose a strategy for getting the most out of CSS Custom Properties.

Building an Advanced Service Worker — by Lyza Gardner +

Service Workers
Fetch API
Cache API
Lifecycle
Maintenance
Strategy

Service Workers enable a wide array of great features and are beginning to feel like a lynchpin of the modern web. Yet even folks who’ve cooked up a few service workers of their own can be hard-pressed to explain what exactly the right strategy for building, using and maintaining a service worker is.

In this chapter, we’ll look into common scenarios, techniques and gotchas for building a quite sophisticated service worker. We’ll explore browser quirks, versioning issues, how to deal with caches, how to provide an offline experience and how to use Channel Messaging API, Web Push and Notifications as well as Background Sync.

Loading Assets on the Web — by Yoav Weiss +

Delivery
Compression
Priorities
Priority Hints
Critical CSS/JS
Intersection Observer
Image Lazy Loading
Web Packaging
HTTP/2
Server Push
Latency
Third-Parties

What does it take to deliver web sites in the highest performing way possible? What would it take for us to say that given certain bandwidth, latency and CPU constraints, a web site was delivered to the user in the best possible speed? This is a question that we’ve spent a lot of time on in the last few years, thinking about what the ideal performance would take both on the browser side as well as on the server/content side.

This chapter will explore ways to make sure these conditions are maintained when loading and executing content on the web. These conditions most probably require changes in the way browsers load web content. However, they cannot rely solely on that. In order for some of these conditions to be met, web content must also be changed; the chapter will focus on fastest resource loading.

On Designing Conversations — by Adrian Zumbrunnen +

Conversational Interfaces
Writing
Motion
Chatbots
Workflow
Platforms

Think about the last time you had an engaging conversation. When was it and what made it engaging to begin with? We often have a hard time remembering why certain conversations made us feel the way they did. No matter what our individual preferences, there are underlying rules and principles that define whether we feel a conversation is effective or whether it’s a waste of time.

Conversational interfaces often live outside of the scope of websites, and sometimes are integrated with third parties, be it Facebook Messenger, Whatsapp or voice-based UIs. What do we need to know to create those experiences? In this chapter, we’ll explore the guidelines on designing engaging and useful conversations, the lessons we’ve learned creating one and a workflow to create your own conversational experiences.

UX Design of Chatbots and Virtual Assistants — by Greg Nudelman +

Bot frameworks
Intents
Machine Learning
Wearables
Hands-Free Control
Voice UIs

Today, people demand polished, context-aware, personalized cross-platform experiences fully integrated into their work and leisure activities. Tech giants are rising to this challenge, competing with one another by providing sophisticated frameworks and cloud-based services for almost every component of your app, including (which is most important for us) robust language parsing and speech recognition frameworks.

In this chapter, we’ll discuss key considerations for building conversational bots. Throughout the chapter, will be assembling a bot similar in functionality to a basic Amazon Alexa, as an example to showcase some of the key features of conversational UIs. This chapter will give you enough background to comfortably design and code your own bot similar to basic “unskilled” Alexa for whatever app you choose.

Crafting Experiences for AR/VR/XR — by Ada Rose Cannon +

Virtual Reality
WebXR API
VR Design
Interactivity
Social VR
Audio
Performance
Frame Rate
Physics

Cross Reality (XR) is an umbrella term for Virtual Reality (VR), Augmented Reality (AR) and Mixed Reality (MR). All of these terms describe different levels of mixing a virtual world with the real world. Work is being done to integrate these technologies into the Web platform but we can build these technologies into the Web today.

The goals of this chapter are to explore how it works and help show some patterns designers and developers can explore to start using them today. We’ll explore the possibilities of WebVR and a strategy for building and designing scalable VR experiences.

Bringing Personality Back to the Web — by Vitaly Friedman +

Design Patterns
Personality
Trends
A/B Testing
Brutalism
Workflow
Psychology
Usability
Offboarding
Art-Direction

Generic web layouts have become somewhat of a misnomer in conversations circling around web design these days. We’re bored and slightly annoyed by how predictable and uninspired most web experiences have become. Not without reason, though. Every single landing page seems to be a twin of pretty much every other web page.

In this chapter, we’ll look into a few practical techniques and strategies that might help you find, form, and surface your personality efficiently. By doing so, we’ll explore how doing so consistently could fit into existing design workflows, along with plenty of examples to give you a good start. But before we get there, we need to figure out how omnipresent design patterns and best practices fit into the equation.

Print + eBook

$ 48.75 $ 63.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 19.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with your Smashing Membership.

Frequently Asked Questions

If you have any questions, we are right here to answer them. We love our customers, and we’d love to help you in any way or just listen to your story. So please feel free to ask questions via @smashingmag on Twitter — we’ll get back to you right away. Just in case: here are answers to some frequently asked questions.

How much does shipping cost to my country? +: No shipping costs — wherever you are in the world! We ship everywhere, worldwide, via airmail shipping. What you see is what you pay. No ifs or buts.
Delivery times to my country? +: All books are shipped via airmail to keep delivery times as short as possible. You can check the anticipated delivery times for your country.
Is the eBook included with print? +: When you purchase a printed book, you’ll get a friendly discount on the eBook. All eBooks are available in usual formats — PDF, ePUB, and Amazon Kindle.
What payment methods are accepted? +: PayPal, VISA, MasterCard and American Express. Of course, we use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. And no, we don’t store your credit card data on our servers. (Obviously.)
Is there a money-back guarantee? +: Yes, absolutely! No risk at all — our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back without ifs or buts!
I have a question that is not covered here. +: No worries! Please get in touch with us via the contact form. We would love to help you as soon as we possibly can!