In our article, "Is Your Website Mobile Friendly" we discussed why you must have a mobile friendly site in the business landscape of today. Now, in this article we are going to describe what and why we have to practically rebuild your website and convert it from a fixed-width site to a responsive mobile site.
The Old-School Method of Building Websites
In the past, website designers (including us) built websites with an html feature called tables. Tables are similar to the tables you use in Microsoft Word. The table used a tag called "Width" and designers would set the width of a site to something like "width=980px." This was also done with images (width="700px") and other content. This table allowed designers to design a website to precise layouts similar to magazine layouts.
The problem with using tables as the layout of a website, is that "fixed-width" sites are not flexible which is needed for mobile friendly sites. Because of the fixed-width, sites do not look good on a smart-phones or tablets. When displayed on smaller screens the device actually takes the fixed-width and tries to fit it in the window. That leaves the navigation to be too small for fingers. The content on the phone is really small, which leaves a user to either scroll or zoom in to read the content. Traditionally, smart-phone users do not like to do that. It can actually look bad for your business.
What We Have To Do To Convert Your Website
When we convert a fixed website to a mobile friendly site, we have to basically rebuild the site using a technology called BootStrap. This framework allows us to use DIV's for layouts instead of tables.
Here is a list of what we have to do...
- Setup a new Bootstrap Template
- Remove all layout tables in current website
- Remove all fixed-width settings that uses "pixels" (px)
- Reformat images to handle the various widths of devices
- Restructure Navigation to work on phones
- Copy and paste your current content into the template
- Test on different size devices
The Cost of Rebuilding
Rebuilding a website from a fixed site to a mobile site will require about 3/4 of the time that was spent on the fixed site; and depending on how much image manipulation and content reformatting that is needed will account for the time spent. For example, if your fixed site took 6 hours to build, your redesigned mobile site should take about 4 hours. Time spent could be less or more depending on what has to be converted to work on mobile devices.