Smart “responsive” workflows, effective responsive design/UX patterns and powerful front-end techniques — if you need a good book on smart responsive design, our brand new Smashing Book 5 is just what you need. Neatly packed in a gorgeous hardcover, it covers time-saving, practical techniques for crafting fast, maintainable and scalable responsive websites. 498 pages. Hardcover/eBook. Get the book and save 25% today.1
2
$29 $39
Get the book3Printed, gorgeous hardcover.
Save 25% today.4 Free shipping only today.
About The Book
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.
Just like all of our Smashing Books, the book isn’t concerned with trends or short-lived workarounds. It focuses on the actual design process — the why of the decisions we make as we craft websites. Think of it as a reliable playbook for issues that keep popping up in every responsive project — just the playbook you need to master all the tricky facets and hurdles of responsive design.
This book won’t solve every single issue in your responsive projects, but it will help you deal with common challenges effectively: be it front-end architecture, layout issues, resolution-independent assets, performance issues, responsive images or pretty much everything else related to responsive design. Shipping expected to start late May 2015. Available as print and eBook.129
Table Of Contents
We invited respected designers and developers who know a thing or two about designing and building responsive websites. The chapters have also been reviewed by active members of the community such as Jake Archibald and Dmitry Baranovsky — just to name a few.
AUTHOR
CHAPTER
DETAILS
Vitaly Friedman
Preface
Summary •
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
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
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
Susan Robertson
Architecting Style Guides
Summary • Style guides, pattern libraries, style tiles. When exactly would you want to use one, and when building one, what approach works best? In this chapter, Susan explains the process of architecting and maintaining a style guide, from building to prototyping to designing, based on the experience she has had when working on Editorially. You’ll also learn how to integrate style guides into your workflow and use them for feature development and testing design changes.
Keywords • style guides • pattern libraries • inventory • “designovelopment budget” • modular code • web app style guide • prototypes • CSS audit • maintenance • digital standards team • UX team review
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.10 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 Booking.com, 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 • Outlook.com • 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
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
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? 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
From left to right: Daniel Mall, Ben Callahan, Eileen Webb, Susan Robertson, Sara Soueidan, Zoe M. Gillenwater, Bram Stein, Yoav Weiss, Fabio Carneiro, Tom Maslen, Andrew Clarke, John Allsopp, Matt Gaunt and yours truly.
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 is included when you buy a printed book (PDF, EPUB, Kindle),
Airmail delivery from Germany (free worldwide shipping today, delivery times11),
Available as print and eBook.129
$29 $39
Print + eBook13Printed, gorgeous hardcover.
Free shipping for the next 24h.
$9.90
eBook14PDF, ePUB, Amazon Kindle.
The subscribers of the Smashing Library15 will find the eBook in their dashboard automatically once the book gets released (late May 2015). All printed books will be shipped from Germany via airmail. Please note that if you order a printed book, you’ll get the eBook once the book gets released automatically, so you can start reading right away! Yay!
Why This Book Is For You
If you’re looking for smart design patterns and strategies for building fast, flexible responsive websites efficiently, this book is just for you. It’s a responsive design handbook with valuable, time-saving techniques that will help you avoid hacky workarounds and solve common responsive issues effectively. Indeed, fifteen shades of responsive web design, if you like. You’ll learn how to:
Be efficient in your responsive workflow,
Tackle common content issues in RWD,
Architect and maintain a style guide,
Design systems with atomic design process,
Master advanced SVG techniques,
Avoid dirty hacks with smart Flexbox techniques,
Build scalable, maintainable CSS layouts,
Manage web fonts performance issues,
Implement responsive images today,
Craft responsive HTML email newsletters,
Test, maintain and debug responsive sites.
Make responsive websites fast and snappy,
Set up a bulletproof performance optimization roadmap,
Enhance your website with offline features,
Avoid generic solutions and stay creative with RWD.
1617
One of the fantastic illustrations by our “Mystery Riddle” illustrator Guillaume Kurkdjian. (Large views: chapter cover18, book layout19)
Add Your Name Into The Book!
The Smashing Book 5 is being written and will be published in the spirit of our fantastic community — written by designers and developers for people like you, designers and developers who care about their craft. This book wouldn’t exist without your kind support. That’s why, just like with our previous Smashing books, we kindly invite you to submit your name into the book20.
Just about 1,500 names will fit properly on the two dedicated pages, so please don’t wait too long. First come, first served! Please also avoid grammar mistakes or blatant advertising. Thank you again for your kind support throughout the years, our dearest readers!
Add your name21No advertising, please. Be cool.
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 @smashingmag22 — we’ll get back to you right away. Just in case: here are answers to some frequently asked questions.
Questions
Shipping costs for my country?
The shipping cost for one book (or a bundle) is $5 per delivery — 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.
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 overview23. We’ll start shipping the books around the end of May 2015.
Is Smashing Book 5 available as an eBook?
Yep, sure. The book is available in PDF, ePub and Amazon Kindle formats. You can pre-order the eBook24 and we’ll make it available in your dashboard once the book gets released (May 2015).
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 form25 or via @SmashingSupport on Twitter26. We would love to help you in any way we can — you know that!
Footnotes
1 #your-smashing-book
2 #about-the-book
3 https://shop.smashingmagazine.com/checkout/cart/add?product=745&qty=1
4 https://shop.smashingmagazine.com/checkout/cart/add?product=745&qty=1
5 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/03/ebook-ipad-counting-stars-large-view.png
6 http://guillaumekurkdjian.com/
7 http://jessicahische.is/
8 http://www.smashingmagazine.com/wp-content/uploads/2015/03/ebook-ipad-counting-stars-large-view.png
9 #your-smashing-book
10 http://caniuse.com/#search=flexbox
11 https://shop.smashingmagazine.com/delivery-times/
12 #your-smashing-book
13 https://shop.smashingmagazine.com/checkout/cart/add?product=745&qty=1
14 https://shop.smashingmagazine.com/checkout/cart/add?product=750&qty=1
15 https://shop.smashingmagazine.com/smashing-library-complete.html
16 http://www.smashingmagazine.com/wp-content/uploads/2015/03/ebook-webfonts-large-view.png
17 http://www.smashingmagazine.com/wp-content/uploads/2015/03/ebook-ipad-page-84-large-view.png
18 http://www.smashingmagazine.com/wp-content/uploads/2015/03/ebook-webfonts-large-view.png
19 http://www.smashingmagazine.com/wp-content/uploads/2015/03/ebook-ipad-page-84-large-view.png
20 https://smashingcoding.wufoo.com/forms/smashing-book-5-add-your-name-into-the-book/
21 https://smashingcoding.wufoo.com/forms/smashing-book-5-add-your-name-into-the-book/
22 http://www.twitter.com/smashingmag
23 https://shop.smashingmagazine.com/delivery-times/
24 #your-smashing-book
25 http://www.smashingmagazine.com/contact/
26 http://www.twitter.com/SmashingSupport
The post That’s Real-Life Responsive Web Design: Meet The Brand New Smashing Book 5 appeared first on Smashing Magazine.
The post That’s Real-Life Responsive Web Design: Meet The Brand New Smashing Book 5 appeared first on Cloudfusion | Premium Creative Agency.