Jul 02 2013

30 Essential Tools & Resources for Creating Mobile Web Layouts

Mobile-Web-Design-Layout-Tools-Resources-Feature-Image

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. All of which proves 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

1. SCSS

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!

2. RequireJS & UglifyJS

Making your mobile website’s layout a suitable byte-size is certainly tenable with these tools used in Cyber-Duck’s redesign project. While RequireJS sees if JavaScript is available to and supported by the browser, UglifyJS condenses JS (in Cyber-Duck’s case, to nearly ¼ the original KBs).

3. CSS Flexible Box Layout Module

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.

4. Bootstrap

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!

8. Responsive Grid System

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.

10. Google Chrome Developer Tools: User Agent Override

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.

11. Google Webmaster Tools’ emulator rundown

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.

13. Even More Emulators

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).

14. Adobe Edge Inspect

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.

21. Built With Bootstrap

See how other sites have used 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.

23. “Introduction to Mobile Prototyping with HTML, CSS, and JavaScript” by Abduzeedo

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

Time to try out some new tools, eh? I’d love to hear how you’ve incorporated new tools and resources into your workflow in the comments below. And 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

About the Author:

Julia Larson is a freelance copywriter & copyeditor. When not on a quadrilateral device, she’s on her yoga mat, a hike, or a cooking spree. Connect with her on Google+ and Twitter.

Leave a Response

5 Responses

    • Jul 09 2013
      Julia Larson

      Hey Rob,

      Thanks for sharing about your tool! Will definitely check it out, and I encourage our readers to check it out too, but our roundup is published and capped at 30. Great, clear demo on YouTube! Hope to hear your input on our posts again soon :D

    • Jul 10 2013
      Rob Levin

      Thanks for checking out the demo Julia. Keep coming with the timely content!

  1. Jul 17 2013
    Henry

    I used bootstrap quite a few times. It’s easy to use though I haven’t tried other tools you’ve mentioned.

    • Jul 22 2013
      Julia Larson

      Hi Henry,

      Very cool, thanks for sharing! What do you like best about Bootstrap? It’s great to hear the pros/cons from our readers–and even explore how a tool’s UX could be improved :D

      Definitely check back in to share how those other tools are going!