Understanding Responsive Design

With the number of devices out there, it is important to consider how your site will display to the user. Many of the sites built even a few years ago do not change the display based on the size of the device. Responsive designs will adjust the size of the site dynamically based on the device it is being viewed on. The way the user sees a site on a desktop/laptop will be different than when he/she is using a mobile device.

Number of views:
The number of views or “media stops” will determine the complexity of the design/programming requirements. The most common stops include 320, 480, 600, 768, 900 and 1200 pixels. Each design stop will need to have design guidelines provided to the developer on a custom design build. These are subject to changes based on the trends of the most popular devices.

Building on a framework:
Building on one of the many of the available frameworks that already support responsive design can be a big advantage.  One of the most popular responsive frameworks is Twitter Bootstrap. Twitter Bootstrap is a front end framework that allows rapid implementation of reusable HTML/CSS elements.

Building on a theme:
There are many available themes that are already responsive and can be a good starting point if the limitations are understood. Developing on a premium theme can reduce development hours as long as layout changes and functionality are consistent with what the theme will support.

Mobile specific designs:
In some cases a desktop/laptop version  is a good alternative for a client. This would involve two designs. The first designs would be the view for the laptop or desktop. A mobile website would switch based on a JavaScript detection script that is loaded as the sites loads and test the specific device.

Starting with an approved desktop design:
When designing a responsive site, it is important to start from the top down. The first step is to get a desktop version of the site approved from the client. Once the desktop version is approved, the designer will provide the design for the other media stops for approval. A change in the desktop design could affect the designs for the tablet, phone and any other device.

Considering the functionality of the site.
The functionality of the site will be a big factor in determining development time and cost. A 5 page informational site will not be as involved as a site such as a shopping cart. The way the site will function, as it responds to the different devices, should be outlined in the initial set of instruction or scope of work.

Testing for responsiveness:
Testing is a big consumer of time on a responsive website. In many cases the developer will have a limited number of devices available for testing. A site that looks good on aniPhone may not be on an Android.  Expectations should be determined prior to starting a responsive project.

Visit Us
Follow Me