Design: Specifications

Before you start writing the HTML

When you get a new design in your hands don't rush to start coding. It's better to take your time and do it right the first time rather than spending time fixing the same design again and again. In the end, developing will be faster and our internal communication will be less stressful.

Think how the content should appear in the source to be easier to read, regardless of the design. For example footer links are more organised when placed in a <ul> list format, even though they are laid out horizontally in most websites.

Imagine how the page with that structure will look when stripped out of any graphics or formatting. Ideally we want the website to be usable even without any style sheet.

Try to find ways to form this HTML structure into the desired design by applying the necessary styles, rather than working the other way around - hacking the structure to fit the design.

Useful Tools

It is suggested that all developers follow these guidelines when designing the interface of a site:

Use a text-editor instead of a WYSIWYG tool like Dreamweaver. You will have better control over the code and be able to form it in our specifications. Preview in Firefox. Acclaimed for its compliance to the W3 standards and fast parsing engine (among other features not related with the subject), testing your pages in Firefox is probably the safest way to produce a valid web page. Use the Web Developer toolbar for Firefox. It has loads of features that will increase your debugging speed greatly. You can install it from here. There is an introductory tutorial below. Validate your code, frequently and persistently, with http://validator.w3.org/

The DOs

• Always think double when constructing a web template: What is the best way to do it with CSS and what will happen if there's no CSS? Have in mind the default state of the HTML tags. So, <div>, <p>, <hX>, <li> are by default block elements which means they will try to take the full length of the screen and force everything underneath them. While, <a>, <span> are by default inline which means they only take up the space of their contents and allow other elements beside them. You can make a link "display: block;" if that suits you in the design but you should remember how it's going to fall back without CSS.
• In the CSS file, write the styles in the order the page is parsed, from top to bottom and from left to right. Put parent styles in front of the styles of their content. When the style list becomes too lengthy you can split the styles in groups in different style files. The name of the style file should be descriptive of its content and contain only one type of styles (except probably from the original style sheet that contains all the rest of the styles, named main.css).
• When you have important text that should be displayed as an image (most likely due to a custom font) you always place it as a background in a block element and then insert the text inside, between <span> tags. From there on, all you have to do is insert in CSS display: none; for the <span> tag and the dimensions of the image in the width and height of the block element. That way you'll have the image displaying when the CSS is available and the text visible when the CSS is unavailable. In addition the text is in the source code, available for grabs by the search engines. This produces cleaner code overall, separating these elements from the content but not treating them improperly like images, which will also make your stylesheet definitions easier.
• Use the right tag at the right place. Applying styles can give you a lot of freedom, making it possible to achieve the same result with a number of ways. Some ways though are better than others. For example, if you have a listing title, don't use a tag to emphasize the name and separate it from the description, instead use an

  tag that will do all this automatically. There should be some visual representation of the hierarchy in the HTML source. Ideally each children tag should be two spaces in from the parent tag.

• Try to define the attributes in the CSS document in the same order, preferably based on importance (although that is subjective). The logic behind this is that the most important features are parsed first and could help the page load better (without re-formatting). Even a partial style download (due to a temporary downtime) could benefit from this. And on the development side, it does make editing easier when you find the attribute where you are expecting it to be. The order we'll use for the BullRoarer websites is this:

z-index: 
display: 
float:
width: 
height: 
margin:
padding:
background:
color:
text-align:
font:
...rest of the attributes

• Insert comment tags in your source code to separate the basic parts of the web template and put the section name first for better discovery, ex.:

<!-- Header Start -->
 ...
<!-- Header End -->

Do the same in the CSS documents, ex.:

/* Header */ 

This improves reading of the code.

• Assign each style attribute to the largest group it is applicable. For example if you have a number of <h3> titles and all of them need to be margin: 0, padding: 0 define it once on the tag style and not in every different occurrence. Then you can make the variations (ex. different background images) on separate classes for each <h3>.

The DON'Ts

• Don't use tables for the basic layout. Everything can be done with <div> layers and CSS.
• Don't use inline styles. Most graphic layouts are designed with some organizing logic behind them. You need to decrypt this logic and create styles for each group of objects. Repeating the same styles for each element is simply inefficient.
• Don't be afraid to use an id and a class on the same element. The class defines the general style of this type of content and the id specifies the individual characteristics of the specific block.
• Don't worry about nesting tags - some of the browser quirks can be overcome only this way. On the other hand, don't do unnecessary nesting. When something can be done simpler, while following the same standards-compliant logic, use the simple way.
• Don't put unnecessary line-breaks <br>. Most of the time this separation can be achieved with block elements that automatically push things under them (<p>,<div>,<hX>) Then you can specify the space between them with a margin attribute (top or bottom).
• When margin causes problems (for example after a clear float, margin-top doesn't register in Firefox) don't introduce other complicated structures. First try to interchange it with a padding. Some of the times this could be a viable solution.
• Remember though not to use padding on the sides with width or padding vertically with height.
• Important: Don't Re-invent yourself. Designers are often intrigued in finding new ways to do things. But there are proven ways to do certain things. Each layout should be structured with the same principles and each style sheet should feature the same naming techniques. The Specifications give some help on this matter.

Debugging with the Web Developer Toolbar

This toolbar provides a number of options to output information on the page you are currently viewing in Firefox. There are sections dealing with CSS, images or block content. If you're a first time user, you might get overwhelmed with all the features, but if you get accustomed in using it you will be able to evaluate your design easily , making debugging almost a hobby. I'll mention here some of the main functions to get you going:

Make sure your toolbar is visible :)

Under Tools you'll find many validators. You should always aim for a perfect validation in the HTML part (as there is no real reason of not being standards compliant) and minimize the number of errors in the CSS (since the browser quirks do make us hack the CSS a bit) Under Outline you will find the option "Outline Block Level Elements". This is the single most important tool for evaluating the quality of your design. The main thing you should look is that the divs are not overlapping - that's a sign that you are diverting from the original design. In addition you can use the CTRL+SHIFT+Y combination to view the styles that are applied to any element of the page by clicking on it. Another important feature is in the CSS tab, where it says "Disable --> All Styles". With that option you can see your page stripped down without any styles. As mentioned earlier, it is important for the website to be usable in that form as well, so that we don't block out the mobile phone users. On a second level we can specify a different stylesheet just for mobile phones, but it would be good if the site was clean enough to only require color styling and not changes in a structural level. With the stylesheet disabled, the objective is to have everything visible in their pure text form, even the image headers must be available as text.

Done with the design? See how you can convert it to Handlebars templates