How to Create a Responsive Design Website
What is Responsive Design?
A responsive design is a website that adapts to the screen size. A website designed for a large monitor is not ideal for a smart phone and vice versa. Therefore, responsive design was created. With a responsive design, there is no need for a separate website for a mobile device – everything is built using one set of content. This content is rearranged, depending on what looks best on the screen. The screen width normally dictates what version of the website is seen. This allows a mobile version of the site to be simple, easy to read and likely prevent the annoying scrolling / pinching the screen / expanding, etc.
Designing a Responsive Website
The way that Cityline Websites designs responsive websites is by essentially creating 3 different designs. At Cityline Websites, we normally design full sized site, followed by the mobile and intermediate sizes. Others build the site starting with the mobile version.
The full sized website designs at Cityline Websites are built with all the features, and design elements required by the client and what looks best from a design perspective. This design is used on any device that displays 960px width and above. As a standard rule of thumb, we normally limit the width of the websites to 980px wide. We don’t worry too much about the exact mobile version layout but definitely keep in mind how the design elements will change as the screen width decreases.
The intermediate sized website is the transitional design which may be a tablet, or mobile version with the device in the horizontal position. The screen width where this design becomes activated depends largely on the website design, but often it is around 500 to 600 pixels up to 960px. We like to advance from the mobile version to the intermediate version at lower widths if possible.
Usually the full sized designs at Cityline Websites have 2 columns. The intermediate design will generally closely represent the full sized website, but with the columns adjusted in size. Often there will also be differences in number of footer columns (eg from 4 to 3), and the header will be scaled down. Care has to be taken with the menu bar so that the links will still fit across the site. If the links are not going to fit, then we will either shrink the font size in the links, or go to a drop down menu. In our intermediate sized design, generally the left column contains the sub page links and therefore we try to keep it a fixed width.
Mobile website designs we build for 320px. This design is used up until the intermediate size (500 to 600px). Mobile web designs by Cityline Websites are 1 column sites, with a dropdown menu at the top showing all the website links. Normally, the mobile websites we build have the bells and whistles removed such as searches, testimonial side bars, and rotating banners. The key is to have a quick loading site with text large enough to read without zooming in. There should be an option for the full website version.
This is perhaps the most important information a designer can give the programmer. Knowing what to do with the layout at the screen widths between 320px and 960px helps the programmer deal with the css in the most efficient manner. For instance, the programmer needs to know what to do with the left column – does the column stay the same width (and therefore the images and font sizes stay the same), or do all the left column elements need to scale with a scaling left column? In the header, does the logo and tagline change size, or do they wrap instead of going side-by-side? It is imperative as the css units and calculations will be dictated by these decisions.
Responsive design is here to stay. It’s more work than a simple single design site, but with systems and practice, both the responsive website design programming for responsive websites can be made less painful and very rewarding.
We at Cityline Website have chosen to use 3 versions of each design as we feel it covers the spectrum of devices to be found viewing the web.
Following what we do may not be exactly what works for you, but it should give some ideas on how to approach responsive website design. No matter what you do, however, it’s communication between the designer and programmer that will result in a great Responsive Website Design.