Responsive Web Design: Understanding the Basics

What is Responsive Web Design?

A responsive website contains code that detects the type of device your site is accessed from and displays your website in a layout best suited to that specific device.

why-do-you-need-responsive-web-designWhy Should Your Site Be Responsive?

There are a few main elements that make viewing a website on a smart phone different from viewing it on a desktop or laptop computer. These may seem obvious, but they present real challenges for mobile users, to the point that Google will now lower the search ranking of any site that is not mobile friendly. (Learn more about The Urgent Need for Responsive Design from Tree Ring Digital).

Smaller Screen Size
Lower Resolution
Touch-Screen Navigation (rather than mouse and full size keyboard)

How Does Responsive Design Improve Mobile User Experience?

  • Simplified Menu – Consolidate the entire menu into one button that can easily be expanded and closed and keep the menu list concise. A commonly used icon for an expandable menu is a set of 3 horizontal lines.
  • More Link Space – Fingers on a phone screen take up way more space than a cursor on a desktop. So, all links need to be padded with extra space, especially when dealing with a list of links in a menu.
  • Direct Contact – Utilize the fact that your mobile users are on their phones by allowing them to call your business just by clicking your phone number or get directly to a map by clicking your address. This saves the user the trouble of copying your phone or address, opening a new app and pasting it there.
  • Helpful Form Fields – Forms are so difficult to fill in with tiny boxes and mini keypads. Use a popup calendar for dates, dropdowns and auto-fill whenever possible. Minimize fields and make each one as simple and easy to fill in as possible.
  • Adjusted Font – Along with cutting back on the amount of text, increasing the font size and selecting a simple font style make for easy reading without having to zoom in.
  • Smaller Files – Using smaller files will help your site load faster, use less of a user’s data plan and avoid panning around images that are too large and not helpful.
  • Flexible Layout – Screen sizes vary between different smart phone models and between vertical and horizontal orientation, so the layout needs to be able to adjust to the max width.
  • Single Column Design – You always want to take advantage of the entire screen, and while a horizontal layout is better for desktops, a vertical layout works best for mobile screens. It’s easier to view the elements of a site by simply scrolling down a straight line than to zoom in and out and move around a web page that’s wider than your screen.

Is Your Website Responsive?

Find out if your website is considered mobile friendly by Google with this test. Take a look at your site on a smart phone and compare the navigation and functionality to a few of our responsive sites:

The process of implementing responsive design correctly requires both design and programming skills and can be challenging. If you have questions or need help making sure your site is responsive, give us a call: 303-940-5544