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

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.

But if we could do better?

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

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.)

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.

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

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.

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.

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.

Read More:

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

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