Web Design for Developers

Developers who don’t understand web development often tend to use way more markup than they need. Take a look at this article, which dissects an SMS message displayed within Google Voice. A single message uses the following:

• 369 lines
• 46 divs
• 7 tables
• 8 spans

In the book, I point out that more characters in your markup can cost you money, because your servers have to serve that data over your data lines and most ISPs (for web hosting) charge by the data you transfer. Even those “unlimited” hosting plans have a limit, if you read the fine print. Extra markup can be a problem for you, but now it could be affecting some of your users.

Mobile devices are kind of a big deal these days. iPads and Android phones are browsing web pages more and more, and each character you make a user download is more data they have to pay for. AT&T no longer offers an “unlimited” plan. In addition to the bandwidth, more tags and more rendering means more CPU crunching. That can mean decreased battery life over the course of a day.

The sad thing is that most of the markup in the SMS is unnecessary. Properly coded HTML5 semantic markup can eliminate the need for most of the extra elements there. Developers just need to learn it and understand how to style it with CSS.

Let’s just take one small part of the SMS message:

<tr>
<td class=”gc-message-bg-f”></td>
<td class=”gc-message-bg-tl”></td>
<td class=”gc-message-bg-t”></td>
<td class=”gc-message-bg-tr”></td>
</tr>

That’s a single table row, and the columns are empty! I don’t know what the reasoning for this is, but it’s a good example of bloat Let’s shorten this a little.

<tr class="gc-message-bg">
<td class=”f”></td>
<td class=”tl”></td>
<td class=”t”></td>
<td class=”tr”></td>
</tr>

You would then just use CSS child selectors to style things.

.gc-message-bg f{color: #f00;}
.gc-message-bg tr{color: #fff;}

If you had CSS3 support, you could just remove the classes from the table cells and use nth-child instead.

But beyond that, this is part of a bigger structure. You could decide that you simply have a container called “sms” and use the HTML hierarchy to style elements, eliminating the need for lots of classes. You can use the same selectors in Javascript too, so you don’t need tons of hooks like this.

As developers of web applications, it’s important to keep our users in mind, and even more important to understand the tools we’re using. Keep your markup as small as possible. Say less with more. Be stingy with your markup.

Filed under:
HTML by Brian Hogan