This article is sponsored by Accessible UX Research

Smashing Library expands again! We’re so happy to announce our newest book, Accessible UX Research, is now available for download in eBook formats. Michele A. Williams takes us for a deep dive into the real world of UX testing, and provides a road map for including users with different abilities and needs in every phase of testing.

But the truth is, you don’t need to be conducting UX testing or even be a UX professional to get a lot out of this book. Michele gives in-depth descriptions of the assistive technology we should all be familiar with, in addition to disability etiquette, common pitfalls when creating accessible prototypes, and so much more. You’ll refer to this book again and again in your daily work.

This is also your last chance to get your printed copy at our discounted presale price. We expect printed copies to start shipping in early 2026. We know you’ll love this book, but don’t just take our word for it — we asked a few industry experts to check out Accessible UX Research too:

“Accessible UX Research stands as a vital and necessary resource. In addressing disability at the User Experience Research layer, it helps to set an equal and equitable tone for products and features that resonates through the rest of the creation process. The book provides a solid framework for all aspects of conducting research efforts, including not only process considerations, but also importantly the mindset required to approach the work.

This is the book I wish I had when I was first getting started with my accessibility journey. It is a gift, and I feel so fortunate that Michele has chosen to share it with us all.”

Eric Bailey, Accessibility Advocate

“User research in accessibility is non-negotiable for actually meeting users’ needs, and this book is a critical piece in the puzzle of actually doing and integrating that research into accessibility work day to day.”

Devon Pershing, Author of The Accessibility Operations Guidebook

“Our decisions as developers and designers are often based on recommendations, assumptions, and biases. Usually, this doesn’t work, because checking off lists or working solely from our own perspective can never truly represent the depth of human experience. Michele’s book provides you with the strategies you need to conduct UX research with diverse groups of people, challenge your assumptions, and create truly great products.”

Manuel Matuzović, Author of the Web Accessibility Cookbook

“This book is a vital resource on inclusive research. Michele Williams expertly breaks down key concepts, guiding readers through disability models, language, and etiquette. A strong focus on real-world application equips readers to conduct impactful, inclusive research sessions. By emphasizing diverse perspectives and proactive inclusion, the book makes a compelling case for accessibility as a core principle rather than an afterthought. It is a must-read for researchers, product-makers, and advocates!”

Anna E. Cook, Accessibility and Inclusive Design Specialist

About The Book

The book isn’t a checklist for you to complete as a part of your accessibility work. It’s a practical guide to inclusive UX research, from start to finish. If you’ve ever felt unsure how to include disabled participants, or worried about “getting it wrong,” this book is for you. You’ll get clear, practical strategies to make your research more inclusive, effective, and reliable.

Inside, you’ll learn how to:

• Plan research that includes disabled participants from the start,
• Recruit participants with disabilities,
• Facilitate sessions that work for a range of access needs,
• Ask better questions and avoid unintentionally biased research methods,
• Build trust and confidence in your team around accessibility and inclusion.

The book also challenges common assumptions about disability and urges readers to rethink what inclusion really means in UX research and beyond. Let’s move beyond compliance and start doing research that reflects the full diversity of your users. Whether you’re in industry or academia, this book gives you the tools — and the mindset — to make it happen.

High-quality hardcover, 320 pages. Written by Dr. Michele A. Williams. Cover art by Espen Brunborg. Print edition shipping early 2026. eBook now available for download. Download a free sample (PDF, 2.3MB) and reserve your print copy at the presale price.

Contents

1. Disability mindset: For inclusive research to succeed, we must first confront our mindset about disability, typically influenced by ableism.
2. Diversity of disability: Accessibility is not solely about blind screen reader users; disability categories help us unpack and process the diversity of disabled users.
3. Disability in the stages of UX research: Disabled participants can and should be part of every research phase — formative, prototype, and summative.
4. Recruiting disabled participants: Recruiting disabled participants is not always easy, but that simply means we need to learn strategies on where to look.
5. Designing your research: While our goal is to influence accessible products, our research execution must also be accessible.
6. Facilitating an accessible study: Preparation and communication with your participants can ensure your study logistics run smoothly.
7. Analyzing and reporting with accuracy and impact: How you communicate your findings is just as important as gathering them in the first place — so prepare to be a storyteller, educator, and advocate.
8. Disability in the UX research field: Inclusion isn’t just for research participants, it’s important for our colleagues as well, as explained by blind UX Researcher Dr. Cynthia Bennett.

Who This Book Is For

Whether a UX professional who conducts research in industry or academia, or more broadly part of an engineering, product, or design function, you’ll want to read this book if…

1. You have been tasked to improve accessibility of your product, but need to know where to start to facilitate this successfully.
2. You want to establish a culture for accessibility in your company, but not sure how to make it work.
3. You want to move from WCAG/EAA compliance to established accessibility practices and inclusion in research practices and beyond.
4. You want to improve your overall accessibility knowledge and be viewed as an Accessibility Specialist for your organization.

About the Author

Dr. Michele A. Williams is owner of M.A.W. Consulting, LLC - Making Accessibility Work. Her 20+ years of experience include influencing top tech companies as a Senior User Experience (UX) Researcher and Accessibility Specialist and obtaining a PhD in Human-Centered Computing focused on accessibility. An international speaker, published academic author, and patented inventor, she is passionate about educating and advising on technology that does not exclude disabled users.

Technical Details

• ISBN: 978-3-910835-03-0 (print)
• Quality hardcover, stitched binding, ribbon page marker.
• Free worldwide airmail shipping from Germany early 2026. We are currently unable to ship printed books to the United States due to customs clearance issues. If you have any questions, please contact us any time.
• eBook now available for download as PDF, ePUB, and Amazon Kindle.
• Order the eBook for instant download now.
• Reserve your print copy at the presale price.

Community Matters ❤️

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Trine, Heather, and Steven are three of these people. Have you checked out their books already?

(cm, il)

This article is sponsored by Maturing Design Systems

Design systems have become an integral part of our everyday work, so much that the successful growth and maturation of a design system can make or break a product or project. Great tokens, components and organization aren’t enough — it is most often the culture and curation that creates a sustainable, widely-adopted system. It can be hard to determine where to invest our time and attention. How do we build and maintain design systems that support our teams, enhance our work, and grow along with us?

Excerpt: Design System Culture

Culture is a funny thing. We all have some intuition about how important it is—at least we know we want to work in a great culture and avoid the toxic ones. But culture is notoriously difficult to define, and changing it can feel more like magic than reality. One company culture can be inspiring for some and boring for others, a place of growth for some and stifling for others.

Adding to the nuance, not only does your company have a culture as a whole, but it has many subcultures. That’s because culture is not created by any individual. Culture is something that happens when the same group of people gather together repeatedly over time. So, as a company grows, adding hierarchy and structure, the teams formed around specific goals, products, features, disciplines, and so on, all develop their own subcultures.

You probably have a design subculture. You probably have a product ownership subculture. You probably even have a subculture forming around those folks who get on a Zoom call every Tuesday at lunch to knit and chat. There are hundreds or more subcultures at most good-sized organizations. It’s complicated, nuanced, and immensely important.

When an individual is struggling with the way they are managed, one culture enables them to offer authentic feedback to their boss, while another leads them to look for a new job. When a company provides free lunch on Fridays, one culture creates a sense of gratitude for this benefit; another makes you feel like this free lunch comes with the expectation that you can’t ever leave work. One culture prioritizes financial results over respectful interactions. One culture encourages competition between teams, while another emphasizes collaboration with coworkers.

Why Culture?

At the beginning of 2021, my company was asked to help a large organization plan, design, and build a design system alongside the minimum viable product of a new product idea. This is the kind of work we truly love, so the team was excited to jump in.

As an author of a book about design systems, I want nothing more than to tell you how amazingly this engagement went. Instead, it was a tremendous struggle. Despite this being the perfect kind of work for my team and I on paper, we had to make the hard decision to walk away from our client at the end of that year. Not because we couldn’t do the work. Not because of any technical challenges or budget concerns. The reason we gave was “cultural incompatibility.” In almost twenty years of running my own businesses, this had never happened to me. After all, our clients don’t come to us because they have everything figured out — they come because they know they need help. If we couldn’t guide them through a difficult season, why did we even exist!?

Needless to say, it didn’t sit well with me. So, after following a few useless threads of fear that we just couldn’t cut it, I spent the next year diving down a rabbit hole of research on organizational culture. This next section is a summary of what I learned in that year and how I’ve been putting that to use since. To start, let’s find a common understanding of what culture is.

What Is Culture?

Over the last few decades, a lot has been said about workplace culture. From understanding why it matters and how it impacts the ways we lead, to offering methodologies for changing it. I’ve found tremendous value in the research and writings of Edgar Schein, a business theorist and psychologist. Schein offers a simple model to explain what culture is, breaking it down into three levels:

Artifacts

Artifacts are the top level of Schein’s model. These are the things people think of when you say “culture” — the visible perks a company offers. I once worked at a place where we could expense bringing in donuts for the team. Another job I had provided a foosball table. One company encouraged us to cook lunch together each week. These kinds of things, along with the company swag, the channel in Slack where you get to brag about your peers, and the company retreat are all “artifacts” of your company culture.

Espoused Values And Beliefs

The next layer down is called “espoused values and beliefs.” This is what people inside the culture say they believe. It’s the list of values, the mission statement, the vision. It’s the content on the website and plastered on the walls. It’s the stuff you expect to get when you accept the job because it’s how people answered all your questions throughout the interview process.

Basic Underlying Assumptions

The deepest layer is called “basic underlying assumptions.” This is what people inside the organization actually believe. It’s the way the leadership and employees behave, most notably

in the face of a difficult decision. This layer is the root of your culture. And no matter what you show (artifacts), no matter what you say (espoused beliefs), the things you believe (underlying assumptions) will come out eventually.

It Starts At The Bottom

As an employee, you will experience these things from the top down. On your first day, you observe what’s happening around you — you see the artifacts of the culture. Eventually, you get to know a few folks. As you have more and more conversations with them, you’ll begin to hear how they talk about the culture — their espoused beliefs. At some point, people inside your culture will be faced with some tough situations. This is where the rubber meets the road and when you’ll learn what those individuals’ basic underlying assumptions are.

Unhealthy organizations don’t have a process for surfacing and valuing those underlying assumptions. Healthy organizations know that culture starts with the basic underlying assumptions of every individual at the company.

Unhealthy organizations try to create culture with perks and mission statements. Healthy organizations allow the top two layers to emerge naturally from the bottom layer.

When the basic underlying assumptions don’t line up with the espoused beliefs and artifacts, the disconnect is strong. It’s often hard to articulate the problem, but people will feel it. This is the company with a core value of “family first” that requires you to travel all the time with no recognition of the impact it has on your actual family. The espoused belief to prioritize family is not actively supported in the decisions being made.

Strength And Weakness

We all subconsciously know these things, and that is reflected in the language we use as we talk about the culture of an organization. We tend to use the words “strong” and “weak” to describe culture. You might say, “That company has a strong culture.” This statement is an indication that the layers are aligned, and that means the culture itself serves as a way of guiding decisions. If we all have shared values, we can trust one another’s ability to make decisions that will align with those values.

Conversely, an organization with a weak culture is missing the alignment between the things they say and the decisions they make. These cultures often continually add policies and procedures in order to police the behavior of individuals. In this scenario, the culture is weak because it doesn’t offer the organic guidance a stronger culture does — the misalignment means the things we choose to do differ from the things we say.

That is not to say policies and procedures are bad. As companies grow, there is a need to document the expectations for people. The proactive nature of a strong culture means these documents are often a formalization of what has emerged organically, whereas a weak culture reacts to negative situations in hopes to prevent the bad from happening again.

Editor’s Note

Do you like what you’ve read so far? This is just an excerpt of Ben’s upcoming book, Maturing Design Systems, in which he explores the anatomy of a design system, explains how culture shapes outcomes, and shares practical guidance for the challenges at each stage — from building v1 and growing healthy adoption to navigating “the teenage years” and ultimately running a stable, influential system.

Table of Contents

• Context
  An introduction to the context of design systems, understanding where they live in your organization, what feeds them, and whether you should build one.
• Design System Culture
  A deep dive into what culture is, why it’s important for design system teams to understand, and how it unlocks the ability for you to deliver real value.
• The Anatomy of a Design System
  An exploration of the layers and parts that make up a design system based on the evaluation of hundreds of design systems over many years.
• Maturity
  An over view of the design system maturity model including the fours stages of maturity, origin stories, a framework for maturing in a healthy way, and a framework for creating design system stability.
• Stage 1, Building Version One
  A dive into what it means to be in stage 1 of the design system maturity and a few mental models to keep you focused on the right things in this early stage.
• Stage 2, Growing Adoption
  Unpacking stage 2 of the design system maturity model and a deep dive into adoption: broadening your perspective on adoption, the adoption curve, and how to create sustainable adoption.
• Stage 3, Surviving the Teenage Years
  Understanding the relevant concerns for stage 3 of the design system maturity model and how to address the more nuanced challenges that come with this level of maturity.
• Stage 4, Evolving a Healthy Program
  Exploring what it means to be in stage 4 of the design system maturity model, when you’ve become an influential leader in the eyes of the rest of your organization.

About The Author

Ben Callahan is an author, design system researcher, coach, and speaker. He founded Redwoods, a design system community, and The Question, a weekly forum for collaborative learning. As a founding partner at Sparkbox, he helps organizations embed human-centered culture into their design systems. His work bridges people and systems, emphasizing sustainable growth, team alignment, and meaningful impact in technology. He believes every interaction is an opportunity to learn.

Reviewers’ Testimonials

“This book is a clear and insightful blueprint for maturing design systems at scale. For well-supported teams, it offers strategy and clarity grounded in real examples. For smaller teams like mine, it serves as a North Star that helps you advocate for the work and find solutions that fit your team's maturity. I highly recommend it to anyone building a design system.”

— Lenora Porter, Product Designer

“Ben draws connections between process, collaboration, and identity in ways that feel both intuitive and revelatory. Many design system books live comfortably in the tactical and technical, but this one moves beyond the how and into the why — inviting readers to reflect on their roles not just as product owners, designers or engineers, but as stewards of shared understanding within complex organisations. This book doesn’t prescribe rigid solutions. Instead, it encourages self-inquiry and alignment, asking readers to consider how they can bring intentionality, empathy, and resilience into the systems they touch.”

— Tarunya Varma, Product Design Manager, Tide

“Ben Callahan’s “Maturing Design Systems” puts language to the struggles many of us feel but can’t quite explain. It unpacks the hidden influence of culture, setup, and leadership, providing you with the clarity, tools, and frameworks to course-correct and move your system work forward, whether you’re navigating a growing startup or a scaling enterprise.”

