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.
But if we could do better?
Morten Rand-Hendriksen’s talk about Grid inspired me to do better with grid.
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:
- Build mobile-first layout without grid.
- Use mobile-first layout as fallback for all browsers.
- User @supports to detect grid support.
- At the appropriate breakpoint, create layout with grids and grid areas.
- 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.)
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.
At the appropriate breakpoint, create layout with grids and grid areas.
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.
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.
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.
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