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
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:
- Create a robust, scalable front-end,
- Write maintainable, futureproof code,
- Keep websites slim and fast,
- Bake performance into the workflow,
- Build lightweight responsive sites,
- Fix mobile rendering issues,
- Build adaptive, smart interfaces,
- Apply obscure back-end techniques,
- Design with better Web typography,
- Establish and maintain a content strategy,
- Minimize and optimize customer support,
- Understand how people think and decide,
- Sharpen a new idea and follow it through.
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.
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|
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|
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.
|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.
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.
- 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
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.”
“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.”
“Just reading Smashing Book 4 and I can strongly recommend it. Full of practical and useful Web design stories.”
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 @smashingmag16 — 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 overview17. 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 away18.|
|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 form19 or via @SmashingSupport on Twitter20. We would love to help you in any way we can, you know that.|
- 1 #your-smashing-book
- 2 #about-the-book
- 3 #your-smashing-book
- 4 #toc
- 5 https://shop.smashingmagazine.com/delivery-times/
- 6 #your-smashing-book
- 7 https://shop.smashingmagazine.com/checkout/cart/add?product=458
- 8 http://demosthenes.info/blog/784/Review-Smashing-Book-4
- 9 http://demosthenes.info/blog/784/Review-Smashing-Book-4
- 10 http://www.jordanm.co.uk/post/68047357109/book-review-the-smashing-book-4
- 11 http://www.jordanm.co.uk/post/68047357109/book-review-the-smashing-book-4
- 12 https://twitter.com/fold_left/status/394885724245213184
- 13 https://twitter.com/fold_left/status/394885724245213184
- 14 https://twitter.com/jankowarpspeed/status/400207851521441792
- 15 https://twitter.com/jankowarpspeed/status/400207851521441792
- 16 http://www.twitter.com/smashingmag
- 17 https://shop.smashingmagazine.com/delivery-times/
- 18 https://shop.smashingmagazine.com/checkout/cart/add?product=458
- 19 http://www.smashingmagazine.com/contact/
- 20 http://www.twitter.com/SmashingSupport