In my wanderings around the web today, I came across another site I wanted to share – Web Design+ — Tips and advice on web standards development by Harry Roberts, an 18 year old web developer from the UK states:
Welcome to Web Design+. This is, in no particular order, an amalgamation of web-standards solutions for common web development issues and problems - a way to tackle development in the cleanest, most accessible and semantic way possible. By using Web Design+, the aim is to standardise practices throughout an organization; from accessibility to hacks, Web Design+ covers the best ways to tackle a variety of dev problems.
The idea of Web Design+ is not to force techniques and methods onto developers, but to offer the best known ways of getting round problems, and generally better coding and developing standards in terms of accessibility, maintainability, usability and longevity.
Most of the tips here I have picked up along the way and have been of massive help to me - though I wish I had learn them all right away, which is why I’ve decided to collate them all for use by up-and-coming developers.
He starts with:
The correct !DOCTYPE depends on the project. If you are starting a new project use the Strict !DOCTYPE, if you are appending or modifying an existing project use the Transitional !DOCTYPE.
- The fundamental aspect of a maintainable project is well structured and semantic markup. Proper indentation, semantic ID and class names and valid markup all lead to better code.
- Validating you markup is not required BUT it is certainly advisable. Valid code will eliminate the majority of broken layouts and visual discrepancies, making cross browser compatibility much simpler.
- It is important to use semantic and relevant names for ID and class attributes. As a general rule, only use a class if it is likely to appear more than once, and IDs for unique items such as container <div>s.
- It’s always a good idea to define a series of generic class names in each new project that will be used frequently to achieve mundane tasks.
- CSS Resets are the topic of much debate. They are used to create a level playing field across different browsers in one go.
- Diagnostic CSS is incredibly useful during the build phase as it allows you to visually recognise errors in your markup as you build.
- It is a good idea to have a preset list of generic classes in your stylesheets to carry out repetitive styling.
Designers and developers wrongly categorise navigation and menus as being one and the same. Navigation is a means of navigating an entire site, whether that be through the main menu, sidebar links, breadcrumbs or content links. A menu however (which is often incorrectly referred to as the ‘navigation’ or simply ‘nav’) is the main body of links often located at the top of a document, and is usually consistent throughout the whole site.
- Phrases and naming – Never use phrases such as ‘Click Here’ for link text. ‘Click Here’ means very little to someone using a screen reader.
- Attributes – Links come with several ‘obvious’ and widely used attributes such as href=”” and title=””. The former meaning ‘hypertext reference’ and the latter being a title used to describe the link’s function/behaviour.
- Fragment Identifiers – It’s possible to use IDs and anchors to link to specific parts of a page (used extensively here), these are known as fragment identifiers. This is a valid means of navigation, especially in one page websites.
- Embedding in a Page – If the image serves no informational/content purpose to the page it should be added using CSS as a background image. If however it is a product page, where a product is described with an accompanying image,then insert the image into your html code.
- Attributes – The <img> tag comes with several specific attributes, the most important (and mandatory) of which being the alt=”…” attribute.
<div>s are the building blocks of CSS developed sites but should not be heavily overused.
He covers only the most relevant in terms of accessibility and semantics.
Whenever styling text on the web, it is advisable to use ems - a relative measure defined as “A unit of measurement used in typesetting, approximately the width of the letter “m””. Font sizing on the web is extremely flexible, but anything smaller than 10px is generally too small to read comfortably.
Read Web Design+ — Tips and advice on web standards developmentcomplete with many examples and the style rules you will need.