Menu Search
Jump to the content X X

Finally: Smashing Book #5 Is Here, And It’s Hot Like Smoking Barrels.

The waiting is over. Smashing Book #51 is here, it’s smashing, and it’s shipping worldwide — in fact, all pre-orders have just been dispatched. Think of it as a reliable playbook to master all the tricky hurdles of responsive design, well-tested in real-life projects by respected designers and developers. Ah, sure, you can get the book right away.2

Smashing Book 5: Real-Life Responsive Web Design3

$39

Get the book364Printed, gorgeous hardcover.
Free worldwide shipping. On planet Earth.

$19.90

eBook375PDF, ePUB, Amazon Kindle.

About the book Link

Just like all of our Smashing Books, the book isn’t concerned with trends or short-lived workarounds. It’s focused on actual techniques used today in real-life projects. We’ve designed the book to be as practical and hands-on as possible. No fluff, just the techniques that have actually worked or failed, and why.

Every chapter stands for itself. It delivers the value you expect, but it should exceed your expectations by far, too. We designed it to stand the test of time, too; to be more than just a manual or a guide. It’s really about the bigger picture you need to make smart decisions, faster. Hardcover, 584 pages. eBook contains 2 bonus chapters. Free worldwide shipping — obviously.

On “Mastering SVG For RWD And Beyond” Link

Now, a standalone release post would be boring and predictable, so how about bringing another perspective to the magazine instead? Below you’ll find some insights about the writing process by one of the authors of the book, Sara Soueidan, who has contributed an 80-page long compendium of useful techniques, tricks and strategies for dealing with SVG. — Ed.


The new Smashing Book6 is out! It’s packed with a lot of time-saving, practical techniques for crafting fast, maintainable and scalable responsive websites. I wrote a chapter in the book — Chapter 4: Mastering SVG For Responsive Web Design. Here is a brief overview of what that chapter covers, and why I think you should get the book.

Image of the Smashing Book 5.7
The hardcover, packed with valuable advice on responsive web design. More than you might think, actually. Photo credit: Mattia Compagnucci8

A Little Background Link

Vitaly approached me about writing a chapter for the book in September 2014. I had been working with SVG extensively for a few months by then, so the ideas were all fresh in my head and so were the results of all the experimenting and learning I was doing. And if you know Vitaly, you know that it’s exactly that kind of content that captures his interest: lessons learned, practical examples and use cases, and lots and lots of tips that you can just take away and start applying to your projects.

And if you know me, you know how much I value flexibility and freedom in my work, so Vitaly gave me just that. We had a deadline, of course, and I made sure the chapter was finished before that deadline, ready to be reviewed and copyedited and proofread.

Owen Gregory9 was responsible for copyediting and proofreading the chapters. I had seen him speaking at From the Front10 before (and loved his talk), and had heard really good things about his work from other writers; he also proofreads articles published at 24 ways11 where I had also published an article12, so I was very excited to get to work with him on the chapter. Everything went extremely smoothly and, seeing that I’m not a native English speaker, I am happy to report that I did not make his job too difficult in my chapter!

Basecamp: Smashing Book 5 project13
When working on chapter, we used Basecamp for project management, Dropbox for syncing and mostly Markdown for editing. Large view.14

It took me a couple of weeks to finish the first draft of the chapter, then it was reviewed for the first time. Vitaly gave some nice feedback about where I could go into a little more detail (he is always thirsty for more knowledge), so I did. After the second review, there wasn’t much to edit anymore. I went over the chapter one more time and sent it for proofreading.

We used Basecamp15 as the communication management app. By “we” I mean Vitaly, the Smashing team, and everyone else who worked on the book. It was my first time using Basecamp and I quite liked it — it helped keep everything organized and in perspective. Knowing where everyone was in the process of writing was also quite helpful.

When I told Vitaly I wanted to write this article to introduce the SVG chapter to you, he asked me to be as critical of the entire writing process as I wanted, and mention anything I did not like about it, or even about him! But I couldn’t come up with anything, really.

