I’ve just started redesigning my business website – it’s been about a year and a half since I last did it. One of the main reasons is that most of my work over the last year has involved WordPress projects. I think it’s high time my own website was built in the content management system I recommend to clients!
As I’m working through the new site, I’m culling content from the old one. Some of the revised verbiage includes text about creating maintainable websites. What does that mean, exactly? Aren’t all websites maintainable?
For example… I’ve recently worked for a client integrating a blog into an existing site. The site is only about 2 years old, but it has a couple of major strikes against it in terms of maintainability.
The site was coded using a layout technique called tables. Tables have been around for a long time, but most professional developers moved away from them in the last several years in favor of CSS (cascading style sheets) for laying out sites.
What’s wrong with tables? One of the biggest problems is the large amount of excess code it adds to each page. Several extra lines of code are added for each bit of content in a table-based layout. For a complex design, this can really add up. It can also impact the speed of a site – larger pages load more slowly.
Making changes to a table-based site can be frustrating, complicated and slow. Wading through all that extra stuff takes time and it increases maintenance costs, and it’s sure a lot easier to make mistakes when working on one.
The site has a menu that uses images instead of text. Using images for menu links was long considered taboo if you were trying to improve search engine rankings because Google’s bots supposedly couldn’t follow image links. That’s not so much an issue now – but what was a problem is the enormous amount of code used on my client’s site to ‘power’ the menu.
To illustrate the difference between a simple text menu (which we could easily make look almost identical to the old image-based menu), I copied and pasted the code into a file for my client to check out. The code to run just the image menu took up over four pages. That was a shock to me, because it’s all completely unnecessary. In contrast, the code for the new menu took up about ½ of a page.
Removing all that extra code will benefit the site in a few ways; first, it’s a slow site anyway. It’s slow enough that when you run a mouse down the menu, there’s a delay for each menu item while the browser gets the next image from the server.
And maintenance of the menu? If you don’t have the original image files and fonts, you’re out of luck. Each menu button has to be created from scratch, and adding a new button (i.e., a new page on the website) is a minor nightmare.
So what happened with the project?
The site is small and the pages are not very complex, so they’ll stay in tables for now. But the client agreed to have us replace the menu with one that looks the same, but uses far less code. Each page on the site will probably be reduced about 60-70% in size which should speed up loading time. Plus, if the client decides to add new pages in the future, it will be an easy task to expand the number of links in the menu.
Ease of maintenance is an idea that doesn’t always pop up in a client’s mind during the web development process. But care – and a little forethought – during development can really decrease the time and money a business owner may eventually spend on his or her site down the road.
|About Debbie Campbell
More Posts by Debbie Campbell