Retrofitting Your Site to Repsponsive Grid

Responsive Retrofitting, Is it possible?

I would like to take the time to discuss retrofitting your current site to a mobile ready or responsive platform.  I’m going to keep this simple and keep the technical talk to a minimum.

1. Do you know what responsive is?

Responsive web development is (in a nut shell) a website that not only looks good on a desktop pc but also looks good in various sized hand held devises.  For instance, when someone views your website on their desktop computer, it looks like a normal website however, when the same website is viewed in other devices, your website shrinks or becomes responsive so the content is readable on these devices.

While there are some challenges, I believe responsive web development is the most logical way to display the same website across multiple platforms without building a separate website or app.

If you’re pretty happy with your current website and just want it to work on mobiles & tablets, a retrofit is for you. If you want a responsive website but don’t have the budget for it then you might have to look at making your current website responsive.

Even if you like the design of your current site but you want it to work on these devices, retrofitting is what you’re looking for.

Not all sites are created equal, and a retrofit might require more or less work:

  • Some dinosaur website built using tables for instance, might not be a good candidate for retrofitting.
  • If your website has messy or erroneous code, this might also hinder a successful retrofit.
  • A few examples of retrofitting would be my latest project with Jo-Ann Fabrics.  They had hundreds of existing promotional pages that needed retrofitting.  Here are a few examples:

What’s involved in a retrofit?

There are many resources offering (quick fixes) but don’t be fooled.  These people are looking for quick cash and may not take into consideration the various elements that need altered and adjusted accordingly.  For example, you might decide to go with the quick fix but you could end up with a messy site where the fonts are too large, buttons are partially hidden or certain elements of the page just disappear and plain unusable all together.

Retrofitting is more than just changing static widths to percentages in your CSS, it’s drilling down each element and testing on tablets, iPhones, Droids, and desktop monitors alike.

Typographical elements need attention as well.  For instance, the same font that looks good on a desktop monitor may not look so hot in a hand held devise to increasing the font size for this device would make it more legible for reading.

Navigation is key!  The only way a user can navigate your site on a mobile is to have clear navigation in order to do so.  There are several techniques in shrinking large menus into a more manageable mobile experience.  There is nothing worse than wanting to find information and because your site isn’t mobile ready, they may get frustrated and never return.  This can reflect badly on your brand.

The best approach to creating a responsive site is starting from scratch and seriously rethinking your content but if you’re money is hard to come by like everyone else, a retrofit might be just what the mechanic web professional ordered.

Whatever your need, whether it’s a full site redo, or retrofitting your sales pages to work in tablets and hand held devices, get in touch!


About Denny Smith

Specializing in HTML5, CSS3, jQuery, WordPress, Expression Engine, SEO Strategies and Responsive Web Development, I build intuitive webs that demand results.
I'm not as mean as I look...
Posted in TipsTagged , ,

« « Previous Page Ajax .load URL Demo   |   Next PageGoogle ‘(Not Provided)’ Keywords: Work Around to Get Organic Search Data » »