Webdev:Web Design Best Practices: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
Line 1: Line 1:
(culled from [https://intranet.mozilla.org/User:Morgamic/Project_Management#Common_Hang-ups here], will be cleaned up and expanded)
(culled from [https://intranet.mozilla.org/User:Morgamic/Project_Management#Common_Hang-ups here], will be cleaned up and expanded)


= Common Hang-ups =
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.
* l10n
 
** right to left, left to right
== Common Design Issues ==
** text as graphics
 
** too narrow elements that can't handle more text (buttons)
* Variable content
* QA time
** Different languages have longer or short text lengths and this affects height and width of elements
** Not enough time to properly QA
** Content changes over time, and designs should be flexible enough to handle these changes
** Not enough time to fix bugs found by QA
** Because form field labels often have variable length when translated, they should not be placed next to form fields
** Specs not clear enough for QA to follow
* Error states and messaging
* Poor predictability
** Every form needs to have error styling and messaging for error conditions
** Estimates asked for before specs, wireframes and designs are started
* Interaction states/flows
** Webdev not fully looking at copy or providing inaccurate estimates
** Many UI elements have hover/up/down states that need to be designed
** Not tracking everything as a bug and grouping them per release
* Link colors and underlines are often missing
* Setting a press date before product is finished
* Color palette - would be nice to have
* Lack of requirements
* Examples of base font sizes and styling for headers, links, lists, bold, etc.
** no wireframes
* Navigation should be text-based and scale well for potentially very long link text
** no spec document
* 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)
** no central place to track tasks and dates
* Provide alternate typefaces for user agents to fallback on is desired
** poor note taking, so requirements get lost in email, comments, grouphub, etc.
* 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
* Webdev not involved earlier in the design process or
*
* Once we start working on it, we find a lot of additional cases that were left out of the original spec (or have feature creep) and it is not managed well

Revision as of 17:39, 14 April 2009

(culled from here, will be cleaned up and expanded)

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
    • 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)
  • 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
Retrieved from "https://wiki.mozilla.org/index.php?title=Webdev:Web_Design_Best_Practices&oldid=139903"