Skip to main content Jump to list of all articles

Smashing Book 6: New Frontiers In Web Design (Shipping in September)

by Laura Elizabeth, Marcy Sutton, Rachel Andrew, Mike Riethmuller, Harry Roberts, Lyza Gardner, Yoav Weiss, Adrian Zumbrunnen, Greg Nudelman, Ada Rose Cannon, Vitaly Friedman

 Smashing Book 6: New Frontiers In Web Design (Shipping in September)

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, Grid, Service Workers, performance patterns, AR/VR, conversational UIs and responsive art direction.

Hardcover

$ 34.90 $ 39.00

Beautiful, printed book. eBook is included. Free worldwide airmail shipping.

eBook

$ 14.90

PDF, ePUB, Amazon Kindle.

Shipping of the book will start late September. When buying today, you can start reading the first chapters right away, of course.

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. Jump to table of contents ↓

We’ll 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, for chatbots and watches and how to bring responsive art-direction to the web. Smashing Book 6 will get you ready for the new frontiers and challenges.

Print, 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.

A look inside the book

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!

Add your name to the book

Table of Contents

Author
Chapter
Laura Elizabeth
Making Design Systems Work in Real-Life
+
  • 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.

Marcy Sutton
Accessibility in Times of Single-Page Apps
+
  • 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.

Rachel Andrew
Production-Ready CSS Grid Layouts
+
  • 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.

Mike Riethmuller
Strategic Guide to CSS Custom Properties
+
  • 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.

Yoav Weiss
Loading Assets on The Web
+
  • 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.

Harry Roberts
Obscure Performance Tips & Tricks
+
  • Performance
  • Tooling
  • Strategy

Web performance is a science of its own. We know common bottlenecks and strategies to get to better results, yet getting there is a path full of unknowns, contradictions, traps, and difficult constraints, be they of a technical nature or time-sensitive. How exactly do we get from the sad state of things to the desired outcome?

In this chapter, we’ll explore mostly obscure techniques and tooling to improve performance of your websites or applications — looking into everything from HTML, CSS, JavaScript, web fonts and 3rd-party-scripts to strategies for finding and removing bottlenecks and speeding up the website delivery.

Lyza Gardner
Building an Advanced Service Worker
+
  • 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.

Adrian Zumbrunnen
On Designing Conversational Interfaces
+
  • 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.

Greg Nudelman
Building And Designing Next-Gen Interfaces
+
  • 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.

Ada Rose Cannon
Cross Reality and the web (AR/VR)
+
  • 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.

Vitaly Friedman
Bringing Personality Back to The Web
+
  • 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.

 Smashing Book 6: New Frontiers In Web Design (Shipping in September)

Technical Details

  • approx. 432 pages
  • 17 × 24 cm (6.7 × 9.5 in)
  • Quality hardcover with stitched binding and ribbon page marker
  • ISBN: 978-3-945749-69-2
  • Free worldwide airmail shipping from Germany

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 Twitter @smashingmag — 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.

Delivery times to my country?
+
All books will be shipped via airmail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times.
Is the eBook included?
+
Yes, the eBook is included when you buy a printed book, so you can start reading the eBook right away. We support PDF, ePub and Amazon Kindle formats.
What payment methods are accepted?
+
We accept 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.
Is there a money-back guarantee?
+
Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back with no ifs, ands, or buts!
I have a question that is not covered here.
+
Please leave a comment below, or get in touch with us via the contact form or via @SmashingSupport on Twitter. We would love to help you in any way we can — you know that!

That’s it, everyone! We sincerely appreciate your support and trust, and we’ll make sure to deliver the book to you as soon as possible. Cheers!

Hardcover

$ 34.90 $ 39.00

Printed hardcover. eBook included. Free shipping worldwide, airmail only.

eBook

$ 14.90

PDF, ePUB, Amazon Kindle.

About The Author

More Books