“The Smashing Book #3” review

28 May 2013

A while ago I was working on the design of the cover of the "Smashing Book #3". It was my good intention to read the book right away and write a review, but unfortunately I wasn't able to manage this due to not finding the time and other more urgent matters. It just took me very long time to finish it. With #4 coming on the shelves in Sept./Oct. 2013, I know this review is way overdue…

Small confession

First, I have a confession to make: I have a hard time finishing a book. I'm always very keen to start, and if it's a really good book I always get far, but after having read about two thirds, there comes the tricky point… This has nothing to do with the book itself. I believe it's just something in my nature, because I'm usually reading more than one book at the same time, and I like to take my time. So after each chapter I let it sink in before I continue on the next one, while also randomly switching between books. Usually I read a book in bits and pieces, now 15 minutes then another 20 minutes, so whenever I find a moment. I never find the time to read a couple of hours at once.

Smashing Book #3 Redesign The Web

The book

The book has 336 pages to read. Each chapter has its own color scheme and beautiful illustration. The book is very well designed which makes it, at least for me as a designer, more enjoyable to read. The hard glossy cover, the stitched binding with headband and bookmark gives the book this extra quality look. The book is also flexible and very practical as it folds open and remains open like a fine quality book.

Every chapter of the book is written by another author, specialists within their own field, and thoroughly reviewed by experts in the industry such as Jon Hicks, Tab Atkins, Paul Irish, Russ Weakley, Peter-Paul Koch, Bryan Rieger, Joshua Porter, Ryan Carson, Collis Ta’eed, Elliot Jay Stocks…

The book covers innovative coding, design and UX techniques and discusses the peculiarities of the mobile context and emotional design.
— The Smashing Editorial

Redesign The Web

This book gives you a good overview of the challenges you deal with when designing a web site these days. The web is changing fast, and now more then ever, solutions to tackle these challenges are most important to keep our workflow as efficient as possible. A good reason to start reading a book like this one. This book covers everything from the business side of things, to more technical subjects such as choosing the right platform for your site, to practical HTML5, CSS3 and JavaScript techniques, as well as flexible and more future-friendly workflows for responsive Web design and UX design advice.

Table of Contents

  • Preface: The New Era in Web Design by Elliot Jay Stocks
  • The Business Side of Redesign by Paul Boag
  • Selecting a Platform: Technical Considerations for Your Redesign by Rachel Andrew
  • Jumping Into HTML5 by Ben Schwartz
  • Restyle, Recode, Reimagine With CSS3 by Lea Verou, David Storey
  • JavaScript Rediscovered by Christian Heilmann
  • Techniques for Building Better User Experiences by Dmitry Fadeyev
  • Designing for The Future, Using Photoshop by Marc Edwards
  • Redesigning With Personality by Aarron Walter
  • Mobile Considerations in UX Design: Web or Native? by Aral Balkan
  • Workflow Redesigned: A Future-Friendly Approach by Stephen Hay
  • Becoming Fabulously Flexible: Designing Atoms and Elements by Andy Clarke

The book challenges you to think differently about your work, your code and your designs.
— The Smashing Editorial

The Business Side of Redesign by Paul Boag

This first chapter of the book is full of practical advice about how to handle the business side of a web site project, thinking beyond technology and design and focussing on the challenges faced by clients. Paul starts with the valuable question "when is it time to redesign?" and explains why a complete redesign might not always be the right answer. Other meaningful topics are: "how to deal with client feedback", tips on how you can plan for a mobile future, how you can avoid project pitfalls & scope creep, and "falling victim to fashion and trends", just to mention a few.

Selecting a Platform: Technical Considerations for Your Redesign by Rachel Andrew

The next chapter deals with the topic of choosing the right platform or CMS. Which criteria defines this choice? Topics such as A/B testing, e-commerce related subjects such as accounts and tracking orders, payment gateway, and PCI DSS are all discussed in this chapter, together with integration with other systems and the constrains that influence the choice of the decision. Go for custom or an off the shelf software? Or maybe a hosted software-as-a-service solution? How to choose a host?... These are just some of the topics where Rachel gives you good advice in helping you make the right choices.

Jumping Into HTML5 by Ben Schwartz