— Ness Grixti, Design Lead, Wise, and Author of “A Practical Guide to Design System Components”

Don’t Miss Out!

Through years of interviews, coaching, and consulting, Ben has discovered a model for how design systems mature. Understanding how systems tend to mature allows you to create a sustainable program around your design system — one that acknowledges the human and change-management side of this work, not just the technical and creative.

This book will be a valuable resource for anyone working with design systems!

Spread The Word

Sign up to our Smashing newsletter and be one of the first to know when Maturing Design Systems is available for preorder. We can’t wait to share this book with you!

(as, il, vf)

UX research can take so much of the guesswork out of the design process! But it’s easy to forget just how different people are and how their needs and preferences can vary. We can’t predict the needs of every user, but we shouldn’t expect different people using the product in roughly the same way. That’s how we end up with an incomplete, inaccurate, or simply wrong picture of our customers.

There is no shortage of accessibility checklists and guidelines. But accessibility isn’t a checklist. It doesn’t happen by accident. It’s a dedicated effort to include and consider and understand different needs of different users to make sure everyone can use our products successfully. That’s why we’ve teamed up with Michele A. Williams on a shiny new book around just that.

Meet Accessible UX Research, your guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Pre-order the book.

Please note that we are currently unable to ship printed books to the United States due to customs clearance issues. If you have any questions, please contact us any time.

About The Book

The book isn’t a checklist for you to complete as a part of your accessibility work. It’s a practical guide to inclusive UX research, from start to finish. If you’ve ever felt unsure how to include disabled participants, or worried about “getting it wrong,” this book is for you. You’ll get clear, practical strategies to make your research more inclusive, effective, and reliable.

Inside, you’ll learn how to:

• Plan research that includes disabled participants from the start,
• Recruit participants with disabilities,
• Facilitate sessions that work for a range of access needs,
• Ask better questions and avoid unintentionally biased research methods,
• Build trust and confidence in your team around accessibility and inclusion.

The book also challenges common assumptions about disability and urges readers to rethink what inclusion really means in UX research and beyond. Let’s move beyond compliance and start doing research that reflects the full diversity of your users. Whether you’re in industry or academia, this book gives you the tools — and the mindset — to make it happen.

High-quality hardcover. Written by Dr. Michele A. Williams. Cover art by Espen Brunborg. Print edition shipping early 2026. eBook now available for download. Pre-order the book.

Contents

1. Disability mindset: For inclusive research to succeed, we must first confront our mindset about disability, typically influenced by ableism.
2. Diversity of disability: Accessibility is not solely about blind screen reader users; disability categories help us unpack and process the diversity of disabled users.
3. Disability in the stages of UX research: Disabled participants can and should be part of every research phase — formative, prototype, and summative.
4. Recruiting disabled participants: Recruiting disabled participants is not always easy, but that simply means we need to learn strategies on where to look.
5. Designing your research: While our goal is to influence accessible products, our research execution must also be accessible.
6. Facilitating an accessible study: Preparation and communication with your participants can ensure your study logistics run smoothly.
7. Analyzing and reporting with accuracy and impact: How you communicate your findings is just as important as gathering them in the first place — so prepare to be a storyteller, educator, and advocate.
8. Disability in the UX research field: Inclusion isn’t just for research participants, it’s important for our colleagues as well, as explained by blind UX Researcher Dr. Cynthia Bennett.

Who This Book Is For

Whether a UX professional who conducts research in industry or academia, or more broadly part of an engineering, product, or design function, you’ll want to read this book if…

1. You have been tasked to improve accessibility of your product, but need to know where to start to facilitate this successfully.
2. You want to establish a culture for accessibility in your company, but not sure how to make it work.
3. You want to move from WCAG/EAA compliance to established accessibility practices and inclusion in research practices and beyond.
4. You want to improve your overall accessibility knowledge and be viewed as an Accessibility Specialist for your organization.

About the Author

Dr. Michele A. Williams is owner of M.A.W. Consulting, LLC - Making Accessibility Work. Her 20+ years of experience include influencing top tech companies as a Senior User Experience (UX) Researcher and Accessibility Specialist and obtaining a PhD in Human-Centered Computing focused on accessibility. An international speaker, published academic author, and patented inventor, she is passionate about educating and advising on technology that does not exclude disabled users.

Testimonials

“Accessible UX Research stands as a vital and necessary resource. In addressing disability at the User Experience Research layer, it helps to set an equal and equitable tone for products and features that resonates through the rest of the creation process. The book provides a solid framework for all aspects of conducting research efforts, including not only process considerations, but also importantly the mindset required to approach the work.

This is the book I wish I had when I was first getting started with my accessibility journey. It is a gift, and I feel so fortunate that Michele has chosen to share it with us all.”

Eric Bailey, Accessibility Advocate

“User research in accessibility is non-negotiable for actually meeting users’ needs, and this book is a critical piece in the puzzle of actually doing and integrating that research into accessibility work day to day.”

Devon Pershing, Author of The Accessibility Operations Guidebook

“Our decisions as developers and designers are often based on recommendations, assumptions, and biases. Usually, this doesn’t work, because checking off lists or working solely from our own perspective can never truly represent the depth of human experience. Michele’s book provides you with the strategies you need to conduct UX research with diverse groups of people, challenge your assumptions, and create truly great products.”

Manuel Matuzović, Author of the Web Accessibility Cookbook

“This book is a vital resource on inclusive research. Michele Williams expertly breaks down key concepts, guiding readers through disability models, language, and etiquette. A strong focus on real-world application equips readers to conduct impactful, inclusive research sessions. By emphasizing diverse perspectives and proactive inclusion, the book makes a compelling case for accessibility as a core principle rather than an afterthought. It is a must-read for researchers, product-makers, and advocates!”

Anna E. Cook, Accessibility and Inclusive Design Specialist

Technical Details

• ISBN: 978-3-910835-03-0 (print)
• Quality hardcover, stitched binding, ribbon page marker.
• Free worldwide airmail shipping from Germany early 2026. We are currently unable to ship printed books to the United States due to customs clearance issues. If you have any questions, please contact us any time.
• eBook now available for download as PDF, ePUB, and Amazon Kindle.
• Pre-order the book.

Community Matters ❤️

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be free for Smashing Members as soon as it’s out. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Addy, Heather, and Steven are three of these people. Have you checked out their books already?

(as, cm)

Earlier this month, we wrapped up our SmashingConfs 2024, and one subject that kept coming up over and over again — among attendees, between speakers, and even within the staff — was “what would we like to get better at next year?”

It seems like everyone has a different answer, but one thing is for sure: Smashing can help you with that. 😉

Save 30% on Books and Workshops (3+ items)

Good news for people who love a good value for a friendly price: until Thursday, 5 December, you can save 30% off three or more books and eBooks, 30% off three or more workshops, or get the entire Smashing eBook library for $75. This is a perfect time to set yourself up for a year of learning in 2025.

Build Your Own Bundle!

Our hardcover books are our editorial flagships. They deliver in-depth knowledge and expertise shared by experts from the industry. No fluff or theory, only practical tips and insights you can apply to your work right away.

No matter if you want to complete your existing Smashing book collection or start one from scratch, you can now pick and mix your favorite books and eBooks from our Smashing Books line-up to create a bundle tailored to your needs. Or take a look at our bundle recommendations below for some inspiration.

Save 30% with 3 or more books. No ifs or buts!

Until Thursday, 5 December, the 30% book discount will automatically apply to your cart once you add three or more items. Please note that the discount can’t be combined with other discounts.

Once you’ve decided which books should go into your bundle, we’ll pack everything up safely and send the parcel right to your doorstep from our warehouse in Germany. Shipping is free worldwide. Check delivery times.

Book Bundle Recommendations

We know decisions can be hard, that’s why we collected some ideas for themed book bundles to make the choice at least a bit easier. These bundles are perfect if you want to enhance your skills in one particular field.

You can click on each book title to jump to the details and add the book to your cart. The discount will be applied during checkout.

Front-End Bundle

Save 30% on the complete bundle.
Regular price (hardcover + PDF, ePUB, Kindle versions): $146.25
Bundle price: $102.38

Front-End Bundle dives deep into the challenges front-end developers face in their work every day — whether it’s performance, TypeScript and Image Optimization. You’ll learn practical strategies to make your workflow more efficient, but also gain precious insights into how teams at Instagram, Shopify, Netflix, eBay, Figma, Spotify tackle common challenges and frustrations.

• Success at Scale by Addy Osmani
• TypeScript in 50 Lessons by Stefan Baumgartner
• Image Optimization by Addy Osmani

Design Best Practices Bundle

Save 30% on the complete bundle.
Regular price (hardcover + PDF, ePUB, Kindle versions): $146.25
Bundle price: $102.38

Design Best Practices Bundle is all about creating respectful, engaging experiences that put your users’ well-being and privacy first. The practical and tactical tips help you encourage users to act — without employing dark patterns and manipulative techniques — and grow a sustainable digital business that becomes more profitable as a result.

• Click! How to Encourage Clicks Without Shady Tricks by Paul Boag
• Understanding Privacy by Heather Burns
• The Ethical Design Handbook by Trine Falbe, Martin Michael Frederiksen, and Kim Andersen

Interface Design Bundle

Save 30% on the complete bundle.
Regular price (hardcover + PDF, ePUB, Kindle versions): $144.00
Bundle price: $100.80

A lot of websites these days look rather generic. Our Interface Design Bundle will make you think outside the box, exploring how you can create compelling, effective user experiences, with clear intent and purpose — for both desktop and mobile.

• Touch Design for Mobile Interfaces by Steven Hoober
• Art Direction for the Web by Andy Clarke
• Smart Interface Design Patterns Checklist Cards by Vitaly Friedman

Big Design Bundle

Save 30% on the complete bundle.
Regular price (hardcover + PDF, ePUB, Kindle versions): $292.50
Bundle price: $204.75

The Big Design Bundle shines a light on the fine little details that go into building cohesive, human-centered experiences. Covering everything from design systems to form design patterns, mobile design to UX, and data privacy to ethical design, it provides you with a solid foundation for designing products that stand out from the crowd.

• Click! How to Encourage Clicks Without Shady Tricks by Paul Boag
• The Ethical Design Handbook by Trine Falbe, Martin Michael Frederiksen, and Kim Andersen
• Design Systems by Alla Kholmatova
• Form Design Patterns by Adam Silver
• Touch Design for Mobile Interfaces by Steven Hoober
• Understanding Privacy by Heather Burns

Special Deal For eBook Lovers

Get all eBooks for $75. You’re more of an eBook kind of person? The bundle-up discounts do apply to eBooks, too, of course. Or take a look at our Smashing Library to save even more: It includes 68 eBooks (including all our latest releases) for $75 (PDF, ePUB, and Kindle formats). Perfect to keep all your favorite books close when you’re on the go.

Bundle Up On Online Workshops: 30% Off On 3+ Workshops

Ready to dig even deeper? Whether you want to explore design patterns for AI interfaces, learn how to plan a design system, or master the art of storytelling, our online workshops are a friendly way to boost your skills online and learn practical, actionable insights from experts, live.

To prepare for the challenges that 2025 might have in store for you, you can now bundle up 3 or more online workshops and save 30% on the total price with code BUNDLEUP. Please note that the discount can’t be combined with other discounts. Take a look at all our upcoming workshops and start your smashing learning journey this winter.

Custom Bundles To Fit Your Needs!

Do you need a custom bundle? At Smashing, we would love to know how we can help you and your team make the best of 2025. Let’s think big!

We’d be happy to craft custom bundles that work for you:

• Group discounts on large teams for Smashing Membership,
• Bulk discounts on books or other learning materials for education or non-profit groups,
• Door prize packages for meetups and events,
• ...any other possibilities for your team, your office, your career path. Let us know via contact form!

We are always looking for new ways to support our community. Please contact us if you’d like us to craft a custom bundle for your needs, or if you have any questions at all. Let’s have a great year!

Community Matters ❤️

Producing a book or a workshop takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for their kind, ongoing support. 👏 Happy learning, everyone!

(cm, as, il)

Building successful web products at scale is a multifaceted challenge that demands a combination of technical expertise, strategic decision-making, and a growth-oriented mindset. In Success at Scale, I dive into case studies from some of the web’s most renowned products, uncovering the strategies and philosophies that propelled them to the forefront of their industries.

Here you will find some of the insights I’ve gleaned from these success stories, part of an ongoing effort to build a roadmap for teams striving to achieve scalable success in the ever-evolving digital landscape.

Cultivating A Mindset For Scaling Success

The foundation of scaling success lies in fostering the right mindset within your team. The case studies in Success at Scale highlight several critical mindsets that permeate the culture of successful organizations.

User-Centricity

Successful teams prioritize the user experience above all else.

They invest in understanding their users’ needs, behaviors, and pain points and relentlessly strive to deliver value. Instagram’s performance optimization journey exemplifies this mindset, focusing on improving perceived speed and reducing user frustration, leading to significant gains in engagement and retention.

By placing the user at the center of every decision, Instagram was able to identify and prioritize the most impactful optimizations, such as preloading critical resources and leveraging adaptive loading strategies. This user-centric approach allowed them to deliver a seamless and delightful experience to their vast user base, even as their platform grew in complexity.

Data-Driven Decision Making

Scaling success relies on data, not assumptions.

Teams must embrace a data-driven approach, leveraging metrics and analytics to guide their decisions and measure impact. Shopify’s UI performance improvements showcase the power of data-driven optimization, using detailed profiling and user data to prioritize efforts and drive meaningful results.

By analyzing user interactions, identifying performance bottlenecks, and continuously monitoring key metrics, Shopify was able to make informed decisions that directly improved the user experience. This data-driven mindset allowed them to allocate resources effectively, focusing on the areas that yielded the greatest impact on performance and user satisfaction.

Continuous Improvement

Scaling is an ongoing process, not a one-time achievement.

Successful teams foster a culture of continuous improvement, constantly seeking opportunities to optimize and refine their products. Smashing Magazine’s case study on enhancing Core Web Vitals demonstrates the impact of iterative enhancements, leading to significant performance gains and improved user satisfaction.

By regularly assessing their performance metrics, identifying areas for improvement, and implementing incremental optimizations, Smashing Magazine was able to continuously elevate the user experience. This mindset of continuous improvement ensures that the product remains fast, reliable, and responsive to user needs, even as it scales in complexity and user base.

Collaboration And Inclusivity

Silos hinder scalability.

