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.
Beautiful, printed book. eBook is included. Free worldwide airmail shipping.
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.
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.
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!
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.
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.
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.
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.
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.
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?
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.
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.
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.
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.
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.
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.
No shipping costs — wherever you are in the world! We ship everywhere, worldwide, via airmail shipping. What you see is what you pay.
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!
Printed hardcover. eBook included. Free shipping worldwide, airmail only.
PDF, ePUB, Amazon Kindle.