Menu Search
Jump to the content X X

Printed Smashing Books

We care about quality content and work hard to support and spread best practices, innovative techniques and forward-thinking ideas. Our printed Smashing Books are crafted to deliver in-depth knowledge and expertise shared by experts and practitioners from the industry. They are our editorial flagships—and they look damn good on a coffee table!

Quick Overview

We proudly craft affordable, practical books for pros like yourself who want to improve skills and make a difference. No fluff, no theory — just actionable insights applicable to your work right away. Here’s a quick overview of the last ones:

Design Systems (October 2017)

As the web continuously becomes more complex, designing static pages has become untenable, so that many of us have started to approach design in a modular way. In this book, Alla Kholmatova will identify what makes an effective design system that empowers teams to create great digital products. Get the book now →8

Get the book and download the eBook immediately179


Get the book1810

Hardcover + eBook. 280 pages.
Free worldwide shipping.

About The Book

Many of us have started to approach design in a more modular way recently. It’s just more manageable this way. We experiment with pattern libraries and style guides and almighty design systems, yet while some of us succeed, most of us fail. Our systems get out-of-date too quickly or just don’t get enough traction in our companies. It’s about time to fix it.

Not all design systems are equally effective. Some can generate coherent user experiences, others produce confusing patchwork designs. Some inspire teams to contribute to them, while others are neglected. Some get better with time, more cohesive and better functioning; others get worse, becoming bloated and cumbersome.

Throughout this book, Alla Kholmatova, previously a lead designer at FutureLearn, will share an approach and the key qualities of effective, enduring design systems. It’s based on Alla’s experiences, case-studies from AirBnB, Atlassian, Eurostar, TED, and Sipgate, plus 18 months of research and interviews — all attempting to figure out what works and what doesn’t work in real-life products. It may not answer every question, but it will help you figure out just the right strategy for establishing and evolving a design system in your organization.

Who The Book Is For

The book is aimed mainly at small and medium-sized product teams trying to integrate modular thinking into their organization’s culture. Everyone in the product team could benefit from reading this book, but particularly visual and interaction designers, UX practitioners, and front-end developers.

The result is now for you to judge. Printed hardcover, 280 pages. Reviewed by Karen McGrane and Jeremy Keith. Cover design by Espen Brunborg. Get the book now.11


It has been our goal to make the book as practical and useful as possible. We’ve been honored to receive very positive reviews from people working on design systems on small and large scale.

  • “Alla’s book outlines a process not just for creating a design system, but sustaining it over time. If you work on today’s web, I’d strongly recommend reading this insightful, approachable book.”
    — Ethan Marcotte, Designer
  • Design Systems is essential reading for all designers and design teams. Like great design – and effective systems – this book is a complete, connected, compelling guide for crafting great digital product experiences. No single resource has been more integral to our thinking about design systems than Alla’s book.”
    — Jon Bell, Design manager, MailChimp
  • “Alla’s thoughtful analysis of systems-oriented thinking is a fundamental primer for anyone looking to establish a universal language across their team or organization.”
    — Bethany Sonefeld, Design lead, Carbon Design System, IBM
  • “The magic of this book is its recognition that building a design system is as much about forming human connections as it is about technical solutions. It embraces the hard problems, and clears a path to help teams work towards a shared, cohesive vision.”
    — Amy Thibodeau, UX lead, Polaris Design System, Shopify
  • “Great designers make equally great writers because they are meticulous. This superb introduction to design systems is written with the meticulous care the subject deserves.”
    — Heydon Pickering, Author of Inclusive Design Patterns12

What’s In The Book

The book explores design systems from the perspective of an interaction and visual designer. You won’t find any code samples or in-depth analysis of development tools. The book looks both into the main building blocks of a system and the workflow that would support the integrity of the system — all applied to designing and building websites or products today.

“Design Systems” is about how to approach your design process more systematically, and ensure your design system helps to achieve the purpose of your product and fits with the culture of your team.

The book consists of two parts:

Part 1: Foundations

In the first part, we’ll talk about the foundations of a design system – patterns and practices. Design patterns are repeatable, reusable parts of the interface, from the concrete and functional (like buttons and text fields) to the more descriptive (like iconography styles, colors, and typography). Patterns interconnect, and together they form the language of your product’s interface.

Shared practices are how we choose to create, capture, share and use those patterns by following a set of principles, or by keeping a pattern library.

  • Chapter 1: Design Systems
  • Chapter 2: Design Principles
  • Chapter 3: Functional Patterns
  • Chapter 4: Perceptual Patterns
  • Chapter 5: Shared Language
  • Summary

Part 2: Process

A design system cannot be built overnight – it evolves gradually with your product. But, there are certain principles and practices that we can follow to make sure the system develops in the right direction and provides us some degree of control over it. The second part of the book focuses on practical steps and techniques to establish and maintain a design system, including planning the work; conducting an interface inventory; setting up a pattern library; creating, documenting, evolving and maintaining design patterns.

  • Chapter 6: Parameters Of Your System
  • Chapter 7: Planning And Practicalities
  • Chapter 8: Systemizing An Interface: Functional Patterns
  • Chapter 9: Systemizing An Interface: Perceptual Patterns
  • Chapter 10: Pattern Libraries: What, Why And How
  • Conclusion

About The Author

Alla Kholmatova is a UX and interaction designer with a nine-year experience of working on the web, for a range of products and companies. Most recently she was a senior product designer at an open education platform, FutureLearn.

She’s particularly interested in design systems, language, and collaborative ways of working. In the last two years, she has been spending a huge amount of time working on and researching the subject. She’s been sharing her insights with people through articles, workshops, and projects. Alla contributes to design publications, such as A List Apart, and speaks at conferences around the world.

Sneak Preview (Free PDF Sample)

To give you a more detailed idea of what the book is like, feel free to download a free sample of the book — a chapter on solid principles which are the foundation for any well-functioning system. In this chapter, we’ll discuss the qualities of effective design principles
and look at some of the ways of defining them.

Get the book and download the eBook immediately14


Download the eBook15

PDF, ePub, Kindle. 280 pages.

Quick Summary

What You’ll Learn In This Book:

  1. How to get support for a design system in your organization,
  2. How to conduct a purpose directed interface audit,
  3. How to establish and evolve a shared design language within your team,
  4. How to think in patterns without losing sight of the whole,
  5. How to shift your team’s design process from thinking in pages to connected systems,
  6. How to define effective design principles,
  7. How to identify patterns early in the design process,
  8. How to strike a balance between reusability, consistency, and creative expression of the brand,
  9. How to eliminate duplicates and inconsistencies,
  10. How to establish foundations for a pattern library,
  11. How to define patterns and integrate them into the system,
  12. How to document and evolve design patterns.
Get the book and download the eBook immediately179


Get the book1810

Hardcover + eBook. 288 pages.
Free worldwide shipping.

White Hat UX (August 2017)

Most things in life come with a dark side. For years, the online space has acted as a playground for thieves, bandits and murky types who will use every trick in the book to make you do the opposite of what you set out to do. But there is hope. The next generation in user experience is coming.

White Hat UX Hardcover19


Get the book20Print Hardcover + eBook.
Free shipping worldwide.


eBook21ePUB format

White Hat UX – The Next Generation in User Experience is the right book for you when you find yourself in one of the following situations:

  • You’re not trained in UX, yet you now have the responsibility for it
  • You struggle to follow along in the conversations about user experience in your team
  • You are a manager and want to understand how your company can become leaders in the modern digital market (hint: serving a great user experience is a competitive advantage)
  • You want to learn about ethical design but you’re not sure where to start

White Hat UX starts by defining UX – done in a straightforward way that allows people with limited UX knowledge to gain a clear understanding of the field.

It shows and tells what many companies do wrong (either by intent or stupidity).

It describes how privacy is being violated, and what consequences it has for the businesses that will keep doing so because they think it’s good business (and because they don’t care about people).

And finally, it explains how you improve the user experience of your product, service and company to gain the most powerful competitive advantage in today’s consumer driven market: a White Hat, honest user experience. Also, you’ll sleep better at night knowing you are doing the right thing.

Table Of Contents


  • White Hat, Grey Hat and Black Hat UX
  • A Brief Introduction to UX
  • Privacy Zuckering
  • Black Hat UX: 12 Design Patterns
  • UX Gone Wrong


  • The Competition is Only a Click Away
  • Test Methods in UX
  • Test Reports and Release Notes
  • Windows 10 Privacy
  • Quality Assurance and Quality Control
  • Baseline


  • The Principle of Least Astonishment
  • UX and Scrum
  • Shitstorms and Candystorms
  • Grey Hat UX: 7 Anti-Patterns

Join The Light Side of the Force

  • White Hat UX Design Patterns
  • From Dark Patterns to White Hat UX
  • Becoming Proficient
  • Things Take Time
  • Strategic White Hat UX

Technical Details

  • Quality hardcover with stitched binding and a ribbon page marker,
  • 136 pages,
  • ISBN (eBook): 978-87-994915-9-9,
  • The eBook is available in EPUB format.
  • Available as printed, gorgeous hardcover22 and eBook.3623

User Experience Revolution, the Hardcover


