646899 - update visual style of about:home

Status: RESOLVED INVALID

(Firefox for Android Graveyard :: General, defect)

Description

[Madhava Enros [:madhava]]

The mobile about:home (while very useful!) follows a visual style that was used in desktop 3.6 and no longer used in 4.0 (i.e. the blue banner across the top). We should update it.

Comment 1

[Madhava Enros [:madhava]]

I designed the current fennec about:home page to reference the style of our old desktop start page, which looked like this:

http://www.flickr.com/photos/madhava_work/5685164998/

The new desktop about:home pages looks like this now (this particular screenshot has the nightly icon in it, but you get the idea):

http://www.flickr.com/photos/madhava_work/5685180430/

What should we change?

Comment 2

[Paul [pwd]]

Let's match the headers and have the blue line (gradient-thing) start half way down the page. The rest of the page (the boxes) we can keep as is. Though someone should probably ping the desktop UX Team to see if any of their planned changes are imminent. If they are, we may want to match any design changes they have planned*. AFAIK they were considering placing some boxes towards the bottom.

* http://blog.mozilla.com/faaborg/2011/04/13/the-firefox-home-tab/

Apologies for not being able to find the mockups. There were some floating around.

Comment 3

[Mark Finkle (:mfinkle) (use needinfo?)]

Let's be careful with gradients. They are slow on mobile and have banding problems.

Comment 4

[Paul [pwd]]

We're hardly talking about a full page gradient here, 50 pixels tall by 5 inches wide. At the most. With our ability to compress and optimise PNGs, I'm not worried too much.

Comment 5

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to comment #4)
> We're hardly talking about a full page gradient here, 50 pixels tall by 5
> inches wide. At the most. With our ability to compress and optimise PNGs, I'm
> not worried too much.

The size of the PNG is not the real issue. Rendering the gradient is slow on mobile. Also, the 16bit screens cause banding issues. We have removed gradients in the past for both reasons.

Comment 6

[Madhava Enros [:madhava]]

I think to goal here is not specifically to match the desktop design.  This is more about the fact that we're currently specifically matching something that doesn't exist on desktop any more. Some commonality in branding/feel is probably warranted, though.

There's related work going on in Bug 582048 - Make network error pages mobile friendly. There's, possibly, some value in having some commonality in pages that are the result of the browser "talking to" the user.

Comment 7

[Mark Finkle (:mfinkle) (use needinfo?)]

Not tracking until we see some movement

Comment 8

[Ian Barlow (:ibarlow)]

Hi everyone, here are a couple of mocks for what we'd like to do with about:home

http://www.flickr.com/photos/61892693@N03/6009150811/in/photostream

without any "previous tabs"
http://www.flickr.com/photos/61892693@N03/6009696614/in/photostream/

Changes here include:
* bigger centered firefox logo
* blue pinstripe background
* updated type styling
* adding right arrows to tab links
* combining "tabs from computer" button with "previous tabs" box
* removing "open all in tabs" button, since this feature is fairly well covered in our session restore rules now
* adding "language" to the bottom segmented control (a solution for bug 669166)

Please have a look and let me know if you have any questions

Thanks!
Ian

Comment 9

[Mark Finkle (:mfinkle) (use needinfo?)]

* careful with the background images, they hurt startup time. testing will tell.
* do we really want to start the usable content further down the page than we already do?
* removing "open all in tabs" only mixes well with the session restore if we make the restore timeout longer, imo

I like the flatter look. Yeah, it looks refresher than the old style.

Comment 10

[Paul [pwd]]

I like some of the improvements, but do we really need the addons bit? Can't we instead have some sort of grid like the menu where by we link to handy things that include addons? Open All Tabs should be a necessity and tabs from other computers seems to be overkill there.

Comment 11

[Ian Barlow (:ibarlow)]

mfinkle - 
1. Let's try the background image and see how it performs. We can drop back to a solid blue if need be.
2. It strikes me that the row and a half that you lose isn't the end of the world, and the tradeoff is you get this really pleasant welcome screen with a bit of breathing room. Again, I am open to discussing once we have some real content to test with but it would be great to try this first. 
3. Lengthening restore timeout would be great IMO. Going from 1 to somewhere around 6 hours even would be great.

paul
Add ons and Sync (tabs from computers) are two of Firefox's key differentiators from our competitors, particularly on mobile, so they do deserve some prominence here IMO

Comment 12

[Aaron Train [:aaronmt]]

Language/Feedback/Help are still rather large imo, cant Feedback/Help be links? (I also saw a mockup of Help including the sumo icon for association somewhere)

Comment 13

[Paul [pwd]]

(In reply to comment #11)
> paul
> Add ons and Sync (tabs from computers) are two of Firefox's key
> differentiators from our competitors, particularly on mobile, so they do
> deserve some prominence here IMO

We show the same add-ons over and over again, how many installations do we actually pick up? I'm all for advertising their existence, but it doesn't need to a be in list format. Let's just link to the Mobile Addons Manager. As for Tabs From Other Computers, I know there's a planned overhaul for that on desktop which should see said tabs integrated as Panorama Groups, could we not jump the gun with that? Perhaps showing as a tab stack?

Comment 14

[Ian Barlow (:ibarlow)]

Aaron - trying to set up a more consistent style and sizing for all our touchable elements on this page so it doesn't look like a free for all, so I would like to steer clear of text links for now :)

Also want to avoid icons as much as possible for anything other than content and addons so we have a clearer hierarchy of information (ie, those things are more important than items with no space for icons)

Comment 15

[Ian Barlow (:ibarlow)]

About:home is way more awesome now, in ways that go far beyond this old bug. Closing this out.