Tips on How to Code Web Designs Better

Nov 18 2010 by Kayla Knight | 48 Comments

Tips on How to Code Web Designs Better

Writing semantic, efficient and valid HTML and CSS can be a time-intensive process that only gets better with experience. While it is important to take the time to produce high-quality code — as it is what separates professionals from hobbyists — it is equally important to produce websites as expeditiously and efficiently as possible.

As web designers, we’re always looking for ways to be more productive. Getting more work done in less time while at the same time maintaining (or improving) our products’ quality is a lifelong quest for many of us.

This article discusses a few fundamental techniques for writing high quality and efficient HTML and CSS.

Use Templates and Frameworks (Even If It’s Homemade)

Using templates and frameworks provides you with a solid baseline from which to start from. For example, CSS frameworks such as the 960 Grid System and Blueprint can save you time in having to write code for bulletproof web page layouts. The purpose of a framework is to reduce development time by avoiding having to repeatedly write cross-browser-tested code for each of your projects. However, take note: Using frameworks involves a learning curve and can bulk up your web page sizes with unnecessary style rules and markup.

Even something as simple as using this XHTML 1.0 strict template — a skeleton for your HTML documents — can be a time-saver.

XHTML 1.0 strict template

Whether you choose to use a premade framework or not, the notion you should take a note of is just how much code you end up writing over and over again. It’s imperative to discover these repetitive tasks so that you can come up with a system (a custom template/framework) to help you speed up your workflow.

Conform to XHTML 1.0 Strict Doctype

Writing under the Strict doctype forces you to produce smarter and specifications-conformant code. Strict doctype lowers your desire to use hacks, deprecated elements, proprietary code, and unconventional markup that in the future will give you grief and maintenance costs related to debugging and updating projects.

Conform to XHTML 1.0 Strict Doctype

Strict doctype also instructs web browsers to render your web pages under strict W3C specifications, which can reduce browser-specific bugs and thus lowering your development time.

Use Good and Consistent Naming Conventions

Always use consistent naming conventions for easier organization and so that you can produce work that is meaningful and expressive.

For example, if you use hyphens (-) to separate words in your classes and IDs (e.g. sidebar-blurb, about-us), don’t use underscores (_) for others (e.g. footer_nav, header_logo). Also, using standard and meaningful filenames for documents and directories is a good practice to get into.

Here are some popular classes, IDs and file names:

  • Structural IDs: #header, #footer, #sidebar, #content, #wrapper, #container
  • Main stylesheet: style.css, styles.css, global.css
  • Main JavaScript library: javascript.js, scripts.js
  • JavaScript directory: js, javascript or scripts
  • Image directory: images, img
  • CSS directory: css, stylesheets, styles

Naming Conventions

Always use meaningful words for your IDs and classes. For example, using left-col and right-col for div ID attribute values isn’t good because they rely on positional factors rather than semantics. Using something that has greater semantic value such as main-content or aside would be better so that you are giving your layout elements improved meaning and greater flexibility towards changes in the future.

In HTML5, the issue of proper naming conventions and uniformity for layout elements has been addressed with the introduction of new HTML elements such as <nav>, <footer> and <article>, but the concept of using proper naming conventions applies to all HTML elements with ID/class attributes, not just layout elements.

Read more about naming conventions in this article called Structural Naming Convention in CSS.

Good naming conventions are just a best practice in general, but as a bonus, it can help you speed up your development process because of organized and intuitive code, which makes finding and editing things quicker.

Understand and Take Advantage of CSS Inheritance

Instead of assigning every single element a font, color, background, etc., try to take advantage of CSS inheritance rules, especially for fonts, padding and margins. This can reduce the amount of code you have to write and maintain.

For example, the following is terser:

html, body {
  background: #eee;
  font: normal 11pt/14pt Arial, Helvetica, sans-serif;
  color: #000;
}
ul, ol {
  font-size: 18pt;
}

Compared to:

html, body {
  background: #eee;
}
p {
  font: normal 11pt/14pt Arial, Helvetica, sans-serif;
  color: #000;
}
ul, ol {
  font: normal 11pt/18pt Arial, Helvetica, sans-serif;
  color: #000;
}
blockquote {
  font: normal 11pt/14pt Arial, Helvetica, sans-serif;
  color: #000;
}

Reset Your Style Rules