Get the book382825

Print Hardcover + eBook.
Free shipping worldwide.

User Experience Revolution (April 2017)

Many companies try to create a great experience for customers. However, few are willing to make the changes required to deliver on that promise. In fact, most companies don’t even realize how bad their experience can be. This is why we made a new book called “User Experience Revolution,” a practical battle plan for placing the user at the heart of your company. (Image credit: Artem Pereverzev26)

The UX Revolution Hardcover27


Get the book382825Print Hardcover + eBook.
Free shipping worldwide.


eBook29PDF, ePUB, Amazon Kindle.

Who Is The Book For?

This book is for anybody passionate about user experience, but who is working in a company that is failing its customers. It contains a battle plan of practical advice for changing the culture of businesses. Changing them, so they put the user first.

You might be a designer, marketer, content specialist or any one of many jobs concerned about user experience.

You do not need to be a manager, although you might be. You do not need to be an expert in user experience. You just need a willingness to challenge the way your company does things and be relentless at putting the user first.

This Book Will:

  1. Encourage you to break out of your comfort zone and start influencing the full scope of the user experience.
  2. Teach you how to articulate the benefits of user-centric thinking efficiently.
  3. Guide you through the process of building a grassroots movement within your company — a movement that will advocate the needs of your users.
  4. Provide practical ways you can raise the profile of the user within your organization.
  5. Help you find and build a proof of concepts to sell the benefits of a user-centric approach.
  6. Show you how to get management interested in user experience, and gain their support.
  7. Identify ways of embedding user-centric methodologies into the culture of the company.

Table Of Contents

1. Getting Real About User Experience Design

Summary The world has changed and there is a new generation of empowered, connected consumers – consumers with higher expectations than ever before. If your company does not meet those expectations customers will go elsewhere. In fact, according to Customer Think, 89% of customers will stop doing business with a company after a single poor customer experience.

Keywords Customer Relationship Involving Customers Into The Product Design Process Understanding Users’ Needs

2. How To Sell The Benefits Of User Experience Design

Summary Across all sectors, executives are more concerned with their agendas than fulfilling the needs of users. This makes convincing them of the value of user experience design very hard.

Keywords Understand Customer Expectations Users Have Limited Time and Tolerance User Experience In The B2B Sector User Experience Builds Brand User Experience Cost Savings User Experience And Increase Sales

3. Create Customer Experience Evangelists

Summary Harry saw himself as the sole custodian of the user experience, a lone maverick trying to bring about change single-handedly. The more he met resistance, the more he saw himself as the only one who cared. Over time, he ended up bitter and angry at his management team and colleagues. He came to see them as the enemy.

Keywords Find Colleagues Who Care Reach Out To Your Potential Evangelists Establish A Common Vision User Experience Principles

4. Raise The Profile Of The Customer

Summary Let’s imagine two employees at two different compa- nies. We’ll call one Nigel and the other Helen. The companies have been around for the same length of time, are of similar size, and operate in the same industry. Both Nigel and Helen work in legal. Their job is to make sure the companies meet their regulatory obligations and protect them from risk. Both are nice people whom you would enjoy an evening out with. But while Nigel is a constant roadblock to improving the experience of users, Helen is not.

Keywords Pages Humanise Your Customer Tell The Customer’s Story Communicate With Data Ask Users For Feedback Establish Regular Communication Encourage Action

5. Get Managerial Support

Summary The time will come when you will have done all you can behind the scenes. You will need permission to take the next big step. Where that line is and what that next big step will be will vary from company to company. The longer you leave it, the more momentum will be behind your cause and the more compelling your case will be. You will have more support, more statistics, more stories. In short, you will be better prepared. That will be important if you want management to take you seriously.

Keywords Get The Attention Of Management Apply Ux Design Principles To Management Needs Frame Your Request Around Management’s Agenda Validate Your Arguments Get An External Perspective Find Comparable Case Studies Get Management’s Approval Scare Your Management Inspire Management Give Management A Simple Next Step

6. Develop A Proof Of Concept

Summary The real barriers to implementing the principles of user experience design are external constraints: constraints of the technology; constraints around compliance and policies; constraints around requirements. These limitations have prevented you from ever showing what a great user experience looks like.

Keywords An Experiment In User Experience Design Delivering A Successful Pilot Project Put Together The Right Team The Three Rules Of Piloting Find The Time For Your Pilot

7. Establish Better Working Practices

Summary Although Hannah and her team were experts in their field, they were constantly prevented from doing their best work by the organisational culture. They found themselves compromising their work just to get it out of the door in a difficult environment.

Keywords Begin With User Needs Enforcing Usability Testing Collaborate Through Prototyping Explore Alternative Approaches Focus On Saving Users’ Time Focus On Simplicity Help Colleagues See Complexity Making Legacy Simple

8. Transform The Organizational Culture

Summary I was fortunate enough to work with an organisation whose senior management team sent out such an email. They made it clear that customer experience was their number one goal. Yet, a year on and little had changed, despite countless initiatives and training sessions. Any momentum gathered had stalled despite the best intentions of management. What had gone wrong?

Keywords Work Across Silos Address Organisational Structure Break The Fear Of Failure Make UX An Operational Expense Update Policies And Procedures Establish New Metrics At Every Level

9. A Vision Of A UX-Focused Company

Summary Changing an organisation’s culture is a major undertaking. It will take years and you might not see the end. But it is a journey worth making. It won’t just help the business. It will help you, too. It will develop your skills and increase your employability. It will raise your profile in the business. Most of all, it will make a tangible difference here and now. Although some of what I have written about will take years to achieve, you can apply much of what I have covered today, things that will make a difference immediately.

Keywords Work Across Silos Address Organisational Structure Break The Fear Of Failure Make UX An Operational Expense Update Policies And Procedures Establish New Metrics At Every Level

Testimonials From Our Readers

  • “I’m currently reading the User Experience Revolution book and I absolutely like it because of the strategic thinking, and its excellent examples.”
    — Norbert Boros

Sneak Preview (PDF Sample)

To give you a more detailed idea of what the book is like, feel free to download a free sample of the book on how to get managerial support of your ideas. You should also check out my free culture cards30. This pack of 52 cards each contain a technique you can use to shift the culture of companies to be more user centric.

Technical Details

  • 248 pages, 14 × 21 cm (5.5 × 8.25 inches),
  • ISBN: 978-3-945749-51-7 (print),
  • Quality hardcover with stitched binding and a ribbon page marker,
  • All pre-orders have been shipped already. The hardcover book will be sent out starting from April 18th) via free worldwide airmail shipping34 from Germany.
  • The eBook will be immediately available in PDF, EPUB, and Amazon Kindle formats,
  • Available as printed, gorgeous hardcover35 and eBook.3623

User Experience Revolution, the Hardcover


Get the book382825

Print Hardcover + eBook.
Free shipping worldwide.

The Sketch Handbook (November 2016)

Sketch offers a wealth of tools and features to make it the perfect application for today’s designers: It lets you design interfaces, websites and icons with ease. To help you get the most out of this mighty tool, The Sketch Handbook will show you every aspect of it. Not in theory, but backed up by practical examples that you can follow along, step-by-step. Please note that this book is based on Sketch 41, the latest version of Sketch.

The book will guide you through every aspect of Sketch: From smart guides and layer manipulation to responsive baseline grid, nested symbols and group resizing. Whether you are a beginner to design or just started to use graphic apps, this book will teach you the techniques you need to start designing user interfaces in Sketch.

A photo of the new Sketch Handbook39


Get the book40Print Hardcover + eBook.
Free shipping worldwide.


eBook41PDF, ePUB, Amazon Kindle.

What’s in it for you? Well, you’ll get an overview of practical techniques and strategies that will make your design workflow more efficient and future-proof. You’ll learn how to design an advanced multi-screen mobile app, a responsive article and a variety of icons, and dive deep into organizing the artboard and exporting your assets for iOS and Android. Icon and logo design and export are also covered — along with recommended plugins and some obscure but handy tips and tricks. Pretty much everything you wanted to learn about Sketch, in one place.

About The Author

Christian Krammer

Christian Krammer is a web designer and Sketch app pro. He’s been running SketchTips.info42 for more than two years and has shared a number of tips and tricks about Sketch there. Christian also released two Sketch courses on Skillshare recently. When he’s not fiddling around with Sketch, he loves to spend time with his family or watch a good movie. Occasionally, he also shares Sketch tips on Twitter43 — but who doesn’t?!

Table Of Contents

You’ve probably guessed it — the book doesn’t deal with theoretical concepts but real-life examples. A centerpiece of the book is workflow efficiency: You will learn how to get great results quickly, using the full power of available features, shortcuts and techniques that other designers have learned over the years, and apply regularly.

1. An Introduction To Sketch

Summary The first chapter gives you a compact overview of the most important features of the design app, as well as an introduction to the interface of Sketch. Mainly, you will get a short peek into its best features: Sketch is easy to learn, fast and lightweight, it has a clean, uncluttered UI, grids are built right in, it provides powerful export options, lets you easily adapt your design to different sizes, and most of all: Sketch is vector based. Everything you build is indefinitely scalable — a must with today’s vast array of devices.

