Earlier today I read about the unfortunate hijacking of Cliff Stoll’s seller account on the Amazon. So naturally, I started to lurk around his website. After some time on the website, I figured it should not be too hard to improve the user experience and, consequentially, sales, as this is a working online shop, with some CSS.
I downloaded the HTML of the landing page, and started tinkering. I employed these rules: I had to use only CSS, without touching any HTML; the resulting style should not be too bloated, Cliff should be able just to copy and paste it to his source code if he wishes so; and it should not take too much of my time. The only challenge in this endeavour was the underlying structure of HTML, as it used almost none of ‘id’ and ‘class’ attributes, so I could only style actual tags.
The result is far from perfect, but still a much better experience, at least in my opinion. I also have taken a bit of artistic license here and there, I hope that is fine. A lot of further improvements are possible, but most of them will require time and HTML changes.
So, without further ado, here is the original, and here is my take on it.
UPDATE: I removed my version not to infringe Klein Bottle website.
And, of course, the CSS, completely with explanations. Cliff, if you are reading
this and if you like my take on design — feel free to copy this CSS to the insides of the <head> tag of your index.html file.
There is also a version without explanations further down the page:
1<style>2 body{3 /* Next two lines force the maximum width of the document to 900px,4 easing the eye strain on wide displays, while allowing for a decent UI on5 tablets and phones*/6 max-width: 900px;7 margin: auto;89 /* Website used two fonts before, which led to inconsistency, and the feel of10 "bad design". Let's standardize the font and set default size. */11 font-family: Helvetica, Arial, sans-serif;12 font-size: 18px;1314 /* We also change the line height, because default one is kind of choking the text15 out of space */16 line-height: 1.2em;17 }1819 /* One of the main UX problems is the big spread of used font sizes on the page20 and all of them with the help of the <font> tag. This is hard to deal with21 without knowledge of intent of the author of the text.22 So I only changed the smaller ones, because they looked especially egregious */23 font[size="1"]{24 font-size:16px;25 }26 font[size="2"]{27 font-size:16px;28 }2930 /* These rules standardize the font size in products shopping table,31 for a more consistent look */32 a > font {33 font-size: 18px;34 }35 li > font {36 font-size: 18px;37 }3839 /* This rule makes all tables take 100% of the width of their respective containers,40 also centering them */41 table {42 border: 1px solid grey;43 width: 100%;44 }4546 /* these four lines remove borders from tables inside tables, making the order menu47 look a bit more fresh*/48 td > table {49 border: 0px;50 }51 i > table {52 border: 0px;53 }5455 /* The site mostly uses <p> tag, but does not allow for any space between them,56 we can add 10px of space before and after each paragraph, which lets each of the57 paragraphs breathe, eases eye strain and leads to better look overall */58 body > p {59 padding: 10px 0px;60 }6162 font > p {63 padding: 10px 0px;64 }6566 /* However some <p> tags need much less space around them */67 font[size="4"] > p {68 padding: 2px 0px;69 }7071 /* this centers the very top title of the website */72 body > p:first-child{73 text-align:center;74 }7576 /* this sets the min-width of table cells to 270px, which creates77 singular look for three links with images in products shopping table */78 td{79 min-width: 270px;80 border: 0px;81 }8283 /* we use a tiny bit different color for the link, but it makes a84 lot of difference, because it prevents the "bad design" feel of a default link color */85 a {86 color:#3939e1;87 /* we remove underlining from links, because it eats huge amount of space88 and creates a very cluttering look, especially in the products shopping table*/89 text-decoration: none;90 }9192 /* for some reason the story about the Amazon brand hijacking is inside the <a> tag, so93 we need to color any text there with our default text color. However we still need to94 color any links inside it with our blue color */95 a[id="AMAZON BRAND HIJACKING"] {96 color:black;97 }9899 a[id="AMAZON BRAND HIJACKING"] > a {100 color:#3939e1;101 text-decoration: none;102 }103104 /* There are some paragraphs at the end of the page that actually suffer105 from vertical padding of 10px, luckily almost all of these paragraphs have MsoNormal106 class, so we use it to reset the padding */107 p.MsoNormal{108 padding: 0px;109 }110 </style>
CSS without explanations:
1<style>2 body{3 max-width: 900px;4 margin: auto;5 font-family: Helvetica, Arial, sans-serif;6 font-size: 18px;7 line-height: 1.2em;8 }9 font[size="1"]{10 font-size:16px;11 }12 font[size="2"]{13 font-size:16px;14 }15 a > font {16 font-size: 18px;17 }18 li > font {19 font-size: 18px;20 }21 table {22 border: 1px solid grey;23 width: 100%;24 }25 td > table {26 border: 0px;27 }28 i > table {29 border: 0px;30 }31 body > p {32 padding: 10px 0px;33 }34 font > p {35 padding: 10px 0px;36 }37 font[size="4"] > p {38 padding: 2px 0px;39 }40 body > p:first-child{41 text-align:center;42 }43 td{44 min-width: 270px;45 border: 0px;46 }47 a {48 color:#3939e1;49 text-decoration: none;50 }51 a[id="AMAZON BRAND HIJACKING"] {52 color:black;53 }54 a[id="AMAZON BRAND HIJACKING"] > a {55 color:#3939e1;56 text-decoration: none;57 }58 p.MsoNormal{59 padding: 0px;60 }61 </style>
