Userstyles Experiment #1 – Amazon.com


So I was just browsing Amazon the other day looking for stuff to buy (I guess you can call this the guy version of window shopping), and found out that I got the infamous redesigned interface. About time!

As much as I appreciated the new design and valued it much higher than the old one, there was still something missing. And I think I figured out why: It was wide! Looking at YouTube, Facebook, Google+ or most other popular sites* – they seem to all be fixed-width. And as a result, it was too hard to focus on the content when everything was so spread out.

So I started taking out Stylish and Userstyles, and started modifying Amazon to one that I’d like. But it turned out to be quite for the non-unified structure across all pages. They all have a header and a footer (actually, where the footer is placed in terms of structure is different each page as well), but each page has a different structure. Some are made of tables, some are made of divs, some are surrounded by a <center>, and others are a bunch of really complicated, overlapping table cells.

My immediate reaction was to use javascript to wrap the whole page up to one single div, have that div centered, and done. At first I thought it was a great idea, as I could keep everything simple with almost guaranteed success across the whole site – since it didn’t matter how the page structure was designed. However, there were some conflicts with that and the sciprts that the page came with, like the departments dropdown menu, so I had to look for an alternative.

I then went through every alternative of pages (search page, product listing page, account center, and so on) and tried to find a solution that fit each one of them and combined them together. It was simply painful. And because the solutions were so idiosyncratic to these pages, not all the pages could be modified.

But hey, at least those that I modified look great!

I encourage you to try download and put it on sometime (It supports most modern browsers), and you’ll soon notice a difference in your shopping experience. Trust me.

*Excluding Picasa, but contents adjust themselves so that they fill the screen; Gmail or Google Calendar – the flexible width provides more space for more content.