From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
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
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
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.