Keywords Interface basics Sketch basics Bitmaps vs. vectors

2. Designing An App

Summary The first screen we tackle is the details page. Everything starts here with the artboards which give your design a defined space. After you have added the first elements and text layers, you can read how to style them and change their properties. This includes an overview of the available shapes and fill types, as well as the usage of images. With the first layers appearing in the layers list, it’s also important to learn the best way to organize them. Lastly, you will employ an 8-px-grid, that gives the design some structure and avoids random placement of the elements.

Keywords Artboards, Designing at 1x, Shapes, Smart guides, Layer manipulation and organization, Fill types, 8-px-grid, Colors, Opening and closing shapes, Dashed and dotted lines

3. The Power Of Iterations And Artboards

Summary A design is never finished, so we will use artboards to evolve its elements and try out different ideas. You will learn about symbols and shared styles that allow you to reuse elements and keep them in sync. This chapter also comes with some advanced techniques, such as masks, shadows, gradients, and boolean operations. The latter are especially important, as they let you combine basic shapes to form complex objects. This is also the first touch point with plugins to enhance Sketch. To round things up, we will have a look at how easy it is to recreate an icon in the design app.

Keywords Artboard organization Image fills Symbols Customize the toolbar Aligning layers Custom shortcuts Masking Zooming Shared styles Undo and redo actions Plugins Icon creation Shadows and blurs Gradients Fill types Distribute content Boolean operations Pixel precision

4. Creating A Logo For The App

Summary In this chapter, you will not only learn how to create a logo but also how to generate ideas surrounding it. The logo creation process involves a great deal of vector manipulation. You’ll get an overview of the different point types and their specialties. Most of the time you don’t even need to create a vector from scratch, but you can manipulate a basic shape instead. Once the logo is done, we’ll also finish the details’ page.

Keywords Pages How to get inspired Types of vector points Vector point mode Create custom vectors Manipulate text Kerning and tracking Scale layers Layer management

5. Creating The Overview Page

Summary Now that we have a detail page and an overview page, let’s introduce a new options bar that contains a couple of different icons. We’ll create those icons all by ourselves, as this is the perfect way to apply all the skills you have already learned, such as nested symbols and the usage of rotation. Furthermore, you will also learn how to create the list of places to visit a card view.

Keywords Nested symbols Advanced icon creation Layer styles Black is never black Rotations Transformations Duplicate content Rulers and guides Pasting Design with real data (featuring the Craft plugin) Create color variations

6. Exporting

Summary This chapter is all about one of the strongest features of Sketch: exporting assets. When doing the setup right, all you need to do to export all your different assets is press a button. We’ll walk you through a set of iOS and Android assets and you’ll learn how to preview your designs on real devices and how to make your design workflow more developer-friendly.

Keywords Exporting options File formats Save space Multiple export Exporting iOS and Android assets Device preview Collaboration What about Windows? Printing Alternatives Prototyping tools

7. Design The Article Page

Summary We’ll focus on how to work with grids and layouts and how to lay out the content in an ordered manner. While dealing with lots of text and images, we’ll also look at how to sync paragraph and character styles.

Keywords Grids and layouts Baseline grid Text and borders Adding content with the Craft plugin Choosing font sizes Text options Tracking kerning and ligatures The optimal reading experience Add a drop cap Images Image manipulation Text styles Maximize available space Blending modes Duplicate content with Craft Nested symbols Layer order

8. Going Responsive

Summary In this chapter, we look at a few different screen widths to figure out how any possible adaptations might look. Sketch will help us define how those elements react when they are being resized. With a little preparation, you just need to adapt the parent container and everything changes accordingly. Finally, this chapter will provide some important tips and tricks on how to best adapt the font sizes from one breakpoint to another.

Keywords Designing with constraints (group resizing) Responsive grid How to go from one breakpoint to another Adapt content with Craft

9. The Final Breakpoint: Desktop Widescreen

Summary After we’ve finished the first two breakpoints, we’ll look at how the available information can be arranged on a widescreen display. Therefore, we’ll adjust the grid and adapt most of the article elements to this new grid.

Keywords Designing with constraints (group resizing) Responsive grid How to go from one breakpoint to another Adapt content with Craft Make the app responsive

10. Designing The Category Icons

Summary We’ll create four different icons to reuse them as often as possible and to combine them into complex shapes with boolean operations. We’ll use keyboard shortcuts whenever possible. Also, we’ll learn how to use these icons with a grid.

Keywords Advanced icon creation Icon creation workflow Grids Pixel perfection Efficiency with keyboard shortcuts Vector manipulation Boolean operations Pixel preview Layer duplication

11. Export The Category Icons

Summary The category icons are finished, but the work isn’t done yet. This chapter focuses on their optimization. These optimizations include adapting to borders wherever possible to keep the file size down when exporting these assets.

Keywords Icon export workflow Which format to choose: SVG or PNG Optimize icons for small file size

12. Mini-Projects

Summary In this course we will recap some of the topics we already have touched, but in a less formal way. Consider these as “design snacks” of sorts: fun projects that let you play around in Sketch. You will learn how to create a realistic clock, five different versions of pie charts, textured type, a round progress bar, and some logos. If you are already an intermediate user of Sketch, this is the chapter for you.

Keywords Create a realistic clock Create textured type Create pie charts (five different methods) Create a round progress bar Create some logos Advanced shadows Multiple borders and gradients Rotations Rotate copies Masks Image and pattern fills Blending modes Advanced vector manipulation Advanced border options Text on a path Create branding assets How to account for missing fonts

Technical Details

  • 376 pages, 17 × 24 cm (6.5 × 9.5 inches),
  • ISBN: 978-3-945749-47-0 (print),
  • Quality hardcover with stitched binding and a ribbon page marker,
  • The eBook is available in PDF, EPUB, and Amazon Kindle formats.
  • Free worldwide airmail shipping97805744 from Germany.
  • Available as printed, gorgeous hardcover45 and eBook46.

Who Is The Book For?

This book is for everybody who is designing for the web today. If you’ve used tools like Photoshop or Illustrator before and want to try out something that’s more geared towards interface design, take a close look at the book. Intermediate Sketch users will get valuable tips and tricks that they (probably!) didn’t know yet too, of course. Among other things, you will learn:

  1. How to style elements and text layers, change their properties and organize them properly,
  2. How to use artboards to evolve a design and iterate on ideas quickly,
  3. How to apply symbols and shared styles that allow you to reuse elements and keep them in sync,
  4. How to combine basic shapes into complex objects and optimize for maintenance,
  5. Advanced techniques such as dealing with masks, shadows, gradients and rotations,
  6. How to use an 8-pixel grid to bring more structure to designs and avoid random placement of elements,
  7. To work with grids and layouts and how to lay out the content in a structured, systematic way,
  8. How to efficiently design logos and icons in Sketch,
  9. How to export your assets and preview your designs on actual devices,
  10. How to use Sketch not only for digital design, but also for print projects,
  11. Tips and tricks for responsive design workflow with Sketch and adapting a mock-up from one breakpoint to another,
  12. How to define how elements react when they are resized with group resizing,
  13. The workarounds you can use when working together with developers on Windows.

Testimonials From Our Readers

  • “I have been using Sketch for a while but wanted this to understand the software at a more foundational level rather than just diving head first into it. The book is organized in a manner that it is simple at the beginning and gets more complex as you progress. The writing is crisp, clear and the author does well what he set out to do – impart his Sketch knowledge to folks who want to know more about it. I highly recommend it for people who want a great foundation and an effective bunch of lessons. ”
    — Justin Watts
  • “At first look I can see I’m going to get heaps of value from The Sketch Handbook. Already picked up some tips just by skim reading. I ordered the hardcover as a reference book for the studio. Can’t wait to get deeper into Sketch. Christian obviously knows his stuff! ”
    — Simon Uxer
The Sketch Handbook is now available, shipping worldwide47


Get the book48

Print Hardcover + eBook.
Free shipping worldwide.

Inclusive Design Patterns (October 2016)

Accessibility has always been a slightly unsettling realm for web developers. Surrounded with myths, misunderstandings and contradicting best practices, it used to be a domain for a small group of experts who would “add” accessibility on top of the finished product. Today, in many simple and complex websites, it’s still unclear what makes up an accessible interface and what developers need to know to get there.

The book doesn’t cover the code alone, but also the process for inclusive prototyping, to get things right from the very start. CSS may be the way the interface looks and JavaScript may be how it behaves, but HTML is the interface. Get the eBook right away!49

So let’s get to the bottom of it all: accessibility myths and rules of thumbs, WAI-ARIA roles, content accessibility guidelines, landmark roles, keyboard and touch accessibility, accessible markup and interaction patterns, accessible forms and widgets, multimedia accessibility and inclusive prototyping. Everything you need to know about accessibility gathered in one practical, smashing book, fully dedicated to building and designing accessible user interfaces.

Written by Heydon Pickering5550, the book comes with dozens of practical examples of accessible interface components and inclusive design workflow, applicable to your work right away. With this book, you’ll know exactly how to keep interfaces accessible from the very start, and how to design and build inclusive websites without hassle and unnecessary code.

