Menu Search
Jump to the content X X

Life Is Too Short For A Broken Front-End, So We Created A New Smashing Book

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 book now.1

Get the new Smashing Book.2

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.63

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 contents4.

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 Friedman Preface

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 Roberts Modern 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. Zakas Writing 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 Heilmann The 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 Kadlec Culture 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 Marquis Robust, 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 Osmani Finding 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 Gustafson Designing 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 Tero Obscure 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 Vilhauer The 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 Andrew Supporting 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 Kothary The 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 Murphy On 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.

Harry Roberts Nicholas C. Zakas Christian Heilmann Tim Kadlec Mat Marquis Addy Osmani Aaron Gustafson Paul Tero Marko Dugonjić Corey Vilhauer Rachel Andrew Nishant Kothary Christopher Murphy

From left to right: Harry Roberts, Nicholas C. Zakas, Christian Heilmann, Tim Kadlec, Mat Marquis, Addy Osmani, Aaron Gustafson, Paul Tero, Marko Dugonjić, Corey Vilhauer, Rachel Andrew, Nishant Kothary and Christopher Murphy.

Technical Details

  • 498 pages, 16.5 × 24.0 cm (6.5 × 9.5 inches).
  • A high-quality embossed cover with a little surprise,
  • Quality hardcover with stitched binding and a ribbon page marker.
  • The eBook version is included in the printed book for free (PDF, EPUB, Kindle).
  • Airmail delivery from Germany ($5 worldwide shipping, check delivery times5).
  • Available as print and eBook.63
Get the new Smashing Book.



PDF, ePUB, Amazon Kindle.

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 48

“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 49

“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 Mason10

“Just reading Smashing Book 4 and I can strongly recommend it. Full of practical and useful Web design stories.”

Janko Jovanovic11

Frequently Asked Questions

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

What are the costs for shipping to my country?
The shipping cost for one book or a bundle is $5 — wherever you are in the world. We ship everywhere worldwide. We are paying 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!
What about delivery times?
All books will be shipped via air mail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview13. We are starting to ship the books today.
Will the book be available in other languages?
Maybe in future, but we have not made arrangements for that yet, so please don’t hold your breath.
Is Smashing Book #4 available as an eBook?
Yep, sure. The book is available in PDF, ePub and Amazon Kindle formats. You can get the eBook right away14.
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—no ifs, ands or buts about it.
I have a question that is not covered here.
Please leave a comment below, or get in touch with us via the contact form15 or via @SmashingSupport on Twitter16. We would love to help you in any way we can, you know that.


  1. 1 #your-smashing-book
  2. 2 #about-the-book
  3. 3 #your-smashing-book
  4. 4 #toc
  5. 5
  6. 6 #your-smashing-book
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16