One of the biggest time-sinks in web design is debugging browser-specific bugs. In order to ensure that you start off with a solid baseline — and thus avoid differences across web browsers — consider resetting your CSS. Read more about this subject in the article called Resetting Your Styles with CSS Reset.

Just like using CSS frameworks and HTML starter templates, there are several CSS reset templates that you can take advantage of. Here is a couple:

Here is Eric Meyer’s Reset CSS:

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

The best practice for using CSS reset templates is to fill in the property values of "resetted" styles instead of re-declaring them again.

For example, in Eric Meyer’s Reset CSS shown above, the line-height of web pages on the site is set to 1. If you know that your line-height needs to be 1.5, then you should change 1 to 1.5.

Do not do this when using CSS reset templates:

/ * Not good */
body {
line-height: 1;
}
...
body { line-height: 1.5; }

In addition, it’s best to avoid resetting CSS properties using the universal selector (e.g. * { margin: 0; padding: 0; }) because, performance-wise, it is inefficient and can be resource-taxing on older computers. Read more about using efficient CSS selectors.

Use CSS Shorthand Properties

Writing less CSS means saving time. Not only does using shorthand CSS reduce code-writing, but it also lowers the file sizes of your stylesheets, which ultimately means faster page response times. Additionally, shorthand CSS makes your code cleaner and — albeit arguably depending on your preference — easier to read and maintain.

The following are some popular shorthand syntax to memorize and use, with the longhand syntax equivalent preceding it.

Margin and Padding Properties

/* Longhand */
margin-top: 0;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 15px;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
/* Shorthand */
margin: 0 20px 10px 15px;
padding: 15px 20px 0;

A quick guide:

  • When 4 property values are used – margin/padding: [top | right | bottom | left]
  • When 3 property values are used – margin/padding: [top | left and right | bottom]
  • When 2 property values are used – margin/padding: [top and bottom | left and right]
  • When 1 property value is used – margin/padding: [top, right, bottom, and left ]

Font Properties

/* Longhand */
font-style: normal;
line-height: 11px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
/* Shorthand */
font: normal 18px/11px Arial, Helvetica, sans-serif;

A quick guide:

  • font: [font-style | font-size/line-height | font-family];

Background Properties

/* Longhand */
background-color: #ffffff;
background-image: url('../images/background.jpg');
background-repeat: repeat-x;
background-position: top center;
/* Shorthand */
background: #fff url('../images/background.jpg') repeat-x top center;

A quick guide:

  • background: [background-color | background-image:url() | background-repeat | background-position];

To discover more shorthand CSS syntax, take a look at the CSS Shorthand Guide.

Put Things in the Proper Place and Order

Always put things in the conventional place, i.e., where best practices and W3C specifications say they should go. For example, it is best practice to reference external JavaScript libraries after external stylesheet references to improve page responsiveness and to take advantage of the nature of parallel downloading.

This is the best way:

<head>
  <!-- CSS on top, JavaScript after -->
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script type="text/javascript" src="script.js" />
</head>

The suboptimal way:

<head>
<!-- CSS at the bottom, JavaScript on top -->
  <script type="text/javascript" src="script.js" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

Note that both code blocks above are valid under specs, but one is better than the other.

When writing structural markup, think in terms of top to bottom and left to right because that’s the accepted convention. If a sidebar is to the right of a content area and below a header, then the markup should be organized as follows:

<div id="header">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>

However, if the sidebar is on the left, a better practice would be to organize markup like this:

<div id="header">
</div>
<div id="sidebar">
</div>
<div id="content">
</div>

A caveat to the above is when you are optimizing your work for screen readers. The second code block above means that screen readers will always encounter the secondary content (#sidebar) before the main content (#content), which can hamper the reading of people that require screen-reading assistive technologies. In this case, you could place #sidebar lower down the document and use CSS for visual positioning (i.e. float #sidebar to the left, float #content to the right).

In addition to putting HTML elements in their respective places, it’s also important to organize CSS (again, for easier maintenance and readability). In a way, it should mimic the organization of your markup. For example, the #header styles should be before the #footer styles. This is a matter of preference, but it is also a conventional way of organizing style rules.

/* Structural Styles */
#header {
  // header properties
}
#header .logo {
  //site's logo properties
}
#footer {
  // footer properties
}

Conclusion

As in most things, the way to better and more efficient coding is to work smarter, not harder. The tips discussed in this article are basic; however, it might also inspire you to delve deeper into these sorts of optimizations and enhancements for improving the craftsmanship of the things you make.

