(As an aside, at the time of writing in January of 2013 I am well aware that our own company’s website is in dire need of a weight loss regimen in accordance with the recommendations in this article. Fear not, as I am not only willing to prescribe the medicine, but I am willing to take it too! Our new website is currently under construction and is anticipated to be launched next month.)
Throught the use of what is called a “media query”, a website can be adapted (or respond to, hence the term “responsive” web design) to any number of screen resolutions or screen sizes, from the smallest mobile device to the largest flat screen display. Media queries establish the operating system, browser, and viewport size (basically, the screen size), among other items, and then tell the site how to display itself to automatically fit the device it is being viewed on. Media queries can also be utilized to serve different file sizes of the same image, for low resolutions (low file size) images for smaller viewports on handheld devices with low bandwidth to high resolution, larger file sizes for HD or “retina” display devices with large screens and a broadband connection. This ensures that the user will get the most optimum viewer experience regardless of the device utilized to view the site.
Also, through the addition of a few lines of code, all of these new features can be made backward compatible for older browsers that do not support HTML5 or CSS3.
With the increasing use of limited bandwidth mobile devices, the above techniques greatly reduce site load times. This, in turn, improves a site’s performance on the search engines as well. Therefore, I would strongly recommend getting a website checkup today so as to maximize your site’s customer reach and SEO performance. Happy new year, and good luck with your new website diet!