Why An Accessibility Book?

We make inaccessible and unusable websites and apps all the time, but it’s not for lack of skill or talent. It’s just a case of doing things the wrong way. We try to build the best experiences we can, but we only make them for ourselves and people like us. We’ve got to fix this for good.

That’s why we set out with Heydon to work on a new accessibility book. The result, the Inclusive Design Patterns book looks at common accessible interface patterns from the perspective of an inclusive designer—someone trained in building experiences that cater to the huge diversity of abilities, preferences and circumstances out there.

There’s no such thing as an ‘average’ user, but there is such a thing as an average developer. This book will take you from average to expert in the area that matters the most: making things more readable and more usable to more people.

Pre-release: Inclusive Design Patterns written by Heydon Pickering51


Get the book52

Hardcover + eBook. Available now.
Free shipping included.



PDF, ePUB, Amazon Kindle.
Now available.

About The Book

Many web design articles and books are all about improving your workflow and making your life easier as a developer. Should you wish to adopt a framework or employ a processor to speed up your development process, be our guest. However, this book is not about you; it’s about your audience.

The Inclusive Design Patterns book covers all the techniques, gotchas and strategies you need to be aware of when building accessible, inclusive interfaces. We’ll explore the document outline, external links and “skip” links, navigation regions and landmarks, labelling and alternative text for illustrations, buttons, tables of contents, JavaScript patterns, touch targets, filter widgets and infinite scrolling and “load more” button and grid display and dynamic content and tab interfaces and password validation and web forms and error messages — and pretty much anything else you need to know about accessibility, including how to prototype with inclusivity in mind, how to deal with legacy browsers and dozens of practical snippets to use when building inclusive interfaces.

An Illustration of Inclusive Design Patterns, about Date Pickers54
The illustrations inside the book and the cover itself were crafted by Heydon Pickering5550. (View large version56)

What’s in it for you? You can take away Heydon’s lessons learned and apply them within any framework sufficiently flexible to allow you to write and organize good interfaces. One thing is certain: once you read the book, accessibility won’t appear difficult nor confusing any longer — you’ll know exactly what to do, and when.

Table Of Contents

You’ve probably guessed it — the book doesn’t deal with theoretical concepts or things that are supposed to work. The book deals with practical design patterns and common interface components, and provides ready-to-use code snippets for applying to your work right away.

Table Of Contents

You’ve probably guessed it — the book doesn’t deal with theoretical concepts or things that are supposed to work. The book deals with practical design patterns and common interface components, and provides ready-to-use code snippets for applying to your work right away.


Summary We will look at an interactive element, a button, from the perspective of three types of designers. The purpose of this example is to show you how a little bit of knowledge about the medium can lead to a simpler and (therefore) more inclusive solution.

1. The Document

Summary We will look into discrete interface patterns; modules, components, widgets, conventions, whatever-you-want-to-call-thems. It would be foolhardy not to first acknowledge that each will ultimately belong to a web document. HTML pages vary dramatically in shape and size and can include any combination of patterns, but there are a handful of ‘document level’ best practices to which we should adhere. The aim here is not to go in search of the ultimate ‘boilerplate’ but to configure a parent web page to support inclusive design. nhancement

2. A Paragraph

Summary We’ll be looking at typefaces, leading, measure, justification, contrast, focus indication and more, to help you design paragraphs suited for a hugely diverse audience. We’ll also tackle specific issues for folks with limited vision, dyslexia, Irlen syndrome, low literacy and limited technical knowledge.

3. A Blog Post

Summary We’ll show how to incorporate accessible landmarks and a sound section structure to make the content more navigable and interoperable to a diversity of users and parsers. This will be bolstered by giving well-written and context independent structural as well asand context independent structural and navigational cues.

4. Navigation

Summary We’ll progressively enhance HTML’s primitives to create the inclusive means to navigate within and between web pages. We will also cover design provisions transferable to many other patterns, including logical source order and the virtue of eliminating redundancy. We will also tackle how to progressively enhance the navigation with JavaScript.

5. A Menu Button

Summary In this chapter, we’ll ensure our menu button and the content it reveals are inclusive of differing user settings, circumstances, devices, and assistive technology software.

6. Inclusive Prototyping

Summary By going straight from paper to HTML, we lay the foundations for efficient code and inclusive experiences.

7. A List Of Products

Summary In this chapter, we’ll practice our inclusive design chops. As in previous patterns, the organization and structure of content is paramount. We’ll look deeply into image accessibility, from both the perspectives of alternative text composition and performance. In catering to blind consumers, to those who cannot afford generous data contracts, and anyone accessing your content from outside your interface, this is a chance to really push the limits of inclusive design.

8. A Filter Widget

Summary We’ll explore the importance of giving users choice and control over how their content is arranged. We’ll also use some techniques to make sure our design was tolerant of dynamic and fluctuating content. Inclusive design also means a visual design which is not too strict about the nature of the content imparted to it.

9. A Registration Form

Summary This chapter will give you everything you need to develop inclusive forms. By using standard form elements, effective labeling and facilitating the correction of errors, users of all walks are able to access and contribute to your websites and apps. By keeping the form simple and avoiding irritating experiences like disappearing labels and passwords that you cannot check, we’ve made sure using the form isn’t just possible but pleasurable.

10. Test-driven Markup

Summary Test-driven development allows developers working with frequent iterations to move forward with confidence. By writing tests first, to prescribe outcomes, then creating the functionality to achieve them, you can ensure successful builds behave in a predictable and reliable fashion.

Technical Details

  • 312 pages, 14 × 21 cm (5.5 × 8.25 inches),
  • Quality hardcover with stitched binding and a ribbon page marker,
  • The eBook contains PDF, EPUB, and Kindle.
  • Free worldwide airmail shipping97805744 from Germany.
  • Available as print8158 and eBook59.

Why This Book Is For You

If you’re looking for smart accessible design patterns and strategies for building fast, flexible websites efficiently, this book is just for you. It’s a handbook with valuable, time-saving techniques that will help you avoid hacky workarounds and solve common issues effectively. You’ll learn how to:

  1. Accessibility myths and misconceptions as well as common solutions and rules of thumbs,
  2. A library of well-tested accessible HTML/CSS components that you can use right away,
  3. How to properly use WAI-ARIA roles and Content Accessibility Guidelines,
  4. How to tackle common accessibility issues in responsive design,
  5. How to deal with “skip” links and external links, as well as navigation regions and landmarks,
  6. How to keep labels, buttons, tables of contents, dynamic widgets and tabbed interfaces accessible,
  7. How to implement infinite scrolling, grid display and dynamic content accessibly,
  8. How to deal with password validation, error messages, web forms, JavaScript patterns and touch targets,
  9. How to keep an interface accessible in legacy browsers,
  10. How to prototype with accessibility in mind.
Get the new Inclusive Design Patterns Book by Heydon Pickering60


Get the book61

Hardcover + eBook. Available now.
Free shipping included.

Testimonials From Our Readers

  • “Cannot say enough good things about this book!!! Best thing I’ve read all year! Full of useful info! […]. Worth every penny! Honestly think it’s a must read for both designers and developers.”
    Tristan White62
  • “Just got @heydonworks @smashingmag book on coding accessibility. Only 2 chapters in but it already has me rethinking my approach.”
    Jay Bellew63
  • “I’m currently reading it. It’s a remarkable book. All points are well founded and applicable.”
    François Cardinaux64
  • “I’ve already used it at work!”
    Tracy MacMath 65

Frequently Asked Questions

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

Question Details
Shipping costs for my country?

There’s no shipping costs for the The Sketch Handbook or any other order with the total cost above $20 — wherever you are in the world! We ship everywhere worldwide via airmail.

We pay a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay. Also, check estimated delivery times67.

Delivery times to my country?

All books will be shipped via airmail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview68.

Is the book available as an eBook?

Yep, sure is! The book is available in PDF, ePUB and Amazon Kindle formats. You can get the eBook right away!69

What payment methods are accepted?

We accept PayPal, VISA, MasterCard and American Express. Of course, we use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. And no, we don’t store your credit card data on our servers.

Is there a money-back guarantee?

Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back with no ifs, ands, or buts!

I have a question that is not covered here.

Please leave a comment below, or get in touch with us via the contact form70 or via @SmashingSupport on Twitter71. We would love to help you in any way we can — you know that!


Smashing Book #5: Real-Life Responsive Web Design

Responsive design is a default these days, but we are all still figuring out just the right process and techniques to better craft responsive websites. That’s why we created a new book — to gather practical techniques and strategies from people who have learned how to get things done right, in actual projects with actual real-world challenges.

The Smashing Book 5: Real-life Responsive Web Design72


Get the book73

Printed, gorgeous hardcover.
Free worldwide shipping. On planet Earth.

Neatly packaged in a gorgeous hardcover, the book features practical front-end techniques and patterns from well-respected designers and developers. The book isn’t concerned with trends or short-lived workarounds — it should stand the test of time and as such, it’s focused on actual techniques used today in real-life projects. The techniques that you could apply to your websites today, too.

About the book

