Websites/Mozilla.org/Archive/Screen optimizations

A page we can use to track screen optimizations that can be used as input into the set up of media queries to tweak the site for small and large screens. See bug 492609 for more background.

The following was noted viewing the site on IE 7 with a resolution of 1280x1024:

"Looking For..." text/link
< 970 px: Overlaps with red background, difficult to read
Line splitting:
490 - 710 px: Splits into two lines
405 - 490 px: Splits into three lines
200 - 405 px: Continued line splitting until 200 px, below this text is cut off

"mozilla.org" title bar
< 730 px: "mozilla.org" overlaps righthand links
< 500 px: Lower red bar extends leftward beyond gray bar
< 470 px: "mozilla.org" begins to be cut off on right side
< 430 px: Righthand links extend the gray bar leftward

"We believe" text block (including 3 columns beneath it)
1190 px: "We believe" splits into two lines
< 1100 px: All-caps column headers begin splitting to three lines, starting with "We're a public benefit organization"
950 px: "Read more..." link block begins to overlap "We believe", pushes text to one line
910 px: "We believe" is split to two lines again
770 px: columns begin to overlap each other, "Read more..." begins to extend leftward beyond gray title bar

Right sidebar ("Get Involved" image, "Community Ticker," "Get Mozilla Gear")
The bar itself retains its appearance, but it begins interacting oddly with other components of the page:
915 px: Overlaps "Our Projects" block so that block extends below "Community Ticker"
810 px: Begins to overlap rightmost column of text beneath "We believe"
770 px: "Latest News" text is obscured by white
690 px: "Get involved" image begins to overlap "We believe" text
530 px: "Community Ticker" completely covers text columns

"Our Projects" block
870 px: "1 of 6" page indicator begins to collide with "View all" text
750 px: Firefox logo is suddenly covered by gray background color
560 px: "1 of 6" extends beyond block

"Latest News" text
920 px: "View all" link splits into two lines
680 px: Text which was obscured by white (see Right sidebar, 770 px) now appears again, split onto numerous lines 680 px: White obscuring of text begins again
560 px: Text compltely covered

Gray footer block
990 px: Mozilla logo on left begins to be covered by gray
930 px: Headers (specifically "Our community") begin splitting to multiple lines
650 px: Columns begin overlapping each other
280 px: Columns fall below logo rather than remain on same line as it (though they've become illegible by this point anyway)