HTML Only – The Significance of Proper Markup in Web Design

On our trip back from Yellowstone National Park recently, we wanted to stop by a Redbox and grab a few DVD’s for our daughter to watch on the way. Not familiar with the surroundings, I pulled out my semi-smart Blackberry phone and hit up Redbox.com to find some locations and maybe reserve a few items. After the phone locked up while “loading style sheets” (I’ll blame T-Mobile’s coverage for this one) I turned off CSS and reloaded. With Javascript disabled I received the bare bones HTML only Redbox site and was greeted with big text that read “Sorry, Your Shopping Cart is Full“. I’m not sure where that came from since I hadn’t signed into my account yet, but I should have realized that this was the first of many problems I would have.

The bare bones HTML site was pretty easy to read and I was able to located the “Find A Redbox” button but was unable to click on it. My cursor highlighted the button, but no clicky for me. After reloading with a few times with Javascript and without I was finally able to click the button and fill out the form, but the Javascript buttons wouldn’t work yet again. Eventually (45 minutes later) I was able to almost have success. But luckily, my wife just Google texted Redbox and with seconds received a few texts with Redbox locations. Now, I’m not writing this to talk about how great Google text is, I’m writing this to discuss how websites like Redbox.com can make their web experiences better even when the operating system, service and all other variables are not.

The fix is really pretty simple, it’s really just a matter of making sure that our markup is readable, workable, usable. These are really just basic things that we all know, but it seems like there is still a lot of sites being created with bad habits, so it’s a matter of changing a few old habits.

Try implementing some of these methods on your next project:

• think about content before you code
• make sure it works before you style
• think more semantically

Content, Content, Content

Content is the reason why anybody actually visits a website. Some of us visit or find sites just for pure design reasons, but the majority of surfers, shoppers and readers only view websites for the content. People are generally looking for something to learn, buy or inspire them so the content is still king over pretty design. Your HTML should always present all the important content you want your users to view – avoid injecting important content through Javascript or CSS. Along with headers and paragraphs, also make sure you include forms, buttons, navigation and images.

Images can be tricky, especially when you are thinking mobile first because you don’t want to load a bunch of images that are not necessary and slow down you mobile load time. Some designers prefer to never use the tag and load images via CSS through the background property, but this method may hurt the bare bones user experience because images can be just as valuable as content. My little rule of thumb is to separate images into two categories: content and style. ‘Style’ images are used for navigation buttons, backgrounds, list icons, etc. ‘Content’ images are images that relate to the actual content like author pics, related images within articles, or basically any image that is inline with content.

Refrain from using any inline styling. Now depending on the OS, CSS inline styles may or may not be displayed when CSS is turned off so it becomes unpredictable and we all know we should never use inline CSS (if at all possible). But more critical, use discretion on HTML styles like height and width. If you are presenting some table data or something that needs to be laid out then by all means lay it out – that makes your HTML easier to read and follow. Basically, don’t use CSS inline styles and avoid block HTML styling where possible.

Everything Needs to Work

Okay, now this really is a no-brainer, but there are probably thousands of sites out there that don’t work properly when stripped down to HTML only. If you have a search form or any kind of form, make sure the user can fill it out and submit it without any a Javascript (JS) or CSS crutch. At the very least, if you have forms or functions that require JS, add a friendly, nice reminder that such elements need JS turned on in order to work – this will at least let the user know so that they can make the decision instead of fumbling around for an hour trying to figure it out.

A great way to make sure your site works properly is to write your HTML first before you jump into the CSS and JS. This will allow you to focus on the content and the functions and test them before you start making everything pretty. I used to write my HTML and CSS together, where I would take a portion of the psd file (like the header) and code it up completely with images and layout, then move to the next portion. But now, I stare at the psd file, code up the layout in my head (or in a sketch book), and then write my HTML from start to finish.

Think More Semantically

The big buzz word in web design (beside HTML5, CSS3 or responsive web design) is “semantic markup“. But what really is it? Semantic markup is just basically the meaning of the content and using the tags that reflect that meaning. A good example is the difference between the strong/em tags versus the bold/italic tags. Bold and italic are really just a text style but they don’t really show any meaning to the text – strong and em attach meaning to the content as well as assign style.

Now, thanks to HTML5, we have a variety of tags we can use to make out site more semantic like ‘header’, ‘footer’, ‘aside’ and ‘article’,  just to name a few. Not everything is implemented in HTML5 but there is still a lot of new tags that you can use to markup your site in a more semantic way. Even if you decide not to make the jump in quite yet or you want to use new HTML5 tags that aren’t fully adopted yet, just assign your divs those tag names and get in the habit. Assign your header div the id of “header” or assigning your post divs, change their class name to “article”. The point is this: start thinking about semantics and start thinking about what HTML5 can do, even just thinking about your code more semantically now is better than not.

So Easy a Caveman Can Do It

HTML is the most primitive web language and is the foundation of pretty much every web site – it’s so easy even a caveman can do it… right. This doesn’t mean that it’s the easiest thing to use in it’s bare form or even easy to design with (hence CSS). Not everybody knows how to start a fire with just a few twigs and rock, so not everybody will know how to work an HTML only view of a website – that’s why design is so important – but we can design our HTML code better to make the experience a little bit easier to read, work and use.