From Static to Responsive

If you have a static website, can it be “converted” to a responsive website?

The answer depends on several variables, but in most cases the answer is probably “No”!

Only a few years ago the layout of a website was designed to fit a larger screens and ‘wow’ us with static images and plenty of content. (Google likes lots of text – right?)

Now requirements have done an about-face. Contemporary website designs are displaying content pared down to a few essentials. So a new design starts with the mobile display, and only after that is set, is the desktop / large screen display coded and styled.

Possible ways of dealing with responsiveness for an existing static pixel-based web site:

1. Create a whole new site, with re-written content and re-considered priorities
2. Develop an alternate duplicate (simplified) website designed and displayed solely on smaller screens
3. Develop an alternate greatly simplified version of the site to be seen on smart phones only
4. Attempt to convert static HTML tables to flexible percentage-based divs. (HTML and CSS can-of-worms)
5. Add mobile CSS definitions to be displayed depending on viewport size. (Through media queries)
6. Ignore the whole thing (Google will punish you)

Static web sites created with div’s or tables, set to a width around 960px wide may be “reasonably” functional on a tablet or iPad held horizontally, however, text links and buttons may be too small for a finger touch.

If you use Google Analytics or other tracking systems, research how many of your viewers are using alternate media. That will give an indication what size you need to consider most.

Viewport sizes ranges: 320 × 240, 640 × 960, 768 x 1024
For sample code to place in a CSS file use these media queries:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Establish “break points’ in pixel width where alternate CSS will be triggered. Don’t rely 100% on the standard size ranges, as viewers may manually adjust their browser width – consider the “break-points” according to your design.

Pixel density – with retina displays, actual pixels are smaller so images and graphics need to be scaled up accordingly.

Layout – small screens require a single column. When the window is wide enough columns can be arranged next to each other (div’s set to align ‘left’, with a clear div under them). On small screens the columns will slide under each other to display as a single column.

Navigation – for small screens a drop-down menu needs to be activated.

Read more at:

http://www.vandelaydesign.com/turn-any-site-into-a-responsive-site/

http://www.smashingmagazine.com/2013/03/18/retrofit-a-website-to-be-responsive-with-rwd-retrofit/

http://rocketmedia.com/blog/converting-website-to-responsive-design