High-performing teams promote collaboration and inclusivity, ensuring that diverse perspectives are valued and leveraged. The Understood’s accessibility journey highlights the power of cross-functional collaboration, with designers, developers, and accessibility experts working together to create inclusive experiences for all users.

By fostering open communication, knowledge sharing, and a shared commitment to accessibility, The Understood was able to embed inclusive design practices throughout its development process. This collaborative and inclusive approach not only resulted in a more accessible product but also cultivated a culture of empathy and user-centricity that permeated all aspects of their work.

Making Strategic Decisions for Scalability

Beyond cultivating the right mindset, scaling success requires making strategic decisions that lay the foundation for sustainable growth.

Technology Choices

Selecting the right technologies and frameworks can significantly impact scalability. Factors like performance, maintainability, and developer experience should be carefully considered. Notion’s migration to Next.js exemplifies the importance of choosing a technology stack that aligns with long-term scalability goals.

By adopting Next.js, Notion was able to leverage its performance optimizations, such as server-side rendering and efficient code splitting, to deliver fast and responsive pages. Additionally, the developer-friendly ecosystem of Next.js and its strong community support enabled Notion’s team to focus on building features and optimizing the user experience rather than grappling with low-level infrastructure concerns. This strategic technology choice laid the foundation for Notion’s scalable and maintainable architecture.

Ship Only The Code A User Needs, When They Need It

This best practice is so important when we want to ensure that pages load fast without over-eagerly delivering JavaScript a user may not need at that time. For example, Instagram made a concerted effort to improve the web performance of instagram.com, resulting in a nearly 50% cumulative improvement in feed page load time. A key area of focus has been shipping less JavaScript code to users, particularly on the critical rendering path.

The Instagram team found that the uncompressed size of JavaScript is more important for performance than the compressed size, as larger uncompressed bundles take more time to parse and execute on the client, especially on mobile devices. Two optimizations they implemented to reduce JS parse/execute time were inline requires (only executing code when it’s first used vs. eagerly on initial load) and serving ES2017+ code to modern browsers to avoid transpilation overhead. Inline requires improved Time-to-Interactive metrics by 12%, and the ES2017+ bundle was 5.7% smaller and 3% faster than the transpiled version.

While good progress has been made, the Instagram team acknowledges there are still many opportunities for further optimization. Potential areas to explore could include the following:

• Improved code-splitting, moving more logic off the critical path,
• Optimizing scrolling performance,
• Adapting to varying network conditions,
• Modularizing their Redux state management.

Continued efforts will be needed to keep instagram.com performing well as new features are added and the product grows in complexity.

Accessibility Integration

Accessibility should be an integral part of the product development process, not an afterthought.

Wix’s comprehensive approach to accessibility, encompassing keyboard navigation, screen reader support, and infrastructure for future development, showcases the importance of building inclusivity into the product’s core.

By considering accessibility requirements from the initial design stages and involving accessibility experts throughout the development process, Wix was able to create a platform that empowered its users to build accessible websites. This holistic approach to accessibility not only benefited end-users but also positioned Wix as a leader in inclusive web design, attracting a wider user base and fostering a culture of empathy and inclusivity within the organization.

Developer Experience Investment

Investing in a positive developer experience is essential for attracting and retaining talent, fostering productivity, and accelerating development.

Apideck’s case study in the book highlights the impact of a great developer experience on community building and product velocity.

By providing well-documented APIs, intuitive SDKs, and comprehensive developer resources, Apideck was able to cultivate a thriving developer community. This investment in developer experience not only made it easier for developers to integrate with Apideck’s platform but also fostered a sense of collaboration and knowledge sharing within the community. As a result, ApiDeck was able to accelerate product development, leverage community contributions, and continuously improve its offering based on developer feedback.

Leveraging Performance Optimization Techniques

Achieving optimal performance is a critical aspect of scaling success. The case studies in Success at Scale showcase various performance optimization techniques that have proven effective.

Progressive Enhancement and Graceful Degradation

Building resilient web experiences that perform well across a range of devices and network conditions requires a progressive enhancement approach. Pinafore’s case study in Success at Scale highlights the benefits of ensuring core functionality remains accessible even in low-bandwidth or JavaScript-constrained environments.

By leveraging server-side rendering and delivering a usable experience even when JavaScript fails to load, Pinafore demonstrates the importance of progressive enhancement. This approach not only improves performance and resilience but also ensures that the application remains accessible to a wider range of users, including those with older devices or limited connectivity. By gracefully degrading functionality in constrained environments, Pinafore provides a reliable and inclusive experience for all users.

Adaptive Loading Strategies

The book’s case study on Tinder highlights the power of sophisticated adaptive loading strategies. By dynamically adjusting the content and resources delivered based on the user’s device capabilities and network conditions, Tinder ensures a seamless experience across a wide range of devices and connectivity scenarios. Tinder’s adaptive loading approach involves techniques like dynamic code splitting, conditional resource loading, and real-time network quality detection. This allows the application to optimize the delivery of critical resources, prioritize essential content, and minimize the impact of poor network conditions on the user experience.

By adapting to the user’s context, Tinder delivers a fast and responsive experience, even in challenging environments.

Efficient Resource Management

Effective management of resources, such as images and third-party scripts, can significantly impact performance. eBay’s journey showcases the importance of optimizing image delivery, leveraging techniques like lazy loading and responsive images to reduce page weight and improve load times.

By implementing lazy loading, eBay ensures that images are only loaded when they are likely to be viewed by the user, reducing initial page load time and conserving bandwidth. Additionally, by serving appropriately sized images based on the user’s device and screen size, eBay minimizes the transfer of unnecessary data and improves the overall loading performance. These resource management optimizations, combined with other techniques like caching and CDN utilization, enable eBay to deliver a fast and efficient experience to its global user base.

Continuous Performance Monitoring

Regularly monitoring and analyzing performance metrics is crucial for identifying bottlenecks and opportunities for optimization. The case study on Yahoo! Japan News demonstrates the impact of continuous performance monitoring, using tools like Lighthouse and real user monitoring to identify and address performance issues proactively.

By establishing a performance monitoring infrastructure, Yahoo! Japan News gains visibility into the real-world performance experienced by their users. This data-driven approach allows them to identify performance regression, pinpoint specific areas for improvement, and measure the impact of their optimizations. Continuous monitoring also enables Yahoo! Japan News to set performance baselines, track progress over time, and ensure that performance remains a top priority as the application evolves.

Embracing Accessibility and Inclusive Design

Creating inclusive web experiences that cater to diverse user needs is not only an ethical imperative but also a critical factor in scaling success. The case studies in Success at Scale emphasize the importance of accessibility and inclusive design.

Comprehensive Accessibility Testing

Ensuring accessibility requires a combination of automated testing tools and manual evaluation. LinkedIn’s approach to automated accessibility testing demonstrates the value of integrating accessibility checks into the development workflow, catching potential issues early, and reducing the reliance on manual testing alone.

By leveraging tools like Deque’s axe and integrating accessibility tests into their continuous integration pipeline, LinkedIn can identify and address accessibility issues before they reach production. This proactive approach to accessibility testing not only improves the overall accessibility of the platform but also reduces the cost and effort associated with retroactive fixes. However, LinkedIn also recognizes the importance of manual testing and user feedback in uncovering complex accessibility issues that automated tools may miss. By combining automated checks with manual evaluation, LinkedIn ensures a comprehensive approach to accessibility testing.

Inclusive Design Practices

Designing with accessibility in mind from the outset leads to more inclusive and usable products. Success With Scale\’s case study on Intercom about creating an accessible messenger highlights the importance of considering diverse user needs, such as keyboard navigation and screen reader compatibility, throughout the design process.

By embracing inclusive design principles, Intercom ensures that their messenger is usable by a wide range of users, including those with visual, motor, or cognitive impairments. This involves considering factors such as color contrast, font legibility, focus management, and clear labeling of interactive elements. By designing with empathy and understanding the diverse needs of their users, Intercom creates a messenger experience that is intuitive, accessible, and inclusive. This approach not only benefits users with disabilities but also leads to a more user-friendly and resilient product overall.

User Research And Feedback

Engaging with users with disabilities and incorporating their feedback is essential for creating truly inclusive experiences. The Understood’s journey emphasizes the value of user research and collaboration with accessibility experts to identify and address accessibility barriers effectively.

By conducting usability studies with users who have diverse abilities and working closely with accessibility consultants, The Understood gains invaluable insights into the real-world challenges faced by their users. This user-centered approach allows them to identify pain points, gather feedback on proposed solutions, and iteratively improve the accessibility of their platform.

By involving users with disabilities throughout the design and development process, The Understood ensures that their products not only meet accessibility standards but also provide a meaningful and inclusive experience for all users.

Accessibility As A Shared Responsibility

Promoting accessibility as a shared responsibility across the organization fosters a culture of inclusivity. Shopify’s case study underscores the importance of educating and empowering teams to prioritize accessibility, recognizing it as a fundamental aspect of the user experience rather than a mere technical checkbox.

By providing accessibility training, guidelines, and resources to designers, developers, and content creators, Shopify ensures that accessibility is considered at every stage of the product development lifecycle. This shared responsibility approach helps to build accessibility into the core of Shopify’s products and fosters a culture of inclusivity and empathy. By making accessibility everyone’s responsibility, Shopify not only improves the usability of their platform but also sets an example for the wider industry on the importance of inclusive design.

Fostering A Culture of Collaboration And Knowledge Sharing

Scaling success requires a culture that promotes collaboration, knowledge sharing, and continuous learning. The case studies in Success at Scale highlight the impact of effective collaboration and knowledge management practices.

Cross-Functional Collaboration

Breaking down silos and fostering cross-functional collaboration accelerates problem-solving and innovation. Airbnb’s design system journey showcases the power of collaboration between design and engineering teams, leading to a cohesive and scalable design language across web and mobile platforms.

By establishing a shared language and a set of reusable components, Airbnb’s design system enables designers and developers to work together more efficiently. Regular collaboration sessions, such as design critiques and code reviews, help to align both teams and ensure that the design system evolves in a way that meets the needs of all stakeholders. This cross-functional approach not only improves the consistency and quality of the user experience but also accelerates the development process by reducing duplication of effort and promoting code reuse.

Knowledge Sharing And Documentation

Capturing and sharing knowledge across the organization is crucial for maintaining consistency and enabling the efficient onboarding of new team members. Stripe’s investment in internal frameworks and documentation exemplifies the value of creating a shared understanding and facilitating knowledge transfer.

By maintaining comprehensive documentation, code examples, and best practices, Stripe ensures that developers can quickly grasp the intricacies of their internal tools and frameworks. This documentation-driven culture not only reduces the learning curve for new hires but also promotes consistency and adherence to established patterns and practices. Regular knowledge-sharing sessions, such as tech talks and lunch-and-learns, further reinforce this culture of learning and collaboration, enabling team members to learn from each other’s experiences and stay up-to-date with the latest developments.

Communities Of Practice

Establishing communities of practice around specific domains, such as accessibility or performance, promotes knowledge sharing and continuous improvement. Shopify’s accessibility guild demonstrates the impact of creating a dedicated space for experts and advocates to collaborate, share best practices, and drive accessibility initiatives forward.

By bringing together individuals passionate about accessibility from across the organization, Shopify’s accessibility guild fosters a sense of community and collective ownership. Regular meetings, workshops, and hackathons provide opportunities for members to share their knowledge, discuss challenges, and collaborate on solutions. This community-driven approach not only accelerates the adoption of accessibility best practices but also helps to build a culture of inclusivity and empathy throughout the organization.

Leveraging Open Source And External Expertise

Collaborating with the wider developer community and leveraging open-source solutions can accelerate development and provide valuable insights. Pinafore’s journey highlights the benefits of engaging with accessibility experts and incorporating their feedback to create a more inclusive and accessible web experience.

By actively seeking input from the accessibility community and leveraging open-source accessibility tools and libraries, Pinafore was able to identify and address accessibility issues more effectively. This collaborative approach not only improved the accessibility of the application but also contributed back to the wider community by sharing their learnings and experiences. By embracing open-source collaboration and learning from external experts, teams can accelerate their own accessibility efforts and contribute to the collective knowledge of the industry.

The Path To Sustainable Success

Achieving scalable success in the web development landscape requires a multifaceted approach that encompasses the right mindset, strategic decision-making, and continuous learning. The Success at Scale book provides a comprehensive exploration of these elements, offering deep insights and practical guidance for teams at all stages of their scaling journey.

By cultivating a user-centric, data-driven, and inclusive mindset, teams can prioritize the needs of their users and make informed decisions that drive meaningful results. Adopting a culture of continuous improvement and collaboration ensures that teams are always striving to optimize and refine their products, leveraging the collective knowledge and expertise of their members.

Making strategic technology choices, such as selecting performance-oriented frameworks and investing in developer experience, lays the foundation for scalable and maintainable architectures. Implementing performance optimization techniques, such as adaptive loading, efficient resource management, and continuous monitoring, helps teams deliver fast and responsive experiences to their users.

Embracing accessibility and inclusive design practices not only ensures that products are usable by a wide range of users but also fosters a culture of empathy and user-centricity. By incorporating accessibility testing, inclusive design principles, and user feedback into the development process, teams can create products that are both technically sound and meaningfully inclusive.

Fostering a culture of collaboration, knowledge sharing, and continuous learning is essential for scaling success. By breaking down silos, promoting cross-functional collaboration, and investing in documentation and communities of practice, teams can accelerate problem-solving, drive innovation, and build a shared understanding of their products and practices.

The case studies featured in Success at Scale serve as powerful examples of how these principles and strategies can be applied in real-world contexts. By learning from the successes and challenges of industry leaders, teams can gain valuable insights and inspiration for their own scaling journeys.

As you embark on your path to scaling success, remember that it is an ongoing process of iteration, learning, and adaptation. Embrace the mindsets and strategies outlined in this article, dive deeper into the learnings from the Success at Scale book, and continually refine your approach based on the unique needs of your users and the evolving landscape of web development.

Conclusion

Scaling successful web products requires a holistic approach that combines technical excellence, strategic decision-making, and a growth-oriented mindset. By learning from the experiences of industry leaders, as showcased in the Success at Scale book, teams can gain valuable insights and practical guidance on their journey towards sustainable success.

Cultivating a user-centric, data-driven, and inclusive mindset lays the foundation for scalability. By prioritizing the needs of users, making informed decisions based on data, and fostering a culture of continuous improvement and collaboration, teams can create products that deliver meaningful value and drive long-term growth.

Making strategic decisions around technology choices, performance optimization, accessibility integration, and developer experience investment sets the stage for scalable and maintainable architectures. By leveraging proven optimization techniques, embracing inclusive design practices, and investing in the tools and processes that empower developers, teams can build products that are fast and resilient.

