download google widgets: Widgets - Designing WordPress Themes For the Slowing Web

Jonathan Bailey of the Blog Herald wrote about Surfing the Slow Web, a summary of his recent experience trying to connect to the Internet as an evacuee from Hurricane Gustav. While most web designers are pushing the limits of heavy handed design towards high bandwidth, the world still doesn’t work that fast or wide. According to [...]

According to statistics, if you are reading this, you are probably on a broadband connection. Whether you are surfing at work on a LAN or at home on a DSL or cable modem, you are probably not on dial up at this moment.

However, there was a time not that long ago in which Webmasters were optimizing every element of their page feverishly to squeeze every ounce of speed from it. Broadband simply was not that common and, even over dial up connections, visitors had twitchy fingers on the “back” button at all times.

But in the age of YouTube, Flash ads and embeddable content, those lessons have been all but forgotten. However, not everyone has access to high-speed connection, especially in rural locations, and after spending just a few days limited to dial up, the lessons come flooding back.

Let us not forget that the virtual world is moving off desktops and land line and cable connections to the wired world of mobile computing. For years, our bandwidth speeds have been increasing, but now that we are moving to Internet access via cell phones and handheld computers, bandwidths are slowing down and narrowing again. Wired’s recent iPhone 3G survey reported that the average speed in the USA is 990 kbps - a typical average where only a few high scores can bring up the lowest to a well-meaning number, but a number not really indicative of what most are experiencing.

Living on the road in the early years, we started jumping up and down when we got a dial-up connection past 1200 baud (that’s without the kilobyte) in 1996, it was a thrill to get the first “fast” connection and actually move into the kilobytes. When WIFI was released and we could reach into the megabytes, and speeds have been increasing, but life on the road means taking what you can find, and what you often find is pretty darn slow.

I moved recently and had a frustrating time researching and initiating Internet access. I only have one choice for Internet service, and while they have multiple offerings, from dial-up to 20 Megs per second, I only have one choice, 1.5 Megs, at my location.

Designing for a Slowing Web

As you design your blog, WordPress Themes, Widgets, and even WordPress Plugins, you have a lot of options about how you code the code and include the graphic elements. You can design for the high speed broadband market, of which you might be one, or take into consideration the drop in bandwidth many are taking when they move from dedicated to mobile connections.

In addition to Jonathan’s tips for designing your blogs with slower bandwidth in mind, here are mine:

Use CSS: CSS was created to speed up page loading by putting all the design elements within the stylesheet. Many are putting them back into the architecture, including redundant images. Move all redundant design images and references back into the stylesheet and increase page generation times significantly.
Style for Accessibility: If your blog design meets the Section 508 Accessibility Standards and the WebAIM Section 508 Checklist, the odds are that it will load faster because it’s designed with accessibility features in mind like page readers and text only browsers.
Put Content First: The general order of a web page’s content in loading should be 1) header, 2) content, 3) additional content (comments), 5) sidebar(s), 6) footer, and the last should be ads and other heavy graphic elements. If a visitor has to wait for a heavy graphic element like ads, sidebars, and big images to load before they get to the content, they are very likely to lose patience and leave. Design the underlying architecture to load the content first and the pretty later.
Use a Mobile/Handheld Stylesheet: Include the option for a mobile or handheld stylesheet for your blog design or WordPress Theme. Restrict the visible design elements to the MOST critical information such as content rather than heavy graphics, sidebars, and ads. There are WordPress Plugins to help create a mobile version of your blog such as the new WordPress iPhone Plugin, Mowser WordPress Mobile, WordPress Mobile Edition, Mobilize by Mippin WordPress Plugin, WP-Wap, WordPress PDA & iPhone, WPhone, and iPhone / Mobile Admin.
Reduce, Resize, and Lower the Resolution of Graphics and Images: Do you really need to upload and display an image that can be viewed on IMAX? No! Keep images, even linked images, down to 800 to 1200 pixels wide. Keep file sizes down. Use JPG and PNG files with optimization to further reduce file sizes. Don’t preload images unless absolutely necessary. And don’t hotlink images as that adds more bandwidth to the bandwidth to pull them into the page from multiple cross-server locations.
Avoid Embedding Videos: As Jonathan mentioned in his article, why embed or host video players on your site when a link to download and play the video on whatever player the user has installed on their computer or browser will work just as well. Consider replacing embedding with a thumbnail image wrapped in a link or with a link to download the file in order to play it.
Limit JavaScripts and AJAX: While most of the web today can’t function without JavaScripts and the new AJAX, these scripts are often found in the head of the HTML architecture file, loading before the rest of the page. This can slow down the generation of a page. Consider optimizing all scripts and updating them for fast loading, and add them to the footer when possible to make it the last thing that loads on the page.

There are many other things you can do to speed up the loading of your blog’s design and content. As Jonathan noted, in the early days of web design, we wouldn’t even release a web design or WordPress Theme without running it through a battery of tests for code checks, accessibility standards, and bandwidth optimization. Maybe it’s time to bring that back for all WordPress Themes and blog designs, as well as for design enhancing and impacting WordPress Plugins.

The whole world doesn’t run at top bandwidth speeds. While we’re waiting for everyone to catch up, let’s design nice.