The one and only criticism I have is the delay in the release date. I’m a very punctual person and when we started working on the book it was scheduled to be released in March and to start shipping in April, but it took a few months more to do that. That said, everyone who worked on the book also had a ton of other commitments and stuff to do besides writing it, so delays like this are only natural, I guess.

Illustration of Smashing Book #5, Chapter 11, Andrew Clarke on The Way Forward16
The illustrations inside the book were crafted by Guillaume Kurkdjian17 and the cover was designed by Jessica Hische18. (View large version19)

I always get questions from my followers about a good place to start learning SVG. I write about SVG a lot20, but I realize that it’s always better to have one place where you can jump-start whatever you’re learning and then take it from there. I believe the SVG chapter in the book is a great place to do just that.

Chapter 4 of Smashing Book 5 is 80 pages of SVG, covering everything you need to know to start implementing SVG in your responsive web designs today.

There is a chapter on SVG for RWD by Sara Soueidan that kind of made me feel stupid, not because of how it was written, that was great, but because it introduced me to so many new things about SVG. What the heck have I been learning all of these years?

—Paul Scrivens, “Smashing Book #5, A Review21

So, What Can You Expect To Learn About? Link

The answer to this question in my head is always a list of what is not covered in the chapter, because the topics covered include so much! Here is an overview of the contents:

Image of the Smashing Book 5, chapter 4.
Book cover was designed by Jessica Hische; chapter illustrations were designed by our Mystery Riddles illustrator Guillaume Kurkdjian. Photo credit (and thanks to): Mattia Compagnucci22
  • What is SVG?
    A brief overview of the image format and its history.
  • Vector vs. Raster
    A comparison between vector and raster image formats such as JPEG, PNG, etc., characteristics of each, and what makes the SVG format stand out.
    • Advantages of SVG
      The many, many features that make SVG a better image format for responsive web design, including: scalability and resolution-independence, performance, accessibility, animation, and more.
    • Vector vs Raster: Which is the Better Format?
      A set of guidelines and things to consider when choosing the image format for your graphic, including why and when SVG might or might not be a good choice.
  • Quick Overview of SVG Syntax and Code including the SVG viewport and viewBox.
  • Creating and Exporting SVGs in Vector Authoring Tools
    Tips, dos and don’ts for the right workflow when designing SVG images that ensure the resulting code is as optimal as possible. This section includes an overview of the export options from Adobe Illustrator and which ones to pick to make sure you end up with better code.
  • Optimizing SVGs Using Standalone Optimization Tools
    There are a lot of tools; each can fit into a different workflow. We go over a list of some of the best tools.
  • Embedding SVGs
    The different ways to embed SVGs on a page, the pros and cons of each, and tips on improving performance when choosing some of them.
  • Using SVGs as an Icon Font Replacement
    (or, How to Create SVG Sprites and Use Them as an Icon System)
    Sections covered in this master section include:

    • SVGs vs Icon Fonts
      SVGs are a far superior icon system, and this section covers all the reasons why, as in introduction to…
    • Spriting SVGs
      Introduction, followed by SVG icon system with icons as background images: the how-to of creating an SVG sprite for icons used as background images on the page, including tools to simplify the process. The section also covers SVG data URIs, including performance considerations.
    • SVG Icon System with Icons as Foreground Images: how-to and workflow automation tools. This section also includes styling the icons and applying transitions to them, with a how-to on styling the contents of <use>.
  • Providing and Automating Fallback for HTML-Inline SVGs
    Some known and some lesser known techniques for:
    • SVG fallback as foreground images
      How to provide fallback for SVG images that are embedded as foreground images. There are several options, all covered.
    • SVG fallback as background images
      Also a few options to choose from leveraging different CSS techniques.
    • SVG fallback using SVG conditional processing (SVG Fallback as Background Image)
      SVG’s built-in fallback mechanism.
    • Other fallback techniques for different embedding techniques.
  • Better SVG Spriting Using Native Fragment Identifiers
    This is my personal favourite SVG spriting technique and one of the less used ones, and the one closest to the way PNG image spriting works.
  • Making SVG’s Cross-Browser Responsive with CSS including:
    • Making SVGs Fluid with CSS
      Everything including browser bugs and workarounds.
    • Making SVGs Adaptive with CSS
      Using CSS Media Queries to show and hide (or even animate) parts of the SVG depending on viewport size.
    • Making SVGs Accessible
      The least you can do to provide even the most basic accessibility to your SVG images today.
    • Using SVGS to Optimize the Delivery of Other Image Formats
      Use cases that go beyond simply displaying or animating vector images. It includes using SVG masks to optimize raster graphics and using SVG as a container for serving responsive images (the “Clown Car Technique”.)
  • Where To Go From Here
    Pointers to more ideas and resources to look into.

