Mozilla.com/Mobile in Mind

From MozillaWiki
Jump to: navigation, search

This project is about getting a responsive design on Mozilla.com.

Team

  • Chrissie Brodigan (Product Owner/TPM)
  • Sean Martell (Design Director)
  • Jason Grlicky (Design Lead)
  • Anthony Ricaud (Dev Lead)
  • Raymond (QA)
  • IT TBD
  • Security TBD

Meeting Notes

  • Meeting Notes - 07-21-2011
  • Meeting (Jason (Lead), Chrissie (TPM), Raymond (QA), Jeremy (IT/Security), Sean (Design), Anthony (Moz.com), Mike Alexis), July 27, Wednesday @11AM
  • Meeting Notes - 07-20-2011


Project Management & Bugs

Tracking Bug: 673202

Initial Experiments:

  • 672903 - Design mockup for Simple Responsive Page Experiment
  • 672905 - Design mockup for Complex Responsive Page Experiment
  • 672906 - Implement Simple Responsive Page Experiment
  • 672910 - Implement Complex Responsive Page Experiment


Design Plan

Expectations

Giving mozilla.com a responsive design will be a difficult design exercise, but worth it for our mobile users, for site maintenance, and for future web design projects.

  • Ideally, desktop users would not know anything has changed, since we're trying to change as little as possible with the site design. If anything, we will be subtly streamlining the site content and navigation, and making the user interface elements more consistent. Most of our design effort will go towards finding unique solutions that don't degrade our existing experience.
  • On many design challenges, we should be able to provide seamless fallbacks that will not be shown to users on wide screens.
  • A focus of this project will be moving away from a pixel-perfect design mentality to one that embraces the flexibility of the web. Potch's comment on the etherpad sums it up wll:

"For this to work, we need to move away from PSD == website mentality, and into a 'design vocabulary' style of UX mockup. I don't expect a designer to tell me what the page should look like at every width, but to define a series of "checkpoints" at various resolutions. We also need to ensure each page has a primary focus, so when push comes to shove, the most stripped down view is agreed upon. Look and feel is important, but it isn't sustainable or acceptible to be doing compass/caliper measurements on a static image to construct a responsive website. For example, defining a HIG-style set of guidelines for how forms should look/behave (spacings, errors, etc), at what resolution levels sites should transition between various layout states. Full listings of colors (accents, links, etc). I do not think it is appropriate to do this on a Mozilla-wide level, but these things should be defined per-project, with known fall-backs."

  • We will document our findings about the process along the way to make sure that knowledge gained here is reusable on future projects.

Timeline

The Design Team is Sean, Jason, John, and Chrissie!

  • The Design Team will meet to review the list of mobile challenges on a high level, and agree on a list of pages we will not need to pay attention to (first run, etc).
  • Sean & Jason will set up a series of meetings to discuss each challenge in depth and come up with a list of fallbacks and workarounds to be included on the challenges list.
  • Sean & Jason will produce wireframes of key & exceptional pages. From here they can create a document that details a design vocabulary that can be extended to the whole site. This vocabulary will reference existing visual elements, and will define scaling, spacing, and positioning rules for smaller-screen versions (as Potch suggested above).
  • From wireframes, Sean & Jason will produce hi-fi mockups of a few example pages at each target resolution, highlighting the changes on desktop pages for clarity in implementation. They will also flesh out the design guidelines document with hi-fi representations of UI elements. This can then be used by devs along with wireframes to style the site at various resolutions.

Other Pages