Responsive Web Design for Mobile Accessibility

The Problem

More users are browsing the internet using mobile phones and tablet PCs. This results in many different screen resolutions to be considered when designing a website. On mobile phones websites are usually displayed in a scaled down version which makes it harder to read and require the user to zoom into the content. Appearance on tablet PCs is usually held identical to the desktop version which is also not always ideal. It is not only about screen resolution, but also the use case of each device. Desktop, tablet or mobile apps users browse websites with a different intent and are looking for different information. For example quick access on your mobile, great reading experience on your tablet or more functional use on a desktop. They are also used to native applications that provide them with a great user experience and this experience is very device specific i.e. you operate an Android phone differently than you operate a Blackberry etc.

To avoid the problem in the past companies designed and build a mobile optimized website which was replicating the contents of the main website. This process is quite cumbersome as it results in a higher development effort as well as redundancy of content at times, thus makes the management of the website more complex and error prone.

Nowadays, companies also tend to create native mobile apps instead; however this results in many mobile apps not having any application specific functionality other than displaying pages of content and the question remains if you should build an app or a mobile website.

The Solution: Responsive Web Design

Responsive Web Design is the solution to the above mentioned problems. It is a new and emerging concept in web design that equips the design to become adaptive and respond to different viewing contexts, while maintaining the overall integrity of the design.

In order to support responsive design your site needs to be designed keeping the transition between different screen sizes in mind. This means that the overall structure of your website needs to allow to change the content flow based on the current screen resolution.

Modern browsers, including mobile web browsers support the required technology to render your website 'responsive' to the screen resolution of the browser. This is enabled using media queries to change style sheets, fluid grids for the layout and structure of the website to adapt according to the width of the screen as well as Flexible Images which will scale and render images based on their environment. Using the combination of the 3 techniques your website will render adaptively based on the browser the user is coming from and therefore render perfectly on a tablet, mobile or desktop.