As you can see, the chapter covers a lot. The topics it does not cover (otherwise it would have turned into a book) are: graphical effects (such as filters) and animation. I’m pretty sure there is even more about SVG to get into that the chapter does not cover, but hey, it’s only a chapter of a book!

Reading the new Smashing book, which is timely as I’m spritifying some SVGs, and it’s easier than flying @SaraSoueidan over to do it for me.

Bruce Lawson23

The Reviewers Link

The chapter was reviewed by Dmitry Baranovskiy24 (creator of the Raphaël library and its modern Snap.svg25 alternative), and Jake Archibald26 (Google), both experienced developers who know SVG very well.

Image of the Smashing Book 5.27
The inner layout of the Smashing Book 5. The book is quite colorful indeed. Large preview.28

A Designer’s Complete Reference To RWD Link

The chapters are complementary to one another, so the entire book is a collection of topics that go extremely well together, giving you a set of diverse topics that are sure to come in handy for any responsive design project you work on. Here’s a table of contents, to give you a better idea of what it covers:

  1. Responsive Workflow by Daniel Mall,
  2. Design Patterns by Vitaly Friedman,
  3. Structured Content by Eileen Webb,
  4. Mastering SVG by Sara Soueidan,
  5. Components With Flexbox by Zoe M. Gillenwater,
  6. Web Fonts Performance by Bram Stein,
  7. Responsive Images by Yoav Weiss,
  8. Responsive HTML Email by Fabio Carneiro,
  9. Testing, Maintaining, Debugging by Tom Maslen,
  10. Creativity Over Predictability by Andrew Clarke,
  11. Optimizing for Offline by John Allsopp, Matt Gaunt,
  12. Responsive Process by Ben Callahan (only in eBook),
  13. Performance Optimization Roadmap by Vitaly Friedman (only in eBook).

While writing the SVG chapter, I mentioned the problems that non-vector images might bring up, and how the new <picture> element emerged as the almost-perfect solution for that problem. (SVG still has its benefits over these formats, of course, but raster images still have their place and importance where SVGs just can’t fill in.) And since my chapter was focused on SVG, I couldn’t get into the details of how to serve responsive raster images.

Yoav Weiss’s chapter fills in that spot and covers everything you need to know about using responsive images. Not only that, but Yoav’s chapter also includes tips that you can apply to SVG images as well, making these two chapters the ultimate reference for images used in responsive design.

You can’t expect an SVG chapter to not mention SVG fonts, too. But then again, since that topic is outside the scope of what could be covered in the chapter, Bram Stein’s chapter on web font performance fills in that spot in his chapter, that covers everything you need to know about web font formats, performance, fallback, and more.

Sara Soueidan's chapter preview29
A preview to Sara’s chapter, including an explanation of SVG Viewport and viewBox. The eBook has two extra chapters — one on Responsive Process, and another on Performance Optimization. Large view.30

