Going Mobile with Responsive Design

An example of an Orion Group Client that uses Responsive Design to target customers on all device types.

How do customers view your website? Do I have to worry about mobile phones and tablets with my website? What is Responsive Design?

When you are planning the best user experience for your customers when they visit your website, these are probably some of the questions you will face now. Gone are the times of putting up a static width website that you know will look fine to your customers on their desktop or laptop computer. You have that shiny new iPhone and you know that most of your customers also come in the door with their iPhones or Android devices. What do you need to do to be sure those customers can view your site with the best experience when they are not in front of their computer?

According to data from analytics company, Statcounter, mobile internet usage is doubling year over year. With the introduction of new mobile phones with Android and iPhone software and new Microsoft Windows Phone Mobile software along with new tablet tablet devices from each company, this trend will continue to grow rapidly.

What Options Do I Have for Mobile?

With all of these different devices accessing the web and potentially your website, how do you go about making your site accessible on so many different screen sizes and software environments? Typically there are a few methods of putting your website and information on your customer’s mobile platform:

Dedicated Mobile App – A native mobile app can highly target your customer and give them a very unique experience accessing the information you would like them to see. This approach, however, comes at a high monetary cost. Developing a mobile app can be costly and things that are already in place on your desktop website will have to be duplicated in the app. You will also have to make separate mobile apps for each phone operating system. Your customers may have an iPhone, Android, Windows Phone, Blackberry, or something else.

Alternate Mobile Only Site – A mobile only site can be made and when your site detects a visit from a mobile device, it redirects the traffic to the mobile only site. You typically experience this when you get to a site and see the web address has changed to m.sitename.com instead of www.sitename.com. This can be highly customized to the device, but because of two totally separate designs you will have to maintain two versions of your site resulting a good amount more time you need to invest in site creation and management.

Serve Your Regular Site to Mobile – It is a viable option to ignore targeting mobile altogether. Your normal website will be viewable on almost all mobile devices. However, if you have a mobile smart phone, I am sure you have suffered the frustration of having to pinch zoom, tap around, and slide the screen to be able to try to view content formatted for a large screen on your small mobile device.

Responsive Design – If you are following web design and development trends you may have heard the term, Responsive Design. Many top sites are electing to use this method to solve their problem of targeting mobile devices along with traditional computer screens. Responsive Design is a method of adapting your site so it responds to the size of the screen on which you are viewing. The same design and content are used on the site, but elements are repositioned and resized to make viewing on the smaller screen much easier and improving the overall experience for site visitors.

How Does Responsive Design Work?

You can view great examples of Responsive Design at The Boston Globe, Smashing Magazine, and Sony. Just resize your browser window to a smaller size and you will see how the site responds to the window size. It will do the same when it detects the window size of your customer’s iPhone. You can find an even larger listing of Responsive Design examples at the great Responsive site, MediaQueri.es.

Media Queries are the driving force behind Responsive Design. A media query is a snippet of code in the CSS style sheet that declares at what size to execute a certain block of CSS code. For instance, if you had 30 pixels of padding space between two images on your website when viewing on your desktop computer but needed only 10 pixels of spacing to view properly on your mobile device, you could declare within a media query that targets a screen width of 480 pixels or less that the padding space is only 10 pixels. When viewed on the smaller device you would see the images closer together with only 10 pixels of padding, but it would display as 30 pixels on your normal computer screen.

Does Your Website Need to Use Responsive Design?

Not every site needs to use Responsive Design. This is a time you need to sit down and think about what type of customers you have and how they interact with your website. Every website is different and every business’s customers are different. A good analysis of your customers and their interaction is crucial to building any effective website and is all the more important when assessing your mobile website needs.

If you serve a very corporate clientele with a lot of e-commerce ordering done from a desk, your customers may prefere interacting with your data in a desktop view. They may not look to your site on their phone and when they do it is fine to see it in the normal desktop view with pinch and zoom.

If you are in a very niche market and have a certain type of data or application that will act totally different on mobile than desktop, you may want to individually target mobile devices with a dedicated native app or a mobile only website.

If you are a business to consumer focused company or a local business, then mobile is as crucial for you as your desktop website is. If you run a restaurant, how many potential customers may be in the area searching for lunch places on their phone? In this situation, they want to get to your crucial information as quick as possible. A site that will respond to their device and put the things they want, like your phone number and menu front and center will make sure they know what to expect when making a quick decision.

If you are a retail operation selling products online against brick and mortar competitors, you want people to be able to see your products as they are in your competitors locations. With the prevalence of mobile devices, comparison shopping online while in-store is at an all time high.

Responsive Design is powerful tool to effectively and economically target your customers while on their mobile devices. The mobile web is growing and the lines between desktop and mobile are blurring. Responsive design is an excellent solution to be sure that your message is being portrayed consistently and effectively on every platform which your customer is viewing it.