497185 - Mobile: Homepage

Status: VERIFIED WONTFIX

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

Description

[Ryan Doherty (:rdoherty)]

Tracking creating of desktop Fennec homepage. PSD to come.

Comment 1

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

Attachment: v1

images in following attachment

Comment 2

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

Attachment: images

place in /img/mobile/

Comment 3

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

Some areas that might need work is the box that surrounds the main content... it's not flexible - I'm not sure what the best way to do that is.

The download button - I may have veered a bit from the rest of the site.  It also not a sprite, as I didn't know how in photoshop to create the "hover'd" version.

If you think those need to be fixed, then I am open to suggestions on how.

Comment 4

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

Attachment: v2

patch -p1 and this will work :)

Comment 5

[Ryan Doherty (:rdoherty)]

Comment on attachment 384516 [details] [diff] [review]
v2

Code looks pretty good. Glad that you created the subnav as a function.

I think we could increase the font sizes a bit in the main module. (I know I'm changing my mind about specific styles, but I think it would make it look a lot better)

The "Send Text" button font size looks too small.

The 2nd and 3rd bottom modules are missing their background images. Not sure if they were in the patch as binary? The font sizes seem too small also.

The bottom modules also have a large empty gap at the end, it looks like they are too narrow.

Comment 6

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

Attachment: v3

Updates based on your suggestions.

Comment 7

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

Attachment: images v2

Comment 8

[Ryan Doherty (:rdoherty)]

Comment on attachment 384734 [details] [diff] [review]
v3

Looks much better now. I'm r+ it with just a few tiny tweaks to be made that can be added and committed.

The bottom module background isn't a gradient as it is in the PSD.

It also seems like the padding is off for the bottom modules. The last module's text touches the edge on the right.

The font color and size is different than the psd too. 

This is good to go once those small issues are fixed.

Comment 9

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

28335
4 files
16:57 - [e-mail]
[bug 497185] adjusted the bottom spiffies on the mobile page
A	/projects/mozilla.com/trunk/img/mobile/bottom-bg.png
D	/projects/mozilla.com/trunk/img/mobile/developers-wanted-box-bg.png
D	/projects/mozilla.com/trunk/img/mobile/video-tour.png
M	/projects/mozilla.com/trunk/style/tignish/mobile.css
28334
3 files
16:57 - [e-mail]
bug 497185 Made some font size adjustments per RD's comments
M	/projects/mozilla.com/trunk/en-US/mobile/index.html
A	/projects/mozilla.com/trunk/img/mobile/developers-wanted-box-bg.png
M	/projects/mozilla.com/trunk/style/tignish/mobile.css
28333
26 files
16:57 - [e-mail]
bug 497185 Home page changes
M	/projects/mozilla.com/trunk/en-US/mobile/index.html
A	/projects/mozilla.com/trunk/img/mobile/feature-box-background.png
A	/projects/mozilla.com/trunk/img/mobile/green-button-arrow.png
A	/projects/mozilla.com/trunk/img/mobile/img
A	/projects/mozilla.com/trunk/img/mobile/img/mobile
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/button-blue.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/button-green.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/download-background-phone.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/download-background.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/feature-box-background.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/green-button-arrow.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/icon-addons.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/icon-awesomebar.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/icon-phone.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/mobile-title.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/mobile-title2.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/mobile_256.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/mobile_64.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/mobile_video_thumb.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/right-arrow-divider.png
A	/projects/mozilla.com/trunk/img/mobile/img/mobile/video-tour.png
A	/projects/mozilla.com/trunk/img/mobile/right-arrow-divider.png
A	/projects/mozilla.com/trunk/img/mobile/video-tour.png
M	/projects/mozilla.com/trunk/includes/functions.inc.php
A	/projects/mozilla.com/trunk/js/mobile-desktop.js
M	/projects/mozilla.com/trunk/style/tignish/mobile.css

Comment 11

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

Reopening since we redsigned some :)

Comment 12

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

Attachment: v4

This implements the new design.  Download.php does not go anywhere.

Comment 13

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

Attachment: images v3

These images go with v4

Comment 14

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

What's the new design?  Do we have a mock for it?  Thanks!

Comment 15

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

Attachment: v5

Fixed a typo from 500116

Comment 16

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

Attachment: v6

Verified that this patch worked by using:

patch -p1 -i $PATCH

Let me know if there's patching issues.

Comment 17

[Ryan Doherty (:rdoherty)]