What are your own tips and techniques for better and more efficient coding?

Related Content

About the Author

Kayla Knight is a web designer and web developer who loves coding way too much for her own good. She does freelance design/development work and helps run the XHTML Shop. Connect with her by visiting her website and following her on Twitter @ KaylaMaeKnight.

48 Comments

vik

November 18th, 2010

font: [font-style | font-size/line-height | font-family]

Jacob Gube

November 18th, 2010

@vik: Oops. My fault on that one, actually. Not enough coffee. Fixed.

Curtis Scott

November 18th, 2010

Something I like to do is grab snippets from past projects. However I’ve found re-purposing older code sometimes takes me longer than just writing new code from scratch.

I never knew that about the universal reset… This day forward I use standards based resets instead of * html {margin:0;padding:0;} XP

nykcu

November 18th, 2010

Great article, one mention though regarding javascript files. For a better performace YSlow recommends to put javascripts at the botttom of the document

Sankar Datti

November 18th, 2010

clean code = less loading time

Jesse

November 18th, 2010

I think it should also be noted that Yahoo recommends going one step further with your JavaScript and placing it as far down the page as possible to allow for better download parallelization.

http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/

Josh Shayne

November 18th, 2010

Thanks! There are definitely some great simplifying tips in here – even for someone who’s been doing this a while :) Super article!

Ravikumar V.

November 18th, 2010

really useful page. thank you so much :)

Jan Cantor

November 18th, 2010

Sweet!
Very useful and helpful tips and guide.

Thanks.

Darin

November 18th, 2010

For the four-value margin and padding properties shorthand, I use the mnemonic device “TRouBLe” (Top, Right, Bottom, Left) to memorize which value corresponds with which side.

Matthijs

November 18th, 2010

Using these methods will also greatly help others if they ever need to fix anything on a site you made.

Gustavo Freitas

November 18th, 2010

Hi Kayla, great article.
When developing a website we use to never care about css improvements. It’s really important to check this out until you get enough experience for doing this “automatically”.
It would be good if you could write something related do javascript tips like that.

Tweet with me @axcdnt

See you!

dashaft

November 18th, 2010

Good post!
I am a designer and I model my projects, but many times that you say is an utopia. Unfortunately many of the things that I do should still be visible in IE6 … and many times you need to code all styles correctly to see the project as good than you can. There are properties that do not work correctly but to take care of the design you must code entirely.

RussellUresti

November 18th, 2010

There are some good suggestions in here, such as CSS Shorthand and understanding CSS Inheritance. Though there are a few things I think should be adjusted…

1. Use Templates and Frameworks
If you’re developing a web application (and also happen to be designing it), sure, frameworks like the 960 Grid System are fine. For a public-facing website, though, no. These frameworks riddle your markup with non-semantic class names, bloating your markup (which you pointed out). Also, they severely limit design — the 960 grid framework doesn’t work on any layout that isn’t 960px wide. On top of that, they offer no fallbacks for mobile or any progressive techniques such as responsive web design (using media queriers). These things have their place, but I wouldn’t say they help you code web designs better at all.

2. Conform to XHTML 1.0 Strict Doctype
Validating your markup and conforming to those requirements is not a bad thing, but XHTML 1.0 Strict? Why not HTML5 doctype? There’s no reason not to be using the HTML5 doctype right now; every browser out there understands it. The validation rules are, at the moment, slightly hazy, but there are still validation tools out there that you can use to make sure you’re writing logically structured markup.

3. Reset Your Style Rules
Resets are good, using Eric Meyer’s or the YUI one are both good starting points; however, I would say take it a bit farther and look into the HTML5 BoilerPlate. For just the reset, it’s got tons of additional styles that most don’t think about, such as -webkit-tap-highlight on links (for mobile devices), vertical alignments for inputs, some sensible defaults for tags like sub, sup, pre, small, etc.

4. Put THings in the Proper Place and Order
Please move your script links to the very bottom of the body tag. The script tags should be the very last thing the browser loads. Scripts block parallel downloads, plus they have to evaluate, all before the browser gets any further into the actual content of the page, this is why they should be put as the very last thing, so your content is loaded before the script tags slow it down.

Adam

November 18th, 2010

Shortcut properties are appropriate ONLY if you are actually intending to set all the parts of the shortcut.