Smashing Book 5: Real-Life Responsive Web Design is our brand new, upcoming book with smart front-end techniques and design patterns derived from real-life responsive projects. With 13 chapters on responsive workflow, SVG, Flexbox, Web fonts, responsive images, responsive email, content strategy, debugging, performance and offline experience, this is just the book you need to master all the tricky facets and hurdles of responsive design.

Illustration of Smashing Book #5, Chapter 11, Andrew Clarke on The Way Forward74
The illustrations inside the book were crafted by Guillaume Kurkdjian75 and the cover was designed by Jessica Hische76. (View large version77)

Once again, the book is going to be quite thick, and both hardcover or digital editions (eBook in PDF, ePUB and Kindle) will be available. So if you want to get your hands on the book, you better don’t wait too long. We know it — you’ll love the book as much as we do. Free worldwide shipping.

Table Of Contents

We invited respected designers and developers who know a thing or two about responsive websites. The chapters have also been reviewed by active members of the community such as Jake Archibald, Dmitry Baranovsky—just to name a few.

Vitaly Friedman Preface


As designers and developers, we solve problems for a living. Yet, these problems are often quite tricky and complex, and the context of these problems requires us to be creative and flexible in our workflows. With responsive design, we are prompted to create scalable design systems that work well in unpredictable environments. To do that, we need to be pragmatic and find solutions that work well within given constraints. That’s why we created this book: to find techniques that have actually worked in real-life projects with real-world challenges.

Keywords design systems scalability bulletproof solutions front-end techniques real-world challenges

Daniel Mall Responsive Designer’s Workflow

Summary In practice, responsive projects usually require more time, more skills, more testing and hence more flexibility in budgets. Addings changes late delays projects immensely, and process involving designers, developers and clients is usually tiring to say the least.

In this chapter, Daniel shares insights into his responsive design workflow from projects such as TechCrunch, Entertainment Weekly and Radio Liberty, with techniques and strategies that help him get things done well, within budget and on time (most of the time), while achieving the highest level of fidelity in shortest amount of time.

Keywords responsive workflow element collage style tiles tools deliverables performance budget interface inventory sketching planning manifestos hypothesis atomic design designing in the browser Photoshop

Vitaly Friedman Responsive Design Patterns and Components

Summary So, how do we deal with complex tables when building responsive websites? What about advanced interface components? Dashboards? What about the behaviour of web forms, navigation, mega-drop down menus, filters? Can we utilize vertical media queries and portrait/landscape orientation change? In this chapter, Vitaly will provide an overview of clever practical techniques for improving UX of responsive sites, with innovative approaches to designing “responsive modules” such as mega-drop downs, tables, calendars, accordions, maps, sliders, responsive PDF and responsive iconography — and a dash of anti-patterns to avoid as well.

Keywords design patterns navigation smart front-end techniques priority+ pattern improved off-canvas lazy loading autocomplete filters responsive PDF portrait/landscape mode sliders country selector responsive iconography.

Eileen Webb Structured Content For RWD

Summary Content created by one department is never updated by the next. Services get renamed in the navigation, but are still referenced by the old name in the body text. Important information is buried in the murky depths of flowery prose.

Sounds familiar? Many issues in responsive projects aren’t related to technology, but to content: it’s either ill-formatted or priorities get lost across screen resolutions. Let’s fix it. In this chapter, Eileen shows how structured content can help refocus on what matters, and how we as designers can use the structure intelligently to provide users with information that they need, when they need it.

Keywords structured content content consistency content models structural audit editorial content content types content relationships data-driven gaps feature-driven gaps authors and editors CMS content maintenance

Sara Soueidan Mastering SVG For RWD And Beyond

Summary This chapter has hands down on everything you need to know in order to start designing and building flexible components and visual assets with SVG. Sara will take you on a journey through SVG syntax, SVG accessibility, SVG viewport and viewBox, creating and exporting SVGs, embedding SVGs, building SVG sprites, creating SVG icon systems, using SVG Data URIs, optimizing SVG for performance, SVG conditional processing, clever SVG tricks and techniques and making SVG cross-browser responsive with CSS. Yep, everything you need to know about SVG, as promised.

Keywords SVG syntax accessibility viewport viewBox exporting embedding sprites icon systems data URIs performance smart SVG techniques responsive iconography cross-browser fallbacks

Zoe M. Gillenwater Building Responsive Components With Flexbox

Summary We can use Flexbox for a while now.78 In fact, Flexbox solves a lot of CSS shortcomings and makes building responsive layouts much easier than with floats or positioning. It gives you more control over the things you care about in a responsive layout (such as order, alignment, and proportional sizes of your boxes) and lets the browser figure out the rest; the math-y stuff that computers are good at, like the exact dimensions that are needed on the boxes to perfectly fill the available space.

Zoe shares insights from her work at, showing practical Flexbox-based techniques which make responsive sites much easier to build and maintain — even without media queries.

Keywords syntax variants flex container orientation wrapping sizing boxes flex property forms with Flexbox advanced alignment magical margins reordering boxes order property Flexbox as progressive enhancement

Bram Stein Web Fonts Performance

Summary By default, web fonts block rendering, hiding content from the user. The only way to make content accessible as soon as possible is by treating web fonts as a progressive enhancement. This doesn’t mean web font performance is not an issue. You still need to load web fonts as quickly as possible so that users experience your site exactly how you designed and built it. Let’s fix this.

In this chapter, Bram shares insights that he has learned from working at Typekit, covering web fonts and formats, font loading and font rendering, CSS Font Loading API, fallback fonts, caching, compression, inlining, subsetting and font loading strategies.

Keywords font formats font loading font-rendering FOIT and FOUT Font Loading API fallback fonts inlining fonts simulating swapping promises asynchronous loading and caching prioritized loading

Yoav Weiss Using Responsive Images, Today

Summary So you want to serve different images to different screens. Perhaps a Retina image (only) to Retina screens, or an art-directed image to small screens, or a portrait image for portrait orientation, or perhaps .webp to browsers supporting the format — without performance hits. Since images are the heaviest assets on the web, dealing with them intelligently is both our responsibility and opportunity for more dynamic layouts. That’s what native responsive images are for.

In this chapter, Yoav discusses the different responsive images use cases and how we can use the native solution today to create performant responsive websites. We will also look at ways to make these solutions easier to deploy and maintain in real projects, with Picturefill and CMS plugins for Drupal and WordPress.

Keywords CSS pixel and DPR Retina displays fixed-width images variable-width images srcset and sizes art direction <picture> element separation of concerns image format fallback accessibility background images image optimization WebP and JPEG-XR compressive images deployment common pitfalls

Fabio Carneiro The Dark Side Of Responsive HTML Email

Summary Explaining responsive HTML email is always an uphill battle, because just about every single designer and developer hates it. But there’s a lot of great, forward-looking innovation going on in the email design world. In fact, melding of responsive design techniques is absolutely possible.

In this chapter, Fabio, the technical email maestro from Mailchimp, explores what you can achieve with media queries in responsive HTML email to ensure that your emails look just fine on major email clients across different devices, and looks even better in clients that do not support media queries (such as Gmail).

Keywords email landscape CSS in email market share navigation and CTA buttons foundational markup reset and client-specific CSS fluid containers pattern-based development layout techniques Microsoft Outlook Windows Live Mail Apple Mail Mozilla Thunderbird Yahoo! Mail AOL iOS Mail Gmail

Tom Maslen Testing, Maintaining And Debugging RWD

Summary We talk a lot about designing and building responsive websites, but not so much about maintaining and testing them. Speaking from his experience at BBC, Tom has built up a way of working that minimizes the pain points that responsive web design has.

The chapter shows how you can build future-friendly CSS that will scale up to support large responsive websites; get you to take testing seriously, but not overcomplicate your workflow; and finally, how to sanely prioritize and debug common problems (layout, images, complex UI components like tables) in all kinds of devices and browsers.

Keywords “cutting the mustard” predictable, simple CSS naming conventions BEM and class names Sass organization debugging media queries lazy loading content-out media queries separation of concerns exploratory testing functional testing visual regression testing automated testing dealing with false positives common dependencies troubleshooting bugs on mobile

Andrew Clarke Counting Stars: Creativity Over Predictability In RWD

Summary Our responsive designs lack soul. You can think of many websites that are well presented, easy to use, triumphs of UX and technically competent, but few that might be remembered for years to come. Why do you think this is? Why are so few websites memorable? Could the design processes we’ve come to rely on, particularly in relation to responsive design, have hindered our creativity? Our modern web design magazines are full of advice about process, techniques and tools, but little about creativity, about humanity, or about ideas.

In this chapter, Andrew takes a closer look at how we can combine creativity with predictable design systems to create unpredictable, dynamic and memorable responsive websites — with a framework and a mindset that will challenge you to think differently about crafting websites today.

Keywords advertising user experience design creative hijinks allergic to research process and predictability building blocks of creativity intoxicated by process platform for creativity creative brief line between control and chaos buying creativity copywriting creative teams creative direction

John Allsopp, Matt Gaunt Beyond Responsive: Optimizing For Offline

