This means that irrespective of your device, be it a computer desktop, tablet or Smartphone, your website will display your content in an easy to read format without the need to pinch and zoom.
Additionally navigation features will adapt to smaller screen widths and columns of data will collapse in a logical and practical way to enhance reading and interaction.
Historically if you wanted your content viewable on small width devices you had to employ a liquid or part liquid website design, so that your text would flow according to the available width of the device.
This wasn’t a great solution for website designers as their designs would change according to width and would break easily. So fixed width designs have been commonplace for many years. Typically a website width would be between 900 and 960 pixels. This common format was based on the most typical computer monitor screen width at the time namely 1024 x768 or the higher spec 1280 x 1024. A 900 pixel width could be accommodated easily with this format.
Browsing the internet using a Smartphone is expected to overtake desktop use within 2 years.
However a fixed width design at 900 pixels would not show well on a Smartphone, as the device would typically zoom out to show the whole width and as a consequence reduce the website to tiny proportions.
HTML5 came to the rescue with the “@media” tag which allows web designer like us to poll for screen width. This means we can design websites for certain width breakpoints and write code so that our designs are shown at the appropriate size.
Why would I want a responsive website?
In the olden days people used PCs or Macs to access the internet. With the emergence of Smartphones, more and more of us are using these devices to access the internet for information, shopping, banking and email.
Browsing the internet using a Smartphone is expected to overtake desktop use within 2 years. Market research has established that 72% of consumers want mobile friendly websites, however only 1.25% of the 240m websites worldwide are.
So if your website isn’t mobile-friendly you could be handing your business to your mobile-friendly competitors.
Creating a mobile-friendly website costs no more to use that designing and building a traditional website. A primary consideration being, to design a site that steps up or down (through the breakpoints) in a logical fashion that does not conflict with the overall design.
This approach removes the need to procure and maintain a separate website for mobile users, which is a significant saving in on-going maintenance and support.
Furthermore this method can be easily integrated into existing CMS systems as our method is HTML compliant.
Google recently commission a study considering the wishes of mobile users and found that:
“Without a mobile-friendly site you’ll be driving users to your competition. In fact, 67% of users are more likely to buy from a mobile-friendly site, so if that site’s not yours, you’ll be missing out in a big way.”
“The fastest path to mobile customers is through a mobile-friendly site.
“While nearly 75% of users prefer a mobile-friendly site, 96% of consumers say they’ve encountered sites that were clearly not designed for mobile devices. This is both a big problem and a big opportunity for companies seeking to engage with mobile users”
“The fastest path to mobile customers is through a mobile-friendly site. If your site offers a great mobile experience, users are more likely to make a purchase"