After giving an introduction of HTML5 and explaining "where we've come from and where we're going" in terms of HTML, Ben explains the principles of HTML5. He shows us how we can use elements such as 'section', 'article', 'header', 'footer', 'aside' and so on. Furthermore he explains the ARIA roles and how you can use them in your HTML and CSS. At the end of the chapter, Ben also touches the topic of HTML5 client-side storage by explaining in short what 'cookies' are, giving us a short introduction on 'localStorage' and 'sessionStorage' JavaScript APIs.

Restyle, Recode, Reimagine With CSS3 by David Storey and Lea Verou

In this chapter David and Lea show us some neat CSS3 techniques. While they are all very new, they also show us smart fallback methods. They show techniques on web typography, demonstrate us some cool magazine-like layouts, layout techniques using flexbox, and everything there is to know when working with images, such as: multiple backgrounds and gradients, background-origin, background-size, and background clipping. Furthermore they explain CSS transforms, selectors such as 'target' and CSS transitions.

JavaScript Rediscovered by Christian Heilmann

Christian shows us some cool jQuery techniques that embraces the new opportunities of today's browser features by showing us flexible techniques that makes it easy to maintain our code. You'll get to learn how to create a to-do list using proper event delegation and generated content, then progress to a brochure Web site that uses transitions, and at the end you'll also learn about HTML5 canvas to create thumbnails in a browser. While this was a very technical chapter for me as a designer, I was able to fully understand most of it as Christain explains things in the best possible way.

Smashing Book #3 Redesign The Web

Techniques for Building Better User Experiences by Dmitry Fadeyev

In this chapter Dmitry shows us how we can improve our web site or app using some smart an powerful UX techniques. He starts by showing us useful techniques that help gathering initial product interest and building a solid sign-up process after launch. He also shows us a few experimental UX techniques on how you can push your designs to the next level. You'll also read about how customer service is UX, and also about anti-UX or so called "dark patterns".

Designing for The Future, Using Photoshop by Marc Edwards

Marc gives you a whole range of practical Photoshop tips and advice starting off with valuable information such as screens sizes, and pixel density. He shows us simple techniques we can use to keep our mobile app designs scalable, and flexible. Then he also explains how you can prepare your workspace in terms of color management. Furthermore you'll learn some cool techniques on how you can use Photoshop styles to achieve realistic effects, how to make sure everything looks pixel sharp,... but Marc also shares advice and a bunch of practical tips on how to hand over the design to the developer, and techniques for exporting images from Photoshop.

Redesigning With Personality by Aarron Walter

Aaron shows how you can give your design the right personality and how it can set your brand apart, and help you connect with a passionate audience. By asking questions such as "who are we?", "who are "they?"... it can become a powerful tool in our design. Aaron shows a practical technique on how you can define your personality using a "design persona" all explained through the example of MailChimp.

Mobile Considerations in UX Design: Web or Native? by Aral Balkan

In this chapter Aral helps us to find the answers to the core decisions that need to be made during the design process of an application: make the product cross-platform, and whether it should be native. To be able to make the right decision, we need to fully understand the meaning of a "native" application, but we first need to be aware of the difference between designing interactive documents for the web, versus designing interactive products or applications. The answers to these questions are all fully explained to help you make the right decision on platform and technologies for your product.

Workflow Redesigned: A Future-Friendly Approach by Stephen Hay

Stephen makes us re-think our workflow by using a platform- and device-agnostic thinking technique. Structuring the content first before we think about the look and feel of a web site design is the base of this chapter. He leads us through the different steps of a new way of thinking and designing, using breakpoint graphing and designing in the browser, explaining the benefits and its effectiveness.

Becoming Fabulously Flexible: Designing Atoms and Elements by Andy Clarke

In the last chapter, Andy writes about how we can adapt our current way of designing into a more flexible way by designing components first. The web has no edges and so we can't predict the size or format that our content will be viewed in. Flexibility can be achieved by thinking outside the fixed boundaries of our canvas. By designing an atmosphere first, we give our workflow more flexibility.

The Smashing Book #3⅓ 'The Extension'

There is also a second book that comes with this one. It's called "The Extension" which is literally what this book is. The Smashing Book #3 had a specific size, format, binding constrains etc. and it was simply impossible to include these chapters in the same book without compromising the quality and integrity. I remember that the idea to create a separate book came to live when I was designing the cover and it actually solved the problem of having to choose between 2 designs. The book contains 160 pages, and has the same quality look and finishing.

The Smashing Book #3 'Redesign The Web' and The Smashing Book #3⅓ 'The Extension'

