Closed Bug 475356 Opened 11 years ago Closed 11 years ago
revise theme for smaller screens and lower resolutions (win
76.84 KB, image/jpeg
42.94 KB, application/zip
120.00 KB, application/x-tar
2.26 KB, application/zip
153.25 KB, patch
|Details | Diff | Splinter Review|
Devices with (a) smaller and/or (b) lower-resolution (c) portrait-as-default screens have different UI layout requirements than high-res landscape screens like the n810. At the moment, these screens are common on winCE devices. See this page for some discussion of the situation: https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/workingUI/small-format Given lower-resolution screens, where the the pixels are larger, the graphics can be smaller, in terms of pixels, while still being the same finger-touchable size (physical dimensions) as on higher-res screens (in fact, there's not room to use the same graphics as on higher-res screens). Sean and I have come up with a revision of the Fennec working theme that is better suited to the screen on a device like the samsung i780 (320x320). I've attached the screen design. Slices for the actual theme will be attached to the next comment.
Here are the PNG slices for the theme
And, of course, what I mean by "page content would end like that" is "page content would NOT end like that." Basically, the mockup looks like Fennec in a non-real state -- the sidebars would not be deployed simultaneously and page content would not end abruptly when there's more to the page. This is a composite to show all UI elements at the same time. (In reply to comment #0) > Created an attachment (id=358852) [details] > mockup showing all buttons NOT AN ACTUAL SCREEN DESIGN (page content would end > like that) > > Devices with (a) smaller and/or (b) lower-resolution (c) portrait-as-default > screens have different UI layout requirements than high-res landscape screens > like the n810. At the moment, these screens are common on winCE devices. See > this page for some discussion of the situation: > > https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/workingUI/small-format > > Given lower-resolution screens, where the the pixels are larger, the graphics > can be smaller, in terms of pixels, while still being the same finger-touchable > size (physical dimensions) as on higher-res screens (in fact, there's not room > to use the same graphics as on higher-res screens). > > Sean and I have come up with a revision of the Fennec working theme that is > better suited to the screen on a device like the samsung i780 (320x320). I've > attached the screen design. > > Slices for the actual theme will be attached to the next comment.
Flags: blocking-fennec1.0? → blocking-fennec1.0+
Target Milestone: --- → Fennec A3
Assignee: nobody → gavin.sharp
Status: NEW → ASSIGNED
Assignee: gavin.sharp → mark.finkle
Ok, now that the dust has settled on the high-res theme, we can take a shot at the low-res theme. Our current high-res theme uses a mix of 64px and 30px images. For low-res, we want to make these 36px and 16px respectively. Rational: The Samsung Omnia (our low-res device) has ~5.2px/mm and we want to shoot for buttons that are ~7.2mm -> 37.4px buttons. We are rounding to 36px. The 30px images on high-res are purely informational and not really for touch. 16px images should work fine on the low-res screens. The current inventory of images can be found here: http://mxr.mozilla.org/mobile-browser/source/themes/wince/jar.mn Nearly all (except the favicon-fennec-30.png) can be seen here: http://mxr.mozilla.org/mobile-browser/source/themes/wince/images/
Here is a patch for the low resolution devices (omnia, ...). browser.css for the wince theme now imports low.css and high.css. low.css specifies style rules for devices with width less than 400px. if the device width is greater than 400 rules from high.css get applied. CSS Media Queries are used for getting the device width information.
Here are images resized for low resolution devices
Here are the scaled fullscreen-close-16.png and fullscreen-up-16.png's.
Attachment #387648 - Attachment is obsolete: true
Comment on attachment 387314 [details] [diff] [review] Patch for Low resolution devices This is good. I had to unbitrot and add the fullscreen-* images I'll post a patch for checkin
Attachment #387314 - Flags: review+
Unbitrotted and added the fullscreen-*-24.png images and styles
Attachment #387314 - Attachment is obsolete: true
Comment on attachment 387723 [details] [diff] [review] patch for checkin Carrying my r+ on Kantha's patch. This patch is not perfect. The BookmarkList header height is not the same as the main URLBar height, which causes a visual shift. We can handle that in a followup bug.
Attachment #387723 - Flags: review+
pushed: http://hg.mozilla.org/mobile-browser/rev/50b6574df1ec filed bug 503388 for followup issues
Status: ASSIGNED → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
verified with alpha3 winmo candidate
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.