Bloated Code … What does it mean and how do we fix it?

This question comes up periodically, especially from colleagues who have tried to save money by developing their own websites in a tool such as Dreamweaver. We often find ourselves in the position of coming into a company, trying to do some new things with the website and then realizing (very quickly) that there is only so much we can do within the current coding. What does “bloated code” mean and why should you care? These are questions I posed to one of my all-time favorite web developers and here is his response:

You asked me to address the concept of ‘bloated code’ and our methodology with relation to writing markup code and css. It’s a huge topic but i’ll try to keep it short.

First, let me define ‘bloated code’ as code that is inefficient in that it uses much more markup than is necessary to do what it needs to do. By definition this type of markup is almost always written using older technologies (HTML 4.0, tables-based layout, little or no CSS, no stylesheet). Most ‘bloated code’ i see nowadays is the result of:

• using Dreamweaver strictly as a ‘wysiwyg’ tool, rather than as a code-management tool
• using tables-based layout and inline styles (sometimes a direct result of the first point)
• embedding code and files into a page instead of calling a separate file

Webpages built using these methods can have a variety of disadvantages:

• more time/effort required to update/edit the pages
• decreased visibility/accessibility to search engine spiders
• increased/redundant load-times
• difficulty integrating other technologies/code
• difficulty integrating into any content management system
• difficulty for other developers who need to work with the code
• compromised/disabled accessibility for mobile web users
• decreased accessibility for disabled users who rely on screen readers or alternative browsers to access the web

There are other best-practices for the web that affect all these things, too. Wrapping them all together with a bow defines “web standards” or “standards-based” code. The body that defines these standards is the W3C (World Wide Web Consortium).

When we build a web site for a Pandora client, we strive to write the cleanest, most efficient code that follows these standards as closely as possible. The basic tenant behind this methodology is separating content from presentation. That is, separating a webpage’s content (copy, images), from that content’s presentation (sizes, colors, fonts, margins, etc.) – this is what true XHTML/CSS web development is all about – the webpage (HTML) contains the copy, images, and the containers to hold that content, and the stylesheet (CSS) defines layout and style.

The advantages to this approach are:

• clean, efficient markup (html) that is well-organized and easy for search engines to spider
• layout/design that can easily be changed/updated by editing one document (stylesheet) without having to touch a single line of html
• web pages that are easier to update and integrate with other technologies or content management systems

In a properly designed standards-based site, it’s possible to completely redesign the entire website by just writing a new stylesheet. The most illustrative example of this is the css Zen Garden.

This isn’t just about useability and design – as importantly, it’s about SEO as well. Google doesn’t care about javascript or images or nested tables or colors or widths. It simply doesn’t see them. The Google algorithm that processes the data that the search spiders collect is hungry for content and that’s all. If a webpage is nothing but nested tables and images and javascript, it is practically invisible to google.

Well-organized and defined content areas tell search engines what is what on a page. Structuring and labeling content, images, links, and navigation properly with header and paragraph tags, titles, alt tags, and ul lists tell Google everything it needs to know about your whole site, from just one page.

To be fair, if a client is trying to design their own website in Dreamweaver, Dreamweaver isn’t very good at creating this kind of code out-of-the-box. If you’re using DW as a ‘wysiwyg’ tool and letting it write all your code for you, you’re going to end up with nested tables, poor CSS implementation, and much more markup than you need. To really do this right requires being able to dive into the code and write HTML and CSS from scratch. I write most of my code from scratch in Dreamweaver, using DW’s built in code reference tools and file-management to make the job easier, and the preview window to see (roughly) what i’m building. This gives me total control over the markup, and let’s me optimize things completely while keeping everything lean and simple.

Of course, over here at Pandora we can design and code a site for your organization that is concise, easily searchable and presents your services and products in such a way that your audience is quickly driven to take action. Give us a call! It’s often a lot easier to re-do a site than a client thinks it will be.

Advertisement