revise theme for smaller screens and lower resolutions (winCE)

VERIFIED FIXED in fennec1.0b1

Status

VERIFIED FIXED
10 years ago
9 years ago

People

(Reporter: madhava, Assigned: mfinkle)

Tracking

(Blocks: 1 bug, {uiwanted})

Trunk
fennec1.0b1
uiwanted
Dependency tree / graph
Bug Flags:
blocking-xul-fennec1.0 +

Details

(Whiteboard: [wm-m1-b+])

Attachments

(5 attachments, 2 obsolete attachments)

(Reporter)

Description

10 years ago
Created attachment 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.
(Reporter)

Comment 1

10 years ago
Created attachment 358853 [details]
slices for this version of the theme

Here are the PNG slices for the theme
(Reporter)

Comment 2

10 years ago
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?

Updated

10 years ago
Flags: blocking-fennec1.0? → blocking-fennec1.0+
Whiteboard: [wm-m1-b+]
Target Milestone: --- → Fennec A3

Updated

10 years ago
Keywords: uiwanted
(Reporter)

Updated

10 years ago
Blocks: 477628

Updated

10 years ago
tracking-fennec: --- → 1.0a1-wm+
Assignee: nobody → gavin.sharp
Status: NEW → ASSIGNED

Updated

10 years ago
tracking-fennec: 1.0a1-wm+ → 1.0a2-wm+
(Assignee)

Updated

9 years ago
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/
Duplicate of this bug: 486383

Comment 5

9 years ago
Created attachment 387314 [details] [diff] [review]
Patch for Low resolution devices

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.

Comment 6

9 years ago
Created attachment 387315 [details]
Image slices for Low res patch

Here are images resized for low resolution devices

Updated

9 years ago
Blocks: 494907

Comment 7

9 years ago
Created attachment 387648 [details]
fullscreen* images missing from earlier archive

Here are the scaled fullscreen-close-16.png and fullscreen-up-16.png's.

Comment 8

9 years ago
Created attachment 387653 [details]
fullscreen* images missing from earlier archive

fullscreen-*-24.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+
Created attachment 387723 [details] [diff] [review]
patch for checkin

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
Last Resolved: 9 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.