Layout Strategy

Enterprise Rewrite Approaches

Is your web site outdated? Well, just in case you didn't know it, it is!

Don't worry. It's almost impossible to keep up to date with the latest tricks and tips while maintaining a web site, especially an enterprise level e-commerce. However, keep in mind to forecast your design and development techniques so that when they are implemented, they don't fall short of success.

Here, I've put together a checklist of considerations that may help you plan for a strong future-based release.

Considerable Standards

• Microformats and Nanoformats (hCard, hCalendar, hReview)
• Code Markup (HTML, XHTML in Strict or Transitional)
• Naming Conventions (CSS Selectors: Classes and IDs)
• Data Entry and Content Team Standardization
• JavaScript Libraries and Frameworks
• Usability Standards: Limit User to a Max of 6-8 Options per Choice (Based on the Magic Number 7)
• Information Architecture (Reduced Jargon and Standardized Naming Conventions)

Front-End Rewrite Shortcuts

• HTML Snippets
• CSS Snippets
• JavaScript Snippets (Libraries vs Frameworks)
• Data Entry and Content Team Strict Markup
• Mark-up Microformats
• Cheat Sheets(HTML, JavaScript, CSS)

Environments

• Image and Code Repositories (Pattern Libraries)
• Source Code Version Control (HTML, CSS, Java, JavaScript, and PHP)
• Browser Debugging (Debug in supported browsers only. Develop for Standards and Hack for non-standard)

Changes in Audience and Technology - Beyond Web Sites

• Mobile Accessible (PDA, Smartphones, iPhone)
• Desktop Integration (Adobe AIR)
• RSS and Widgets (Enabling The Social Web)

Rewriting The CSS

If the time has come to rewrite your site's CSS, then maybe you should start with a checklist to keep track of the important stuff.

• (x)HTML Site Survey
  • Site Survey (x)HTML Code and Semantics
  • Rewrite Semantic Code if needed. Validate!
• Decide on Browser Support (IE6+, Firefox 2+, Safari?)
  • Choose a couple of modern browsers and "a few" of their predecessors.
    • Keep in mind IE 8 and its browser targeting techniques
  • Design with latest W3C Approved browser and work backwards for noncompliant browsers
  • Important to distinguish: Web Standards Vs Best Practice
• Decide on Document Type Definition "DTD"
  • Choose wisely and stick to it!
• Develop a CSS Framework
  • Master Reset and Re-define (also, Debug CSS Styles)
  • Layout (Floating, Absolute Positioning, Negative Margins, and CSS Templates)
  • Styles
  • Widgets (Forms, Popups, Layers, Warnings, Notes)
  • Hacks and Overrides
• Develop a Grid System
  • Decide on a site width and then design a background image demonstrating the columns
  • A Site 960px wide can easily accommodate browser chrome and non-full screen browsers.
  • Divisions of the grid are commonly: 3, 8, 16, 24, 32
• FAQ
  • Does this restrict my design or designers?
  • How do I address new pages or sections?
  • How do I keep my CSS from loosing structure?
  • Do I need a CSS Architect?
  • How do I keep flexible fonts?