Summary What if we told you that as a user, you don’t have to be online to use the web, and a website or a web application would respond to this accordingly? Think Offline First79: “We can’t keep building apps with the desktop mindset of permanent, fast connectivity, where a temporary disconnection or slow service is regarded as a problem and communicated as an error.”

John and Matt cover main technologies and practices that you’ll need to use to make your apps work as well offline, as they do online. We’ll discuss how to detect if we are online or not, HTML5 Application Cache, WebStorage and offline events, but most importantly Service Workers and how we can use them today to not only make content available offline, but also significantly improve performance and create snappy, fast experiences in (almost) no time.

Keywords navigator.onLine online and offline events HTML5 Application Cache cache manifest fallbacks AppCache gotchas Web Storage localStorage Service Workers

Ben Callahan Efficient Responsive Process With Clients

Summary Design deliverable is one thing, an efficient collaboration between teams and stakeholders is a different beast entirely. This chapter provides strategies for keeping this collaboration sane and focused.

You’ll learn how to build a good and efficient team, how to establish good pricing/time estimates for responsive projects, how to establish priorities with content priority guides and how to shift away from linear handoffs with multidisciplinary teams. A detailed chapter on getting things done, with clients, the proper way.

Keywords collaboration estimates spiraling “one-deliverable” workflow efficiency content priority guide style comparisons testing the aggregate content prototype wireframes style prototypes pattern libraries happy teams

Vitaly Friedman Performance Optimization Roadmap

Summary If somebody tells you that responsive websites are bloated, heavy and slow by default, and that it’s very difficult to make them fast, don’t believe them — they are liars. If you set the priorities right and build the website with progressive enhancement in mind, you can create extremely fast responsive websites that work well across devices: with one code base working everywhere.

In this chapter, yours truly will be sharing what we’ve learned over the last year about the performance challenges of this very website and about the work we’ve done in-house in big and small companies. If you want to craft a fast responsive website, you might find a few interesting nuggets worth considering.

Keywords mobile first jQuery dependence dealing with IE8 advertising refactoring code inventory front-end optimization performance budget SpeedIndex deferring web fonts critical CSS smart font fallback dealing with JavaScript asynchronous loading SPDY/HTTP 2.0 core content/functionality priority lists responsive images

Please note that Ben Callahan’s chapter and Vitaly Friedman’s “Performance Optimization Roadmap” chapter are only included in the eBook edition of Smashing Book 5, not in the hardcover.

Technical Details

  • 584 pages, 16.5 × 24.0 cm (6.5 × 9.5 inches),
  • Quality hardcover with stitched binding and a ribbon page marker,
  • The eBook contains PDF, EPUB, and Kindle.
  • Free worldwide airmail shipping97805744 from Germany.
  • Available as print8158 or eBook82.
Get the new Smashing Book: Real-life Responsive Web Design


Get the book83

Printed, gorgeous hardcover.
Free airmail shipping worldwide.



PDF, ePUB, Amazon Kindle.

Digital Adaptation

Nothing is more frustrating than stubborn management entangled in dated workflows and inefficient processes. That’s why we created Digital Adaptation, a new practical book on how to help senior management understand the Web and adapt the business, culture, team structure and workflows accordingly. No fluff, no theory — just techniques and strategies that worked in practice, and showed results.

Digital Adaptation, a new Smashing Book by Paul Boag85


Get the book86

Printed, gorgeous hardcover.

The book will help traditional businesses and organizations to overcome their legacy, and help you plant the seeds of change with very little power. If you do want to finally see changes happening, this is the book to grab.

Written by Paul Boag. Designed and illustrated by Veerle Pieters. 176 pages. The books are shipping now. Get the book now.87

Digital Adaptation, a Look Inside88
A look inside the book. Large view.89

Why This Book Is For You

If you’ve got enough of your co-workers not understanding the Web, Digital Adaptation is just what you need — ideas and concepts that you can put in front of senior management to make real changes. You’ll learn to:

  1. Tackle bureaucracy and overcome legacy culture,
  2. Develop a flexible and effective digital strategy,
  3. Use responsibility matrix to minimize delays and costs,
  4. Adopt a digital culture and become digital by default,
  5. Apply techniques from mid-sized and large organizations,
  6. Avoid toxic practices and improve internal processes,
  7. Organize teams and boost their efficiency,
  8. Embrace social media and use them effectively,
  9. Understand the value of digital team and invest in them,
  10. Break down the walls and nourish collaboration, ownership and innovation.
Digital Adaptation, a Look Inside90
A look inside the book. Large view.91
One of the book's many illustrations by Veerle Pieters.92
One of the book’s many illustrations by Veerle Pieters.



PDF, ePUB, Amazon Kindle.

Table Of Contents

Foreword A Message for Web Professionals

Summary The foreword introduces the purpose of the book and explains why we decided to choose you as the audience for it. In fact, the book is written primarily for you as web professionals. A book you can quote to senior management and make real, lasting changes in your organization. Your job is to take the concepts covered in this book and put them in front of senior management.

Keywords audience strategy video.

Chapter 1 The Digital Divide

Summary The core problem with digital, faced by many large organizations, is that they were formed before the web as we know it today existed. Their systems, processes, and (in many cases) people are not configured to support it. In this chapter, Paul discusses warning signs of digital incompatibility in your company, organizational and cultural barriers and changes that the new digital landscape has brought. This is a chapter of how most organizations struggle with their digital strategy and what you have to know to avoid the problems in a long run.

Keywords pre-web organizations legacy systems digital incompatibility structure fragmented web presence culture customer needs shifting digital landscape digital strategy.

Chapter 2 Setting Your Digital Direction

Summary As Richard Rumelt said, “good strategy works by focusing energy and resources on one or a very few pivotal objectives whose accomplishment will lead to a cascade of favorable outcomes.” In this chapter, you’ll learn how to select the right digital direction and how to deal with prioritization paralysis. Backed up by case studies and real-world examples, you’ll also learn how to form a digital strategy and how to use guiding principles, digital policies, and a responsibility matrix to complement the strategy. The chapter also explains how reorganizing teams and processes will help tackle dated, inefficient departmental structures.

Keywords business objectives digital team defining priorities problem diagnosis guiding principles web steering committees responsibility assignment matrix digital policy remote work.

Chapter 3 Adopting A Digital Culture

Summary Forming a digital strategy is one thing, but making it work requires changes in the digital culture. This chapter discusses main components of a digital culture, including collaboration, agile development, digital by default, innovation and service-oriented culture. The web can’t be neatly separated from the rest of organization; what’s necessary is a single organizational strategy that is heavily influenced by online. This chapter explains just how such a strategy can be established in practice.

Keywords redesign digital by default aspects of digital Business Model Canvas innovation and failure service culture user testing customer engagement.

Chapter 4 Digital Teams: Agents of Change

Summary There are various ways in which digital teams can be organised, but some approaches are more effective than others. This chapter discusses how to build an effective team and what role it should have, as well as how to find a good digital lead and attract and retain appropriate digital staff. Sometimes the digital team can feel like a Ping-Pong ball that ricochets around the organization—you are never quite sure where it will end up. This chapter explains the place, the position and the working environment of an effective digital team.

Keywords team structure roles and responsibilities digital leads attracting good staff light leadership working environment skills, not roles hiring digital workers.

Chapter 5 Digital Demands Another Way Of Working

Summary There is no shortage of big digital failures, from the London Olympics website to the website. The costs are staggering and the impacts devastating. The more complex and ambitious a digital project, the more traditional management approaches will struggle to scale. This chapter explores why digital projects fail and how you can minimize the risk of this happening by identifying and prioritizing user needs and involving the entire digital team in the conversation. Of course, this would work best within an iterative and collaborative context in which failure, prototyping and experimentation are deeply rooted within the digital culture.

Keywords failures the boom-bust cycle usability testing user needs prototyping iterative, incremental process.

Chapter 6 Grassroots Change

Summary Anybody can instigate change. As somebody working at the grassroots level of your organization’s digital strategy, you are a key catalyst of change. That work begins in your own team. You can plant the seeds of change by establishing good team-working relationships and atmosphere, enforcing good working practices, building bridges with colleagues and educating them, approaching management strategically, and being disruptive. If you don’t take action to change it, nobody else will. But if you do take action, there is a real opportunity to make your work more enjoyable and to have a real impact on your company.

Keywords down-top change transforming a team wartime mentality work environment work practices convincing management SWOT analysis disruption.

About The Author

Paul Boag94

Paul Boag95 is quite a character. With over 35 articles published on Smashing Magazine, he is not really an author that requires an introduction. Paul has been working on the web since 1994. He is web strategist at Headscape Ltd, a web design agency that he co-founded back in 2002. Paul also produces and hosts the longest-running web design podcast at boagworld.com96. He is a regular speaker at conferences and author of Client-Centric Web Design.

Technical Details

  • 176 pages, 16.5 × 24.0 cm (6.5 × 9.5 inches).
  • Quality hardcover with stitched binding and a ribbon page marker.
  • The eBook contains PDF, EPUB, and Kindle.
  • Free worldwide airmail shipping97805744 from Germany.
  • ISBN: 978-3-94454064-1.

Thank You!

