Multiple Formats to consider with Responsive Design techniques
Apr 26, 2013

The Responsive Craze

The latest hot buzz word in Web development is "Responsive Design" and it is taking hold across the net. What is this and why should you think about adding it to your site is what I'll cover here in this article. the intention of this article to to inform website owners, not developers so if you are looking for a tutorial, there are tons you can find using your favorite search engine.

In todays computing world you have more than just computers to think about with web design and development. Today we are in a constantly evolving technology environment, and the biggest growth is within the Smartphone and Tablet arena. With these advances, there is an increased focus on web design standards that will not only look great on the typical computer, but will also look great and load fast on a smaller device such as an iPhone or iPad. Responsive Design does just that, if it's properly approached. In the past, mobile friendly websites generally were completely separate styles and sometimes completely separate development overall, adding a lot of development time and in some cases a lot of extra costs to make a site "mobile friendly".

Responsive Design is the process of using a fairly new feature with Cascading Style Sheets (CSS) that allows a design to specify different styles and layouts dependent on the size of the screen viewing the page. This allows content to be adjusted in just about any way imaginable to have a usable site on any device. Allowing the site to choose a style set based on pixel width of the browser has many benefits, and has its own sets of challenges as well.

Things to consider when thinking about adding responsive design to your site:

Who is my audience? Does having separate layout styles for each device make sense? Some sites are consumer focused, and consumers are going to be on tablets and smartphones more than any other device in the near future. However, if your site is business focused, and your viewers are more likely to be sitting at a computer in an office, you may not have to put too much thought in to Responsive. Then again, why not offer all the options?

What information needs to be on the page for each view type? In some instances you can reduce the amount of content on each page based of its importance. For example: Fancy graphics that serve no useability purpose but look great on a full screen may be removed to allow for more important information on the smaller screen size. Careful thought and planning can make your site user friendly and a happy visiter is key to retention and return visits!

How many sizes do I want to have developed? This is an important thought process, because the possibilities are now pretty much endless. Pixel based design can go from zero and up - however I would suggest picking about 4-6 scenarios - such as Large Screen, Small Screen, Tablet Portrait, Tablet Landscape, Phone Portrait, and Phone Landscape. These can all be developed close enough to look good on just about anything. There are tons of phone and tablet sizes, so finding a standard to stick to will most likely look good on all, perfect on most.

If you would like to explore Responsive design on your site, please feel free to contact Basstrail Design, we would be more than happy to work with you to get your site updated with this feature that will increase your visitor satisfaction on whatever platform they choose to use!

Author: Eric Nelson

Edited on: Apr 29, 2013