css
Layout Decisions - Fixed, Fluid or Elastic ?
Tuesday, August 26th, 2008 | css | No Comments
When you commence the planning of a web project, many of your first design decisions will be related to your page layout. Essentially, you will need to decide to incorporate one (or any combination) of the following design styles:
- Fixed width - A fixed-width design is one in which the widths of the pages elements and various components are defined in an absolute unit of measurement (almost always pixels). The main characteristic of such pages is that the user cannot adjust the width of the page elements, either by resizing the browser window or by changing the text size. Despite this, fixed-width layouts are still the most common in practice.
- Liquid – a liquid (or fluid) design is characterised by the width of all page components being specified as a percentage of the user’s viewport width. In other words, liquid layouts scale in relation to the browser window. If the user makes their window wider or narrower, the design will adapt.
- Elastic – an elastic design works by setting the widths of page elements relative to font size rather than browser width. This layout will expand or shrink as the reader changes their text size, but will remain unaffected by any changes in the user’s browser window size.
- Hybrid – any combination of the aforementioned layout styles.
There is a plethora of detailed material on the web that gives detailed descriptions of the disadvantages and advantages of each design style. Instead of reproducing that here, I aim to give a succinct summary of what I consider to be the pros and cons of each method.
Doctype Declarations - First thing in the page, yet often overlooked.
Saturday, August 16th, 2008 | HTML | No Comments
Considering this is my first post, i thought what better way to start than with the first element on a typical html page, the doctype declaration (usually referred to as the shorthand ‘DOCTYPE’). Most designers and developers would admit to simply cutting and pasting this crucial snippet of code from an external source without understanding its true meaning or purpose. It is beneficial to have a basic understanding of the DOCTYPE because it can be the source of rendering issues and is often the last place you would look to rectify a problem. A DOCTYPE essentially informs the browser as to which Document Type Definition (DTD) you intend your markup to conform to. A DTD being a specification of the rules and guidelines as to the structure of the markup you write.
DOCTYPE options
In terms of web standards, a DOCTYPE informs the validator which version of (X)HTML you’ve incorporated, and must appear at the top of every page. DOCTYPEs are an essential component of standards compliant web pages: your markup and CSS will simply not validate without them.
In fact, using an incorrect/incomplete DOCTYPE - or no DOCTYPE at all - leads many browsers to render your page in a so-called “Quirks” mode. Essentially, in this event the browser assumes that you’ve written outdated, invalid markup characteristic of the late 90s. To cope with this, the browser will try to render your website in a backward-compatible mode, displaying it as it might have appeared in antiquated browsers such as IE4. This is usually not what you intend and will result in all kinds of problems.