In 2013 mobile commerce (defined as the value of stuff people purchase while using smart phones and tablets) is expected to reach $38.8 billion, according to a report by eMarketer. That number is expected to climb even higher in the coming years, reaching a truly massive $108.56 billion by 2017.
What exactly does that mean for web designers and web design agencies? It means that the business of the web (a.k.a. the money that provides you with clients) is shifting towards mobile and it isn’t coming back to the desktop any time soon. In fact, Q1 stats for 2013 already show tablets exceeding traditional desktop devices in conversion rates. Proving there’s no time like yesterday to be an expert at creating highly optimized mobile websites.
That’s why for today’s post I’ve created a roundup of 30 essential tools and resources for creating mobile web layouts. These handy links range from beginner level content all the way up to advanced mobile design and development resources. I hope you enjoy the post and feel free to contribute your own links and resources in the comments below
Mobile Web Layout Tools
To make the CSS efficient and “minify” it, Smashing’s case study on Cyber-Duck used SCSS (Sassy CSS). See how you can also streamline your code!
Using a tool like Flexbox (which even earned .net magazine’s Best New Web Technology 2013 Net Award, that is, and not the autocomplete jQuery plugin) can help you choreograph your content cleanly, executing the new switch-a-roo of blocks (and sizes) of content as your responsive site’s layout adapts to its habitat.
With some explanation and background from this CSS-Tricks article on the grid property, you’ll be on your way to using this new tool. And here are a couple bonus items: a Flexbox tutorial from Smashing to get you started, as well as Mozilla’s Flexbox tutorial.
Twitter’s Bootstrap is a super popular treasure trove of tools for building and prototyping your site, and it’s on almost every “essential design tool roundup”, including Crazy Egg’s, tripwire’s, and Onextrapixel’s. Your layout and content will shine when built with a consistent style guide.
5. “12 Flexible Grid Tools for Responsive Websites” by Creative Overflow
Need a calculator for your fluid grid? How about for calculating pixels into percentages? All this and more in the Creative Overflow lineup.
6. “20 Exceptional CSS Boilerplates and Frameworks” by Grace Smith
If you’re looking for a rundown of responsive CSS tools, here’s a great way to get quick summaries of popular options.
7. “A Look at Responsive CSS Frameworks” by Ben Gremillion
This discussion and review from Treehouse’s blog is a great way to understand the different frameworks available, as well as gain Gremillion’s insight regarding which are the best in these categories: fastest setup, most options, fastest integration, and best long-term support. But hey, in the end you might just build your own CSS framework to share with the world!
This new tool is given the thumbs-up in Treehouse’s review and is a special tool in the RWD wave of web design, giving options from one to twelve columns per row.
9. Rock Hammer
Check out an excellent toolkit for your responsive layout, and it aims to get designers to spend less time in static graphics programs and more time in the dynamic, shifting web. As Stuff & Nonsense explains, it can be used as a template, primer, or bedrock for your responsive website project.
Want to get a look at your site in various viewports? To learn how to override the native user agent and dimensions, scroll down to “Emulating Device Viewports” in this Chrome DevTools how-to. The same article includes steps to emulate touch events on your desktop, overriding geolocation, and more.
More ways to test from Google.
12. More Emulators
This selection from Breaking the Mobile Web is recommended by Tim Kadlec for testing your site.
The finale of this Six Revisions post gives 20 emulator suggestions. However, be careful with all emulators, which may not reveal bugs in your code, or the emulator may show you a bug that isn’t there on the actual device (so try to avoid those d’oh moments by using real devices).
When you have the actual devices, why not test everything at once? You will be super efficient. This tool, formerly known as Adobe Shadow, lets you navigate through your site while all connected devices stay in sync. Touted by Implementing Responsive Design, this is a smart tool for simultaneously trying out your site on all those devices you’ve rounded up.
15. The Real Devices
Despite the convenience and coolness of emulators, using the real device is your best bet for testing your mobile layout. Like in Cyber-Duck’s responsive redesign, harvesting as many ancient and recent devices as possible can make you confident that your site will reach your users. Even handheld game devices and TV screens are arguably worthy of a test run. As Kadlec suggests in Implementing Responsive Design, Craigslist and eBay are wise places to browse for bargains.
Mobile Web Layout Resources
16. “20 Responsive Web Design Examples for Inspiration” by Manish Salunke
Looking for fresh ways to organize your responsive, mobile-minded website’s header? How will you arrange buttons and your search box? Get some ideas here.
17. “UI inspiration May 2013” by Awwwards
This roundup also includes app UIs to inspire the Responsive+ appification of your mobile site.
18. “Let it Flow–26 Awesome Examples of Responsive Web Design” by Josh Chan
Sparks of creativity are aflame in this noupe list, showcasing some smart ways of choreographing navigation items and more.
19. “40 Examples of Brilliant Responsive Website Layouts” by Jake Rocheleau
Even more ideas abound in this Speckyboy lineup, which features clean content choreography to inspire your layout.
20. “Top 25 Responsive Sites of 2012” by .net magazine
With helpful commentary and quotes from experts, .net explains these examples and highlights their subtleties.
See how other sites have used the tool Twitter Bootstrap (listed above).
22. “5 Really Useful Responsive Web Design Patterns” by Joshua Johnson
While manipulating your layout’s grey boxes, see what 50 (or, in this article, 5) shapes of grey you can choreograph. This Design Shack post on responsive layouts is a great starting point for arranging your content.
Looking for a beginner’s guide to design prototyping? This abduzeedo post will fill you in with step-by-step instructions and code examples.
24. “30 jQuery Responsive Layout Plugins” by Sam Deering
To get your mobile layout going, here’s a roster of 30 jQuery responsive layout plugins.
25. “Popular Design Trends for Responsive Navigation” by Jake Rocheleau
These can get your imagination going for nav-specific choices. To whet your appetite, check out Oliver Russel’s site, which is from Vandelay Design’s collection. Not only do we get a meticulous, beautiful, and responsive navigation menu, but we also get a pageless design that jumps down to your selected option and ditches the breadcrumbs.
26. “Responsive Navigation Patterns” by Brad Frost
This post really gives you a no-nonsense look at the pros and cons of your navigation options . . . and “Complex Navigation Patterns for Responsive Design” gives you even more! (Including resources for the ever-fantastic off-canvas flyout.)
27. “The State of Responsive Design” by Stéphanie Walter
As noted in a recent report on the state of RWD, this Smashing article discusses the unstandardized methods of signaling navigation to users (which cites this Stuff & Nonsense post). Which icon makes the UX most intuitive, consistent, and painless? Take stock of what your icons will signal to your user. As the article mentions, that pesky plus icon has so many functions on mobile UIs that it’s gotten downright confusing and could use some standardization.
28. Implementing Responsive Design by Tim Kadlec
This new book is not only a fantastic resource in and of itself, but it’s also chock full of useful tool and resource suggestions. Kadlec thoroughly (and, I think, fairly) weighs the pros and cons of different approaches to and debates within web design as the world’s devices and browsers proliferate. When to use ems or pixels, how to determine breakpoints, and many other strategies are included.
29. “Strategies for Choosing Test Devices” by Stephanie Rieger
This post (which is suggested and discussed by Tim Kadlec in his book) shows how to wisely choose what devices to invest in by inspecting your site’s traffic, the market share of different devices, and more.
30. “Adapting to a Responsive Design (Case Study)” by Matt Gibson
Smashing’s responsive site case study offers a look at Cyber-Duck’s switch to a responsive site from their separate mobile and desktop versions. Instead of using a Bootstrap or Foundation ready-to-go CSS framework, Cyber-Duck built their own responsive grid system (which they discuss in the article, among many other responsive considerations).
Getting Started with Mobile Web Design
As a result of teaching myself mobile design/development (when I’m not writing) I spend a significant amount of time sifting through the bevy of web resources and tools available. Of course, my task has its ups and downs. One moment I’m gung-ho about all these new findings and the next I’m bogged down by the sheer volume of them.
So far I have a Google spreadsheet to track various web design & development tutorials, articles and tools with columns to rank and categorize them. This step seems like a good starting point for maximizing my learning time instead of getting lost in a sea of distracting (albeit interesting) tabs.
But that’s just my personal method. I’d love to hear how you have incorporated new tools and resources into your own workflow in the comments below. And of course if you have any must read articles I didn’t mention in the post above, please be sure to share them with us so we can grow and learn together as a community
Image Credit: iPad Stencil for Omnigraffle