Through ongoing collaboration, knowledge sharing, and a commitment to learning, teams can navigate the complexities of scaling success and create products that make a lasting impact in the digital landscape.

We’re Trying Out Something New

In an effort to conserve resources here at Smashing, we’re trying something new with Success at Scale. The printed book is 304 pages, and we make an expanded PDF version available to everyone who purchases a print book. This accomplishes a few good things:

• We will use less paper and materials because we are making a smaller printed book;
• We’ll use fewer resources in general to print, ship, and store the books, leading to a smaller carbon footprint; and
• Keeping the book at more manageable size means we can continue to offer free shipping on all Smashing orders!

Smashing Books have always been printed with materials from FSC Certified forests. We are committed to finding new ways to conserve resources while still bringing you the best possible reading experience.

Community Matters ❤️

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Heather and Steven are two of these people. Have you checked out their books already?

(gg, yk, vf, il)

Building at scale is hard. With legacy, fragile systems, large impact and complex front-end architecture, making big changes to an existing site or app might feel nothing short of daunting. We might have a very motivated team, but we don't always know how to get there. Enter Success at Scale, our shiny new book that might just help you to get big changes to work in your company. Jump to the details.

Rather than focusing on conventional project management steps and procedures, Success at Scale is about the ideas and processes that worked — and a few that didn’t. This book captures the challenges, frustrations, and wins through the eyes of the people who make change happen. With a strong focus on performance, capabilities, accessibility, and developer experience. Just published, print + eBook, and shipping around the world! Get a PDF sample (14.7MB), and get your book right away.

• ISBN: 978-3-910835-00-9 (print)
• Available in hardcover and eBook formats — PDF, ePUB, and Amazon Kindle.
• Hardcover edition comes with free worldwide airmail shipping from Germany.
• Download a free sample (PDF, 14.7MB).
• Get the book right away

About The Book

Success at Scale is a curated collection of best-practice case studies capturing how production sites of different sizes tackle performance, accessibility, capabilities, and developer experience at scale. Case studies are from industry experts from teams at Instagram, Shopify, Netflix, eBay, Figma, Spotify, Wix, Lyft, LinkedIn, and many more. Guidance that stands the test of time.

Join Addy Osmani, your curator, as we dive into a nuanced look at several key topics that will teach you tips and tricks that may help you optimize your own sites. The book also includes short interviews with contributors on what additional lessons, challenges, and tips they have to share some time after the case studies were written.

• Performance includes examples of measuring, budgeting, optimizing, and monitoring performance, in addition to tips for building a performance culture.
• Capabilities is about bridging the gap between native capabilities and the modern web. You’ll explore web apps, native apps, and progressive web applications.
• Accessibility makes web apps viable for diverse users, including people with temporary or permanent disabilities. Most of us will have a disability at some point in our lives, and these case studies show how we can make the web work for all of us.
• Developer Experience is about building a project environment and culture that encourage support, growth, and problem-solving within teams. Strong teams build great projects!

High-quality hardcover, 304-page print book. Curated by Addy Osmani. Cover design by Espen Brunborg.

Who Is This Book For?

This book is for professional web developers and teams who want to deliver high-quality web experiences and are looking for real-world examples and insights. Every project is different, but in this book, you will recognize common challenges and frustrations faced by many teams — maybe even your own — and see how other developers conquered them. Success at Scale goes beyond beginner material to cover pragmatic approaches required to tackle these projects in the real world.

About the Author

Addy Osmani is an engineering leader working on Google Chrome. He leads up Chrome’s Developer Experience organization, helping reduce the friction for developers to build great user experiences.

Testimonials

“Case studies based on real-world examples are a fantastic way to learn, and Addy Osmani has captured that perfectly in this book. The interviews are compelling and connect with actionable guidance you can get started with right away. Addy has a wealth of experience working with end-users, developers, and companies to understand what exactly makes for a successful web experience. As a result, Success At Scale is a treasure trove of wisdom and practical advice. Get this book if you want to build more accessible, performant, and resilient websites.”

Umar Hansa, Web Developer

“This book reveals in its pages the collective wisdom of frontend engineers working on global web projects. It’s the perfect way to enhance your web applications’ potential by optimizing performance with practical tips straight from the trenches.”

Luca Mezzalira, Principal Serverless Specialist Solutions Architect at Amazon Web Services (AWS) and O’Reilly author

Success at Scale, masterfully curated by Addy Osmani, serves as an invaluable compass for the aspiring developers navigating the complex waters of web development. It’s more than a book; it’s a transmission of wisdom, guiding junior developers towards the shores of big tech companies. With its in-depth case studies and focus on performance, capabilities, accessibility, and developer experience, it prepares the next generation of tech talent to not just participate in, but to shape the future of digital innovation.”

Jerome Hardaway, Engineering AI products at Microsoft

We’re Trying Out Something New

In an effort to conserve resources here at Smashing, we’re trying something new with Success at Scale. The printed book is 304 pages, and we make an expanded PDF version available to everyone who purchases a print book. This accomplishes a few good things:

• We will use less paper and materials because we are making a smaller printed book;
• We’ll use fewer resources in general to print, ship, and store the books, leading to a smaller carbon footprint; and
• Keeping the book at more manageable size means we can continue to offer free shipping on all Smashing orders!

Smashing Books have always been printed with materials from FSC Certified forests. We are committed to finding new ways to conserve resources while still bringing you the best possible reading experience.

Community Matters ❤️

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Heather and Steven are two of these people. Have you checked out their books already?

We love practical books that focus on failures and success stories. And we’ve finally sent our latest book, Addy Osmani’s Success at Scale is at the printer. That means you’ll soon have another wonderful, practical book in your hands. It also means the price of the book is about to go up. So pre-order your copy now to save on the cover price by the 11th of March, 2024!

Reviews And Testimonials

“This book reveals in its pages the collective wisdom of frontend engineers working on global web projects. It’s the perfect way to enhance your web applications’ potential by optimizing performance with practical tips straight from the trenches.”

Luca Mezzalira, Principal Serverless Specialist Solutions Architect at Amazon Web Services (AWS) and O’Reilly author

Success at Scale, masterfully curated by Addy Osmani, serves as an invaluable compass for the aspiring developers navigating the complex waters of web development. It’s more than a book; it’s a transmission of wisdom, guiding junior developers towards the shores of big tech companies. With its in-depth case studies and focus on performance, capabilities, accessibility, and developer experience, it prepares the next generation of tech talent to not just participate in, but to shape the future of digital innovation.”

Jerome Hardaway, Engineering AI products at Microsoft

Success at Scale is a curated collection of best-practice case studies capturing how production sites of different sizes tackle performance, accessibility, capabilities, and developer experience at scale. Case studies are from industry experts from teams at Instagram, Shopify, Netflix, eBay, Figma, Spotify, Wix, Lyft, LinkedIn, and many more. Guidance that stands the test of time.

Join Addy Osmani, your curator, as we dive into a nuanced look at several key topics that will teach you tips and tricks that may help you optimize your own sites. The book also includes short interviews with contributors on what additional lessons, challenges, and tips they have to share some time after the case studies were written.

• Performance includes examples of measuring, budgeting, optimizing, and monitoring performance, in addition to tips for building a performance culture.
• Capabilities is about bridging the gap between native capabilities and the modern web. You’ll explore web apps, native apps, and progressive web applications.
• Accessibility makes web apps viable for diverse users, including people with temporary or permanent disabilities. Most of us will have a disability at some point in our lives, and these case studies show how we can make the web work for all of us.
• Developer Experience is about building a project environment and culture that encourage support, growth, and problem-solving within teams. Strong teams build great projects!

We’re Trying Out Something New

In an effort to conserve resources here at Smashing, we’re trying something new with Success at Scale. The printed book will be 304 pages, and we’ll make an expanded PDF version available to everyone who purchases a print book. This accomplishes a few good things:

• We will use less paper and materials because we are making a smaller printed book;
• We’ll use fewer resources in general to print, ship, and store the books, leading to a smaller carbon footprint; and
• Keeping the book at more manageable size means we can continue to offer free shipping on all Smashing orders!

Smashing Books have always been printed with materials from FSC Certified forests. We are committed to finding new ways to conserve resources while still bringing you the best possible reading experience.

About the Author

Addy Osmani is an engineering leader working on Google Chrome. He leads up Chrome’s Developer Experience organization, helping reduce the friction for developers to build great user experiences.

Technical Details

• ISBN: 978-3-910835-00-9 (print)
• Quality hardcover, 304 pages, stitched binding, ribbon page marker.
• Free worldwide airmail shipping from Germany mid March 2024.
• eBook available for download as PDF, ePUB, and Amazon Kindle.
• Pre-order the book.

Community Matters ❤️

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Heather and Steven are two of these people. Have you checked out their books already?

Today, we are very happy to announce our new book: Success at Scale, a curated collection of best-practice case studies capturing how production sites of different sizes tackle performance, accessibility, capabilities, and developer experience at scale. Case studies are from industry experts with guidance that stands the test of time.

Join Addy Osmani, your curator, as we dive into a nuanced look at several key topics that will teach you tips and tricks that may help you optimize your own sites. The book will also include short interviews with each contributor on what additional lessons, challenges, and tips they have to share some time after each case study was written.

High-quality hardcover. Curated by Addy Osmani. Cover art by Espen Brunborg. Print shipping in early March 2024. eBook now available. Pre-order the book.

Contents

Each section of the book is filled with case studies from real-world large-scale web applications and services, interviews with the people involved, and key takeaways to help you achieve the same success.

• Performance includes examples of measuring, budgeting, optimizing, and monitoring performance, in addition to tips for building a performance culture.
• Capabilities is about bridging the gap between native capabilities and the modern web. You’ll explore web apps, native apps, and progressive web applications.
• Accessibility makes web apps viable for diverse users, including people with temporary or permanent disabilities. Most of us will have a disability at some point in our lives, and these case studies show how we can make the web work for all of us.
• Developer Experience is about building a project environment and culture that encourage support, growth, and problem-solving within teams. Strong teams build great projects!

Who This Book Is For

This book is for professional web developers and teams who want to deliver high-quality web experiences. We explore dimensions like performance, accessibility, capabilities, and developer experience in depth. Success at Scale goes beyond beginner material to cover the pragmatic approaches required to tackle these challenges in the real world.

About the Author

Addy Osmani is an engineering leader working on Google Chrome. He leads up Chrome’s Developer Experience organization, helping reduce the friction for developers to build great user experiences.

Technical Details

• ISBN: 978-3-910835-00-9 (print)
• Quality hardcover, stitched binding, ribbon page marker.
• Free worldwide airmail shipping from Germany starting early March 2024.
• eBook available for download as PDF, ePUB, and Amazon Kindle.
• Pre-order the book.

Community Matters ❤️

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be free for Smashing Members as soon as it’s out. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Heather and Steven are two of these people. Have you checked out their books already?

Q. Did any part of your education require you to read the building regulations?
A. No, I don’t recall, but I don’t think so.
Q. What about fire safety of building materials?
A. No.

— Witness testimony, the Grenfell Tower inquiry, day 22

As the hard copies of Understanding Privacy begin to ship all over the world, the brilliant team at Smashing, who helped me bring my book to life, have asked me to share a few thoughts on what it might achieve in the months and years to come.

I wrote the book for two broad audiences, and if you’re reading this, you probably fall into one of them. The first audience is designers, developers, and project managers already working on the open web, either professionally or in side projects. The second audience is students and future professionals in those fields, whether they are in secondary schools, undergraduate courses, vocational training, or code academies.

The reason I structured the book in the way I did is that these two audiences, and you, tend to have something in common: you’ve never received any previous training or education on positive foundational privacy, either as a concept, a legal issue, or a professional practice, either in your formal education (assuming you had any) or in your workplaces.

What you have been told about privacy, by contrast, has been defined by a lot of high-level legalese jargon, compliance scaremongering, and terrifying headlines about the surveillance society that exists around us — whether we know it or not.

“

That means that an entire generation of professionals like you have been introduced to privacy by being thrown into advanced legal compliance headaches or reactive fixes to the problems created by others, with no knowledge of the basic concepts and principles about what privacy actually is and how to achieve it.

I hope that Understanding Privacy can go some way towards giving people like you a confident understanding of those foundational concepts. Indeed, it’s my hope that teachers and educators will use it as the basis for a curriculum on privacy so that a healthy approach to privacy becomes baked-in from the start rather than retrofitted at the end.

That, of course, raises two further issues.

1. The first is how teachers and educators find the book in the first place;
2. The second is how the lessons in it reach developers (both current and future ones) who have never had a teacher and never will.

The question of how we teach privacy, what we teach, and where we teach it, has troubled me for years. That’s a hard enough problem to crack. After all, web development is an unorganized field. In fact, in the strictly legal sense, it is not a profession.

What do I mean by that? Professions are defined by industry-based organisations, common paths of entry, common educational requirements, continuing professional development, and even certifications that require refresher training every few years. Being a professional, in the strictly legal sense, means that there is a body made up of your peers who make sure that you bring a common body of knowledge to the work you put into the world and that the work you do meets externally verifiable standards.

Web development, on the other hand, is an unorganized and unstructured field that anyone can enter, at any time, with any form of formal training or with none at all, and without any external certifications or approval. A software engineer who went through a four-year bachelor’s degree program in computer science can be working on the same team, doing the same work, as a former airline pilot who learned code for fun. It’s that occupational diversity that has contributed to the growth of the open web as a whole; indeed, I find that the best teams contain people who approach their work from the diverging perspectives they gained doing something completely different.

But it also means that the knowledge of privacy that we bring to our work is, quite simply, all over the place. If that knowledge is there at all. And without a common pathway of education, whether that’s access to training and continuing professional development or work towards a standard of foundational knowledge, we will continue to bring the contrasting social, legal, and cultural differences to privacy which I discuss in Part One to the work we put into the world.

And our users will continue to pay the price for that.

As I write in the book, we can’t wait for educators, employers, and institutions to fill the gaps in our knowledge. Educating ourselves on privacy has never been more important. It pains me to know that the book is the first and only education on privacy that most of its readers will ever have, but something is better than nothing. Unfortunately, it won’t be enough.

Because the dilemma of how we teach a positive foundational approach to privacy — in an unorganized and open industry — has taken on a whole new urgency through my pivoted career into the politics of tech. And that situation is far scarier than you can imagine.

Much of my time in recent years has been spent retorting various regulatory plans for personal liability regimes in digital regulation. That means that politicians increasingly want to hold the people who make the open web legally and even criminally responsible for any misuse or unintended consequences of their work.

