Tune It Up, Don’t Tear It Down: Website Redesigns
By Wisniewski, Jeff
“The problem with the ‘tear it down and rebuild it’ model of redesign is that it takes a lot of effort, not to mention being terribly disruptive for users. Library website redesign projects too often involve a complete “do over.” The problem with the “tear it down and rebuild it” model of redesign is that it takes a lot of effort, not to mention it’s terribly disruptive for users. Often we feel like we just need to be “fresh” and “new” every couple of years. Nothing wrong with that-except that it’s fairly unconventional for the web at large. Think about the sites you visit most frequently. Have they radically changed in the time you’ve been a user? Chances are they haven’t. Take a look on the Wayback Machine (www.archive.org) at Amazon, Facebook, Yahoo!, or any of the other top visited sites on the web and you’ll see that, over the years, they’ve remained remarkably consistent. They change iteratively, incrementally. Users’ expectations are established by sites like these, where users spend the majority of their online time, so following their lead is a smart thing to do.
Why do librarians favor the tearing-down model? Maybe we don’t get it right the first time. We perhaps failed to take into consideration new services that were coming down the pike. If one year after redesigning our library management decides to subscribe to a federated search tool, or a next gen OPAC, a tear-down might be the only way to effectively incorporate these game-changing new tools. Maybe we continue to add new features, services, and content to the point that usability suffers, the site becomes bloated, and we have to do a major house-cleaning to put things right. A final reason we do the big tear-down is that we let our sites go. Sure, we do the most routine of maintenance, like link checking, and we add new content as it comes along, but week to week and day to day, it’s difficult to find the time to keep our sites lean, mean, and high performance.
What do I mean by high performance? A high-performance site is credible, highly usable, and fast; has content that’s findable, moveable, and mixable; and can incorporate new tools and technologies without the need for much disruption. Getting there, you might be thinking, sounds like as much work as the old model of “tear it down and build it up,” but that’s not the case. Keeping your site in tune can be done in remarkably little time. Each of the tools, tips, and tricks that follow can be done in a few minutes or less each. Setting aside a bit of time each week to perform one or more of these performance enhancers can result in a site that’s much more able to seamlessly absorb changes and remain fresh and functional. Think evolution, not revolution.
MAKE YOUR SITE CREDIBLE
Credibility on the web refers to the degree to which users perceive your website and its content as believable, trustworthy, and worthy of investment and action on their part. If nothing else, the web offers users myriad options for every facet of users’ online behavior. Don’t think you’re getting good search results from Microsoft Live? Try Google or Yahoo!. Not happy with Flickr? Then give Picasa a try. If users don’t find your library website easy to use, they’ll simply go somewhere else. The interesting thing about credibility is that it’s influenced by things both great and small. Minor improvements can go a long way toward upping your credibility.
First, add photos to contacts: Users like to know there are real live people behind your website. Adding photos to the contact information on your site takes only a minute-just snap the photos and upload. The biggest investment of time here will most likely be in convincing your colleagues to be photographed.
Speaking of contact information, make yours easily moveable and mixable by encoding it in the hCard microformat. See the July/ August Intranet Librarian column for details. Once your contact information is microformat-encoded, visitors to your site will be able to add, for example, your library’s ask-a-librarian AIM name to their address books in one click. The handier the information is, the more likely users can and will make use of it. As an added bonus, you’ll get points for the “cool factor” here as well. “Add the library’s email and phone number to my address book in one click? Those library people are so darn smart…”
Here are two more 1-minute ways to up your site’s credibility First, make sure every page on your site has a last updated date. There are all sorts of ways to add this-ideally you’ll add it using a centrally maintained script-but seeing that a page has been touched recently is a great boon to the credibility of your site, signaling to users that this site is actively maintained and updated. Second, make sure that you update your site’s copyright statement annually. Even though you may have created the site in 2006, update the copyright to 2008. Seeing that 2006 gives users pause.
OPTIMIZE FOR SPEED
Thin is in. I’m talking about webpages, keeping them optimized for speed and efficiency. The first step is to determine just how fast or slow your site is, then figure out why, and take steps to correct any bottlenecks or bloat. One diagnostic tool is Yahool’s YSlow extension for Firefox. (Note: YSlow requires that the Firebug extension be installed.) Yahoo! has done a great deal of research in the area of site performance and response. Based on this research, it developed the YSlow extension, which will, for any page, not only identify the causes of slowdowns or delays but also recommend corrective action.
Yahoo!’s high-performance research has also led to some interesting findings regarding page download speed that can be applied to any site or homepage for a noticeable performance boost. Although more and more users are accessing our content via broadband connections, at the same time an increasing number of people are accessing these same pages via hand-held devices such as BlackBerries and iPhones, which tend to have slower connections. Given these developments, any speed boost is welcome.
As a first step, make sure your code is as clean, lean, and standards-compliant as possible. What’s your CSS looking like these days? Add a selector here, a property there, a div and span or two or three, and before you know it, your stylesheet is bloated. For CSS, a great code optimization tool is Clean CSS. Just enter the path to your CSS file and Clean CSS will merge selectors and properties, eliminate any redundancies, and compress your file. In tests I was usually able to reduce the file size by about 20%. Not bad for a minute’s work. Tidy and standardize the HTML on your homepage using the W3C HTML validator (http://validator.w3.org/ #validate_by_uri+with_options). Be sure to select the “Clean up Markup with HTML Tidy” option. Having your code validated is great, but having it validated and scrubbed squeaky clean, no effort required, is even better.
One significant finding from Yahoo! ‘s performance research is that the biggest page download speed drag is usually not the size of the page itself, but rather the number of HTTP requests that have to be made in order to render the page. So Yahoo! advises that, for the homepage, you should put any scripts needed to render it, such as CSS and JavaScript, in-line. This goes against the accepted practice of keeping those elements separate and calling them from external files, but this is for the homepage only. There’s a good chance that your homepage is the first page of your site that users are visiting. As such, their browsers will not have had the chance to cache your scripts and stylesheets, leading to numerous HTTPS requests and, you guessed it, a performance drag. Putting those elements in-line on the homepage eliminates the myriad HTTP calls, so the page downloads faster.
For all other pages on your site, follow the accepted practice of keeping those files externally and calling them as needed, but the homepage gets special treatment, given its make-or-break position. Give the user a good first impression and that halo will extend to the rest of their experience on your site. Moving your external scripts in-line on your homepage can make a serious improvement in download time, as the speed test, shown in the accompanying screen for www.library.pitt.edu, attests. The first panel is download speed with external scripts. The second panel is the same page with the scripts moved inline. Oh, and moving those scripts in-line takes about 30 seconds.
Along the same lines, you can shave seconds off of your download time by combining multiple contiguous images, like those that comprise a navigation bar, into a single larger image with an associated image map in which you create linked “hotspots.” Again, it’s all about minimizing those HTTP requests. Graphic software such as Photoshop and Fireworks allow you to merge images easily, and programs such as Dreamweaver have built-in image map creation tools. Some other speed optimization quickies include setting certain file types, such as .ess, .js., and image types, to remain in the users’ cache unexpired for, say, a few days. That way, the first time a user visits your site all of the static elements that comprise your pages will be cached and won’t immediately expire. Subsequent pages on your site that the user visits will load lickety-split! However, if the user empties his or her cache all bets are off, but as setting these file types to expire in the future is a quick and easy one-line configuration on the server side, it’s well worth the effort. You can also, with minimal effort, make your web server’s life a little easier by being sure to include trailing slashes at the end of directory-level URLs. Doing so tells the server to look only at the directory level to find what it needs, making its life a little easier. FINDABLE, MOVEABLE, SHAREABLE
Your content needs to be able to do two things, in addition to inform. First, it needs to be findable, and second, it needs to be moveable and shareable. Why? Because search dominates the web, so if your content isn’t findable, it might as well not exist. It needs to be shareable because keeping it in a walled garden in a Web 2.0 world is decidedly unconventional.
How do you quickly and easily optimize your contents findability? Page titles. Page titles are arguably the single most important identifier for your content as far as search engines are concerned. Google Webmaster Tools, for example, contains a Title Tag Analysis function. From your Google Webmaster Tools account choose Site link > Diagnostics > Content analysis > Title tag analysis. Google will generate a report on your site indicating if and where you have missing, duplicate, or noninformative title tags. From there simply go in and make your corrections.
As to what exactly to put in the title, the consensus in the search engine optimization (SEO) community seems to favor this format: Document title | Section name | Library/site name. That would be Overdue Fines | Borrowing | Anytown Public Library. Also note that it’s the page title that sites such as del.icio.us use to describe the page, so good titles pay multiple dividends. To make your content even easier to share, add “add to del.icio.us… (or Furl, reddit, or StumbleUpon) ” links to your pages. The Top Rank Social Bookmarks Creator (www.toprankblog.com/tools/social- bookmarks) will create the code for you. From there the social web is just a cut and paste away.
A model based on implementing quick and easy incremental changes to make your website credible, highly usable, fast and lean, with content that’s findable, moveable, and mixable, might be worth a place in your site maintenance arsenal. While there are cases where only a complete site tear down and rebuild can fix what ails it, in many cases small changes can go a long way toward keeping your site fresh and highly usable. If and when a complete overhaul becomes necessary, at least you’ll have clean, fast code and credible moveable content with which to work-a pretty reasonable return on investment for a minute here and a minute there.
Resources
hCard creator
http://microformats.org/code/hcard/creator
YSlow
http://developer.yahoo.com/yslow
Firebug
www.getfirebug.com
Top Rank Social Bookmarks Creator
www.toprankblog.com/tools/social-bookmarks
Google Webmaster Tools
www.google.com/webmasters/tools
Clean CSS
www.cleancss.com
W3C Validator
http://validator.w3.Org/#validate_by_uri-i-with_options
The YSlow Firefox extension gives this site a performance grade of F.
The page download time for www.library.pit.edu decreased by 1.5 seconds by moving scripts in-line.
Jeff Wisniewski (University of Pittsburgh)
Guest Columnist
Jeff Wisniewski (jeffw@pitt.edu) is web services librarian, University Library System, University of Pittsburgh.
Copyright Information Today, Inc. Sep/Oct 2008
(c) 2008 Online. Provided by ProQuest LLC. All rights Reserved.