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.
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. To the excerpt →
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.
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.
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.
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.
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!