5 Essential Tools for Mobile Responsive Web Design

Mobile Responsive Web Design

As predicted, the number of global mobile users has now overtaken desktop users. People are increasingly using their phones or tablets to shop, read, play games, browse social media, and generally replace computer usage. Personally, as someone who spends all day working on a computer, if I’m reading something online or browsing the internet after work hours, it’s on my phone or tablet.

Given all of that, it’s more important now than ever to make sure your website is responsive. Here are five tools to help:

For conveying the look and feel before you get to the mockup stage: Style Tiles

If you’re in the early stages of working with a client, you might not want to invest the time in creating mockups for each potential responsive layout without knowing you’re on the right track. Style Tiles helps you create a common visual language that you can both agree on before you get into mocking up the actual design.

If you’re really old school and like to sketch with a pen and paper before you start designing on the computer, the free Interface Sketch printables have got you covered, with layouts for all kinds of devices and screens.

For sharing mockups with clients: InvisionApp

InvisionApp is a full-blown prototyping, collaboration, and workflow platform that lets you create clickable, usable prototypes and then get feedback on them from clients. Clients (and other team members) can log in on their desktop or their mobile app, to see what the prototype looks like on different screens, and then leave comments and feedback on it. Notably, they can highlight and leave comments specifically on the parts that they’re giving feedback on, saving you from sorting through a long email and puzzling out what, exactly, it is that they’re trying to reference.

For testing: BrowserStack

Once you’ve designed it, you need to actually test your responsive site. BrowserStack lets you remotely test across different devices and browsers, seeing how it actually looks to real users. It’s reasonably priced, too, with plans starting at just $39/month—which isn’t a huge investment when you consider the potential cost of not having a well designed mobile site.

For staying on top of industry trends: Responsive Design Weekly

The online world is constantly changing, and with it, best practices and standards. Responsive Design Weekly is a free once a week email newsletter that curates all. If you don’t want to wait for the email after you sign up, you can dig into the resources at ResponsiveDesign.Is, a sister site that has articles and podcast episodes to teach you more about responsive design.

For WordPress: Layers

There are plenty of WordPress themes that offer responsive designs, to varying degrees of success. StudioPress offers several, for one example. What makes Layers different is that:

  • It’s built to be fully responsive
  • It’s open source and free
  • It’s intended for non-designers to use

Whether you’re a business owner trying to design your own site on a budget, or a designer that wants to leave your clients with something they can manage and update on their own, Layers could very well be worth checking into.