Build PHASE 1 of the research website

gvn commented 8 years ago

Staging: http://gvn.github.io/research-website Code: https://github.com/gvn/research-website

gvn commented 8 years ago

@kristinashu – Here's the first draft of my responsive build: http://gvn.github.io/research-website/

Can you let me know if anything needs tweaking?

CC @secretrobotron @cassiemc @LauraReynal

gvn commented 8 years ago

Oh, also I haven't put any URLs in for the links. Do we have them, or are they still TBD?

kristinashu commented 8 years ago

Thanks @gvn, looking good! Very responsive!

There are some things you can pull from Bobby's version of the site (http://secretrobotron.github.io/research-website/).

URL links
maybe the Mozilla logo SVG but if not it's here https://drive.google.com/a/mozilla.com/file/d/0B2irLVDJivhLcDZhbU5SQlVrZFE/view?usp=sharing
footer links and icons (Email us, Talk to us on Twitter, See our pics on Flickr, Check us out on Github)
please add the date above the location title (happened post design so wasn't reflected in ai but is in Bobby's version)

Nitpicky styling things in Bobby's version that would be great if they could be reflected here:

image crop: images crop from the left and right sides instead of just right side
transitions and hover states (on desktop): not sure if you're at this stage yet but I like the hover states and how the banner image text and gradient overlay fade in on page load
colours: bobby's colours are closer to the redpen comp (sorry, I had some opacity in the ai file so if you pulled them from there they would have been too saturated)

Also checked it out on my phone and it looked great.

gvn commented 8 years ago

Ok, cool. I am off tomorrow as usual, but I'll start addressing this feedback on Thursday! :+1:

secretrobotron commented 8 years ago

:+1: thanks @gvn !

One thing I don't think @kristinashu mentioned: the "Read Report" buttons should fade & fill with white when you hover over them.

secretrobotron commented 8 years ago

gvn commented 8 years ago

Ok, I've got another build staged if you want to take another look, @kristinashu.

It feels pretty good to me aesthetically, but I'm going to see if I can optimize the load time a bit. It's pretty slow on 3G (~16 seconds :turtle:).

Let me know if you have any other feedback...thx!

kristinashu commented 8 years ago

Nice, images are cropping much better now.

Let me know if you want me to save out any of the images at a smaller size or something to help out with load time. That top banner image is a big one.

Only thing mentioned above that I don't see is the CSS gradient overlay on the banner image and text fade. Are you thinking of adding it?

Final picky designy things:

please reduce the height of the banner image on desktop. I hate to reference http://secretrobotron.github.io/research-website/ again but I think the height of around 710px is better at encouraging users to scroll down.
I like how the Mozilla logo is semi-transparent then solid on hover. Could you please do the same for the image credit and the footer links? This way it will be more consistent with the footer links on https://thimble.mozilla.org/ and https://goggles-mozilla-org-staging.herokuapp.com/
the line separators seems to change lengths and get a little too long, can they stay at around 80px wide all the time?
please add few more pixels of padding around the buttons: 12px for top and bottom and 20px on the sides

Please and thank you @gvn!

secretrobotron commented 8 years ago

Lookin' good. @gvn, any update on the blog portion? Can I help put that up at all?

gvn commented 8 years ago

@secretrobotron I haven't gotten started on the blog yet so if you have time and want to look into it that's awesome.

If this is the final feedback then I think I can get the page wrapped up today and move onto the blog stuff this afternoon.

gvn commented 8 years ago

@kristinashu I re-staged the build w. your feedback addressed. Can you take a look?

kristinashu commented 8 years ago

@gvn yes, looks awesome! I think design is done.

gvn commented 8 years ago

Great! Thanks for the feedback.

Code is ready to deploy, so I'm closing this ticket.

cassiemc commented 8 years ago

You guys rocked this, can't wait to share a link.

gvn commented 8 years ago

Thanks, @cassiemc !

secretrobotron commented 8 years ago

Excellent!

cassiemc commented 8 years ago

Ok, just to confirm, we're ready to share links? @secretrobotron The last link goes to the new site but the first two are different, is that expected?

gvn commented 8 years ago

FYI: I moved the repo to the mozilla org: https://github.com/mozilla/research-website

cc @secretrobotron

secretrobotron commented 8 years ago

@cassiemc just http://mzl.la/globalweb for now, preferably, until there is more content to share on the rest of the blog.

Thanks @gvn!

cassiemc commented 8 years ago

:+1:

MozillaFoundation / research

Build PHASE 1 of the research website #114