responsive websites

Responsive Websites: The Mobile First Approach

Anyone with a smartphone has likely visited a number of websites that required them to zoom in-and-out and pan side-to-side while searching through micro-sized content. This problem is due to the website not being responsive to the size of the screen displaying it. The lack of responsiveness in websites like these are the cause of much user frustration and increased bounce rate (visits in which the person left your site from the entrance page without interacting with the page). Intentional design and programming methods can be used to address this usability conundrum. The resulting product is a responsive website.

 

website examples

Mobile Solutions

In truth this mobile access problem can be solved a few different ways: smartphone and tablet apps, a separate mobile site, and responsive web design. To explain why responsive design is the best solution it helps to know a little about creating smartphone & tablet apps and separate mobile websites.

Smartphone and Tablet Apps

While this is a great solution for providing rich and engaging content for games, utilities, and books it is often not the ideal solution for a website. Creating an app requires development for each device specific programming language. For example Apple iOS uses Objective-C, C, and now C++; Android uses Java; and the Windows 8 phone uses Visual Basic, C#, and C++ ; not to mention that each one requires the use of their own developer kit. This means that in order to have an app for a website on all major mobile platforms the app would need to be written in up to 3 different programming languages in addition to the original website. This solution will easily cost double, triple, or quadruple the cost of a regular website.

Separate Mobile Website

Creating a separate website for mobile devices is a similar approach to the app solution. This often requires creating an entirely separate website with duplicate content. Since two separate websites are involved the time often doubles when it comes to development, content management, and technology updates. This can result in a beautiful user experience for the target mobile screen sizes but often lacks support for the gamut of screen sizes for oversized cellphones and tablets. Separate mobile websites will usually cost double the price of a regular non-responsive website.

The Responsive Solution

Responsive web design is by far the most cost effective and comprehensive solution. Instead of programming a totally separate website or app for various mobile devices, this solution provides one website that looks good in all browsers. Responsive web design also utilizes fluid grids, adaptive design techniques, and media queries to cover the entire span of device resolutions and sizes. Furthermore, without multiple apps and websites to manage, more time can be spent creating content and online marketing. Compared to the double, triple, and quadruple amounts of time/cost that apps and separate mobile websites can take to create, a responsive website only takes about 30% more time to build than a traditional non-repsonsive website.

Here at Lumné we have found that the most effective way to design a responsive website is from the mobile up. This means that we start by designing for the smallest screen sizes first and work our way up. We design for the mobile first for two main reasons. First, most websites are now being viewed from mobile devices as opposed to desktops and laptops. Second, it is far more efficient to add the core of a mobile design than it is to pare down a heavy/feature-rich desktop design.

If you like this post and have any questions or comments, please let us know! You can write in the comments box below or send us a brief email via our contact page. We would love to hear from you!