danganiev.meNavigate back to the homepage

I tried to improve Cliff Stoll's Klein Bottle website with CSS. Here is the result.

Dan Ganiev
June 30th, 2021 · 1 min read

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 on
5 tablets and phones*/
6 max-width: 900px;
7 margin: auto;
8
9 /* Website used two fonts before, which led to inconsistency, and the feel of
10 "bad design". Let's standardize the font and set default size. */
11 font-family: Helvetica, Arial, sans-serif;
12 font-size: 18px;
13
14 /* We also change the line height, because default one is kind of choking the text
15 out of space */
16 line-height: 1.2em;
17 }
18
19 /* One of the main UX problems is the big spread of used font sizes on the page
20 and all of them with the help of the <font> tag. This is hard to deal with
21 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 }
29
30 /* 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 }
38
39 /* 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 }
45
46 /* these four lines remove borders from tables inside tables, making the order menu
47 look a bit more fresh*/
48 td > table {
49 border: 0px;
50 }
51 i > table {
52 border: 0px;
53 }
54
55 /* 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 the
57 paragraphs breathe, eases eye strain and leads to better look overall */
58 body > p {
59 padding: 10px 0px;
60 }
61
62 font > p {
63 padding: 10px 0px;
64 }
65
66 /* However some <p> tags need much less space around them */
67 font[size="4"] > p {
68 padding: 2px 0px;
69 }
70
71 /* this centers the very top title of the website */
72 body > p:first-child{
73 text-align:center;
74 }
75
76 /* this sets the min-width of table cells to 270px, which creates
77 singular look for three links with images in products shopping table */
78 td{
79 min-width: 270px;
80 border: 0px;
81 }
82
83 /* we use a tiny bit different color for the link, but it makes a
84 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 space
88 and creates a very cluttering look, especially in the products shopping table*/
89 text-decoration: none;
90 }
91
92 /* for some reason the story about the Amazon brand hijacking is inside the <a> tag, so
93 we need to color any text there with our default text color. However we still need to
94 color any links inside it with our blue color */
95 a[id="AMAZON BRAND HIJACKING"] {
96 color:black;
97 }
98
99 a[id="AMAZON BRAND HIJACKING"] > a {
100 color:#3939e1;
101 text-decoration: none;
102 }
103
104 /* There are some paragraphs at the end of the page that actually suffer
105 from vertical padding of 10px, luckily almost all of these paragraphs have MsoNormal
106 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>

More articles from Dan Ganiev

Why you should quit ranked session-based multiplayer video games

Be aware of corruptive power of competitiveness.

April 28th, 2021 · 4 min read

So, you finished your MVP? Congratulations, you made it through the tutorial

Finishing an MVP of your project feels a lot like beating what looks like the final boss of the videogame, only to find out that it was just the tutorial.

April 23rd, 2021 · 3 min read
© 2021 - ∞ Dan Ganiev
Link to $https://twitter.com/GanievDanLink to $https://github.com/danganiev