Background is the most abused property in this respect. It is never a good idea to use background:#f43443; doing so resets the other parts of the shortcut. This has the effect of requiring you to either repeat properties unnecessarily or your selectors get unnecessarily long.

Resort to shortcuts only as part of your optimization sequence, not your coding.

Mohamed Jama

November 18th, 2010

Nice article, thanks.

but I would’ve put the JS at the bottom :)

Catherine Azzarello

November 18th, 2010

Russell makes good points. Move forward to HTML5. Paul Irish & Divya Manian’s HTML5 Boilerplate is an awesome framework with which to begin. It includes all sorts of js goodies and emphasizes js at bottom of page for better performance. I’ve used it once already and am tweaking the latest version for my go-to framework. I highly recommend Boilerplate!

Jacob Gube

November 18th, 2010

@Darin: Is that a subtle hint that using shorthand for padding is “trouble?” Because it’s not; it’s a good habit to get into because it sucks to have to modify (or tack on) 4 lines of CSS. :) Maybe that’s a personal thing, but I find shorthand easier to write, read and maintain; this is especially true when your dev machine is a widescreen — all that space on the right being wasted! As for me, the only thing I do is remember that it starts from top and goes clockwise. So when I write padding/margin property values: I look up, look right, look down, look left. Also works when you think about it as a clock. Start at noon (or midnight if you’re a night owl), then 3PM/AM, 6PM/AM, 9PM/AM.

RE: JavaScript at the bottom: That’s right. Or as far down (before the closing body tag) as possible. Sometimes, some scripts can’t work all the way at the bottom (but that’s more of how you wrote the script rather than a real necessity). For example, using a third-party JS library that writes elements on your web page. You need to reference it at the place where it needs to write an element. An example of this is the retweet button (unless there’s an async option that I missed, I haven’t been keeping up with that); you need to reference the library where ever you want the button to be inserted in the DOM.

So an amendment to those that are saying “it MUST be at the bottom,” I would say instead that “it’s better and a best practice to place your scripts at the bottom when it’s possible.”

Sam

November 18th, 2010

I’ll second Catherine’s call to move forward to HTML5!

cooljaz124

November 18th, 2010

Nice list, but isn’t weird not to include any of html5 markups, in this html5 era – in such a popular b

cooljaz124

November 18th, 2010

Nice list, but isn’t weird not to include any of html5 markups, in this html5 era – in such a popular blog ?

Tyler Collins

November 18th, 2010

Excellent article! I already use a pre built template that Chris Coyier supplied on his website css-tricks.

Should really get my own rocking!

Thanks :)

osuss

November 18th, 2010

Hi Kayla Knight you are so cute,…. that is my comment,…. now about the code good tricks though thanks for that….

Darin

November 18th, 2010

@Jacob: No subtle hint that it’s bad or any other intent, just a device I use to remember the shorthand that I thought would be helpful to others to use.

Top-Right-Bottom-Left : TRBL : TRouBLe

Brandon Cox

November 18th, 2010

Kayla, I hear you, loud and clear! I’m obsessive about tightening up my CSS and stripping away anything unnecessary, as well as leaving helpful comments for anybody who comes along later and needs to tweak things.

My only beef is with resets. I reset all top margins and a few other things, but sometimes what I find is that when a designer resets everything, then they fail to account for a few special cases, something gets missed and the browser winds up not knowing how to render something. In other words, I think allowing some browser default rendering isn’t altogether evil, even though I reset about 70% of what you recommend above.

Very nice insights!

Colin the Creative

November 18th, 2010

Re: structural markup – I always place content first in the markup before sidebar content and sort out the layout with CSS. I read this helps with SEO, I don’t know if it really makes a difference, but I’ve just always gone with that advice.

Colin.

Craig Wann

November 18th, 2010

Alright, unlike the me from two years ago, I follow all of these conventions, and it does produce much better code, and more stable websites.

Though, I do admit that I don’t always use css shorthand. I don’t always remember off-hand which order the styles go in, and so I fall back to longhand if I don’t feel like looking it up…