Some of this is born out of pressure to “do something” about the mess that the open web is today; sometimes it’s about “reining in the tech giants” (and I can tell you that politicians absolutely think Facebook is the Internet); sometimes it’s about barefaced moves for political power (hello from Brexit Britain); and sometimes it’s about cracking down on public discourse and interaction, delegating the requirement for censorship and control to the tech sector and therefore to workers like you.

Whatever reasons are behind these proposals, they are not going away. In fact, they’re only getting louder.

Many of these proposed liability regulations have been borrowed from traditional health and safety regimes. But these draft regulations, and those who support them, fail to understand that human discourse cannot be regulated as if it was fire-retardant cladding on a building that wasn’t fire-retardant at all (as I noted in the quote which began this article). By trying to shoehorn human interactions into a “risk assessment” model, these regimes risk creating an unworkable legal standard where a person who misuses a service is not deemed liable, but the person who built the service is.

These proposed liability regimes, for what it’s worth, have been drafted in a highly obsessive and vindictive manner to target a handful of high-profile American billionaires and celebrities in a handful of American big tech companies. (To be precise, these proposed regimes target three specific individuals in two companies, as if their arrests and imprisonment would fix all the problems on the Internet.) For the purposes of this discussion, those men’s guilt or complacency is neither here nor there.

That’s because, for a range of obvious reasons, once those laws are on the books, the celebrity billionaires will be able to afford to duck and dodge the charges. But because politicians insist that “something has to be done” and “someone needs to pay for this”, those laws will be used, instead, to go after the little guys and the easy targets. That means you.

What I am saying is that policymakers across all societies and cultures are turning their attention to people like you, the knowledge you bring to the table, and the work you put into the world. They’re not doing that because they want to support you into the next phase of your career. They’re doing that because they’re looking for someone to blame. They need someone to blame.

In fact, I have encountered politicians who are desperate to actually arrest, prosecute, and imprison developers, hopefully in front of the TV cameras, as punishment for the sins of their celebrity bosses. Those policymakers are in ascendancy, and they are not going away.

And when they’re looking for someone to blame for the problems on the open web today and need an easy target to take down for a quick political “win,” there you are, with no qualifications or foundational training or formal education, making things that millions of people use.

I think you see where this is going.

I wrote Understanding Privacy to contribute to a better open web, and I wrote it in the most positive and constructive tone possible (and hey, that was hard going in lockdown). But I would not be serving the people I wrote it for if I pretended that the book’s teachings exist in a happy bubble where the fixes are easy. The book’s teachings exist in a political climate where the people who make the web, including you, are now a target.

I want the book to contribute to a better standard of privacy for the people we build the web for. By reading the book, you’ll learn how to protect them in everything you do, regardless of the presence or absence of any privacy legislation. But in the political climate that exists around us all, by reading the book, you’ll learn how to protect yourself too.

In the absence of any formal curricular and educational path, workplace training, professional body, or legal standard, the book will help you to create an accountable and documented framework around privacy in your work — no matter who employs you or what you’re working on. That framework, and for that matter, the book, can’t protect you on its own. But the lessons you learn from it might just help you when the day comes that it’s you and your team in your co-working lounge, and not the celebrity billionaires and their teams in Silicon Valley, who become the target for an ambitious politician’s campaigning.

During life in lockdown, we all became familiar with the “oxygen mask” rule: secure your own mask before putting one onto someone else. In other words, you can’t support others if you’re not supporting yourself. As you use Understanding Privacy to build a better web for your users, take some time to think about the ways you can use its lessons to protect yourself, especially in light of policymakers’ obsession with getting ad-hominem revenge on Big Tech celebrities — an obsession which views you as expendable collateral damage. And as I write in Part Four, think about the developers who will come after you and what sort of world they can build if they are given a better education in foundational privacy.

Or, at the very least, given more than just one book.

Details About The Book

• Quality hardcover, stitched binding, ribbon page marker.
• Free worldwide shipping from Germany.
• eBook is available as PDF, ePUB, and Amazon Kindle.
• ISBN: 978-3-945749-64-7 (print)
• Get the book (Print Hardcover + eBook)

(as, vf, il)

What is privacy? What exactly does it mean? How do we consider, manage and maintain privacy? And how dow do we design and build experiences that have privacy at their heart? That’s exactly what Understanding Privacy is all about: a practical guide to privacy on the web, from data collection and use of personal data to creating safe, inclusive experiences for everyone.

From the still-relevant Privacy by Design Framework to the recent conflicts over consent and health data, Heather Burns has created an indespensible resource for anyone working to build safety and trust into their interfaces.

• eBook is available as PDF, ePUB, and Amazon Kindle.
• Free worldwide shipping from Germany.
• Download a free PDF sample (11MB)
• Get the book (Print Hardcover + eBook)

About The Book

Understanding Privacy is a practical guide to the concepts and ideas that inform privacy on the web. It’s about all the fundamental values of privacy as a concept, which precede privacy as a legal compliance issue. It’s about the ways these concepts impact your work as a designer, a developer, or a project manager. And it’s about the ways you can adopt these principles to create a healthy, user-centric approach to privacy in everything you do.

Heather Burns, a tech policy and regulation specialist, explains what she has experienced working on privacy from every angle — human rights, law, policy, and web development — in the simplest way possible, and in the most positive way possible, in ways you can understand, use, and adapt in your work on the web right away.

This book is not a legal reference manual. After reading it, you will have shifted your understanding from a negative view of privacy as a scary legal compliance obligation to a positive view of privacy as an opportunity to build and design a better web. Download a free PDF sample (11MB).

288 pages. Written by Heather Burns. Cover design by Espen Brunborg. Both eBook and print shipping are now available.

You’ll Learn:

• Fundamental concepts, definitions and frameworks behind privacy and data protection,
• Healthy approach to user privacy into everything you build and design,
• Common privacy issues and how you can make a difference,
• How to lay the ground for future developers, designers, and project managers to build a better web for tomorrow,
• The obligations we have to safeguard user privacy and health data.

Who Is This Book For?

Understanding Privacy is for designers, developers, and project managers who want to understand what privacy really is about and who want to integrate a healthy approach to user privacy into everything they do not only to put their users first today but also to help build a better web for tomorrow.

Table Of Contents

288 pages. Both eBook and print shipping are now available. Written by Heather Burns. Cover design by Espen Brunborg.

About The Author

Heather Burns (@WebDevLaw) is a tech policy professional and an advocate for an open Internet which upholds the human rights to privacy, accessibility, and freedom of expression. She’s been passionate about privacy since she built her first web site in 1996, and has educated thousands of professionals worldwide on the fundamentals of a healthy approach to protecting people and their data. She lives in Glasgow, Scotland.

Reviews And Testimonials

“Heather's broad knowledge, experience, and ability to articulate these complex matters is nothing short of astounding. I’ve learned an amazing amount from her. She always informs and entertains, and she does so from the heart.”

Mike Little, Co-Founder of WordPress

“No more excuses for overlooking privacy: Heather’s guide is an essential toolbox for user-centric product developers and for anyone interested in building a better web. Expect the full sweep, from historical context and core concepts in US and EU privacy practice, to practical tips and advice — dispensed in highly readable style.”

Natasha Lomas, Senior Reporter, Techcrunch.com

“Privacy is an oft-talked about and rarely understood part of our modern digital lives. Heather has been on the forefront for the battle of our privacy for decades. In this book she makes the case for why privacy is one of the foundational pillars on which our society rests, and why eroding our privacy means eroding a cornerstone of our lives, our communities, and our democracy. A must-read for anyone working on or with the web.”

Morten Rand-Hendriksen, Senior Staff Instructor, LinkedIn Learning

“Privacy can seem complicated but it doesn’t need to be. Heather covers all that you need to know with astonishing clarity. This book gives you all you need to understand and handle privacy work, and makes for great teaching material that experts could rely on.”

Robin Berjon, former Head of Data Governance at The New York Times

Technical Details

• ISBN: 978-3-945749-64-7 (print)
• Quality hardcover, stitched binding, ribbon page marker.
• Free worldwide shipping from Germany.
• eBook is available as PDF, ePUB, and Amazon Kindle.
• Get the book (Print Hardcover + eBook)

Community Matters ❤️

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Steven and Stefan are two of these people. Have you checked out their books already?

(as, il)

To many of us, privacy might feel like a complex, abstract concept. We can’t hold privacy in our hands, we can’t touch it, we can’t explore its volume or shape with our eyes or our fingertips. Surely it’s a part of each of us, yet it feels so intangible and so invisible — beyond reach and out of view.

So what is privacy? What exactly does it mean? How do we consider, manage and maintain privacy? And how dow do we design and build experiences that have privacy at their heart? That’s exactly what Understanding Privacy is all about: a practical guide to privacy on the web, from data collection and use of personal data to creating safe, inclusive experiences for everyone. Jump to table of contents ↓

• eBook now available.
• Printed books start shipping in 2022.
• Download a free PDF sample (11MB)
• Get the book (Print Hardcover + eBook)

About The Book

Understanding Privacy is a practical guide to the concepts and ideas that inform privacy on the web. It’s about all the fundamental values of privacy as a concept, which precede privacy as a legal compliance issue. It’s about the ways these concepts impact your work as a designer, a developer, or a project manager. And it’s about the ways you can adopt these principles to create a healthy, user-centric approach to privacy in everything you do.

Heather Burns, a tech policy and regulation specialist, explains what she has experienced working on privacy from every angle — human rights, law, policy, and web development — in the simplest way possible, and in the most positive way possible, in ways you can understand, use, and adapt in your work on the web right away.

This book is not a legal reference manual. After reading it, you will have shifted your understanding from a negative view of privacy as a scary legal compliance obligation to a positive view of privacy as an opportunity to build and design a better web. Download a free PDF sample (11MB).

288 pages. Written by Heather Burns. Cover design by Espen Brunborg. eBook now available, print shipping in early December.

You’ll Learn:

• Fundamental concepts, definitions and frameworks behind privacy and data protection,
• Healthy approach to user privacy into everything you build and design,
• Common privacy issues and how you can make a difference,
• How to lay the ground for future developers, designers, and project managers to build a better web for tomorrow,
• The obligations we have to safeguard user privacy and health data.

Who Is This Book For?

Understanding Privacy is for designers, developers, and project managers who want to understand what privacy really is about and who want to integrate a healthy approach to user privacy into everything they do not only to put their users first today but also to help build a better web for tomorrow.

Table Of Contents

288 pages. eBook now available, print shipping in early December. Written by Heather Burns. Cover design by Espen Brunborg.

About the Author

Heather Burns (@WebDevLaw) is a tech policy professional and an advocate for an open Internet which upholds the human rights to privacy, accessibility, and freedom of expression. She’s been passionate about privacy since she built her first web site in 1996, and has educated thousands of professionals worldwide on the fundamentals of a healthy approach to protecting people and their data. She lives in Glasgow, Scotland.

Reviews and Testimonials

“Heather's broad knowledge, experience, and ability to articulate these complex matters is nothing short of astounding. I’ve learned an amazing amount from her. She always informs and entertains, and she does so from the heart.”

Mike Little, Co-Founder of WordPress

“No more excuses for overlooking privacy: Heather’s guide is an essential toolbox for user-centric product developers and for anyone interested in building a better web. Expect the full sweep, from historical context and core concepts in US and EU privacy practice, to practical tips and advice — dispensed in highly readable style.”

Natasha Lomas, Senior Reporter, Techcrunch.com

“Privacy is an oft-talked about and rarely understood part of our modern digital lives. Heather has been on the forefront for the battle of our privacy for decades. In this book she makes the case for why privacy is one of the foundational pillars on which our society rests, and why eroding our privacy means eroding a cornerstone of our lives, our communities, and our democracy. A must-read for anyone working on or with the web.”

Morten Rand-Hendriksen, Senior Staff Instructor, LinkedIn Learning

“Privacy can seem complicated but it doesn’t need to be. Heather covers all that you need to know with astonishing clarity. This book gives you all you need to understand and handle privacy work, and makes for great teaching material that experts could rely on.”

Robin Berjon, former Head of Data Governance at The New York Times

Technical Details

• ISBN: 978-3-945749-64-7 (print)
• Quality hardcover, stitched binding, ribbon page marker.
• Free worldwide shipping from Germany, starting in early December 2022.
• eBook is already available as PDF, ePUB, and Amazon Kindle.
• Get the book (Print Hardcover + eBook)

Community Matters ❤️

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Steven and Stefan are two of these people. Have you checked out their books already?

Every UI component brings along its unique challenges. Inventing a new solution to every problem takes time, and very often it’s really not necessary. We can rely on smart design patterns and ask the right questions ahead of time to avoid issues down the line.

As a little celebration for our 16th birthday, we are happy to finally release our Smart Interface Design Checklists — a deck of 166 cards that are here to help us all keep track of the things we need to consider. Jump to table of contents.

• Jump to the details ↓
• Check the free preview (PDF, 825KB)
• Shipping worldwide now.
• Get the deck of cards right away!

About The Checklist Cards

Meet the deck of 166 checklist cards with common questions to ask when tackling any interface challenge. Curated and compiled by yours truly to help us all keep track of all the fine little details to design and build better interfaces, faster. Plus, a good way to not forget anything critical, and avoid costly mistakes down the line.

The cards are beautifully designed by our dear illustrator Ricardo Gimenes and jam-packed with everything you need to keep in mind when designing UI components. This deck of checklist cards is always by your side — on your desk or on your phone when you’re on the go. Check the free preview. (PDF, 825KB)

What’s Inside The Box?

The cards are here to help you make the right design decisions. They don’t provide ultimate answers; you can see them as helpful conversation starters for your design/dev teams to help avoid misunderstandings or confusion down the line. They remind you of things that often get forgotten, overlooked or dismissed.

Here’s an overview of all the topics covered by the deck of checklists:

166 checklist cards in a sturdy box. The digital version is available as PDF.

About the Author

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing, he’s most probably running front-end & UX workshops. He loves solving complex UX, front-end, and performance problems.

You’ll get:

• 166 checklist cards on everything from hamburger navigation and carousels to web forms and tables, carefully curated by Vitaly Friedman and designed by Ricardo Gimenes and Ari Stiles,
• Practical examples and guidelines (400 slides),
• Editable text file to adjust for your needs,
• Life-time access to the deck, updated regularly (digital version).

Team Bundle Discounts 🎉

Do you want to equip your entire team with the card deck? Now, that’s a great ide! If you plan to get 5+ decks, you’ll get a friendly 15% discount. Get in touch with help@smashingmagazine.com, and we’ll make it happen!

Technical Details