Attachment: New design

Comment 18

[Ryan Doherty (:rdoherty)]

Comment on attachment 386581 [details] [diff] [review]
v6

Overall, this looks really good.

A few minor issues that need to be fixed before committing, but it's fine otherwise.

There's a large gap above the text 'Choose from two...' that doesn't exist in the mockup.

Also missing the semicolon at the end of 'Choose from two download options'.

Choice #2 has Fennec misspelled. (Download Fenne to your computer)

Looking much better than the first design :)

Comment 19

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

awesomepants:~/Projects/Fennec/mozilla.com % git svn dcommitCommitting to https://svn.mozilla.org/projects/mozilla.com/trunk ...
        M       en-US/mobile/index.html
Committed r29302
        M       en-US/mobile/index.html
r29302 = 33e528ae78bce69540116c9862dcb91550366f96 (trunk)
No changes between current HEAD and refs/remotes/trunk
Resetting to the latest refs/remotes/trunk
en-US/mobile/index.html: locally modified
img/mobile/right-arrow-divider.png: locally modified
style/tignish/mobile.css: locally modified
        M       en-US/mobile/index.html
Committed r29303
        M       en-US/mobile/index.html
r29303 = 9121cb5eac0da54a9494c88c794c17b7a16da481 (trunk)
No changes between current HEAD and refs/remotes/trunk
Resetting to the latest refs/remotes/trunk
en-US/mobile/index.html: locally modified
img/mobile/right-arrow-divider.png: locally modified
style/tignish/mobile.css: locally modified
        D       img/mobile/right-arrow-divider.png
        M       en-US/mobile/index.html
        M       style/tignish/mobile.css
Committed r29304
        D       img/mobile/right-arrow-divider.png
        M       en-US/mobile/index.html
        M       style/tignish/mobile.css
r29304 = 41969cc15f9da33f50a0809ee501697836c5e0a7 (trunk)
No changes between current HEAD and refs/remotes/trunk
Resetting to the latest refs/remotes/trunk
en-US/mobile/index.html: locally modified
style/tignish/mobile.css: locally modified
        M       en-US/mobile/index.html
        A       img/mobile/green-button-arrow-down.png
        A       img/tignish/features/features-divider-horizontal.png
        M       style/tignish/mobile.css
Committed r29305
        A       img/mobile/green-button-arrow-down.png
        A       img/tignish/features/features-divider-horizontal.png
        M       en-US/mobile/index.html
        M       style/tignish/mobile.css
r29305 = 1d85bfc7b7321dd4635d199a9fe3b2f96dc8ae31 (trunk)
No changes between current HEAD and refs/remotes/trunk
Resetting to the latest refs/remotes/trunk
en-US/mobile/index.html: locally modified
style/tignish/mobile.css: locally modified
        M       en-US/mobile/index.html
Committed r29306
        M       en-US/mobile/index.html
r29306 = 4ea805ac74faf2e38b914dfcf8f37390bf62a4c1 (trunk)
No changes between current HEAD and refs/remotes/trunk
Resetting to the latest refs/remotes/trunk
en-US/mobile/index.html: locally modified
style/tignish/mobile.css: locally modified
        M       en-US/mobile/index.html
        M       style/tignish/mobile.css
Committed r29307
        M       en-US/mobile/index.html
        M       style/tignish/mobile.css
r29307 = 676696b90e03eaf1deedb10cdf3bb70918bd0a3f (trunk)
No changes between current HEAD and refs/remotes/trunk
Resetting to the latest refs/remotes/trunk

Comment 20

[Dave Dash [:davedash, :dd] (assign all bugs to mbrandt)]

I suspect Stephen is going to want things aligned with other things ;)

Comment 21

[raymond [:retornam] (inactive)]

the customization link is wrong  it currently directs to https://www-trunk.stage.mozilla.com/en-UShttp://addons.mozilla.org/fennec/ 
it should be http://addons.mozilla.org/fennec/ 

http://screencast.com/t/scIpCFvyKn

The developers link is also broken.

Comment 22

[raymond [:retornam] (inactive)]

the customization link is wrong  it currently directs to
https://www-trunk.stage.mozilla.com/en-UShttp://addons.mozilla.org/fennec/ 
it should be http://addons.mozilla.org/fennec/

The developers link is also broken.

i have attached a screencast
http://screencast.com/t/9kFqpEkJt

Comment 23

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

This is tracked in other bugs (specifically, bug 513306).