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 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
headof 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 thefooterwhen 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.
Related Articles
- Melissa McAvoy Offers 8 Tips for Accessible Blogging
- Is Your Blog Design Holding You Back?
- Rant Over Excuses for Not Being a Web Professional
- The Battle Over Centering on the Longest Line in CSS
- WordPress Plugins for Blog Layout, Formating, and CSS Designs
- The Battle Between Image Width and Column Width
- HTML, CSS, PHP, and More Cheat Sheets Updated
- Review of Best Minimalist WordPress Themes
- One Year Anniversary Review: Designing WordPress Themes for the Public
- One Year Anniversary Review: Accessibility and Usability
- One Year Anniversary Review: Choosing a WordPress Theme
- CSS Optimization: Cleaning Up Your Stylesheet Analysis
- WordPress.com Custom CSS – All The Styles for the Sandbox Theme
- SEO Secret: Exploring How Search Engines Explore
- JPG, PNG, or GIF – When and How to Use Different Web Graphic Formats
- See What Search Engines See When They Visit Your Website
- Help Visitors Navigate Your Site: Make a Site Index
- The 12 Biggest Problems With Your Blogs
- Extreme Site Optimization For Speed Loading
- Do-It-Yourself Search Engine Optimization Guide
- CSS Bar Graphs and Charts
- Research and Choices You Make in Website Designs Can Make or Break Your Website
- Reduce Digital Noise in Digital Images
- Designing a Rainbow – Sexy Hot Colors
- Fixing Browsers: Bugs and Hacks
- A Good CSS Tips, Tutorials, and Tricks Resource
- More Website Design Mistakes
- CSS: Studying Your CSS Styles
- CSS and Web Standard Feeds in One Place
- CSS Switching Styles for the Low Vision User
- More Than You Want to Know – Search Engine Articles, Information, and Resources
- Step-By-Step Website Development – Check List
- How Search Engines See, Search, and Visit Your Website
- CSS Maintainability – Serious Style Sheets
- HTML, CSS, PHP, and More Cheat Sheets
- CSS and Web Page Design List of Resources
- Designing a WordPress Theme From Scratch
- Site Optimization: Optimizing Bandwidth and Cleaning Out the Code Closet
- Testers, Checkers and Fixers for WordPress Themes
- Using Javascript in WordPress
Site Search Tags: blog design, wordpress themes, web design, optimization, speed, bandwidth, dial-up, mobile, css, testing, design tests, accessibility, accessibility standards
Subscribe 
Via Feedburner 
Subscribe by Email 
Visit
Copyright Lorelle VanFossen, the author of Blogging Tips, What Bloggers Won't Tell You About Blogging.
Lorelle on WordPress 
9 Comments
Not promoting my theme here, but this was what I had in my mind when I created my minimalist theme, code name MiniMoo. I want it to be accessed in the shortest amount of time, not much aesthetic fascination but more focus on the content. It may not be as beautiful as many of the modernly designed themes on the web, but 1 thing it has above many other themes, it is speed.
I use AJAX, but the site could very well function without it too. It only serves to enhance the experience of my visitors, but not crucial.
I use DSL and a PC at work and Broadband and an iMac at home. I use Firefox with both and yesterday added the FlashBlocker plug-in for Firefox at work. That has sped up the page load time a lot. That being said, if a website takes move than 30 seconds to load I’ll hit back before waiting any longer.
Between WP Super Cache and WP Mobile, I feel pretty good about my site on both mobile devices and dial-up 🙂 I only put Super Cache in a couple of weeks ago and was extremely pleased to have it cut 3 seconds off my site load time (Firebug has helped me a lot in tuning my site). 3 seconds doesn’t seem like a lot, but when you drop from a 4 second load down to 1 second, it’s certainly noticeable!
I think one of the most important pieces of advice for bloggers is to avoid unnecessary junk on your site, especially in the sidebar. If it doesn’t help the reader find their way to the content you most want them to read, leave it out. If all it does is flash or make noise, leave it out. If it has to communicate with a remote server, leave it out. If it is a distraction from your content, leave it out. If the same content already exists somewhere else, leave it out. If it makes you sidebar longer than your main content, leave it out. Your site will load faster, and your readers will stick around longer.
I’ve just tried to explain it on Jonathan’s blog:
The problem is not to quickly load on your computer the tons of unnecessory data. The problem is to quickly find there a useful content. And this is not about good or bad connectivity!
I like Darran’s minimalistic approach. As for my own website, I’m for even more drastic measure: Divide main content and formatting, – and keep them on SEPARATE sub-pages!
In terms of mobile WordPress, I am a contributor to the WPtouch iPhone plugin. It’s another free option should people want to have an iPhone specific theme for their blog.
One of the reasons why Google’s web applications are more preferable. They load fast.
Agree with you, not everyone has access to broadband, I usually struggle with 20kbps, sometimes even slower.
Thank you Lorelle. Boy-howdy, I’m sure glad someone finally addressed page load speeds. It became an issue with me when I found myself in a location without cable and without DSL. Nowadays, I don’t let it frustrate me … I just pass the problem on to those people that design poor pages.
I know they’re thinking, “What’s one person? Nada! That’s what.”
But I say “What’s one more website, plus or minus? Have a nice day, and so long.”
I used to wait for websites to pre-load a grundle of huge, hi-res, million-colored images. Not because they need to, but because they think the “BAM! there it is!” moment is a “Wow!” moment for us viewers. It’s not. I could be reading content (assuming there is some) while the pretty pictures drift into view.
As for the miles of embedded cut-and-paste javascript and AJAX thingamabobs, I think they’re trying to off-load server-side work onto my local machine. Ta-ta, LOL, that’s way too kewel for me.
I have things to do that don’t include waiting for all the pay-per-load adverts and pop-behinds to come down the wire. Ciao, baby.
Sometimes I view the source code, just to see what the designer is cooking up. Sometimes it’s a dish I wouldn’t want to eat. I quit doing business with one particular bank simply because of the way they designed their online banking pages.
The DSL account I had came with 20 hours of dial-up time for emergency use, and I would occasionally use some of that to dial-up check my own websites. It’s cavalier and arrogant no to. If designers want pages that validate and are accessible, that should include speed considerations as well.
I wish more people kept sites easy on the load time. It is aggravating to have some bloated video set to run automatically or something using Flash on a site. I am already working in a couple of windows, more like several, the bloated mess just wastes my time with freezing and even crashing. I don’t use dial up but I feel like I still do while I’m waiting for the bandwidth hog to close up and die. I almost never make return visits to any site like that.
2 Trackbacks/Pingbacks
[…] recent article about site access speed posted over at Lorelle on WordPress started me thinking about my own path of site development over the last 7 years. The article talks […]
[…] Designing 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. […]