Skip to main content Jump to list of all articles Jump to all topics

Smashing Book 4 (Nov 2013)

Written by well-respected designers and developers, the book contains lots of actionable takeaways that will help you improve your workflow. Think of it as a reliable playbook for issues that keep following you in every project.

The Smashing Cat is heading back to New York.

It’s done: our brand new Smashing Book, full of smart, time-saving tips for crafting fine websites. Neatly packed in a gorgeous hardcover, the book features practical front-end techniques from well-respected Web designers. 498 pages. Hardcover and eBook. Available today.

Get the new Smashing Book.

About The Book

The book isn’t concerned with trends or short-lived workarounds. It’s focused on the actual design process—the why of the decisions we make as we craft websites. With New Perspectives, we look into lessons learned from mid-size and large projects and explore new, uncharted territories in Web design: mainly front-end, but also back-end, responsive design, typography, psychology, customer support, and content strategy.

Written by well-respected designers and developers, the book contains lots of actionable takeaways that will help you improve your workflow. Think of it as a reliable playbook for issues that keep following you in every project. No, this book won’t change your life forever, but it will challenge you to look differently at how you build websites today. Available as print and eBook.

Why This Book Is For You

This book is for you because you’ll discover plenty of valuable, time-saving techniques that will improve your workflow right away. You’ll learn how to:

  1. Create a robust, scalable front-end,
  2. Write maintainable, futureproof code,
  3. Keep websites slim and fast,
  4. Bake performance into the workflow,
  5. Build lightweight responsive sites,
  6. Fix mobile rendering issues,
  7. Build adaptive, smart interfaces,
  8. Apply obscure back-end techniques,
  9. Design with better Web typography,
  10. Establish and maintain a content strategy,
  11. Minimize and optimize customer support,
  12. Understand how people think and decide,
  13. Sharpen a new idea and follow it through.

Not convinced yet? Alright. Let’s take a look at the table of contents.

Table Of Contents

We invited respected designers and developers who have a story to tell and experiences to share. The chapters have also been reviewed by active members of the community such as Jonathan Snook, Inayaili de León, Tim Brown and Sean Coates—just to name a few.

Vitaly FriedmanPreface

Summary • The Web is dynamic and versatile—coding techniques aren’t black and white, and so our decisions always emerge from those shady gray areas. In the preface, Vitaly argues why Web design today requires new, pragmatic, open-minded approaches and why it’s so important to look at our craft from new, unconventional perspectives.

Keywords best practices • strategy • trends • perspectives.

Harry RobertsModern CSS Architecture and Front-End

Summary • With websites getting bigger, their dev teams growing larger, and their goals becoming more tightly defined and, I dare say, more important, we need to take another look at how we actually build them. It’s no longer practical to spend days and days thoroughly hand-crafting code; a much more rapid, powerful and pragmatic approach is needed. In this chapter we are going to take a whirlwind tour of a new approach to building more powerful front-ends for the Web today.

Keywords semantics • misconceptions • Object-Oriented CSS • code structure • file organization • CSS selectors • portability • naming conventions.

Nicholas C. ZakasWriting Maintainable, Future-Friendly Code

Summary • Code is code no matter where you go, and code has a tendency to get messy as it gets large and old. Things start to break, you find it hard to figure out why bugs are occurring, and there are parts of the codebase that seem to be “magic”. On a large project with many developers, the problem is magnified. How can everyone work in the same codebase in such a way that making changes in the future are easy? That’s what this chapter seeks to answer.

Keywords code smell • conventions • code style • comments • architecture • SMACCS • documentation • design document.

Christian HeilmannThe Vanilla Web Diet

Summary • Maybe we should take a break in our drive to be cool and new and innovative the whole time, simply for the sake of being so, and check what we are doing — analyze our eating habits, so to say. I call this the Vanilla Web Diet, much like people have started to call using JavaScript without libraries vanilla JavaScript. Here are some ideas and thoughts you can bear in mind to help slim down an existing website or your next app.

Keywords legacy browsers • browser-specific code • jQuery • frameworks • consistency • conditional loading • lack of support is an opportunity.

Tim KadlecCulture of Performance

Summary • Websites are getting fatter and fatter at an alarming rate. The issue is not the competence of Web developers. The issue is also not just technological: a lot of smart optimizations are usually implemented to get the weight down. Instead, the issue is the lack of a well-established culture of performance—a total commitment to performance from the entire team that would drive and influence decisions during the project cycle. Given the incredibly important role performance plays in the user experience, this is a disastrous mistake to make.

Keywords performance • case studies • visualizing performance • performance budget • the 20% rule • testing • atomic design • perceived performance • optimistic interfaces • preloading content.

Mat MarquisRobust, Responsible, Responsive Web Design

Summary • Responsive Web design is starting to get a reputation—and not the kind of reputation that it rightfully deserves. The most common death knell we’ve heard ringing out is that every page of a responsive site is fated to weigh in at a couple dozen megabytes and there isn’t a single thing that any of us can do about it. This trend is on us, and you don’t see any carpenters writing blog posts about how hammers are a failed methodology because of the times they dropped one on their feet. We can do better than blaming our tools for our mistakes.

Keywords Responsive Web design • presumptive enhancement • progressive enhancement • accessibility • Ajax-Include pattern • conditional loading • responsive images and video.

Addy OsmaniFinding and Fixing Mobile Web Rendering Issues

Summary • While network performance is important and JavaScript execution is usually quick, many find that rendering (painting pixels to the screen) is their bottleneck. This can be a challenge as mobile devices are underpowered when compared to our desktop systems. To hit 60fps, we sometimes need to go beyond JavaScript as the sole performance bottleneck for our pages and spend more time investigating paint and layout issues. This chapter explores some of the core causes of jank in sites and applications.