↑ 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

    I am waiting for this Book since this Summer :) Make it fast!

  2. 3

    Looks nice :)

  3. 4

    I want this!

  4. 5

    the shop URL is showing 502 Bad Gateway error.

    • 6

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      November 26, 2013 3:02 pm

      Please try again — the back-end is experiencing some minor hiccups at the moment. Should be working fine now.

      • 7

        Still getting error message when trying to order. 8:09am CST (USA).


        • 8

          Vitaly Friedman (editor-in-chief of Smashing Magazine)

          November 26, 2013 4:12 pm

          Many, many requests are being sent to the server. I am very sorry about your experience, Ron — we are doing everything possible to keep the servers online. Please try again a bit later if possible.

      • 9

        I wanted to order the book but cannot. When will the backend be fixed?

        • 10

          Vitaly Friedman (editor-in-chief of Smashing Magazine)

          November 26, 2013 10:57 pm

          The server load was massive. It should be better now though! My sincere apologies, Teresa.

  5. 11

    Rameshwar Prasad Lakhera

    November 26, 2013 2:58 pm

    I want this book.

  6. 12

    Look pretty cool but can’t seem to access the page to order it. Too much success for the server?

    • 13

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      November 26, 2013 4:13 pm

      Yes, the servers are experiencing some hiccups at the moment, but we are on it. It looks like the load is caused by the fact that everybody is downloading the eBook at the moment. With 498 pages, that’s quite a lot to download.

  7. 15

    I like this printed book with cute pictures inside and a ribbon page marker! A real book!!! I want it!

  8. 17

    I couldn’t find my twitter image there lol

    • 18

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      November 26, 2013 4:15 pm

      The space for the Twitter images wall was limited, so either unfortunately you submitted your name too late, or your avatar image contained advertising. Sorry, Klevis! :-) We’ll make it up to you ;-)

  9. 20

    Hello, this books looks great! Will it be available in the Smashing Library? It is not coming up in my account. Thanks and Regards!

    • 21

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      November 26, 2013 4:16 pm

      Yes! The book is already available in the Smashing Library. You can download it right away!

  10. 22

    I bought your Smashing Magazine #2 and I’m loving it. I will look forward to this one.

  11. 23

    Cannot wait to read this! Thank You, SM. If you were looking for the latest web design book which touches on modern website techniques, this would be it. Get a head start for 2014.

  12. 24

    Many connections to the server at the moment makes me can not order this book :I.. Please notice me when I able to order it

  13. 25

    hey guys, i tried to buy the e-book but the buy links are broken. sql errors.

  14. 26

    That`s my christmas present in advance! Reading on my Kindle while my Print copy doesn`t arrive! =DDDD

  15. 27

    Shop is unavailable at the moment. Can’t wait to buy it, looks like an excellent book!

    • 28

      Vitaly Friedman

      November 26, 2013 9:41 pm

      Sorry for the inconvenience and keeping you waiting! The server load was unexpectedly high. All servers are back and running now though!

  16. 29

    Kirryn Mountford

    November 26, 2013 9:59 pm

    Having paid for the eBook copies, my order’s stuck on pending. I’m quite eager to get reading, any ideas!?

    Edit: Just had a very prompt response from Smashing Magazine support after emailing them, all sorted.

  17. 31

    Hi Vitaly,

    I’ve completed my purchase for the print and eBook format, but when i download the ZIP it always disconnect in the middle. Are you still having server load issues? FYI, i’m downloading from Indonesia.

    • 32

      Markus Seyfferth

      November 27, 2013 5:03 am

      Thanks for purchasing the book, Tri, please try to download the files separately. Our servers are up and running so that all should be working normally (from our side). :)

  18. 33

    want to purchase book. put india on your radar. collaborate with any indian online dealer.

  19. 34

    Hi SmashingMagazine, will the PDF version have the same format as the printed version? I plan to buy the ebook version to read on my iPad, just want to make sure there is no difference with the print version (layout, text, photos, colors…)

    • 35

      Vitaly Friedman

      December 2, 2013 7:36 am

      Dear Hieu,

      The eBook is available in all formats: PDF, ePUB (for iPad), Kindle, so it should be fine. ;-) PDF is an extract from the InDesign file, so it’s almost identical with the printed copy. I hope it helps!

  20. 36

    Nice book, but too expensive.

  21. 37

    Sorry, can’t wait. Order the ebook version :)

  22. 38

    Hello, I might have got it wrong, but wasn’t the 4th book supposed to be two books (design & coding)?

  23. 40

    looks great and its content are really informative. thanks. would try to get one.

  24. 41

    Rasmus Paulsen

    November 28, 2013 1:17 pm

    Ordered the Print+eBook! Cant wait! :)

    I ordered before I even read the whole post. The single line that got me convinced was this:

    “the book isn’t concerned with trends or short-lived workarounds”


  25. 42

    Just got the book and started paging through it (pdf). Wonderful! Just wonderful! I don’t care that it was late! I just appreciate the hard work that went into it! Great job guys!!!! Congratulations!!!

  26. 44

    Delivered today…

    Thank you lots.

    This is not only full of high level content but it is magnificent.

    Wonderful job you did. Can’t wait to dive in it.


  27. 45

    Do you guys also offer a student discount on this book as you do with the previous ones?

  28. 47

    It is really smashing. Great book!

  29. 48


    January 2, 2014 12:40 pm

    Very nice book. In this book I learnt a lot of information!

  30. 49

    Great book! Thx a lot. Right now I’m readin’ this book.
    Must read.

  31. 50

    Hi guys, I need this book but we haven’t any systems of internet payments or banks using an international e commerce, please help me & tell me how to get it.
    Majed – Sudan

  32. 51

    Hi! Is there a shop/bookstore in Germany where I can buy the book, because I’m travelling to Germany tomorrow?

  33. 52

    Hi… just little question… does it have Examples or “hands-on” practices? I understand that this isn´t a tutorial, but I´m sure some chapters would thank some coding examples and exercices!!

  34. 54

    Hi, I’d like to buy the print copy. Have you deliver any book to Argentina? Do you know if it arrived? There are many restrictions for buying thing abroad, and not always arrive. Are three any extra fees?


  35. 55

    Small erratum p.125: Neilsen->Nielsen

    Great book, enjoyed Ch. 4 on performance so far!


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