The responsive homepage has seen a lot of attention: prototyping, feedback and iteration... which is very important, but it is just one page. Let's move along.
For release v0.4.0 we're introducing the responsive wrapper for our site's secondary pages. We'll use the canonical "About us" page as our example.
Before
After
< Desktop | Mobile >
Design Notes
It's a lot like the old design, because the old design is a classic. Why break what works? We're also keeping the large horizontal image across the top of the page to help personalize the space.
As responsive design goes, between the "desktop" and "mobile" views above, you'll see the site content rearrange itself by priority. The local "About Us" navigation is the least important block, so it is pushed to the bottom of the page in the mobile view. The third-column (Wendy's picture) is supplemental information, so it is moved immediately below the main content.
The "Facts & Figures" section of the page spans the full width of the second and third columns. This helps to illustrate how we'll have full control of the number of columns we want to use within this design when necessary. When this content folds into the mobile view, it stacks each fact on top of each other in one single column.
Content Reflow
Desktop Layout: Three Columns
- Left
- Navigation
- Middle
- Main content
- Right
- Additional material
Mobile Layout: Single Column
- Middle
-
Main content
Additional material
Navigation
Next steps
It's time to move our design work into Drupal (our content management system). Gabe and Jen are leading the conversion of these design prototypes into a formal Drupal theme. We'll keep you posted as progress continues.
Feedback
Please have a good look at our redesigned About Us page, and feel welcome (encouraged even) to share your opinion with the redesign team. All feedback is greatly appreciated.
Thanks! - Eric
No comments:
Post a Comment