Keywords performance 60fps • rendering jank • faster animations • hardware acceleration • diagnosing slow paint times • workflow • remote debugging.

Aaron GustafsonDesigning Adaptive Interfaces

Summary • Design, as a concept, is a tricky little beast. Design does not exist in a vacuum. Each step in the process of building an interface should add to the experience. In the end, independent users may have differing experiences of the interface, but no one is denied access to a good experience. To create truly exceptional designs, we must not only reduce the friction inherent in completing a task, but we should make it (dare I say it) fun! We must reconcile aesthetics with usability.

Keywords empathy • the layer cake • constraints • lazy loading • construction flows • JavaScript support • adaptive components • atomic design.

Paul TeroObscure Back-end Techniques and Terminal Secrets

Summary • You wake up one morning, look at the browser window, check the Widget 3000, click on a button and there’s nothing. What happened? Help! The Internet is gone! We’re going to cover a lot of ground in this chapter, from routers to servers, from error logs to PHP hacks. I’ll start with the worst case scenario and work inwards, exploring the infrastructure of the Internet and the make-up of a Web server, imparting lots of little tips and commands along the way, opening up a new perspective on how websites can stop working — and be fixed.

Keywords back-end techniques • networking • router • DNS • traceroute • servers • firewalls • Denial of Service • HTTP • administration • error management • PHP errors •.

Marko DugonjićThe Next Steps For Web Typography

Summary • In this chapter, we’ll cover the big picture first — with not too frightening context models and a list of actors that participate in content creation and publishing — and continue with practical details, with plenty of code examples and tips. Among other things, we’ll cover typefaces and Web typography in general, organization and performance, typesetting and advanced CSS techniques.

Keywords universal typography • multifaceted model • structured content • responsive Web typography • font delivery and distribution • rendering engines • macrotypography • combining typefaces • type library • CSS organization • fonts as progressive enhancement • subsetting • Base64 encoding • white space hierarchy • modular scales • subhead styles • advanced CSS techniques.

Corey VilhauerThe Two Faces of Content Strategy

Summary • There are two faces to content strategy: the people we’re targeting (our users), and the people who are doing the targeting (our editors). We’re responsible for making great websites. But we’re also responsible for making websites that are usable from the editor’s standpoint. We are the people who make the Web; we are also those responsible for helping those who sustain it.

Keywords editors • content workflow • content discovery • auditing • strategy • assigning roles • execution • governance • editorial triggers.

Rachel AndrewSupporting Your Product

Summary • Providing a good customer experience is really important in support. The customer may make that initial contact feeling annoyed about your product. They have an issue, and it isn’t doing what they wanted it to. Your aim should be not only to solve their problem, but to leave them feeling more positive about your product than they would if they hadn’t had the issue that brought them into support in the first place.

Keywords support as a marketing tool • feature requests • core use case • difficult customers • the end client problem • pricing models • minimizing support • tools • no FAQs policy • support statistics • social media • future-friendly support.

Nishant KotharyThe Design of People

Summary • The goal of this chapter is to introduce you to the human being as the center of every success or failure in our lives. But not in that tired way we’re all guilty of where we commiserate and vent on Twitter. Or the way where we publish blog posts about the bureaucratic deadweights that are the true bottlenecks to innovation. Let’s resist the convenient cover of insanity. Let’s stop putting more lipstick on the pig, and instead explore why the pig is so darn ugly in the first place. That is, let’s talk about the root of the problem instead of the symptoms.

Keywords psychology • communication • design reviews • the Sally-Anne test • theory of mind • cognitive bias • illusions of mind • strategy.

Christopher MurphyOn Creative Spirit

Summary • So, how do you establish an idea generation culture? How do you open the proverbial floodgates and unleash an endless supply of new and original ideas? Is it possible to adopt strategies that allow us to reliably generate meaningful ideas, which we can then execute skillfully? I believe, by adopting a simple mental framework and embracing a core set of strategies, it is.

Keywords idea-generation techniques • priming the brain • digital toolbelt • sketchbooks • strategy • centralized office • café culture • the Lego office.

If you've already ordered the book, then it's really only a matter of days until you receive it. Until then, the complimentary eBook is waiting for you in your Smashing Shop dashboard. At this very moment, all orders are being shipped from Germany by airmail. Of course you get the eBook automatically once you've ordered the printed book, so you can start reading right away.

What Reviewers Say About The Book

Still not convinced? Well, a few reviewers had the chance to read the book beforehand, and share their feedback without any strings attached. Should you get it? Let’s see:

“Smashing Book 4 provides logical, practical, real-world examples of what’s wrong with modern sites and how to fix them. [..] I want the Web to win. But to do so, Web development has to match its age and live up to the responsibility it has earned. The book takes a big step in guiding that transition for both products and people, making it a book I would very strongly recommend for everyone involved in Web development.”

— Dudley Storey, Review: Smashing Book 4

"The Smashing Book 4 is excellent value for money. [...] [It's] conference quality topics in the palm of your hand, permanently committed to paper (or the medium of your choice) ready for you to consume whenever you want. The Web has grown up and The Smashing Book 4 is the perfect field guide for making and maintaining things for a future-friendly Web." — Jordan Moore, Review: Smashing Book 4
"Currently reading a preview of Smashing Book #4. Each chapter updates you on one important area of Web development and Web design which is really useful given the hectic pace seemingly every aspect of our industry is moving at. Nice to have it all distilled in one book." — Jamie Mason
"Just reading Smashing Book 4 and I can strongly recommend it. Full of practical and useful Web design stories." — Janko Jovanovic