New Year’s Resolution – Lose That (Website) Fat!

It’s a new year and a great time to embark on a quest to lose all that extra fat that we have put on over the years. I’m talking about website fat, of course. All of that bloated code, deprecated HTML tags, tables, javascript, JQuery, Flash, images and such. The new trend in both web design and search is to get lean – less is more! Not only does leaner code (faster loading websites) improve search engine rankings (the importance of speed in search engine rankings is no longer merely a topic of debate, it is accepted fact among knowledgeable SEO providers), but also dramatically improves the user experience (in other words, increases conversions, stickiness, and return visits) for the vast numbers of mobile users. If you aren’t willing to cut the fat from your site to create a speedy and enjoyable experience for mobile users, you could be missing out on over half (yes, upwards of 50% of all web searches are now conducted on mobile devices) of your customers.

(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.)

Known as responsive web design, modern user and search engine trends require that most websites over two years old be reworked so as to upgrade to HTML5 and CSS3. The use of these new tools eliminates fat by dispensing with the need for Javascript, JQuery, Flash, and many images, as well as creating leaner HTML code and reducing HTTP requests to the server.

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.

HTML5 and CSS3 also eliminate the need for many images (therefore HTTP requests to the server and image file downloads) by enabling the site to display gradients, navigation buttons, backgrounds, rounded corners, text effects such as drop shadows, divider lines and the like through the use of a few lines of code. In other words, there is no need to create and download actual images, the code and stylesheet can now be written so as to tell the machine to draw the image or effect itself! Also, the need for Flash or javascript/JQuery transitions and animations can largely be eliminated via this same technique. This cuts tons of website fat, increases download speed and response time. Forms also are no longer dependent on javascript/JQuery or other scripting, as HTML5 fully supports native form functionality.

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!

About the Author: Matt Foster is the founder of ArteWorks SEO, a web design and SEO firm based in Austin, Texa. For more information, please visit http://www.arteworks.biz.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>