Making Amazon Responsive
Amazon has everything from “A to Z”, but did they forget R for responsive?
According to Alexa traffic reports, Amazon.com is the 5th most popular website in the United States.
I am an avid Amazon Prime user myself, and it’s one of the sites I go to first when I want something. Almost everyone I know uses Amazon prime.
Before we start, let’s ask the question:
When does a user want to order something?
The correct answer is, at any moment and at any any time.
So What Does This Mean?
This means Amazon needs to cover all their bases to make sure their product works well for any device someone has on hand.
Whether it’s on a phone sized screen, or a desktop, a user’s experience is directly tied to how much money Amazon can make.
Accessibility is directly tied to Amazon’s bottom line.
Responsive, mobile first web design has been the most streamlined way to make sure a web application is accessible to as many users are possible.
At the moment, Amazon.com is not responsive.
Disclaimer:
I’m not here to drag the developers of Amazon. Read my centering thoughts section when I made Github responsive…I honor them as smart developers working with what they have. There are probably many valid reasons it’s not responsive at the moment.
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.
Besides, despite Amazon’s lack of responsive web components, they’re obviously doing something right by revolutionizing the way we shop online and beyond.
At a Glance
Like I said, Amazon.com is not responsive.
Instead of developing a responsive user interface (UI), Amazon has chosen to use an “m.” (pronounced “em-dot”) experience. This means it serves a different set of UI when the user is on “mobile”.
You can usually tell when a site uses a url like “m.youtube...”.
It’s terrible for sharing links and it generally one of my least favorite anti-patterns.
Because of this choice, Amazon would have to think about EVERY context and possible screen size on which their apps will be shown.
Phones…tablets…desktops…phablets…phesktops…Android…iPhone…
Okay I made phesktop up, but you get it.
Generally, organizations that don’t opt for responsive designs force developers and designers so much more work in the future, and use up so much more time in the long run.
Taking a closer look at the Amazon app, it’s basically more of a browser that’s set on Amazon.com. Instagram does the same thing. Its feed is a basic frame, with its web components loading inside of it.
Just another reason to care about responsiveness.
I believe Amazon sees the value in this. It’s a behemoth of an app so I’m sure it’s much easier said than done…
I Did it, Though.
…to their product page at least. I made it fully responsive with HTML, CSS, and ReactJs.
Take a look:
Breaking it Down
Let’s break down the magic.
First step is to look at the UI’s main functions.
There are essentially three sections:
- Product Visual
- Product Info
- Buy actions
Within those sections, I also separated them into different components to get a better handle on their functions.
I also mapped out Amazon’s “mobile” experience.
The content hierarchy is pretty much the same, except for the Bullet Point summary. When it’s on mobile, it gets hidden deep inside the “Detailed Item Info” section.
With this choice, Amazon makes a conclusion that “Similar Products” is more important than the bullet point summary. Which is fine if it is, perhaps they have a lot of research in this.
If they do indeed have research to this, why are their conclusions inconsistent between what a person sees on their phone and what they see on their desktop?
I’m not exactly sure why that choice was made, but in my version, I kept it above the “Similar Products” section. It would be useful to have that summary nearby while a user is browsing similar products.
Making it Responsive
Here are some nice pictures with colored boxes:
Drawing it out like this helps discern where the content is going between viewpoints.
Again, in my version the “Bulletpoint summary” is going to be right above the “Similar Product” section.
Flexbox and ReactJS Magic
Flexbox will help us do most of this. It will allow us to choose the order and stacking. React helps us with showing and hiding the appropriate components. (Read the article on making Reddit responsive for some discourse on this.)
What Flexbox is Doing:
- Default all as stacked columns (mobile-first!)
- When on a larger viewport:
- instead of stacked, turn it into a row
- Make the “Product Visual” first in the order (meaning it’s on the very left)
- Make the “Buying Actions” last in the order (meaning it’s on the very right)
- The “Product Info” is now in the middle, and takes most of the space
What ReactJS/CSS Magic is Doing:
- Mobile first
- Price is below Product Visual
- Bulletpoint Summary is below Buying Actions
- Large viewport components are hidden - Large viewports
- Hide some of the mobile first components
- Show Price and Bulletpoint Summary below Product Name
Conclusion
So there we are! We turned Amazon’s product page layout into a responsive, mobile first component!
Responsive web design forces designers and developers to really think about the content of their design.
The major takeaway with this is how important it is to discern the kind of conclusions we’re making as the content moves from one viewport to another.
If content suddenly becomes less important within the viewport change, it could be an indication of an over inflated or under inflated prioritization of content.
Perhaps something is more important than we realize…most of the time, it’s not as important as we thought.
Other Considerations
I filled the “similar products” and the “product information” with images. Coding out each of those sections takes the main focus away from making the Product Page responsive as a whole. There’s a lot we could do to make those sections even more responsive, but maybe for another article.
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
Header image icon credit: Responsive Design by Kiran Joseph from the Noun Project
