Webdev:Web Design Best Practices

Mozilla gives web standards, accessibility, and localizations big bear hugs, so developing and designing web sites for the Mozilla community requires that you keep these things in mind.

Common Design Issues

• Variable content
  • Different languages have longer or short text lengths and this affects height and width of elements.
  • Clever design based on letters in a word, puns, or number of words cannot be localized (L O V E in a square, GAME above OVER, etc)
  • Content changes over time, and designs should be flexible enough to handle these changes
  • Because form field labels often have variable length when translated, they should not be placed next to form fields
• Error states and messaging
  • Every form needs to have error styling and messaging for error conditions
• Interaction states/flows
  • Many UI elements have hover/up/down states that need to be designed
• Link colors and underlines are often missing
• Color palette - would be nice to have
• Examples of base font sizes and styling for headers, links, lists, bold, etc.
• Navigation should be text-based and scale well for potentially very long link text
• Whenever possible, try to spec your text using typefaces that are commonly available, and make sure you design doesn't blow up if a different font face is chosen (see above - if you are designing for variable lengths correctly this shouldn't be an issue)
• Don't use variable, non-repeating backgrounds behind content elements that need to scale
  • If the design requires a non-repeating background, make sure at least one section can be stretched or repeated
• Provide alternate typefaces for user agents to fallback on is desired
• If you must use rounded corners or some other enclosing graphic device, provide a layered version that shows these areas with expanded content so that the developer has resources for background graphics
• Photoshop documents must be fully layered (all elements should be on separate, labeled layers to make selection and isolation easier)
• Keep text in images to an absolute minimum. You will be creating a new image per locale.
• l10n - Design and code should work for languages which flow the page right to left (RLT).
• If a grid based layout is used, provide a PSD layer with measurements
• Keep number of unique layouts to a minimum

Resources and other links

• Book Flexible Web Design - highly recommended
• Book Bulletproof Web Design