521256 - Site design on handhelds looks terrible

Status: RESOLVED DUPLICATE of bug 492609

(www.mozilla.org :: General, defect)

Description

[Michael Morgan [:morgamic]]

http://www.grabup.com/uploads/43901c74d1412d2d31febef0fc1186a6.png

We should fix the template CSS so it scales better for small screen sizes, especially if Fennec is hosting release notes here.

Comment 1

[Michael Morgan [:morgamic]]

Would be appropriate to use media queries to adjust CSS:
http://www.w3.org/TR/2009/CR-css3-mediaqueries-20090915/

For non-Fennec browsers, however, there'd have to be another fix using graceful degredation or alternates.

Comment 2

[Michael Morgan [:morgamic]]

09:38 < blassey> setting a mid-width for the page would be a good start
09:38 < rdoherty> yeah
09:39 < blassey> actually, that alone might be good enough
09:39 < blassey> to make it workable
09:39  * rdoherty doubts anyone tried resizing their browser when developing
09:39 < blassey> it doesn't appear so
09:40 < blassey> so, just to give you guys some parameters, the smallest width of our target devices is 240px
09:40 < rdoherty> it pretty much requires a window at least 1,000 pixels wide
09:40 < blassey> then 320, 400, 480, 640 and 800

Comment 3

[Samuel Sidler (old account; do not CC)]

See bug 492609.

Comment 5

[David Boswell]

For background, the page was designed to have a liquid layout and the plan has been to use media queries to optimize things on the small and large ends.  We have not yet had a chance to do any of those optimizations.

For the Fennec pages though, we can do some things that don't involve optimizing the templates, such as not using a class="key-point" for the top part of the body content and converting the right nav to use the standard left nav design or put those links in the main body content to provide more space.  We can open a separate Fennec specific bug if we'd like to pursue those options.