551757 - Mobile: new landing page

Status: VERIFIED FIXED

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

Description

[Alex Buchanan [:abuchanan]]

A new mobile device landing page is being designed.

Here is a recent revision, *not* final:
http://people.mozilla.com/~abuchanan/mozilla_download_v6_1.jpg

Final PSDs are expected to arrive on or before Tuesday 3/16

Silverorange will be implementing the design (afaik).

Some notes:

* New header will replace existing header on /m/* pages
* ^^ footer too

* The ancillary links (Is Firefox available on my phone?) below the download button are expected to change slightly, in order to coordinate with device detection, bug 547810, more details and a demo to come.

* The link destinations are obvious, except Facebook and Twitter, need those.

Comment 2

[Alex Buchanan [:abuchanan]]

From duplicate,

I have created new mobile Downloads page to replace the existing. I will attach
the psd. Rodrigo, the designer, has made recommendations around the CSS to
optimize the page for mobile viewing, navigation and readability.

The color/font sizes/ images indications are all in the PSD files. You may want
to modify ones on your code. Here you have my recommendations for all pages
(CSS):

1- Download.

Justify logo and mozilla tab to left and right of the screen. Adjust the copy
on the width. 


Fonts: Use PSD to replicate font size in pixels or points. The N900 is a high
res screen so if working in pixels double the size for an optimal resolution.

Link areas: Create a link area background color (#b5d7e0) when the user selects
the light blue boxes (featured content) or under links. 

Spacing: Adjust spacing on page width.

Comment 3

[Alex Buchanan [:abuchanan]]

Attachment: Portrait PSD

Comment 4

[Alex Buchanan [:abuchanan]]

Attachment: Landscape PSD

Comment 5

[Steven Garrity [:sgarrity]]

Header/footers for the /m/* pages have been updated in trunk in r64506.

Preview here: https://www-trunk.stage.mozilla.com/en-US/m/

Comment 6

[Steven Garrity [:sgarrity]]

This page is setup in trunk in r64804 and r64811.

Comment 7

[Alex Buchanan [:abuchanan]]

This looks great to me, thanks Steven.  Closing out, reopen if I'm missing something.

I'll add the device detection stuff over in bug 547810

Comment 8

[Caitlin Looney]

Thanks a ton!

Comment 9

[Caitlin Looney]

(In reply to comment #7)
> This looks great to me, thanks Steven.  Closing out, reopen if I'm missing
> something.
> 
> I'll add the device detection stuff over in bug 547810

Hi,
I am looking at the page now on the N900. Any way we can bump up the font size, download button size, etc? -- Think are looking really tiny.

Comment 10

[Caitlin Looney]

Reopening now that I've talked to Alex. The footer link and favicons looks like they can be larger too. Generally speaking, this entire page needs to be zoomed in on a bit.

Comment 11

[Steven Garrity [:sgarrity]]

The icons in the footer have been increased in size, as have the fonts for all text across the mobile pages, and the download button in particular (r64847).

Better?

Comment 12

[Caitlin Looney]

Thanks. I can see the footer icons and links increased, but doesn't look like much else changed. Alex, can you check? Copy and links still look quite small to me. Any way to optimize the images and font size for the screen size?

Comment 13

[Steven Garrity [:sgarrity]]

Caitlin, I've increased the font sizes (r65051) a fair bit across all of the /m/ pages in try. Please try now.

If we're going to be doing a lot of development for the N900, we could use a device for testing (we can't buy them in Canada).

Comment 14

[Caitlin Looney]

Ok, will look now, thanks.  Yes, you should get an N900 and Android devices. I'll talk to Morgamic to put in an IT request for you.

Comment 15

[Caitlin Looney]

(In reply to comment #13)
> Caitlin, I've increased the font sizes (r65051) a fair bit across all of the
> /m/ pages in try. Please try now.
> 
> If we're going to be doing a lot of development for the N900, we could use a
> device for testing (we can't buy them in Canada).

This page looks great now that fonts, button size and links have increased. Thanks Steven!

Comment 16

[Caitlin Looney]

Hey, curious when this page is expected to be pushed live. Thanks!

Comment 17

[Alex Buchanan [:abuchanan]]

I think we should wait until l10n has finished (we're getting full l10n on this right?) because the changes to header and footer broke the localized pages.  e.g.

http://www-trunk.stage.mozilla.com/es-ES/m/

If that's not possible, we can fix the localized pages and push the en-US version sooner.

Comment 18

[Stephen Donner [:stephend] Not actively reading bugmail]

Attachment: Post-fix screenshot of page, rendered on an N900 (1)

Comment 19

[Stephen Donner [:stephend] Not actively reading bugmail]

Attachment: Post-fix screenshot of page, rendered on an N900 (2)

Comment 20

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED on trunk: http://www-trunk.stage.mozilla.com/en-US/m