We take pride in the time and efforts we put into creating our Smashing Books. We sincerely appreciate your support and trust — without you, we wouldn’t be able to release the books, and you should know that.


  1. 1 #design-systems
  2. 2 #white-hat
  3. 3 #ux-revolution
  4. 4 #sketch-handbook
  5. 5 #inclusive-design-patterns
  6. 6 #smashing-book-5
  7. 7 #digital-adaptation
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51 #
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72 /wp-content/uploads/2013/04/Smashing-Book-5-1200px1.jpg
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85 /wp-content/uploads/2014/02/mailing-image-Digital-Adaptation-standing-hardcover-v5-opt1.png
  86. 86
  87. 87
  88. 88 /wp-content/uploads/2014/03/Digital-Adaptation-large-preview-1.jpg
  89. 89 /wp-content/uploads/2014/03/Digital-Adaptation-large-preview-1.jpg
  90. 90 /wp-content/uploads/2014/03/Digital-Adaptation-large-preview-2.jpg
  91. 91 /wp-content/uploads/2014/03/Digital-Adaptation-large-preview-2.jpg
  92. 92 /wp-content/uploads/2014/03/Digital-Adaptation-9b-1000px-opt.png
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    did the book exist in french?

  2. 3


    I want to get the ebooks printed. I preffer to have physical books than ebooks (there is no ebooks with electronic ink in color).


  3. 4

    What sections of 1 should we avoid to read as ‘outdated’ information compared to 2 & 3?

  4. 5

    I found this book into amazon website, but not into Is it a smashing magazine book?

  5. 6

    Did the book has a Chinese version?

  6. 7

    Where are the Smashing series books published by Wiley & Sons?

  7. 8

    Hi, I want to order some books for our front end developer (he takes care of the likes of UI, CSS, HTML, Javascript, jQuery etc )

    can you kindly recommend what I should order?

  8. 9

    Smashing Support

    December 12, 2012 3:29 pm

    Hi Sam,
    please contact us via email to orders[at] – Thanks

  9. 10

    You have books in spanish?

    • 11

      Smashing Support

      December 14, 2012 7:42 pm

      Hi Roberto, Thank you for your interest. Unfortunately we do not have books in Spanish, sorry.

  10. 12

    Oğuz Çelikdemir

    January 28, 2013 11:40 pm

    Dear Smashing book writers,

    why don’t you use “Highlight” code converter to be able colorizing your code snippets that available in the books? Highlight supporting Microsoft Office Word as well as many programming languages.

  11. 13

    Smashing Support

    January 31, 2013 3:23 pm

    Dear Oğuz,

    Thank you for your feedback! I have forwarded your suggestion to the Smashing eBook team!


  12. 14

    I wish more of your ebooks came in at least soft cover like the CSS books, HTML books, and javascript books.

  13. 15

    I just bought ‘Smashing WordPress’, the third edition. I had borrowed the second edition from a friend until the book arrived. I am disappointed that the third edition uses a much thinner letter for the text. This makes the book a lot harder to read. Please reconsider this change, it’s awful on the eyes.

    Also, a thin serif letter is not helpful when you change from screen to book and back a lot while reading.

  14. 16

    Starving Artist

    March 21, 2013 3:17 pm

    Just so you know, when the browser window is scaled very large, the images of the books (above the price listing) adapt normally to a point, but then start to get stretched horizontally and not vertically. I am running Safari on a 27″ screen.

    • 17

      Iris Lj. (@smash_it_on)

      March 25, 2013 3:36 pm

      Thank you for reporting this issue — should be *stretching* normally now! :o)

  15. 18

    The worldwide shipping is not included Vietnamese. Can somebody tell me how to buy these books? I prefer printed books than ebooks. Thank you!

    from Gau Family Studio

    • 19

      Markus Seyfferth

      October 16, 2013 12:47 am

      Hi Mavis, as for worldwide shipping we do include almost all countries in the world, Vietnam as well! :)

      • 20

        Thank Markus Seyfferth,
        My friend helped me to buy one printed edition and he’ll sent it to me via postmail. It’ll take a couple of weeks. :D

  16. 21

    Dear Smashing Team,

    Before I pre-ordered the smashing book 4 that price about USD 69.90

    and that contains 2 books.

    What the differences about this new smashing book 4 have price USD 49?

    Thank you

    • 22

      Yeah I have the same question. This book 4 is different from the one I pre-ordered. Why is there two different variations?

    • 23

      I have the exact same question. I paid for 2 volumes on August 2, 2013:
      – Smashing Book #4 – New Perspectives on Coding (printed + eBook)
      – Smashing Book #4 – New Perspectives on Design (printed + eBook)

      With shipping and handling to the U.S., the total price was $79.60 ($34.90 each, $9.80 total shipping). This volume, which seems to contain the content of both books, is $53.90 ($49, $4.90 shipping).

      Did I throw away $25.70 by being an early adopter, or should I expect a refund for that amount?

      • 24

        Vitaly Friedman

        November 21, 2013 9:14 pm

        Dear friends,

        We sent out a mailing to all readers who pre-ordered the Smashing Book #4 a couple of months ago:

        We kindly ask you to get back to us to get a refund or a voucher for your next purchase. Of course, you can also cancel your purchase any time. Please drop us an email at orders@smashingmagazine[dot[.com and we’ll get back to you right away.

        Also, you have received an email from me just now.

        • 25

          The email seems to have missed me (I checked spam and inbox) but Vitaly speaks the truth; he did send me an email directly, and quickly, and has offered either a refund of the difference, or a voucher. Kudos to him for reaching out to me personally to address this.

  17. 26

    Hi, when would the book #4 start shipping to pre-ordered customers? Thanks.

    • 27

      Markus Seyfferth

      November 5, 2013 5:47 pm

      Hi Julie, the books will be dispatched on Nov. 26, and pre-orderers will be handled with priority, of course. We sincerely thank you for your support, Julie! Please feel free to reach out if you have any questions! :)

  18. 28

    When will this be available in the smashing library?

  19. 30

    Do you ship guys in Philippines ? If yes, is there additional fee for this book ?
    Many Thanks :)

  20. 32

    Prateek Bhatnagar

    November 19, 2013 6:56 am

    When will vol 4 be a part of “The Smashing Anthology”???

    • 33

      Markus Seyfferth

      November 27, 2013 9:27 pm

      We will bring the new Anthology online within a few days. Will keep you posted on this (perhaps you have already subscribed to our Newsletter? ;)

  21. 34

    Hi guys,
    I don’t see if there is a possibility to buy the Book #4 – eBook only?

  22. 36

    I wish I could just order all the printed books in one shot… please email me if there is a way to do this!

    • 37

      Markus Seyfferth

      November 27, 2013 9:22 pm

      Hi Ahmed, you might want to consider to subscribe into our newsletter (see in the sidebar above). We will enable this all-printed-books-at-once-option on Friday at latest and keep you posted by mail, once it has gone live. :)

  23. 39

    I always preorder and it is crazy that we actually have to email Smashing to get a refund. I did receive a Paypal payment for the difference, only Smashing did not send it as a refund, they sent it as a Paypal payment, which cost me 73 cents. So if you ask for a refund, be sure to tell them to send it as a refund, don’t let them short-change you. Also, apparently there was no perk for preordering. In the past they gave a discount when you preorder. Whats with that? I love your materials Smashing, but when it comes to the books, you tend to over promise and never delivery on time.

    • 40

      Markus Seyfferth

      December 4, 2013 4:41 pm

      Sorry for the inconvenience, Chad, your 73 cents should have been arrived in the meanwhile. :)

  24. 41

    Thanks Markus, you guys are very fast in customer service. I’ve already been refunded the last of my change/cents ;)

  25. 42

    I just received the printing book and I am really disappointed. Here is why :

    – It arrived with almost one month late (i preordered in august)
    – I tryied to help finance by preordering the book : “New perspective on design” but it became “new perspective on webdesign” which is not the same. It could be interesting to me since I am a designer but 75%+ of the book concerns technical aspects and development. So i preordered a book on Design and finally it’s a book on technical aspects of webdesign…

    I am realy so disappointed. If you’re a designer I don’t think this book will be really valuable to you. On the other end if development interests you, go buy it.

    The book’s title should have been “New perspectives for WebDeveloppers”…

  26. 43

    Markus Seyfferth

    December 10, 2013 4:28 pm

    Hi Vincent, sorry to hear that. We’ve started to dispatch all books at the end of November, so the delivery took only a few business days. In case you aren’t satisfied, there’s a money-back guarantee — no strings attached. You may want to contact orders at for more information. Thanks. :-)

  27. 44

    It was great knowing all that creative ideas. Thank you.

  28. 45

    Just a friendly hint: Making the Smashing Book #3 sample a (or multiple) PDFs instead of a ZIP would allow me to view it on my iPad as well. Cause iPad says “No no no!” to evil ZIP files.

    • 46

      Markus Seyfferth

      February 14, 2014 1:34 pm

      Thanks for the note, Kevin. I’ve updated the preview files of both Smashing Books 3 & 4 to PDF formats. :)

  29. 47

    Dear Marketing people,

    You need a third option – buying the book in print only. The thinking is that it will prompt more people to buy the print and ebook combo. I read that somewhere.


  30. 49

    Just purchased the Print + eBook.

  31. 50

    I found the book to be very good – and I learned a lot from it. However, it suffers from a really poor edit. There are paragraphs repeated all around the place, and it’s pretty frustrating. Are you guys thinking of releasing a revised version?

  32. 52

    Hey, It appears as the add to cart buttons are not work.
    Being sent to a 502 Bad Gateway.

    • 53

      Yep, I’ve been getting the same issue for the past 2 days. I hope they are fixed soon—trying to purchase some books!

      • 54

        Vitaly Friedman

        March 28, 2014 5:56 pm

        Please try again — the servers had some issues! Sorry about that, Joanne and Eric!

  33. 55

    I still seem to be having issues with the “get the bundle” button – trying to purchase the Smashing Anthology set of books.
    Any other way of purchasing? Would like to get them ASAP.

  34. 57

    Yep, I’ve been getting the same issue for the past 2 days. I hope they are fixed soon—trying to purchase some books.

  35. 58


    April 29, 2014 11:51 pm


    I want to buy some of your book SB 4 + The Mobile Book + DIGITAL ADAPTATION + Mobile Web Handbook and i can’t.

    I am from morocco and i’ve already bought SB 3 + Extension 3 1/3 and i’ve received them… I’ve tried de buy the smashing cat and i couldn’t.

    So please : do you have a solution this so i can buy the books that i mentioned ?

    Thanks for all,
    Adil F

  36. 59


    I am from India. I had ordered Smashing book 4 on 15th September. I have received the bill in pdf format. The estimated time to deliver the book is 10 to 12 days. I have not received the book yet. Is there any provision to track my order. Kindly help.



  37. 62

    I still seem to be having issues with the “get the bundle” button – trying to purchase the Smashing Anthology set of books.
    Any other way of purchasing? Would like to get them ASAP.

    • 63

      Hi there,

      Unfortunately, we do not have any more Smashing Books #2 in stock, but do have all the other books for sale, as part of the anthology set. Please don’t hesitate to contact our Support Team at orders [at] smashingmagazine [dot] com so they can help you right away! Cheers! :)

  38. 64

    Do you guys ships to India?

  39. 66

    Kasun Siriwardana

    January 12, 2015 7:58 am

    Hi, I’m Kasun from Sri Lanka.. I am a photographer and a editor. So I want to know what book should i buy for create HDR images.. please reply.. Thank you ..


  40. 67


    I’m curious, what were the titles of Smashing Book #1 and #2? (I’m assuming that there is a #1 and #2 based on the fact that there is a #3 and #4). Are #1 and #2 available for sale?

    Thanks for your help!


  41. 69

    John Grayson

    March 24, 2015 4:34 pm

    is this where I need to post to have my name in the Smashing Book 5: Real-Life Responsive Web Design book?

    if so: John Grayson

  42. 70

    Nicholas Beaty

    March 24, 2015 4:53 pm

    If this is where we need to leave our names for the printing of book #5, here’s mine! Can’t wait to preorder!

    Name: Nicholas Beaty

  43. 71

    I would love a copy of book #5 please!

  44. 72

    Bill Kornick

    March 24, 2015 5:33 pm

    I own the rest of the collection; am looking forward to the latest!

  45. 73

    Christian O.

    March 24, 2015 5:54 pm

    I’m tempted to go for the Mobile Book but I’m yet to learn Responsive Design properly. Is there a tutorial that teaches Responsive Design. I know people talk a lot about using grid tools like bootstrap but I come from a from scratch HTML background and I know from that background that knowing the fundamentals of web design (HTML) continued to be using even when WYSIWG applications like Dreamweaver emerged.

    I would want to learn how to design responsively from scratch without using any Grid tool like bootstrap, and later learn how to use those tools. Is there a tutorial or book out there that cater to my need?

  46. 74

    Great, would love to have a copy!
    Kole Krstev

  47. 75

    Andrés Laplace Kellogg

    March 24, 2015 6:41 pm

    Amazing!, a must have to my collection of SM Books

    My name:
    Andrés Laplace Kellogg

  48. 76

    Smashing Book 5: Real-Life Responsive Web Design sounds awesome!

    Nancy Wu

  49. 77

    Woo hoo! Another smashing book to add to my collection, I can’t wait!

    Name: Ian Ryan Clarke

  50. 78

    Francesco Michelini

    March 24, 2015 8:39 pm

    Two copies for me, thanks!

    Name: Francesco Michelini

  51. 79

    Smashingly awesome!

  52. 80

    Sonali Agrawal

    March 25, 2015 12:46 am

    This is awesome!!!

    Name: Sonali Agrawal

  53. 81

    Yet another great book!! Thanks guys!

  54. 82

    Jorrit Diepstraten

    March 26, 2015 10:13 am

    I’m looking forward to add this book to my Smashing Books collection.

    Name: Jorrit Diepstraten

  55. 83

    Sergey Arustamov

    March 28, 2015 10:01 am

    Thank you so much, guys!

    Can’t wait to get the new Smashing Book #5!
    #4 was absolutely beautiful like all the previous parts.
    #5 without any doubts should be awesome as well!

    All the best wishes,
    Sergey Arustamov

  56. 84

    Markus Seyfferth

    March 28, 2015 5:13 pm

    Yes, we ship to Russia, too. :-)

  57. 85

    Nagaraj Chandran

    April 7, 2015 1:16 pm

    Keep up the great work!

  58. 86

    Hey! Great to hear that! When we can expect a delivery of the book ordered in preorder?

  59. 87

    Thanks for putting all these together. I’m a Graphic Artist. But really, really in love with Web Design as a dream career to combine with Graphic Design. It’s like I’ve been too busy with graphic design that I haven’t had enough time to learn web design. I will definitely buy the web design hard cover book at the end of this month.

    I hope it’s made of step-by-step instructions?

    • 88

      Markus Seyfferth

      August 10, 2015 3:56 pm

      Hi Taiwo, the book doesn’t cover the basics, instead we assume that you have some basic knowledge already.

      Here’s a review that goes through every single chapter of the book, stating:
      The chapters are arranged in an order that roughly suggests increasing complexity (or possibly the decreasing likelihood of you using the tech on a project!). Each chapter is written by an industry expert, and is technically reviewed by another expert.

  60. 89

    Janet Vasquez

    August 18, 2015 9:59 pm

    Where can I get a printed copy of The Smashing Book #4?
    I am very interested in getting it as soon as possible.

    Hope to hear back from you soon.

  61. 91

    is this book available in hindi ?

  62. 93

    It says preorder for Hardboiled Web Design: Fifth Anniversary Edition… when does this printed book come out?

    • 94

      Markus Seyfferth

      October 20, 2015 5:21 pm

      The eBook on November 10th, and the printed version end of November!

      • 95

        Henrique L. de Assis

        November 18, 2015 8:44 pm

        So the ebook was already released? But i just bought and the only thing i was able to download was the “receipt” for the pre-order.

        After all, when the ebook will be released?

  63. 96

    Hi there, is it possible to order at the same time both printed and ebook for the “Hardboiled Web Design: Fifth Anniversary Edition”?

  64. 97

    Adrienne Barnes

    November 15, 2015 10:38 am

    I have pre-ordered this book but it gives no indication that i can see of when the release date is. I have no indication in any form of when i am to expect this book.
    Can you please get in touch and let me know?

  65. 98

    If you buy the printed copy of the Hardboiled Web Design book, do you get the ebooks too?

  66. 99

    Loving the content of Harboiled, but the binding on the hard copy…. Is the cover not glued to the spine on purpose? Mine is only glued on at the back of the book, allowing the front cover to flop away from the spine.

    From the drawings on the inside of the cover, it looks like you did this on purpose, but it actually makes the book awkward to read with the cover flopping all over the place. Kind of an awkward design choice (assuming it was deliberate).

    If not deliberate, you should have a chat with your printer!

    Just wondering

    • 100

      Same here. I was wondering as well if that is intentionally.

      Furthermore, the cover looks like not properly centered and cut. The front cover flows half around the edge, the title on the spine is not in the middle and the text on the back cover seems to close to the left border and slightly skewed.

      But it’s just the cover which is lacking quality. All the inside is really good: content, printing, main binding. It’s a pleasure to read the book and I already learned a lot. That’s the most important thing. I’m still happy I ordered the book.

  67. 101

    Werner Burckard

    June 29, 2016 3:21 pm


    I have the Smashing books up to #3, will #4 be released as a printed book any time in the future?


  68. 102

    Hi! I love your books but, in my opinion, I really shouldn’t need to do a Google search to find the publication date of a book. It makes me look elsewhere for a resource. I, naturally, think you’re hiding that info because the book must be outdated. Thank you for considering my opinion.

  69. 105


    is there a possibility for “Hardboiled Web Design: Fifth Anniversary Edition” availability in ebook?


  70. 106

    Download Zapya for pc to share files and folders easily from PC to other devices

  71. 107

    Smashing Conf SF doesn’t allow me to buy a ticket for a workshop on the 16th AND a workshop on the 19th along with the conference ticket.

    Is this by design?


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top