• 166 checklist cards in a sturdy box.
• Practical examples and action points (400 slides).
• Editable text file.
• Life-time access to the updated deck (digital version).
• Free worldwide shipping from Germany.
• Get the checklist cards right away.

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Steven, Stefan, and Adam are three of these people. Have you checked out their books already?

Privacy by design is possible, but over time, it has become challenging to build and deploy sites and apps that use personal information in practical ways that are safe and ethical. In fact, many of us have given up at least a little of our own privacy online.

And so in our work, it may become easier to rationalize collecting more user data than we need, to avoid transparency around how that data is used, and even to use that data for unintended purposes. We tell ourselves it is for the convenience of our users, or to enhance their experiences. It’s no secret that unethical data practices can cause harm, often in ways we can’t predict.

Thoughtful data collection, storage, and use of data is possible, though. Heather Burns brings clarity to the subject by explaining the principles behind the collection, storage, and use of personal data, and how to use those principles to create safer experiences for your users. Understanding Privacy is an essential book for anyone that collects personal information. Jump to table of contents ↓.

• eBook available for download in October 2022,
• Printed books will be shipped in early December 2022.
• Pre-order the book.

About The Book

Understanding Privacy is an introduction to the beliefs, concepts, and ideas that inform privacy as it exists — or has failed to exist — on the open web that we build. It’s about all the fundamental values of privacy as a concept, which precede privacy as a legal compliance issue. It’s about the ways these concepts impact your work as a designer, a developer, or a project manager. And it’s about the ways you can adopt these principles to create a healthy, user-centric approach to privacy in everything you do.

Heather explains what she has experienced working on privacy from every angle — human rights, law, policy, and web development — in the simplest way possible, and in the most positive way possible, in ways you can comprehend, use, and adapt in your work on the web right away.

A healthy approach to user privacy doesn’t tell you how to code. It tells you how to make the right decisions which inform the code. It also gives you the foundation you need to question, and even challenge, workplace practices which might not be in your users’ best interests.

This book is not a legal reference manual. By the end of this book, you will have shifted your understanding from a negative view of privacy as a scary legal compliance obligation to a positive view of privacy as an opportunity to build a better web.

Approx. 350 pages. Written by Heather Burns. Cover design by Espen Brunborg. eBook available for download in October, print shipping in early December.

You’ll learn:

• Fundamental concepts, definitions, and frameworks behind privacy and data protection,
• how to integrate a healthy approach to user privacy into everything you do,
• common privacy issues and how you can make a difference,
• how to lay the ground for future developers, designers, and project managers to build a better web for tomorrow,
• the obligations we have to safeguard user privacy and health data.

Who is this book for?

Understanding Privacy is for designers, developers, and project managers who want to understand what privacy really is about and who want to integrate a healthy approach to user privacy into everything they do — not only to put their users first today but also to help build a better web for tomorrow.

Table Of Contents

Approx. 350 pages. eBook available for download in October, print shipping in early December. Written by Heather Burns. Cover design by Espen Brunborg.

About the Author

Heather Burns is a tech policy and regulation specialist. She advocates for an open web built around international standards of human rights, privacy, accessibility, and freedom of expression. She’s currently also an Internet Society Mid-Career Fellow.

Technical Details

• ISBN: 978-3-945749-64-7 (print)
• Quality hardcover, stitched binding, ribbon page marker.
• Free worldwide airmail shipping from Germany starting in early December 2022.
• eBook available for download in October 2022 as PDF, ePUB, and Amazon Kindle.
• Pre-order the book.

Community Matters ❤️

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be free for Smashing Members as soon as it’s out. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Steven and Stefan are two of these people. Have you checked out their books already?

This article is sponsored by Wix

In this episode, we’re talking about Responsible JavaScript. What does it mean for code to be responsible, and how should we approach projects differently? I spoke to expert Jeremy Wagner to find out.

Show Notes

• Responsible JavaScript website
• Buy the book from A Book Apart
• Jeremy’s personal website
• Jeremy on Twitter

Weekly Update

• Fitts’ Law In The Touch Era written by Steven Hoober
• Web Design Done Well: Perfectly Pointless written by Frederick O’Brien
• Everything You Want To Know About Creating Voice User Interfaces written by Nick Babich & Gleb Kuznetsov
• Implications Of WordPress Joining The Block Protocol written by Leonardo Losoviz
• Thoughts On Markdown written by Knut Melvær

Transcript

Drew McLellan: He’s a technical writer, web performance nerd, developer and speaker, currently working at Google. He’s written for A List Apart, CSS-Tricks and Smashing Magazine, and is the author of a new title, Responsible JavaScript for A Book Apart. So we know he’s a skilled technician and communicator, but did you know he wants circumnavigated the globe on a standup paddle board? My smashing friends, please welcome Jeremy Wagner. Hi Jeremy, how are you?

Jeremy Wagner: I’m smashing. How are you?

Drew: I’m very good. Thank you. I wanted to talk to you today about this idea of Responsible JavaScript. Is this some sort of new approach or technique, or are you literally talking about using JavaScript responsibly?

Jeremy: I’m literally talking about using JavaScript responsibly. So per the HTTP archive, we’ve seen a nearly 58% median increase in the amount of JavaScript downloaded by mobile devices from roughly 290 kilobytes to almost 500 kilobytes in the last year.

Drew: Wow.

Jeremy: So when I talk about using JavaScript responsibly, it’s a user first sort of approach to say… to critically evaluate what is it that we’re building and is the goal of what we’re building served by modern web development practices, so to speak. And I guess that’s kind of a… maybe not tongue in cheek, but I wasn’t taking a jab at modern web development, but one byproduct of modern web development is that it’s very easy to add dependencies to projects. Everything is an MPM install away and every MPM install has a cost, that cost varies. But what we do see is that in that HTTP archive data, the 95th percentile… meaning the 5% of experiences that are the slowest… or not the slowest, but that ship the most JavaScript, that has risen in the last year by about 875 kilobytes to about 1.4 megabytes.

Drew: Wow.

Jeremy: So it’s a tremendous amount of JavaScript that gets transferred and it has both loading performance and runtime performance implications.

Drew: So you mentioned performance there. It seems like the modern web experience from sort of my point of view is like 10% HTML and CSS and 90% JavaScript. And there has to be sort of performance considerations to that. I mean, you talked about out sort of the amount of data we’re transferring, but there’s other performance considerations on there with having a lot of JavaScript.

Jeremy: Right. So having a slow internet connection and you know… where I live in the United States, if you go far enough outside of a major city, it gets kind of difficult depending on where go… to just cope with how slow the internet can be in sort of these rural areas and is significant upon of people live in areas like this. And so the loading performance aspect of it is already challenging enough when you start shipping megabytes of JavaScript, but you might also be dealing with somebody who doesn’t have an iPhone… like an iPhone X or like an iPhone 13.

Jeremy: They might just be on a feature phone or just kind of like a budget Android phone, just trying to navigate through life. I mean, think about things like online banking, unemployment assistance, or other government assistance, portals like that for applications. Online learning, there’s just a lot of places where excessive JavaScript can really have a detrimental effect for people who might not be fortunate enough to live in large metro areas or even in metro areas that are not well served by broadband internet and those on slower devices. I kind of think as developers, we have this tendency to look at… we buy MacBooks or these high end devices, and we sometimes don’t really see where these issues can arise when we overuse JavaScript.

Drew: And sort of as you mentioned there, sometimes it’s the individuals who have the sort of stand the most to lose by not being able to access a service who get penalized by this sort of thing. Those people without fast data connections or without very capable devices are sometimes accessing services that mean everything to… it means everything to them that they’re able to gain access. So it becomes almost a humans rights issue in some ways.

Jeremy: Yeah. I mean, we tend to see web performance get framed in terms of business value. I was a performance consultant for some e-com and like a major food company, a major e-com… like a store, like an electronics outlet and it’s very tempting to do that, right? Because when you work for a business, I mean, obviously you want financials to be healthy and web performance does play a role in that I think. I think there are a number of case studies that prove that out. However, there is that human aspect and even for businesses, like say like grocery stores and that kind of thing. Yeah, they’re revenue driven. They want to have healthy finances and so web performance is part of that, but they’re also serving a critical need, right? Like you have to eat, right?

Jeremy: And like some people might be home bound for one reason or another. They might not be able to easily just get in a car. They may not have a car. So they’re relying on these services in order to get sustenance, but more than that, assistance if they need it and especially like crisis intervention and that type of thing. I don’t think it’s terribly farfetched to say that a partner who has been abused and thrown out of their home might turn to their smartphone and, and hit Google to try to find a portal for crisis intervention and assistance. And JavaScript kind of can get in the way of those types of goals and to serve those human needs. When we have a tendency to lean on it just a little too much.

Drew: I mean, we’ve, we’ve seen a sort of glimpse of that over the last 18 months or so with COVID and people going into isolation, and as you say, needing to order groceries to be delivered. The web becomes a lifeline for them at that point. They’re feeling under the weather, not able to leave their accommodation because they’re isolating and they have to get food and they have to get essential supplies. So yeah, it’s an ever increasingly important part of just everyday life for us all, I think.

Jeremy: Exactly. And going back to the sort of device story, Tim Kadlec wrote an amazing piece a couple years back, I think it was two years, maybe it three years back, but it was called Prioritizing the Long Tail of Performance. And when you look at that… so in web performance parlance, we kind of talk about lab data versus field data. And lab data is like when you’re running lighthouse or you’re throwing a website at a webpage test to see how it’s doing. Those are all really useful tools, but when you look at that field data, you really start to get a larger picture and a larger view of who your audience really is. And in this article, Tim Kadlec talks about what it means to prioritize the long tail of performance. Meaning all these devices that… are maybe not as beefy and as powerful as the devices we as developers may have.

Jeremy: And the idea behind that article is that if we can focus on that 90th or 95th percentile we’re… and improve that experience for those people, we’re building a faster web for everyone, including those on fast devices. And attack a data point on that in the US and this is just from like statcounter.com. Something like 28 point… around 28% of people are on an iOS device that this tool captures. And around 21% of them are Android. And Android tends to represent a good chunk of that long tail of devices, because Android’s not monolithic. Multiple device manufacturers make Android phones, but to kind of contrast that with the world, because the world is more than just the United States, it’s around 16% of people who use iOS and around like 41% of people who are on Android. So it really does pay to prioritize those slower or potentially slower experiences.

Drew: I read in your book about device thermal throttling, which isn’t something that I’d really ever considered before. What are the concerns there?

Jeremy: The concerns there, and I’m not like an expert on microprocessors by any means. I’m just the web developer who probably writes a little too much, but… so the idea behind thermal throttling and this exists in all systems, not just like phones and tablets, is that a microprocessor will… when it takes on excessive workloads or really just workloads in general, the waste product of that work is heat. And so devices have ways of mitigating this. Like your laptop has both a passive and an active cooling device.

Jeremy: So like a passive cooling device is like a heat sink or some kind of heat spreader. And the active portion of that is like a fan to more efficiently disperse heat. Some like custom PC builds might use like liquid cooling, which is sort of a more relatively extreme example, but a mobile phone doesn’t have that because where are you going to really fit a fan in all that, if portability is kind of your thing, right?

Jeremy: So in order for these devices to cope with these heavy workloads, they may artificially reduce the speed of the processor, like reduce the clock rate until that device enters a state in which that clock rate can be raised. And that has implications because if you’re chewing through tons and tons and tons and tons of JavaScript, you have like these big chunks coming down the wire, well that kicks off processing, right? So it’s a lot of processing through evaluation and parsing in compilation and then execution. And if you’re doing that with like a megabyte or two of JavaScript, and you have a lot of other processes going on in the background like different tabs, that type of thing that, that can put your state… that raises the likelihood that the device may enter a thermally throttled state, which means that it will be less capable of taking on that extra work.

Drew: So it’s a sort of a negative feedback loop. Isn’t it? You give the device lots of work to do. It gets very hot and then is less capable of actually executing that work because it’s having to throttle back.

Jeremy: Right. And again, I’m not a microprocessor expert. I’m sure that if, if, if an engineer who was really intimately familiar with this, could probably correct me on some of the particulars, but the general idea is that yes, as that environmental pressure increases, the device is less able to cope with these heavy workloads until that pressure decreases.

Drew: so we’re writing JavaScript for the entire sort of spectrum of devices from latest Apple M1 Max is the new processor, isn’t it? Laptops all the way through to devices that barely have enough sort of working RAM to render a webpage. But the web didn’t start off like this, younger listeners might be interested to know that we used to build interactive web experiences without any JavaScript at all. Our big, heavy framework’s going to be our undoing.

Jeremy: I would say that frameworks have a time and a place and those who sort of read excerpts from this book may get the idea that I’m anti-framework. And I’m definitely critical of several frameworks, but they do serve a purpose and it is possible to use them in a way that preserves a good user experience or can result in a good user experience. But what I don’t think we do enough of is sort of critically evaluate these frameworks in terms of how they harm… run time performance, right? So the type of stuff I’m talking about, where if you click a button, and it takes the device like a second maybe two to respond to that input, because there’s so much going on in the background. You have third party JavaScript stuff like gathering analytics and then you have like other things running on threads.

Jeremy: And that if you don’t critically evaluate the runtime performance of a framework, you might be leaving some opportunities on the table to better serve your users. So a good example, I always like to use is react versus pre-act. I’ve been kind of banging this drum for a while. I did an article for CSS-Tricks a while back that profiled a basic click interaction for like a mobile navigation menu. And it sounds trivial, but what you find is that across all devices is that react delivers on better runtime performance, but it has basically the same API. There are differences, there are some tad differences and stuff that can be papered over with pre-act compat, but that simple… and I shouldn’t say a simple choice, but that choice, that fundamental choice can be the difference between an experience that works really well for all users or at least most users, or an experience that only works well for some. Hopefully that made some sense.]

Drew: I mean, with all the frameworks and build tools, they seem to be getting better all the time at doing things like tree shaking and optimizing the bundles that they ship and how they’re then delivered to the browser. When using big frameworks, is there a tipping point you think where you are writing such a big application, so much code of your own, that the framework is enabling you to ship less code because of all of its abstraction?

Jeremy: That’s kind of a difficult question to answer. One aspect of that is that the framework itself represents an amount of code that you can never optimize away. So having like a thin framework, like pre-act or any number of like… Or like spell for example, that that helps a lot. But the problem that I’ve seen and I think the data from the HTTP archive kind of supports this point is that it seems that anytime we have these advances in microprocessors and networks getting faster is that we tend to consume that gain, right?

