Image for post
Image for post

CSS REFACTOR: Let’s Make Amazon Responsive with Grid Instead

RV Mendoza
Jul 12, 2018 · 5 min read

In this last article, I made Amazon.com responsive, but I did something hack-ey to do it.

I tried to use Flex to move content around based on screen size.

Even flex has its limits so instead I `display:none` sections based on screen size.

It isn’t as terrible as it seems. Using React mitigates repeating markup so it was a concession I was willing to make for accessibility between screen sizes.

I explain more when I made Reddit responsive.

Image for post
Image for post

But if we could do better?

Morten Rand-Hendriksen’s talk about Grid inspired me to do better with grid.

Image for post
Image for post
Just @ me next time Morten

So I refactored the previous code, and manipulated the layout through Grid with just several lines of code.

Morten highlights a practical approach to using Grid:

  1. Build mobile-first layout without grid.
  2. Use mobile-first layout as fallback for all browsers.
  3. User @supports to detect grid support.
  4. At the appropriate breakpoint, create layout with grids and grid areas.
  5. Explore new layout as viewport widens

Let’s break it down to see how these steps apply to Amazon’s Responsive Layout

Build mobile-first layout without grid.

Done. I believe that interfaces should be created mobile-first anyways. It’s a pillar of progressive enhancement, and causes designers and developers to really consider what a user is trying to accomplish.

Use mobile-first layout as fallback for all browsers.

I agree with Morten that it’s a bad habit to expect that interfaces should look the same in every browser.

We should be making things look the best they can in whatever browser they’re in.

I think responsive doesn’t always mean just screen size. It includes the age of the browser as well.

Morten agrees with me that if it works on a small screen, it should still be pretty accessible on a slightly larger screen.

The Wikipedia mobile site arguably functions better than the desktop site.

(I hate m. experiences but that’s for another article.)

Image for post
Image for post
TFW when your browser doesn’t have grid, so it fallbacks into a mobile layout.

User @supports to detect grid support.

This one isn’t too difficult. We’re doing a feature query for Grid. This detects old browsers.

Image for post
Image for post

If an older version of Edge is a concern, check for `grid-area: auto` instead.

Image for post
Image for post
Your browser checking for Grid support

At the appropriate breakpoint, create layout with grids and grid areas.

My front-end mentors Vince Speelman and Dave Gilhespy always taught me:

Code things mobile first, then keep expand the viewport until things gets weird. That’s your first breakpoint.

With this layout, that’s exactly what I did.

Image for post
Image for post
You seeing your first breakpoint opportunity.

Explore new layout as viewport widens

This one is a little out of scope for this project, but I can definitely see some great opportunities for Amazon to expand their layout.

Image for post
Image for post
Me thinking about how we can use Grid to explore new layouts.

In Conclusion

Things can always get better. I made a decision to do that CSS+React black magic, and that’s what I knew at the time.

I’m glad I keep structure separate from content, which is what React naturally insists on. This allowed me to easily refactor the layout without have to touch any of the components.

A big takeaway is to code with the idea that “things can always be better.” In doing so, we give ourselves the gift of expandability in our work.

Anyways, Grid is awesome. You should try it out.

Image for post
Image for post

Read More:


RV MENDOZA

Empathetic Front-End Web Development

I specialize in HTML, CSS, and ReactJS to help teams build responsive, modular and semantic web components for the modern browser.

Wanna work together? See what I’m all about at rvmendoza.com/front-end

Image for post
Image for post

Header image icon credit: Responsive Design by Kiran Joseph and new by Dinosoft Labs both from the Noun Project

Making The World Responsive

I am doing this as an exercise in my own enthusiasm over…

RV Mendoza

Written by

I’m a queer Filipino that makes disco pop music and web user interfaces. I’ve got 99 problems and coconut oil solved like, 86 of them.

Making The World Responsive

I am doing this as an exercise in my own enthusiasm over responsive user interfaces. I live with the conviction that responsive user interface is not only a great solution, but should be the standard in web design.

RV Mendoza

Written by

I’m a queer Filipino that makes disco pop music and web user interfaces. I’ve got 99 problems and coconut oil solved like, 86 of them.

Making The World Responsive

I am doing this as an exercise in my own enthusiasm over responsive user interfaces. I live with the conviction that responsive user interface is not only a great solution, but should be the standard in web design.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store