search

urbanlaunchpad / new-market-goods

The digital storefront for New Market Goods
http://urbanlaunchpad.github.io/new-market-goods/
4 stars 5 forks source link

Make Product pages responsive #62

Closed ohsk closed 9 years ago

ohsk commented 10 years ago

Pulling over from #24 to focus on responsive product pages!

Desktop Mobile
02_nm_website_whiteboard_0209_product_ 2 02_nm_website_whiteboard_0209_product-mobile_ 2
ohsk commented 10 years ago

@sinchan, one thing we're considering is making several products available in a given product page. Meaning, you'd land on a page for all products related to the Kotwali textile (popover, pocket square, bandana), and could navigate through them.

I posted a precedent reference for this idea in Issue #27. Perhaps we could consider this a future state but use it as a base for the intial, simpler product pages.

sinchan commented 10 years ago

@ohsk I whipped up a responsive version of the Kotwali Popover page in this commit: https://github.com/sinchan/new-market-goods/commit/5a4bd8c42b8609bc67b6f56d5be034ad1db4d28c

I also added in the bit of fabric detail on the top. Not sure what you think of it, but if its not needed then I can hide it.

I've used the CDN version of Bootstrap for the commit (it has everything and for the final version we can get a customized version of Bootstrap that includes only the things we need). You're already using Normalize and Font Awesome it seems. Bootstrap includes Normalize and works with Font Awesome really well. It includes a ton of helpers for responsive grids, typography, and components like buttons etc. Really helps things go faster because they handle a lot of cross-browser etc. issues and it's well tested. Check it out http://getbootstrap.com. In the process of making it responsive, I've changed some of the structure of the page.

Let me know what you think and based on the feedback I can make the other pages responsive too.

I've made it so that I switches from the default layout when it hits small tablet (max-width: 768px) and phone (max-width: 480px).

Here's what it looks on a phone:

screen shot 2014-09-02 at 18 57 07

Here's what it looks on a small tablet:

screen shot 2014-09-02 at 18 57 25

ohsk commented 10 years ago

@sinchan looking great!

I think we can do without the fabric detail on the top, since it's not really adding much in this state. If you want to push to the other product pages, that would be great. I can tackle any tweaks to the text stacking after that.

Re: Bootstrap, I totally trust your judgement on going that direction. I'm pretty sure it's what we use (or Less / Sass?) on some of our consumer-facing CFPB products, so validated on that end too! Would it be tricky to transition on the other pages?

sinchan commented 9 years ago

@ohsk Just got around to finishing it up.

I've made all of the product pages responsive (without the fabric detail in tablets and phones) and switched normalize.css with bootstrap.min.css which has normalize.css and a responsive grid within it.

Check it out: http://sinchan.github.io/new-market-goods/dhanmondi-popover.html

If it looks good, I'll submit a pull request.