Jeremy: We tend to just kind of be on this treadmill where we never really advance. And I don’t know, like I’m not clairvoyant about what the history of… or sorry, what the future of frameworks looks like. I’m sure that there are some efficiency gains that can be gathered. But what we see in the field in terms of how much raw JavaScript is like… just the raw amount of JavaScript is being used. Doesn’t tell me that this is a problem we can kind of automate our way out of. I think we have to… we have to be human beings and intervene and make decisions that are in the best interest of users. Otherwise, I don’t see us getting off this treadmill, not in my career maybe, but I don’t know.

Drew: In the book you talk about websites and web apps and how understanding the difference and which one that you’re working with helps you choose your strategy for how you develop and optimize. Tell us a bit about that.

Jeremy: That is a really good question. And I write about this in the eponymously titled article I wrote for A List Apart called Responsible JavaScript Part One, which is kind of the prelude to this book. Is that we sort of load a lot into this terminology. Like as a technical writer, I see the two get used kind of interchangeably. What I see is with websites, the implication is that it’s sort of a multi-age experience, right? It’s a collection of documents. Now a document… those documents may have embedded functionality like these little islands, as the term lately has kind of been, these little islands of functionality that enable people to get things done.

Jeremy: But then there’s like web apps and web apps sort of have this connotation of native app like functionality. So we’re talking about single page applications, we’re talking about heavy amounts of JavaScript to drive complex interactivity. And there are times when the web app model makes sense. Like for example, Spotify’s a good example of this. That works better as a web app. You wouldn’t really want to try to use that or design that as a multipage application. Like a traditional web site, but I think it’s not a sustainable default because when your default for every project is to say, “Well, all we need to ship a single page application, like a client side router and a heavy framework and offload all of this processing of rendering from like the server onto the client.” I think that that is where you start to reach a point where you’re excluding users albeit unintentionally, but excluding them nonetheless.

Drew: Is there a big chasm, do you think between the people who take the approach of we’re going to publish a website and it may have whatever interactive functionality and those who say, “We’re a software company, we’re making a product, a software product and our platform that we’re going to deliver it via is the web, rather than native applications for multiple platforms.” Is it likely that they’re approaching the problem in completely different ways? Are the considerations different depending on your outlook at that point?

Jeremy: That’s a tough question. So-

Drew: It was tough for me to say.

Jeremy: I would say that a company that… so a good example would be like a news, right? They’re well served by the sort of website model, because it literally is a collection of documents, articles. And the people who develop those experiences are probably going to have a different skillset than say a company like Spotify or a company that has like a large web application like Envision or that type of thing. And so yeah, I think they’re going to come at this from different angles. The way I’ve kind of looked at it is that there’s a segment… or at least this is how I perceived the web development community at large is that there is a segment of people, of web developers who came from non-traditional software development backgrounds, right? And I’m one of these people, I was tinkering with the web when I was kind of like a kid, right?

Jeremy: Like in middle school and doing stupid fan pages for all like the video games at the time that I really liked. And I never had that sort of computer science education. There are computer science concepts that I’ve picked up along the way. Then there’s also a segment of developers, especially I think that have come around in the last five to 10 years who approach this in a more computer science oriented way. And I think that’s going to… those differences and experiences are going to lead each of those groups to draw their own conclusions about how best to develop for the web. But I think the only way that you can really… That you can sustainably develop for the web is to critically evaluate what it is you’re building and to try to align around an approach that best serves users of those products. And that’s sort of where the website and the web app models kind of sit in my head when I evaluate these things.

Drew: Yeah. It interesting. I mean, in the book, you actually cite some of my work. Thank you very much. And my choice of boring technologies on noticed basically PHP Apache and a sprinkling of hand rolled JavaScript can create a very snappy user experience by default, without needing to do any particular optimization. I think that makes for a great user experience for the front end visitors coming and viewing content on the site.

Drew: But actually, I kind of feel like that environment for authoring content sort of the flip side, once you’re logged in and your publishing stuff on the site. I think it suffers a bit from being built with a website approach, rather than a more sort of JavaScript heavy web app approach, so much so that I’m thinking… or perhaps it needs to be both. I need to continue publishing the front end in nice static HTML and CSS and tiny bits of JavaScript. But the backend where I want to provide a content authoring experience maybe a different technology choice would be better. It’s quite interesting because it doesn’t always have to be one thing or the other does it? It’s not a binary choice. It’s more of a spectrum, would yous say?

Jeremy: Yeah absolutely. And I think we’re starting to see more discussion in the community about web development being a spectrum like that. To just be straight up for people who might be interested in my book, it definitely comes from the website side of the spectrum. And again, because I feel that that’s always like a good default. If you don’t know how you want to build something, it’s probably best to try to build it in a way that minimizes the use of JavaScript and minimizes pushing more work onto the client. That said, I think that noticed is an excellent experience. I think that these well worn and sort of really “boring” technologies really work well for the task at hand. And it does so in a way that’s like kind of open and enabling for the developer, right?

Jeremy: You don’t have to have like deep knowledge of like… of state management stores or state management frameworks to really pull these kinds of things off. And I think that noticed is well served by that particular approach. But to your point, I think there are opportunities in any website to move closer toward the middle of the spectrum without going all in on all client side routing like heavy like frameworks that manage everything on the client and that type of thing. I think the island’s approach is starting to explore what that looks like. And I’ll admit, I’ve probably have unintentionally done some of the islands type thing. I think we have for quite a while, we just haven’t really put a name on it. But I think now that we’ve kind of identified that as like maybe a midpoint, we might start to see web experiences that deliver on a good user experience, but are still more interactive. Hopefully that wasn’t terribly meandering.

Drew: It sort of harps back a little bit to the days when we would embed an island of Flash or-

Jeremy: Yeah.

Drew: Something in a page where this is our little interactive section, and the rest of it sort of flows around.

Jeremy: Yeah Like Flash, oh my God, three iterations of my personal portfolio out of college were really crappy to advanced Flash knockoffs and like hover effects. And that stuff was really, really fun. And I miss it sometimes like there’s a whole just wealth of content that’s just going to kind of disappear because we don’t use Flash anymore. And that really sucks, but in a way it was kind of the precursor to this sort of islands thing that we’re talking about. Which is you could just have like a static webpage and everything, but then you would have this really richly interactive experience just kind of like plopped right in the middle of it.

Drew: For a long time, progressive enhancement has been considered a best practice way to build web experiences. Is that still the case, do you think?

Jeremy: I would grant that it’s probably… not probably I would grant that it’s more work to do progressive enhancement because in a way, you’re kind of bifurcating your development experience. You’re trying to deliver minimum viable functionality of a website in a way that the server can handle sort of like these key interactions. But then on top of that, you’re saying, “Okay, well now I want to facilitate this interaction to be just a little bit more smoother with JavaScript.” I still think it’s a viable way to accomplish your goals with your website or your app or your product.

Jeremy: But what I would say is that I would never recommend that every single interaction on a website has to be facilitated by this synchronous navigation sort of pattern. So like a good example might be your checkout page for your econ website should definitely have a server route. You should have a server route to add things to the cart, and then you should be able to sort of sprinkle on just enough JavaScript to make that a little bit more delightful so that things can be a little bit faster and more asynchronous.

Drew: When it comes to measuring performance. We hear a lot about core web vitals, mainly from Google. Are those really the benchmark up that we should be measuring against? Or is that just what Google wants us to think? I now appreciate this might be a difficult question that you started working at Google.

Jeremy: Yeah, yeah. You know, so I’m speaking for myself here. I think that web vitals are… the initial core web vitals are a good attempt at defining what parts of the user experience are important. I do think that metrics such as cumulative layout shift and largest Contentful paint start thinking about the experience in ways that we really hadn’t started to quantify. Before particularly cumulative layout shift, because if there’s ever been a moment where you rage tap it’s because a button likes to move around the page or something. I mean, I think that that’s a helpful thing to measure it. It is imperfect. And I think anybody who works on core web vitals would agree that improvement is desired in some of these metrics. There are other metrics that I don’t necessarily agree with entirely. Like first input delay is a metric that is kind of difficult to put a pin on.

Jeremy: I think it’s really useful, right? Because what you are literally saying is we want to measure the delay and interactivity on that first interaction that the user makes, but it does lack a little bit of context, right? Because some… a lot of things can affect it because it doesn’t necessarily always tie into JavaScript. First input delay could represent the delay that’s incurred by focusing form field, right? That type of thing, things in HTML. I think those metrics… such metrics like first input delay can be… they can be beneficial if you can contextualize them with things like entries out of the long task API, element timing, and those types of things. I ultimately think that the future of core web vitals will prove out that it will be helpful and instrumental in measuring what makes a good user experience. That that’s my personal opinion.

Drew: I guess it’s, it’s one of those things that you can always measure against yourself, measure your own improvements or whether your experience has got worse if your score changes, not caring so much about the traffic lights, but caring about what you know about the context of your site and how a change has made an improvement.

Jeremy: I think that metrics such as cumulative layout shift are excellent, but they too could benefit from a little bit of improvement. As it stands, cumulative layout shift, mostly measures layout shifts that happen during load. And as we know, when a user visits a page and lands on a page that layout shifts can occur at any time, right? So there’s definitely work I think that that can be done to improve how we observe of that kind of phenomenon, for sure.

Drew: I think layout stability is one of the things that’s actually a little bit more difficult to achieve when you’re working with progressive enhancement. Sometimes when you load a server rendered page and then begin enhancing it in the client, there can be a danger of creating that sort of layout shift, can’t there?

Jeremy: Absolutely. And that’s kind of where hydration of components becomes kind of tricky because the dimensions of that component may change for any number of reasons. Like there could be content present in the client side component that just doesn’t render on the server because of state that isn’t evaluated until it’s executed on the client. It’s an extremely difficult problem. I’m not going to sit here and pretend I have like the silver bullet for it.

Drew: I wanted to talk a bit about sort of dynamic of imports and code splitting, both being different techniques for the problem of downloading and executing a huge bundle of JavaScript upfront at the start of the experience. Is there a risk of over optimizing with making lots of small requests, particularly on simplest smaller projects, or is it something that they’re absolutely no harm in implementing sort of from the outset preempting that you’re going to have these problems? Or should you be waiting until you actually see performance problems before thinking about those sorts of things?

Jeremy: So I would recommend the tail end of what you just said is a good way to lead in with this. We shouldn’t try to prematurely optimize unless of course those optimizations can be achieved very quickly and easily, but if it takes a lot of effort to optimize early on, when there aren’t really a lot of performance issues, I would argue that code splitting is probably something that doesn’t have to happen. You can probably just load that functionality up front.

Jeremy: But for example, I talk about this in the book. If you have a high value interaction that is driven by a large piece of JavaScript, and to me, a large piece of JavaScript could mean 20 kilobytes because over the wire that’s compressed and that could end up being a 60 kilobyte chunk of JavaScript. Then if you can pull that out on the main bundle or any of your myriad of bundles, your site might be shipping, you’re going to help startup performance.

Jeremy: But in the book, I discuss a technique about perceiving when… or at least attempting to perceive when the user might make a high value interaction. So the example I use is a chunk of JavaScript. That’s used to validate the contents of a form because HTML form validation is great, but it’s also not styleable, and it’s pretty straightforward. There’s not tons of flexibility for things like, type equals email, right? It evaluates it a certain way. However, that validation of the form on the client is really helpful because we can also style it. And we can align the appearance of that validation to be closer to what the brand aesthetic is or what the aesthetic of the website is. And so in this example, what I did was, is I said, if a user focuses… even just focuses any of the fields in the form, that’s the point in which we preload that piece of JavaScript.

Jeremy: So that hopefully by the time, and I would hope because it takes a little while to fill out a form that the network has enough time to pull that down so that when the dynamic import is called, it can just hit the cash to get what has already been preloaded. It’s something I’ve been working with a little bit here and there, and it’s difficult to do in all situations. Like for example, you can’t do this reliably all the time on hover because some devices don’t have a fine pointer. They have… they’re… it’s tap inputs, right? So a hover occurs at a different time than if you had a fine pointer, for example.

Drew: One aspect of responsible JavaScript use is thinking about how we consume our users, available resources, be that sort of battery life or data allowance, if they’re on a data plan. Are there techniques that we can lean on here to, to help us think about those things?

Jeremy: Yeah. So currently, or at least historically from the last… I don’t know exactly when this feature shipped but Chrome for Android and there used to be a Chrome extension thing for this called Save Data. And what you would do is if in your settings, in Chrome for Android you would say, “Reduce data usage.” I forget exactly what the label is on the check box, but you check it, you turn it on and what that does is it sends this signal as a request header. And it’s a request header that’s called save data and it only has one token and it’s just on. Because if it’s off, the header just doesn’t get sent. And you can… on the backend, at least, you can look at this header and you can decided, “Well, do I really need to send the styles and the JavaScript for this carousel or can I render this differently?

Jeremy: Or maybe you start thinking about stuff outside of JavaScript where maybe you send lower quality images. There’s a lot of opportunities there to reduce data usage. This is evolving though, save data is still around. And I think it will be for the foreseeable future, but now we’re converging on a media query called prefers reduced data. So we have stuff like prefers reduced motion, prefers color scheme, it’s sort of in that vein where I anticipate that these will be operating system level settings that we can make to say, “I really want websites or apps to use less data with this signal.” And you can match it on the client side, with the prefers reduced data media query using match media in JavaScript.

Jeremy: So then you can use that in JavaScript to say, “maybe this functionality isn’t the most important thing. Maybe we don’t really need to load this associated video embed if the text serves the purpose.” That type of thing, but it also converges with the save data header, at least this is what I observed is when I turn on the save data feature in Chrome for Android, the prefers reduce dat: reduced media query matches, but it also sends save data so you can still act on this on the back end or the front end.

Drew: That’s nice. So in a sort of app context, you might feel.. rendering a big data table, you might only return some very key columns. Out of that, the most commonly referenced, rather than the full data and really sort of reduce the amount of that’s sent over the wire.

Jeremy: Right. Or you might say… you might pull APIs less frequently in JavaScript, that type of thing. It’s kind of a hack need phrase, but it really is limited to your imagination. There’s a huge space where I think that concept can be applied to deliver better user experiences. And I’ve used it with a client of mine in Wisconsin. In rural Wisconsin it’s just like… it is an internet dead zone. Like it’s so difficult to… I don’t know how people cope with how slow it is. Maybe it’s just because of my data plan and I might be roaming or whatever, but I’ve used this to some effect to say, “You know, maybe they don’t need this carousel.” Somebody who’s just kind of out there in the sticks who… there’s a lot of farmland in Wisconsin, but there’s also like a lot of forests and somebody might need some work done in logging, right? It’s a logging company. And so maybe all of these images, aren’t really crucial to that user experience. And they really just want to get to… the phone number or whatever it is, and they want to get to it as fast as possible.

