Responsive Web Design for Mobile Devices

It can’t have escaped anyone’s notice that the use of smart phones has gone through the roof. In 2013 International Telecommunications Union (ITU) predicted that mobile phone ownership would exceed world population by 2014. And while PC’s and laptops are still the most popular device to search the Internet at 91%, smartphones are following close behind at 80%.

From these facts we can then establish that smart phone usage is ubiquitous and as web designers we have to get on the bandwagon, or be left behind.

Getting on the Mobile Bandwagon

If you’ve ever accessed a website on a mobile device that wasn’t built to be viewed on a small screen, you’ll know why it’s important to design websites that are accessible across all sized devices. Websites that don’t work well on smart phones simply will not be used and at worst, the visitor won’t come back and may even have a negative view of your brand. So it is very important to create websites that work, in a responsive way, across all screen sizes.

There are several approaches to getting your site working on mobile devices:

  1. Responsive Web Design (RWD)
  2. Dedicated mobile apps
  3. Adaptive Web Design (AWD)

Responsive Web Design

Responsive web design (RWD) utilizes a fluid grid approach with flexible images to allow a site to respond to different screen sizes. In other words, the use of responsive web design creates sites that dynamically change as the screen size changes. You can easily spot a responsively designed site by resizing the browser – a responsive site will automatically resize to the new browser size, perhaps nesting menu items to optimize the use of the space. This is possible because responsive sites are not dependent on specified screen sizing in the code and the CSS of the site, i.e. the underlying style controls, manage how you view the site on different sized screens.

Responsive sites have several advantages:

  1. They display a consistent, on brand look and feel, across any device used to access it – allowing your customers to instantly recognise your company
  2. They offer a more usable experience, visitors can jump between screens, rotate phones and so on an still have the same experience
  3. They comply with new algorithm search criteria of Google (see mobilegeddon below)

Dedicated Mobile Apps

Creating a mobile app for your site is a possible way forward; however there are a few issues that should be considered:

  1. Is an app appropriate for your site? Apps can offer features that websites can’t. As it is an installed application, it can utilize various features on your phone, such as geolocation and the integrated camera function.
  2. It has to be installed. The biggest issue with a mobile app, especially if you have a lesser known brand, is that the App has to be downloaded from an app store and installed.
  3. It doesn’t help you when someone is searching for a product in a search engine

Mobile Apps should be viewed as an adjunct to a main website, offering enhanced features afforded by integration with phone features.

Adaptive Web Design

Adaptive web design (AWD) works using break points. That is, they are developed to present different content depending on specific pre-defined screen sizes, hardcoded during development. Adaptive sites are different to responsive sites as they have to detect the screen size first, before then rendering the site for that specific size.  This can create inefficiencies in the method, for example, if a user turns a mobile device to landscape. The problem is, there is an increasing number of varying screen sizes and the maintenance of adaptive sites is becoming onerous.

Mobilegeddon

One factor that should be considered in choosing to make your website mobile friendly is a new update to the Google search algorithm, nicknamed ‘mobilegeddon’. The new update, released in April of this year, was created to accommodate the increase in mobile searches carried out from a mobile device. In a nutshell, if your website is not what Google determine to be ‘mobile friendly’ it will not achieve a good ranking in the search results of a mobile based Google search.  You can check your current site for mobile friendliness using a Google test site here:  https://www.google.com/webmasters/tools/mobile-friendly/

How Should I Respond?

Responsive web design is an effective development method for creating fluid and dynamic websites that offer the same user experience, across myriad screen sizes including mobile device screens. They offer a more easily maintained site for your organization and a seamless experience for your visitors.

Share on facebook
Facebook
Share on email
Email
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pocket
Pocket
Colby Albarado

Colby Albarado

Colby is a fullstack developer

Back to Home Page