Think of layout as the blueprint of a manufacturing building, where the production lines of each department provide individual products of value. Taking all these products and combining them into a new product produces even greater value than the sum of all the parts (Gestalt theory). Now, if you optimize the layout of the production lines in such a way, that a minimum of effort is needed to derive the end-product from the assembly of the parts, then you have heightened efficiency, decreased time to delivery, and upped your return on investment.
This analogy holds just as true for web sites. Careful and proper placement of page sections (like navigation bar, footer, side-bar, header, etc.) will ensure that the user has a very low click-to-experience ratio, as well as providing high scores in readability, ease-of-use, and conveying the content.
Design Requirements
It is in the designer’s nature to control every aspect of the design. This is to ensure that the feel and flow of the layout is experienced as the designer intended. Often designers will want strict sizing and positioning of page sections and elements. You will see that this is often in direct conflict with the development and even best practice requirements for web sites.
Also, the designer will often want the page to look exactly the same, regardless of browser or operating system it is viewed on. Unfortunately, if this is the case, the designer will most likely not allow for graceful design degradation for non-compliant browsers.
Development Requirements
Ease of maintenance is a top priority for the developer. To this effect they will want to place the layout specification in a separate CSS file. This will ensure that any layout tweaks or complete reorganizations can be done simply by creating a new layout CSS file. Additionally, standards-compliant code is extremely important for maintenance purposes (non-standard-compliant code will not be valid in the future and may break functionality as new browsers emerge) and user experience.
Another important aspect is that the layout specifications should be such that they are applicable to all technologies trying to read it. This means that the layout should apply, or degrade gracefully, in all viewers (like browsers, Palm devices, PDAs, Blackberries, iPhones, etc.) in such a way that will not trigger any errors or impact functionality. If the layout does degrade due to the limitations of the viewer, then it should render page sections in an order that makes sense to the user, and not scramble the copy, or reorganizes it in such a way that makes reading the copy difficult.
Best Practice Solution
Define your target browsers
Before you even start coding, define a set of browsers you want to target. Your goal is to provide a complete experience within these browsers without degradation of layout, design, or functionality. Develop your layout CSS with these browsers in mind, constantly testing in each one to make sure the experience remains constant. Also, don’t be afraid to let the user know which browsers you have optimized for, and what versions thereof you support without degradation.
Be Accessible
Make your layout accessible to impairment-assisting technologies. For the most part this means arranging your layout in such a way that rendering without CSS applied still appears logical and can be understood by someone using a screen-reader or braille-screen.
Purpose-Driven Layout
Create page sections that make sense for the contain they hold. Do not create new page sections for the same type of content that is held elsewhere. In short, this means: do not create two footer sections, for example; consolidate and optimize. Your users will expect each section to have a specific purpose and multiple sections with the same purpose only aid in confusion.
However, if you place individual content items in their own boxes, or areas, that can appear to be separate page sections, style them similarly to each other, and different from other sections. That way your users will immediately identify them with their proper purpose.
Consider Alternative Technologies
Should your design team insist on fixed layout that doesn’t accommodate all technologies that might view it (blackberries, iPhones, zooming, etc.), urge them to consider different technologies that are geared more towards that type of medium. Flash or Silverlight applications for example.
Closing Thoughts
None at this time.
Bibliography
Cederholm, Dan. Bulletproof Web Design: Improving Flexibility And Protecting Against Worst-Case Scenarios With XHTML And CSS. Berkeley: New Riders, 2006.
Usborne, Nick. "Design Choices Can Cripple A Web Site". A List Apart. 8 November 2005. A List Apart Magazine and the authors. 20 February 2008 <http://www.alistapart.com/articles/designcancripple/>.
Koch, Peter-Paul. "Fluid Thinking". Digital Web Magazine. 2 October 2002. Digital Web Magazine and its authors. 20 February 2008 <http://www.digital-web.com/articles/fluid_thinking/>.
Unknown. "Variability In Web Page Displays". Web Developers Notes. Unknown. Web Developers Notes and its authors. 20 February 2008 <http://www.webdevelopersnotes.com/design/variability_in_web_page_displays.php3>.
Unknown. "A Theme For Your Site". Web Developers Notes. Unknown. Web Developers Notes and its authors. 20 February 2008 <http://www.webdevelopersnotes.com/tips/webdesign/a_theme_for_your_site.php3>.
Other References
None at this time.
Document History
[v0.0.1.20FEB2008] - Document created.
[v0.0.1.25FEB2008] - Initial draft and publication.
4 Responses to "Web Best Practices - Layout"
Eureka! » Blog Archive » Web Best Practices - Embarking On A Perilous Journey
[...] Layout [...]
Anthony The non-Admin
Sup sup, one two, one two...