Drew: One thing many of us do is write JavaScript in sort of new shiny versions of VS script and TypeScript sometimes, and then use build tools to transfer that down to older syntax for browsers that encounter out in the wild. In some ways that feels like an excellent practice because we’re building a code base with nice more modern clean code. In the case of TypeScript, perhaps more reliable code, less bugs. But are there consequences of doing this transpilation process that we might need to be aware of?

Jeremy: Anytime you take a new syntax and you have to transform it so that it’s more broadly compatible, that’s going to generally… I have not done this comprehensive audit of all features, but generally I’ve observed that, that results in more JavaScript. And that makes sense because for things like default parameters on functions, which are well supported by the way, and probably you can ship… I think you could probably just ship that on transpile and be fine, but it’s a good example. When that gets transformed, it has to inject a lot of helper code in the function to look… to evaluate those defaults, right? So you get that equivalent functionality.

Jeremy: Now, JavaScript is evolving all the time and I think for the time being, we’re going to be coping with transpilation costs. And it definitely does have an impact. When I worked with an e-com company, we were able to reduce several of their bundles for their pages, anywhere between 10%, maybe even 5%, in some cases, to sometimes 30 or 40% when we used a technique to transpile two sets of bundles, right? I talked about this at smashing comp. The name that got kind of got tacked on it was differential serving where you say, “I’m going to generate these transformed bundles for older browsers and serve it to them.” And I’ll generate a different bundle for users on modern browsers or evergreen browsers that will be smaller because there will be less of that transpilation overhead. And when we use that, there was a measurable improvement in the user experience. And there were signals that that engagement was better when we did this. That said, differential serving is an interesting thing because IE11 is kind of now like fading. It’s taking time, but it’s fading.

Jeremy: But Matt Hobbs who works for the UK government. I think he works on the NHS website. I think, don’t quote me on that Matt. But he sent me some data that showed that there was still a fair amount of people who were still on Internet Explorer and not just internet or 11. Like there were some columns or row in this data rather, that showed that some people were still on like IE6 or IE7. And so you have to evaluate when it makes sense to do something like that, because it is a lot of extra work and it takes a lot of effort.

Jeremy: In the case of the NHS or literally any government service, I would say that it’s virtually a mandate that you have to preserve a level of functionality that serves literally everybody, because you don’t know where they’re going to be accessing the web off of, right? The constraints we develop for are incredible, it’s really, really hard. It’s thousands and thousands of different types of devices and I think it makes a in those cases, but maybe not so much for your regular web app, right? It just depends on what the purpose is.

Drew: So keeping on top of the browsers that you need to support and the features that you need to transpile and keeping your configuration and your build tool up to date is… becomes quite important.

Jeremy: Yeah, for sure. This is sort of the more technical part of how you set up tool chains to do this, but… evaluating what your user base looks like is very important, because if a browser kind of falls out of a certain threshold of usage from significant to relatively insignificant, that might be the point at which you decide to evaluate, “Hey, maybe we need to bump things up in our browser’s list configuration, so that we’re transpiling bundles to be smaller since we don’t need to ship those transforms anymore.” But it is kind of like another added step. And one of the approaches I talk about in the book is that you can write your JavaScript one in a couple ways.

Jeremy: You could decide that your style for using JavaScript will be to rely on older language constructs that are natively well supported. Like I think constant let are supported back to IE11. So it doesn’t preclude you from using those types of things, but it allows you to ship less JavaScript. Whereas you… or you could say like the alternate approach might be that you are going to write JavaScript for newer browsers only, and accept that a segment of your users may not have functionality. But again, that depends on the purpose that your website is serving and whether or not it’s crucial, right? Or infrastructure.

Drew: The web platform is moving on that at magnificent pace, it seems at the moment and there seem to be all sorts of things being added to CSS. For example, that offer capabilities that we previously have to lean on JavaScript for. It is one way to use JavaScript responsibly to just not use it and to lean on native browser features instead?

Jeremy: I think that also works for JavaScript itself where it makes sense to use an API directly rather than an abstraction of it. Definitely do that. But certainly in the case of HTML and CSS, there are things we can now do or will be able to do in CSS that we just don’t need JavaScript for. So an example of this would be… what’s the word for it? Truncation of content, right? That’s something that we can do in CSS. Whereas I’ve been in situations or in projects where I’ve seen libraries or a library get downloaded that does that. And we don’t necessarily need to really do that anymore because CSS can handle it.

Jeremy: Or we have access to these layout modes now where we don’t really need. If we invest the time to learn these layout modes like grid, we don’t really need to fall back on layout libraries to handle these things for us. And we can develop these experiences that are unique. And what’s great about that is with layout modes like CSS grid, if they’re abstracted, it kind of reduces what you can do with them, because you are only able to take advantage of what the abstraction offers. And if you really want to build some eye-catching layouts that really like push the boundaries of what’s possible, I always like to point to Jen Simmons, her experimental layout lab homepage.

Jeremy: I don’t know how you would achieve a layout like that if you abstracted it into its own sort of layout library. You almost have to use it… I would think more than almost, you would have to use CSS grid directly in order to accomplish something like that. And that is like zero JavaScript and it’s incredible and it’s really neat. And I think the web in general would benefit more if we leaned more heavily on CSS and other core web technologies, as much as we do on JavaScript, probably not possible, but one can dream.

Drew: So the book Responsible JavaScript is out now from a book apart. And I really like it, it’s full of very practical information. It’s very to the point, you know? There’s not filler. It’s not like reading a recipe online where you have to hear about a trip to Peru before you get to the nitty gritty. It’s just like it’s all straight in there and it’s all very nicely written. Was it a challenge to put that set of information together?

Jeremy: I’ll have to ask… if this is the case, but I Think Responsible JavaScript might be the longest book that A Book Apart has put out, but I would have to go and reach into the closet for my copy of a responsible responsive design to see if I beat out Scott Gel on that, because that was a bit of a book, an awesome book, by the way, it was challenging I’m… As your listeners can probably guess I’m sort of a naturally verbose person and, and, and recovering, trying to like be more succinct, but we really packed in as much as we could and kept it as straight to the point while still trying to retain some, some light lively pros. So it didn’t like sound mechanical, but the result was that the manuscript is like 42,000 words. So it’s a book, it’s a chunk of words and we had a great time working on it. People at A Book Apart were fantastic and, and really setting up those guardrails so that we would be successful.

Drew: And it’s very much a book that you can sort of dip into various parts. You don’t need to read it cover to cover, to gain loads of helpful information. You can just sort of find the bit that’s relevant to the problem that you’re facing at the moment and dive in there. So I think that’s really great about it. So I’ve been learning all about Responsible JavaScript. And what have you been learning about lately Jeremy?

Jeremy: Kind of an ongoing thing that I’ve been doing since it came out is messing with the CSS paint API. I really like the paint API. I mean, it’s kind of always existed in its own…. like in its own way, since like the canvas 2D context has been a thing. Because that’s… for those who are unaware, the CSS pain API is a way in which you can embed a 2D canvas context and parameterize it and control it with CSS, which opens up a lot of really interesting possibilities, like you can animate things that you couldn’t previously animate and that type of thing.

Jeremy: And recently I’ve been doing a blog refresh. That is… I’m a huge Final Fantasy geek, like Final Fantasy II I just replayed and so, there’s like 15 of them and 16 is coming out sometime, but it’s kind of a retro field. So I’ve been using the CSS paint API to generate a random over world using different tiles. So there’s like rivers and stuff that like run through and grass tiles and trees and that type of thing. And parameterizing that so like if the user visits my website in dark mode… that paint work will be rendered as though it’s night. It’ll just have like kind of an overlay on it and that type of thing.

Jeremy: But the painting API is amazing. I got to give a shout out to Tim Holman. He, I saw him at JSConf Australia and he did a talk about generative artwork. That was really just, it really like got me interested. And then Sam Richard, in that at CSSConf the day before talked about the CSS painting API, when those two things came together for me, it was just like, “Wow, this is so cool.” And so I actually did a thing called Paintlets! It’s a Paintlets.Herokuapp.com if you visit and Chrome and you have to, unfortunately, because it’s not super well supported yet. You can see like a bunch of different, random artwork randomly generated artwork and.. yeah, I’ve just… that’s what I’ve been into, sorry. Long tale on that.

Drew: Amazing. That sounds great.

Jeremy: Yeah. Yeah.

Drew: If you, dear listener would like to hear more from Jeremy, you can find him on Twitter where he’s @malchata and find his writing presentations, videos and projects on his personal website, jeremy.codes, Responsible JavaScript is available now from A Book Apart. And you can find more information about that at responsiblejs.dev. Thanks for joining me today Jeremy, did you have any parting words?

Jeremy: Just go forward and build for the web the best way you can and try to keep the user in mind. That’s kind of my mantra and I’m hoping that this book makes that stick a little bit.

Further Reading

• What Was SmashingConf In San Franciso Like?
• Why You Should Speak At Events As An Early-Career Professional
• Sketchnotes And Key Takeaways From SmashingConf Antwerp 2023
• How To Become A Better Speaker At Conferences

(il, mrn)

How do we design for touch in 2022? Mobile and touch are the new default for computing, but there are still many myths, rumors, errors and out-of-date practices on how to design for them. Let’s change that!

In our brand-new book Touch Design for Mobile Interfaces, Steven Hoober shares his in-depth research and guidelines on designing for touch. You’ll learn how people hold devices and interact with interfaces, along with strategies and best practices for designing better mobile interfaces. A jam-packed book for designers and developers working on interfaces for mobile. Jump to table of contents.

• Jump to the details ↓
• Download a free PDF sample (14MB)
• Printed books are shipping now.
• Get the book right away.

About The Book

There are over 2 billion portable touchscreen devices in use today, and hundreds of millions more installed in cars and kiosks. Sales of traditional mouse-and-keyboard computers have been falling for years, replaced by mobile phones and tablets. Mobile is the new default, but there is a lot of myths and out-of-date practices on how touch works, and how to design for mobile.

Touch Design for Mobile Interfaces shows new insights from research on hardware, people, interactions, and environments. Steven Hoober has studied in depth how people actually touch and hold mobile phones and tablets. Steven spent over 20 years designing products for mobile phones, tablets, kiosks, and computers.

The book also includes guidelines and best practices you can apply to your designs to address usability and accessibility issues immediately. Download a free PDF sample (14MB).

400 pages. Written by Steven Hoober. Cover design by Espen Brunborg. Shipping now.

You’ll Learn:

The book goes into details of human behavior and common design issues, covering rage taps, visibility and interactivity issues, as well as many other topics:

• How people actually hold and touch mobile devices,
• Design considerations for common design patterns and components (e.g., menus, lists, floating bars, tabs).
• How touch intersects with human behavior and impacts your design work,
• How we can take into account the ways people adapt their touch to perform different actions,
• How to overcome problems of visibility and interactivity,
• How to avoid catastrophes when rage taps or mistaps are made,
• How to tackle common usability issues when planning the design of your app or website,
• How to design UIs that attract the eye, afford action, and inspire confidence,
• How human vision is not quite what it appears to be,
• How to use well-organized, usable templates for touchscreen design,

Who Is This Book For?

This book is for designers working on mobile or touchscreen interfaces. If you want to design better for mobile, or you need data to back up your decisions, this book is evidence-based, specific, and full of actionable insights. If you want to move from desktop design to mobile, the book provides a path for you to reconsider design decisions for touch and mobility.

There are benefits too for product designers, managers, and analysts, as well as developers and engineers working on mobile touchscreen interfaces. You’ll be able to plan for the new touch-also world, write better stories and features, and understand how the work environment has moved from predictable computers in cubicles to devices everywhere, anywhere, and anytime.

Table Of Contents

How do people really use their mobile devices? And how can we design better mobile interfaces based on that knowledge? The 13 chapters of our shiny new book explore just that.

400 pages quality hardcover. The eBook is available as PDF, ePUB, Amazon Kindle. Written by Steven Hoober. Cover design by Espen Brunborg. Shipping now.

Bonus: Touch Design Templates

We’ve included durable plastic templates to help you plan type and touch sizes in every printed book! They’ll help you design usable and efficient interfaces with less guesswork. A downloadable print-it-yourself version of the templates is included in the eBook as well.

About The Author

Steven Hoober shifted focus from graphic design to mobile UX in 1999. Since then, he designed the first Google mobile search, the first mobile app store, several mobile browsers, and numerous websites and apps for global brands. See more of Steven’s research at 4ourthmobile.com.

Reviews and Testimonials

“Steven's research over 20 years and his extensive knowledge of all things mobile (not just phones) shines through. His insight makes you rethink assumptions and best practices that have not evolved alongside the technology. This book is a must-have for any designer, whether new to digital design or not.”

— Jaee Likhite, UX and accessibility, Aptiv

“Many books written on technical topics run the risk of putting the readers to sleep. Steven manages to make the dense topics contained within practical, relatable, and even fun. If you're looking for a good gateway into understanding design for touchscreen devices from a deeper perspective, look no further.”

— Mike LeDoux, Accenture

“Eye opening and practical, but above all, useful. Steven synthesizes his extensive field observations with a deep technical understanding of touch usage and history. This book balances pragmatic guidelines and theory in a way that’s accessible, memorable, and highly referenceable. I now observe phone usage completely differently, but in a way that seems completely obvious in retrospect.”

— Lucas Roe, Design Lead, Vertex

“We live in a world of touch devices, and even those that don’t have user interfaces are sure to be activated with touch. Reading Steven’s book feels like you are taking a grand tour, full of wisdom and practical advice — and what to look for when designing and developing a real-world experience. And mind you, this book is not just for the creatives. If you are in the C-suite, do yourself a favor and read. It will boost your strategy to bring a good experience to your customers.”

— Mudassir Azeemi, Design systems, Ring Central

Technical Details

• ISBN: 978-3-945749-97-5 (print)
• Quality hardcover, stitched binding, ribbon page marker.
• Free worldwide airmail shipping from Germany.
• eBook is already available as PDF, ePUB, and Amazon Kindle.
• Get the book right away.

Community Matters ❤️

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)

Stay smashing, and thank you for your ongoing support, everyone!

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Stefan and Adam are two of these people. Have you checked out their books already?

Further Reading

• Picture Perfect: Meet Pixo, A Photo Editor For Your End Users
• The Things Users Would Appreciate In Mobile Apps
• Accessible Target Sizes Cheatsheet
• Scaling Success: Key Insights And Practical Takeaways

(mrn)