Do you understand today’s mobile landscape? How about the landscape of tomorrow? Are you comfortable building and optimizing responsive sites? Do you have a process in place that communicates to clients the dynamic nature of your design? And finally do you know how to take advantage of the touch interfaces found on most mobile devices?
That’s a lot of questions. I just finished reading the new Smashing Mobile Book and those are the main questions it asks and answers. It’s a good book about a subject we should all be thinking about.
The print version will set you back about $50 while the ebook will cost $18. The print version includes the ebook if you’d like both. While I read the ebook, I have no doubt it’ll be put together well with the great illustrations as always.
Table of Contents
Here’s a quick rundown of the table of contents. The main section and chapter headings give you a old overview of what this book is all about. Numbers in parenthesis are the page number for the first page in each chapter.
- Part I – The Mobile Landscape
- (9) What’s Going On In Mobile by Peter-Paul Koch
- (55) The Future Of Mobile by Stephanie Rieger
- Part II – Responsive Web Design
- (91) Responsive Design Strategy by Trent Walton
- (129) Responsive Design Patterns by Brad Frost
- (175) Optimizing For Mobile by Dave Olson
- Part III – UX Design For Mobile
- (225) Hands-On Design For Mobile by Dennis Kardys
- (289) Designing For Touch by Josh Clark
The Mobile Landscape
This section looks at the current mobile landscape and then some things that are potentially coming. It’s a good overview of what we’re facing as web designers and what we’ll be challenged with in the not too distant future.
The Smashing Mobile Book is a good read about the current and future mobile landscape and how we can better design and develop for it.
What’s Going On In Mobile by Peter-Paul Koch looks at the present state of mobile or near past as Peter says, since the landscape is changing so rapidly. I’m not sure most designers think about this as often as we should. We tend to focus on iOS and Android and forget about the rest.
The main message of the chapter is not to assume anything about mobile, because as soon as you do you’ll probably be wrong. The chapter offers something of a sobering perspective about what’s going on today, but don’t let any of it scare you.
The Future Of Mobile by Stephanie Rieger looks more at what’s coming. In the future everything will be connected. Sometimes that will mean devices that are connected through screens (TVs, refrigerators, car dashboards) and sometimes no screen will be involved (music systems, pill bottles, rfid chips).
She walks us through how we’re going to navigate this sea of connected devices, considering the different APIs we might work with and the different ways these devices will sense their environment.
Responsive Web Design
My guess is this is the section you’ll be most familiar with as far as the topics are concerned and perhaps the one you’re most interested in reading because of that.
Responsive Design Strategy by Trent Walton walks through responsive design basics. Trent takes us through the 3 building blocks of responsive design and discusses how best to handle each.
There’s a lot of practical advice based on his experience along with lots of additional resources.
After the basicss, the chapter considers topics such as content choreography, maintaining image hierarchy, and fluid typography. I’ve covered most of these topics here and if I’ve somehow managed to interest you in any of them, you’ll enjoy this chapter as it’s written by someone who knows more than I do.
Responsive Design Patterns by Brad Frost suggests that we need to look at design in a more modular way. He takes us through most of the design patterns that have been emerging over the last year or so, specifically patterns for layouts and patterns for navigation.
As with Trent’s chapter there’s plenty of practical tips for working with layout and navigation. Additional topics include conditionally loading content, working with images and media objects, typography, forms, and interactive elements. This chapter works very well in conjunction with the previous one.
Optimizing For Mobile by Dave Olson says we’re focusing on the layout and getting good at having our designs flex, adapt, and respond. What we aren’t doing so well is optimizing our designs. Page weight keeps going up as are the http requests.
- The essentials
- The next steps
- Deep cuts
You may not put all the methods described to use, but even a few should help significantly reduce the time it takes to load your pages. You’ll also learn about some of the things you can look into for the future.
UX Design For Mobile
The last section of the book looks at the experience. First it takes on our current practices and how they no longer work and then offers advice on how we can take advantage of the touch interfaces in today’s mobile devices.
Hands-On Design For Mobile by Dennis Kardys starts by pointing out the unknowable canvas we work in and how the static design documents we’ve been creating for years set false expectations for the finished product and no longer work. He urges us to generate more ideas quickly early in the process and then with the client iterate over the design to refine the finished product.
To move the project along he suggests.
- Concept generation — sketching and paper prototypes
- Content planning — page tables and content reference wireframes
- Designing and refining — interactive and html prototypes for prototyping behavior and style tiles and pattern libraries for prototyping styles
A 2 page chart is included toward the end of the chapter lists all the different methods described along with their pros and cons and where each works best. The chapter concludes by tying everything together and showing how all these ideas will help you and your clients work together more productively.
Designing For Touch by Josh Clark closes out the book letting us know we’re no longer just visual designers. There’s a new dimension we have to think about. We need to be concerned with touch; how our designs feel in the hand.
Josh gets us thinking about our fingers, and thumbs particularly in regards to how we hold our devices and use them to navigate. Should buttons be located at the top? The bottom? A little of both. How large should those buttons be to ensure they’re clickable? Are they even necessary?
Enter gestures. He looks at some of the common gestures in use today and how they might best be used. There’s good and bad news for web designers where gestures are concerned at the moment. The OS and native developers have some advantages we don’t.
Some gestures that are becoming standard include:
- long tap
- pinch and spread
- double tap
He closes the chapter with some thoughts about helping users discover what gestures are available to them and looks at skeuomorphism as a potential teaching layer to your interface. Even better he says is to study video games, which are good at teaching us how to use unfamiliar interfaces.
Overall a very good book about the mobile landscape and how we can better design and develop for it. Depending on how much work you’ve done with mobile and responsive design, some of the information here may be familiar, though even in the familiar you’ll likely learn a few new things.
While I enjoyed every chapter I think the ones on optimizing for mobile and designing for touch were my favorites. That’s probably to do with my interests of the moment more than anything else. All the chapters were worth reading.
The Smashing Mobile Book is available now and if you have any interest in designing for mobile devices I’d recommend grabbing a copy.
Have you read the book yet? What do you think?