The other day I was talking to a friend of mine that had told me some time ago that his family had a goal of letting his wife stay home with their new daughter. Although she had been staying home for a while and he was always worried about losing his job because his spending habits kept them barely afloat with even a minor emergency (government furlough in this case), he told me that his wife was being offered a job. While I was more concerned about their goal of staying home with their child I couldn’t believe what I heard next…they were talking about using his wife’s income to buy a new 2014 Corvette. I couldn’t believe my ears, so I went to show him how much that would cost him over the years by sharing a website with him. I pulled it up on my smartphone, but was very disappointed when I realized that it was very hard to read and nearly impossible to navigate.
One thing that you want to avoid when building your website is to avoid the mobile reader. There are over 2 Billion mobile phone subscriptions worldwide, and with over 87% of American adults having cellphones (45% of them being smartphones) and 90% of them using their phones to go online, you have to build a website that looks good on a mobile device.
The good news is that with today’s technology you can build a website that looks great in both full format large screen computer monitor (or even a big screen television) and can adapt to something as small as an I-Phone (I don’t know why they don’t make them bigger!).
The way you do this is by building a responsive website, this is one that basically can change size or dimensions based on the size of the screen that it is being viewed on.
There are really three different ways to make a website using responsive techniques. First is just using columns that are proportional to the width of the screen that it is being viewed from. The technology to do this has existed for a long time.
A second way to make your website responsive is to use flexible images. This will show the size of the image in a smaller scale on smaller screens. This is largely one of the bigger causes for sites to look bad on small screens, if the image is too big and isn’t automatically adjusted, of course the biggest factor is using pixels to define how wide a column is, this will really mess up a website when viewing from a mobile device.
The final way to make a responsive website design is to use CSS rules to layout the page based on the size of the display. Using this, you can change from a 3 column layout on very large screens, to a 2 column layout on a medium sized screen (think iPad), then a single column layout on a smartphone. Using this technique combined with the proportional columns and flexible images to ensure that you won’t lose your mobile visitors before they even have a chance to read your content.