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

Quick Summary

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. Available today. Get the book now.

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.

Table of Contents

Smashing Newsletter

Imagine you wrote a beautifully crafted newsletter and nobody read it. That would make any cat sad. Don't let that happen!

Smashing Job Board

Great companies are looking for people like you.

Our Sponsors

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.

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:

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.

AUTHOR

CHAPTER

DETAILS

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

"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

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 @smashingmag — 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 overview. 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.

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.