TABLE OF CONTENTS
When setting up the concept of the book, we worked hard to ensure a delicate balance between basic knowledge and the current state of the art. Please note that changes to chapter titles are still possible.
||What’s Going on in Mobile?
||The Future of Mobile
||Responsive Design Strategies
||Responsive Design Patterns
||Optimization For Mobile
||Hands On Design for Mobile (UX Perspective)
Rian van der Merwe
|Mobile UX Design Patterns
||Designing With Gestures and Touch
From left to right: Jeremy Keith, Peter-Paul Koch, Stephanie Rieger, Trent Walton, Brad Frost, Dave Olsen, Dennis Kardys, Greg Nudelman, Rian van der Merwe and Josh Clark.
What’s In The Book?
When it comes to mobile, there are more open questions than definitive answers. Due to its fragmentation, it’s not so easy to understand how the mobile market looks and works in general. How can you pick the right mobile strategy and select the right approach for your website? What design patterns and what UX techniques can assist you to design faster and more effectively for mobile devices? What design patterns do you need to be aware of when building responsive websites and what patterns will help you optimize the performance for mobile? When you design with mobile in mind, how exactly should your design process differ from a traditional design workflow?
Our new book attempts to answer these questions. Well-known experts such as Peter-Paul Koch, Stephanie Rieger, Trent Walton, Brad Frost, Dave Olsen, Josh Clark and Remy Sharp have contributed to the book to present the most relevant and valuable insights. To ensure the quality of the material, the chapters have been reviewed by Scott Jenson, Bryan Rieger, Tim Kadlec, Bruce Lawson and other active members of the mobile design community. The foreword was written by Jeremy Keith. It wasn’t easy to bring together such a stellar line-up of experts, but a compromise wasn’t an option.
UNDERSTANDING THE INTRICACIES OF THE MOBILE LANDSCAPE
In discussions about user experience on mobile, we tend to make general assumptions about the environment in which users will be using an app or a website on their mobile device. However, mobile context is a myth. We can’t make any realistic assumptions about the context because we just don’t know anything definite about it — when and how the device is used or what connectivity it currently has. Obviously we can plan for different scenarios — and so we should — but mobile context is often as unpredictable as particle physics. We just don’t know for sure when mobile devices are being used – on-the-go, in the kitchen, or when watching TV.
In the first chapter of the book, Peter-Paul Koch and Stephanie Rieger explore the mechanics of the mobile world and the ongoing developments in the industry.
“[We’ve had] a total of 880 million Android & iOS devices entering the market in just over five years. Consider the shift that occurs when iOS & Android put a combined billion [mobile] devices in people’s hands. That’s almost half the Internet population of the world and equivalent to the total number of (Windows) PCs in use around the world. Mobile first yet?”
— Luke Wroblewski
The first chapter of our new “Mobile Book” describes the mobile landscape and provides insights about the future of mobile.
LEARN TO DEVELOP BETTER RESPONSIVE DESIGNS
As a result of random assumptions, we tend to think that mobile experiences should be the “light” versions of traditional “desktop” experiences — because well, that’s what users need. However, research shows that 80% of users want to have all “desktop” features on mobile — they want to be able to use the features everywhere, and in a similar way. That’s when meaningful, performance-optimized responsive design solutions become important. In thesecond chapter, Trent Walton introduces strategies for developing responsive websites, Brad Frost discusses emerging responsive design patterns and Dave Olsen explains what you need to know to optimize the performance of mobile websites.
The second chapter explains the strategies, design patterns and optimization techniques for Responsive Web design.
EXPLORE “MOBILE” WORKFLOW & MOBILE UX DESIGN PATTERNS
Whether you are designing a mobile-optimized website or a native app, you will have to use emerging design patterns and techniques that wouldn’t work on desktop. The mindset shift affects not only layout, but general interaction paradigms, especially since mobile devices are actually “smartphones”, with capabilities that can’t be used in a similar way on desktop devices — e.g. gestures, touch, accelerometer, gyroscope etc. Users want to have access to information and functionality, and they want the content to be usable — wherever they use it. It’s our task to make it work, using emerging UX design patterns.
In the third chapter, Dennis Kardys explores the wireframing and prototyping process for mobile, Greg Nudelman and Rian van der Merwe explores mobile design patterns and Josh Clark explains how we can utilize gestures and touch meaningfully on mobile.
The third chapter explores the implications of the mobile medium for UX design process and mobile UX design patterns.
EXTRA CHAPTERS: UNDERSTAND MOBILE PLATFORMS AND THEIR DIFFERENCES
When it comes to desktop browsers, we are used to obvious big players and traditional platforms Mac, Windows, Linux. The mobile world is entirely different, and the platforms are very different — they have a different culture and a different design language. In these extras of the book, you’ll look closely at the various mobile platforms — iOS, Android, Windows Mobile as well as the Web itself (HTML5 Apps).
The last chapter provides insights into the mobile platforms: iOS, Android, Windows Mobile as well as HTML5 Apps.
The Mobile Book consists of 320 pages sized at 165×240 mm (6,5 x 9,45″). It’s a damn real hardcover with a luminous red bookmark and stitched binding. The minimalist cover is coated with original gray fabric and has a shiny metal imprint. It’s printed on sophisticated 130/gram paper. Of course, the printed book comes with a portable companion — an eBook edition that you get for free along with the printed book.
THE LAYOUT & ARTWORK OF THE BOOK
After three successful “Smashing Books”, we wanted to do something entirely different this time — something that does not look like yet another item of our series (which in fact is coming in spring 2013). And so we did. If you prefer to have a printed book, you want it to be a beautiful, honest, classic book. We wanted to achieve a high contrast between the modern content of today, but with that cozy little feeling from the good ol’ times. So we went to great efforts to create something unique, memorable and valuable. A book with a classic, conservative look and feel, a book in the best sense of its kind – that is guaranteed to look good on a desk or on a bookshelf.
The chapters of the book are illustrated by talented, well-respected UK-based designer and illustrator Mike Kus who is known for his artistic, vivid and memorable artwork. We’ve asked him to create abstract, minimalistic illustrations that will fit nicely within the concept of the traditional, classic book layout. After a couple of iterations, Mike knew exactly how he wanted the illustrations to be, so the design process didn’t take as much time as we thought.
Here are some insights from Mike about the design process:
“When Vitaly asked me if I was interested in producing a series of illustrations for ‘The Mobile Book’, I jumped at the chance. I always love to get my teeth into a creative project.”
It was an open brief, so I wanted to do something interesting. I didn’t want to go down the route of illustrating mobile phones and computer screens etc. It felt too obvious. Instead I opted for an abstract approach. Based on the section titles of the book, I created a visual representation of the titles.
For example, for the title ‘Responsive Web Design’ I created an illustration that shows circles based on a grid that are overlapping and morphing into each other. This is represent the fluid and reactive nature of ‘Responsive Web Design’. For the ‘Mobile Platforms’ section my idea came from the overlapping highways on a spaghetti junction. This is to represent the the complexity of developing for multiple platforms and mobile browsers. For the cover of the book I created four icons, which are essentially simplified versions of my illustrations.
This was one of the most difficult projects I’ve worked on in recent months but it was also one of the most rewarding. I’m supper happy with the outcome and thankful I was asked to be involved.”
— Mike Kus
Mike Kus’ early sketches for Smashing Magazine’s Mobile Book.
We wanted to create a simple cover design, so Mike has designed four icons, which are essentially simplified versions of his illustrations. The cover is coated with original gray fabric and has a shiny metal imprint for the icons.
Make Your Choice
You can pre-oder The Mobile Book starting from today. The official release is scheduled for late November/early December 2012. Please note that two options also include the brand new Smashing Mobile Bundle — four extra eBooks containing the best Smashing Magazine articles based on mobile.
The printed books will be sent only via air mail. You can find the anticipated delivery time for your country in thedelivery times overview. We ship books from Berlin, Germany — the eBook version will be available for download on launch day, and those who pre-order will be informed of the launch via email.