Zoe M. Gillenwater31 is my go-to Flexbox expert, so knowing that the book also includes a chapter on Flexbox written by her is splendid. Dan Mall32 is my go-to person for anything freelance designery-y and business-related; he wrote a chapter on the modern designer’s workflow.

The book was written by some of the brightest people in our industry, all experts in their fields, smarter than me, and known for their expertise in specific topics — all of which they covered in lengthy, very informative articles. You will find topics ranging from design workflows, patterns, content choreography, images, advanced layout with Flexbox, to responsive process, performance optimization, all the way to optimizing for offline experiences.

I hope you find the chapter on SVG useful, and I’m confident you will find the remaining chapters insightful as well. I promise you will not regret it. So, what are you waiting for? Go grab your copy33 and feel free to tweet at me34 with any feedback or comments (or even pretty pictures)!

Smashing Book 5: Real-Life Responsive Web Design35

$39

Get the book364Printed, gorgeous hardcover.
Free worldwide shipping. On planet Earth.

$19.90

eBook375PDF, ePUB, Amazon Kindle.

Thank You. Link

Thank you, dear Sara, from the very bottom of our hearts. It’s been our pleasure and honour to be working on the chapter with you — the book wouldn’t be the same without your fantastic contribution.

Well, over to you then. We hope you’ll love the book as much as we do, our dear reader. Please do let us know what you think — we’re here38, and we aren’t going anywhere! Happy reading and note-taking, and don’t work too hard! And thank you so much for your kind support and patience over all these years — you are truly smashing, you should know that. And for this we’re eternally grateful.