Table of Contents

  • The Missing Element of Redesign: Story by Denise Jacobs
  • Rethinking Navigation: Techniques and Design Patterns by Christian Holst and Jamie Appleseed
  • Rework Your Content So It Works for You by Colleen Jones
  • Responsive Smashing Redesign, a Case-Study by Vitaly Friedman and Elliot Jay Stocks

I must say at this moment of writing, I haven't completely finished this one yet, but so far I've been enjoying this one very much too. This review is just overdue and so that's why I couldn't wait anymore to write it. Here is what the editor says about the book:

With Web design, we can do much more than inform the audience. The power of storytelling and content strategy is in creating engaging, emotional connections that transcend their platforms. In this book, we will review emerging navigation design patterns and understand how to employ a content strategy — which is an important process, often underestimated and dependent on many factors. A case study of Smashing Magazine’s responsive redesign beautifully illustrates what this approach could look like in practice.

In the first chapter of the book Denise guides us through how we can add a clear, coherent and meaningful story to our projects, leveraging emotional and experience design principles which will motivate users to tell share their story of love for what you offer. In the second chapter Christian gives you a full insight of a site's navigation, analysing all aspects there is to know about this fundamental element. In the chapter that follows Colleen explains how you can take your content to the next level, giving advice on the topic of content strategy. In the last chapter Vitaly gives you the full story behind The Smashing Magazine's redesign, from the very beginning of the design process to the launch.

Conclusion

This book is a must read for every professional web/UX designer or developer. It covers a very broad spectrum on the topic of web/UX design and development. As a designer you read how you can improve your workflow, how you can make your designs more future proof, while you also get informed about the business side of things, and about how you can give your designs more personality. Furthermore you dive into CSS and HTML coding, and learn some neath JavaScript tricks, while you also get a basic information on how to choose the right CMS platform. As a developer you get a better insight into the workflow of a design, and you learn how to implement JavaScript in a smarter accessible way, while you also get a better insight on choosing the right platform and technology for your product or application.

Small note on the topic of Color Management

In one of the topics in the chapter about "Designing for The Future", the author suggests to turn off Photoshops and/or Illustrator's RGB color management. While this might seem a good solution at first sight to avoid the color shifting which happens when you export your files using the 'convert to sRGB' option in Photoshop (which is checked by default), I still want to mention another option that might work better for you. Because if you are like me, and you work both in web and print, than I believe this option is not really ideal. For print I really need to work in a Color Synced environment to achieve the best results. I have my Adobe environment set up as shown in the screenshot, done via Bridge so all Adobe apps are using the same 'duoh' color settings. My screen has been calibrated with a ColorMunki (Design).

Photoshop Color Settings screen

When working on a web site or iPhone/iPad app design I assign the sRGB IEC61966-2.1 color profile. This way I work in the web's color environment. When I export, the option 'Convert to sRGB' that you suppose to check off can stay checked on and things will look exactly the same, since what I'm working in is already sRGB. Since I assign a profile to my Photoshop source file, and don't convert it to this color profile, I always work in a non-destructive manner. If I want to remove this profile, I can at all times. To me this setup and its way of working has always served me well, and I never had any trouble of color mismatches either. I can safely copy and paste hexadecimal values or pick them with my color picker. Something I regularly do with images used in my Inspiration Stream.

Comments

  1. 1 Jual Rumah 30 May 2013

    I haven’t bought the book yet (only have #1 and #2) but reading through your review I think I’m going to buy it now.

  2. 2 Peter 01 Jun 2013

    Regarding that aside of yours on Color Management I think you’re perfectly right not to favour the turning off of Adobe’s CMM for certain types of work. It’s always better to have a proper colour profile attached to your image files (although you could possibly argue about that with CMYK vector graphics whose exact colour values are probably not to be altered by any CMM anyway). Embedded profiles surely minimize the risk of later inconsistencies and wrong colours finding the way into your output.

    It might be worth some consideration, however, to set the RGB profile of the Adobe CMM generally to sRG even if you potentially lose some colour nuances from Adobe RGB files (most likely high end digital pics). It depends primarily on which sort of imagery you generally work with – if that’s mainly stuff with embedded sRGB profiles (as from compact and mid-range digicams) sRGB should work fine as your standard RBG setting for the Creative Suite.

  3. 3 Nahin 13 Jun 2013

    Great book, i love programming it’s always inspire me a lot. Nice stuffs into books shared by you. Thanks!!!

The Deck

Ads via The Deck