Also, I have my own “framework” that I use, but it looks about like the screen shot above with a bit more to it. I tried 960gs once, but I hated it. I felt boxed in (at @Jacob Gube’s suggestion in another post, like I didn’t have the freedom to do what I wanted.

I wouldn’t mind trying a different framework one day, but I sort of like starting from scratch. I just don’t want to be limited.

Jacob Gube

November 18th, 2010

@Darin: Oh I know, it was just funny. But I like that, TRBL. Also sounds like Treble.

@Craig Wann: Yeah, frameworks can be very, shall we way, restricting at times. That’s a good thing when you want to produce a lot of things quickly; restriction avoids you from straying away too far. But, I’d much prefer creating your own template or building/stripping down a pre-existing one.

web2000

November 18th, 2010

Thanks for posting the 3 property values for padding and margin shorthand .. this is always a tricky one for me to remember.

Michael Tuck

November 18th, 2010

Excellent article, lots of useful tidbits. I would note that many designers/developers don’t recommend XHTML any longer; XHTML 2 has been all but abandoned, and HTML 5 is where the focus is now. I’d consider using an HTML 4.01 Strict doctype and framework until HTML 5 is more fully accepted.

omvaishnav

November 19th, 2010

Great article, thanks a lot Kayla Knight :)

Ketan Tandel

November 19th, 2010

I like this. This is very Quiet.Shortcut properties are appropriate ONLY if you are actually intending to set all the parts of the shortcut.

When developing a website we use to never care about css improvements. It’s really important to check this out until you get enough experience for doing this “automatically”.
It would be good if you could write something related do javascript tips like that.

Dan | Itsos Design

November 19th, 2010

Great article, thanks.

Really useful tips to consider. One question though, do you consider the 960 grid system to still be as relevant as it was, with ever increasing screen sizes?

Payam Rahmani

November 19th, 2010

Great article! Thanks.
… and I always try to observe them…

Amos Vryhof

November 19th, 2010

A good place to start is the HTML5 Boilerplate. Yeah, it’s not XHTML Strict, but it has a lot of great practices already rolled in, as well as server config files that take care of things that most web developers usually don’t have time to research, like serving files in the correct mime type, caching, forcing the latest rendering engine in IE, and more.

It takes care of your reset, putting JavaScript at the bottom, conditionals for the IE versions, and a whole host of great stuff.

I use it as a starting point for most sites I build these days. Combining it with CloudFlare is even better…. it supercharges your site, and makes you ready for the future.

Raul

November 19th, 2010

nice article! thanks kayla

Ahmed Bolica

November 19th, 2010

Amazing article i love it =))
thankss Kayla

Brian Getting

November 19th, 2010

Great article! Thought I would mention the importance of document structure. Making sure you are including header tags, using HTML tags as they are intended to convey structure, and ordering code for structure rather than visual design.

For example, keeping content code at the top, and not gloating the beginning of your documents with navigation links, etc. To me, much more critical than burying scripts (the DOM:loaded event is awesome).

And don’t forget accessibilty validation!

paul

November 19th, 2010

I agree with @RussellUresti. I was going to write a comment similar to his actually

Jan

November 20th, 2010

What is actually the point of using xhtml if most of documents are served as text/html (even this site)? What is the advantage over the html? XHTML sent as a text/html is NOT interpreted as a XHTML but HTML with syntax errors! File type is determined by a header sent by a server and DOCTYPE won’t change it.

scott

November 20th, 2010

JS should be at the bottom of the page for faster perceived page load speed. Also — relying on CSS frameworks are a bad idea. They lead to presentational markup. And — I agree with the other items @RussellUresti mentioned.

Maria Manoela Porto

November 21st, 2010

I loved the tips, thanks.

freetao

November 22nd, 2010

Great article! I am a new learner of webdesign ,and fount this article helpful for me ,so I translated it without your permission,hope you don’t mind.but if so ,please contect me ,then I will delete it at first time.

rajasegar

November 23rd, 2010

Great article, Thanks for sharing…

The Monkey

November 24th, 2010

I think putting the sidebar 1st in the code if it’s left although makes it better for screen readers, it’s still not search engine optimized as google ranks keywords on the top of the page better than the ones below. So you should put your content 1st no matter what.

Sumit

November 25th, 2010

Nice article , from now on I am gonna use css reset for my works, they are very imp as they are the base structure of styles.

Ace Media

December 2nd, 2010

does it really matter to conform to XHTML Strict markup because I use Transitional all the time?

And using frameworks as well, Is it really that necessary?

Neeraj Kumar

March 15th, 2013

That articles is nice but but please gives us tips for respective html coding.

Leave a Comment

Subscribe to the comments on this article.