Front page image credit: Florian Adu-Gyamfi39

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2015/03/real-life-responsive-web-design-smashing-book-5/
  2. 2 https://smashing-magazine.myshopify.com/cart/1194620755:1
  3. 3 https://smashing-magazine.myshopify.com/cart/1194620755:1
  4. 4 https://smashing-magazine.myshopify.com/cart/1194620755:1
  5. 5 https://smashing-magazine.myshopify.com/cart/1247947075:1
  6. 6 https://www.smashingmagazine.com/2015/03/real-life-responsive-web-design-smashing-book-5/
  7. 7 https://twitter.com/MatCompagnucci/status/622441177795723264/photo/1
  8. 8 https://twitter.com/MatCompagnucci/status/622441177795723264/photo/1
  9. 9 https://twitter.com/FullCreamMilk
  10. 10 http://2014.fromthefront.it/
  11. 11 http://24ways.org
  12. 12 http://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/07/basecamp-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/07/basecamp-opt.png
  15. 15 https://basecamp.com/
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/03/11-Andrew-Clarke-the-way-forward-large.png
  17. 17 https://guillaumekurkdjian.com/
  18. 18 https://jessicahische.is/
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/03/ebook-ipad-counting-stars-large-view.png
  20. 20 https://www.smashingmagazine.com/tag/svg/
  21. 21 https://web.archive.org/web/20150720123558/https://www.makerscabin.com/mag/smashing-book-5-a-review/
  22. 22 https://twitter.com/MatCompagnucci
  23. 23 https://twitter.com/brucel/status/623169965189918720
  24. 24 http://twitter.com/DmitryBaranovsk
  25. 25 http://snapsvg.io/
  26. 26 http://twitter.com/jaffathecake
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2015/07/photo-11.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2015/07/photo-11.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2015/07/sara-preview-large-ext-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2015/07/sara-preview-large-ext-opt.png
  31. 31 https://twitter.com/zomigi
  32. 32 https://twitter.com/danielmall
  33. 33 #your-smashing-book-options
  34. 34 http://twitter.com/SaraSoueidan
  35. 35 https://smashing-magazine.myshopify.com/cart/1194620755:1
  36. 36 https://smashing-magazine.myshopify.com/cart/1194620755:1
  37. 37 https://smashing-magazine.myshopify.com/cart/1247947075:1
  38. 38 http://www.twitter.com/smashingmag
  39. 39 https://twitter.com/Rian_Adu/status/622339289460948992

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Andrew Taylor

    July 22, 2015 4:55 pm

    Great overview, I just put my order through!

    8
  2. 2

    Luke Pettway

    July 22, 2015 6:22 pm

    I know where my next paycheck is going!

    9
  3. 3

    Awesome! Preparing the wallet ;D

    4
  4. 4

    Massimo Nastasi

    July 23, 2015 8:37 am

    I received the book yesterday.
    It’s Amazing, really useful chapters and, and it’s HUGE … 500 pages!!!.
    You did a great job.

    5
  5. 5

    Vitaly Friedman

    July 23, 2015 10:59 am

    Thank you so much for your kind feedback — it means so much. Happy reading, everyone!

    0
  6. 6

    Great article! I’ve been wondering about SVGs quite a lot lately, so that’s a great plus for me.

    On another note – there’s a typo in the URL of the ‘write about SVG a lot’ link. It looks like it should be: https://www.smashingmagazine.com/tag/svg/

    -1
  7. 7

    Kanishk Kunal

    July 23, 2015 11:43 am

    Awesome Stuff! Thanks for having worldwide shipping. Ordered mine and now eagerly waiting for it. :)

    -1
  8. 8

    Order mines already. Keep up the good work.

    -1
  9. 9

    Finally :)

    1
  10. 10

    I was wondering if this book would be useful for digital designers or if it’s purely for developers?

    0
    • 11

      Markus Seyfferth

      July 27, 2015 10:09 am

      Hi Leigh, the book covers pretty much every aspect of a modern web designer’s workflow. It intensively covers good UX patterns (on 50 pages), the creative side of web design as well as content strategy. However, if you’re familiar with the basics of HTML and CSS, that certainly will help you get the most out of the book.

      0
  11. 12

    Eagerly waiting for it since I ordered it last April -_-

    2
  12. 13

    MatthewGrace

    July 29, 2015 6:22 am

    preety cool cover and color combination create modern look and 13 topics will be very useful for everyone

    -1
  13. 14

    just what I need. getting this now

    -1
  14. 15

    Hi There,

    Sorry for posting here but I can’t find a contact link. I purchased the ebook in April but I can’t figure out how to download it sorry.

    I can’t find an email besides the original purchase receipt and if I click the download link from that receipt, I get a 404 error.

    I’ve tried logging in but my password no longer works – 1Password states there’s vulnerability so maybe passwords have been reset? I’ve tried resetting the password myself but don’t seem to get an email and have checked my junk mail several times.

    Any pointers in the right direction would be much appreciated.

    Cheers

    Ben

    -1
  15. 16

    Hello,

    I don’t understand this. Here I see another Smashing book 5 :
    https://www.smashingmagazine.com/2015/03/real-life-responsive-web-design-smashing-book-5/

    Was this first edition and current book is another edition of the same book ?
    I also found these books :
    part 1
    http://www.amazon.com/Smashing-Book-Real-Life-Responsive-Design-ebook/dp/B010DNT09A
    part 2
    http://www.amazon.com/Smashing-Book-Real-Life-Responsive-Design-ebook/dp/B010DOHUUK/ref=pd_sim_351_1?ie=UTF8&refRID=1HZ2QSKGQN8ADZ97343B

    Can somebody please explain me why is there more #5 books and what is the main difference between them ?

    Thanks

    0
    • 17

      Markus Seyfferth

      August 13, 2015 8:50 am

      Hello John,

      Good questions! There’s only one Smashing Book 5, and all your links are about the same one. The posting back in March was the pre-release of the book, and now that the book is here, we’ve published another posting.

      As for the Amazon links, we split the Kindle version into two Parts (on Amazon only) due to the book’s sheer size (673 pages) and due to the ridiculous pricing policy of Amazon. Amazon pays out only 30% for eBooks priced above $10. We really don’t want to sell a precious book like this for less than $10. Thanks for your understanding!

      1

↑ Back to top