What are the benefits of a responsive web design?

With so many people viewing websites on mobile devices, it has become necessary to design and develop websites with this new target market in mind. If you have not had your website mobile optimized, now might be the time to think about doing so.

Websites that have not been mobile optimized are generally built with fixed layouts that fit the width of desktop computers and laptops. However, when viewed on a smart phone, a fixed width layout shrinks to fit the screen. Content then becomes too small to read so that users will need to zoom in and scroll sideways to view everything.

Another disadvantage of a website that has not been mobile optimized is that any large images that fit a desktop screen will use a lot of data to load when presented on a mobile device. Any mobile users on limited data plans may leave a site that is going to use a lot of their data due to it being mobile optimized.

What are the options?

There are generally three options for creating a mobile optimized website:

  1. Responsive web design
  2. Two separate websites, one for desktop and one for mobile
  3. A desktop website and an app for mobile devices

The benefits of responsive web design

You won't lose Google search results rank

Since April 2015, Google started penalizing websites that are not mobile optimized when searches are carried out on mobile devices. What this means is, if your website does not pass the Google Mobile Friendly test, it will rank lower on search engine results pages where the user has searched for your keywords on a mobile device, which they are doing more and more these days. As a result, if your website is not mobile friendly, since most people usually only click on links found on the first or second page of search results, your website may not be found by your target market. The best way to ensure your website is optimized for mobile is with a responsive design. Not only does it ensure your website looks great on small devices as well as tablets and desktop computers, but because it is mobile friendly, it will not be penalized by Google during mobile searches.

Smaller file sizes

Using media queries for various screen widths in the stylesheets (CSS), responsive website design only requires one set of files and therefore presents the same website on all devices. For the most part, a responsive website will look fairly similar no matter which device it is viewed on (although not necessarily). This can mean a lot less time is needed to design and develop a responsive website.

Text is easier to read on mobile phones

Using the same media queries, multiple column layouts on a desktop computer become a single column on a smart phone, text is much bigger and easier to read and the regular menu bar is swapped for a mobile friendly menu bar. Also, smaller images can be presented or images (such as large background images and sliders) can be removed entirely, reducing data use on mobile devices.

Looks very similar to your desktop website

By contrast, a mobile website often looks quite different to its desktop version and therefore takes more time to develop. It also requires a separate set of files and a sub-domain (usually mobile.yourdomainname.com or m.yourdomainname.com) on which to present itself in the browser. One of the main disadvantages is that a mobile website cannot tell the difference between devices and will be presented on larger devices such as iPad and other tablets which many people now use at home, school or work in place of a regular laptop.

In most cases, the user can switch to the desktop version, if they can find the link, but they will then be presented with a non-mobile optimized version (unless it is a responsive website design). If they do not find the link to the desktop version, they may leave because it is not as aesthetic as a traditional website and the things they are looking for are not where they expect them to be.

More cost-effective than a mobile app

An app version of the website (the third option), may look similar to a mobile version, but is usually not viewed through a browser. Larger businesses, such as big box stores, banks and online stores, may consider having a mobile app developed, but for smaller companies the investment may be too high (the cost is generally over $5000 to create an app and can cost over $100K for a corporate app).

Unlike a mobile website and traditional website, updates to an app need to be approved by the end user and may not be beneficial if you need to make frequent updates.

A responsive website is probably the most cost-effective option of the three for small businesses since only one website needs to be developed. A responsive website does involve more development time than an old-style fixed width website, and additional Photoshop designs may be needed for more complex website layouts so clients can see how their websites will look in the three main sizes before development begins, but any changes to the content or overall look of a website only has to be done once.

Read Adobe's article on the pros and cons of mobile optimized website vs a mobile app here.

Use Google Analytics to determine whether your target market is using mobile devices to view your website, and if it is, it's time to contact Kaz Design Works to have your traditional website converted to a responsive website.

Tidbit: How does a responsive website respond?

Responsive websites usually use proportions (percentages) to denote widths (for page wrappers, containers, columns and images etc.) and therefore adjust to the width of the device on which they are viewed. Media queries are used in the stylesheet (CSS3) to adjust layouts and fonts at specific screen widths (generally at the iPad and iPhone screen width, although several more iterations may be defined). So, for example, a four column layout on a desktop or laptop becomes two columns on a tablet and one on a smart phone. Large images and videos are often removed or replaced with smaller versions at the iPhone size to reduce data consumption on mobile phones.