Ever since Steve Jobs unveiled the original iPhone, web designers and developers have been working to try and improve the web browsing experience on mobile devices. Standard practice back then was to build two websites; one for desktops and a stripped down mobile version. Even so, mobile versions were primarily used by bigger sites before responsive design became more of a standard. These generally were poorly designed and frustrating to use. Most of the time you were left viewing the desktop version and trying to tap little buttons with your fingers.

If your not building responsive websites, you may as well not be building at all.

Minion

Responsive vs Mobile Versions

Generally, mobile versions of these sites weren’t user-friendly and kept the user from accessing main site features. A restaurant may have a desktop version that had their menu on it and then the mobile site would remove the menu because there was not an effective way of displaying it. This would frustrate your customer and drive them away, which is obviously not the intention. Over time these mobile sites got better and designers started to learn clever ways to display information on a small screen. This was, however, a massive amount of work for a percentage of users which at the time was pretty low. Another huge issue with these mobile sites was trying to make them search engine friendly. Your website isn’t doing you any good if Google and the other search engines don’t know what to do with it. Responsive Design is an answer to the mobile website problem. It is one website that is built to scale to any screen size, therefore removing the need to code, develop, and design two separate sites. Phones and tablets all have different sizes and resolutions; trying to code for each and every one of them is a nightmare. Responsive Design solves this problem and that is why it is being so widely adopted and demanded by users.

Stats & Metrics

You might be thinking that this is all a whole lot of work just to make a website user-friendly on a smartphone/tablet. I mean, how many people actually use their smartphones to browse the web and make purchases? This is where businesses have a huge misunderstanding. In 2014, mobile internet usage is predicted to overtake desktop usage. As of 2013, over 116 million Americans own a smartphone, and that number is rapidly climbing. There will come a day in the future when more of your website visits will come from mobile devices and tablets then a desktop or laptop. This is why Responsive Design is so important.

Popular Frameworks & Services

So now that you know what Responsive Design is and why it’s important, you’re probably wondering how you implement it. That depends on how you want to build your site. If you build from the ground up, you’ll want to use a framework like Foundation or Bootstrap. These frameworks are pre-built HTML and CSS files that you can tie directly into your own code. They are easy to use but will be much easier to understand if you already have an understanding of HTML and CSS. Most of my own experience is with Foundation. I have built multiple websites with it and find its developer community very helpful when trying to solve issues. There are a ton of built-in plugins and features that you can choose to use or leave out entirely. I will be doing an in-depth dive into Foundation in the coming weeks that will help if you’re just getting started. Your other option is to use a service such as Wordpress or Squarespace. These are a one-stop shop service for people who aren’t familiar with web design. They allow you to chose a theme and add your content. You can have a site up and running with these in a matter of hours. The best part is these themes already have the Responsive Design built in, you don’t have to worry about it. However, you still want to pick a theme and design that complements your product. Go to some competitor websites and see what they are doing; what do you like and dislike about how they display their content. The more thought you put into it the better, and remember to keep it simple and easy to use. If you’re not paying attention to how a site reacts to different screen sizes, it’s going to affect your user base. People want something that’s easy to use and you need it to be accessible from as many different devices as possible.