Ready for action

This may sound obvious but when someone lands on your website, he is probably going to do something. Guessing what this something is and helping the visitor to do it should be your main concern.

Obvious right?

Maybe not for everyone! While Google puts the cursor in the search box, Amazon doesnt. I can’t figure out why the developpers would not do it. And just to prove I am not the only one annoyed by this, someone wrote a script to do just that.

Do the right thing

Dont be like Amazon, each time you build a web page, make sure its default state will require the least amount of work from the user to be usable. I know it is all obvious stuff but if Amazon can miss it, I guess a lot of people can too!

Sprint.ly is a great tool: it looks gorgeous, has some nice UI elements and is based on a sane workflow. There is only one problem: it was designed for people with huge screen!

If you have a small screen (lets say a 13” MacBook Pro), you wont be able to see more than 2 or 3 stories per column because the (talented) designer put too much margin/padding between the cards.

I guess he is working on a 27” iMac so I can’t blame him, and it is true that giving breathing room between action elements is important.

The problem is that when you are working at a lower resolution, you can’t see shit.

The Solution

It is easy: fix the CSS yourself! With Safari, it means to install the “User CSS” extension and tweaking it to my taste. After 5 minutes of playing around, I ended up with this CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.d-board ul.cards li {
  margin-bottom: 5px !important;
}
.d-summary {
  padding: 0 0 5px 0 !important;
}
.d-board h3 {
  margin-top: 10px !important;
}
body#logged_in #container {
  padding-top: 70px !important;
}
.card div {
  padding: 7px 10px !important;
}

which turn this

into this

Much better, right? I can now see about twice as much information.

How to really fix this

While my custom CSS is nice, it would be even better if it was done automatically. This is where media queries come into play. The developers could solve the issue by targeting a specific screen resolution (let say less than 1300px) with a media query, it is possible to serve a different stylesheet suited to smaller screen. Here is how to do it:

1
2
3

@media screen and (max-width: 1300px) {
  //target CSS goes here
}

Conclusion

Whenever you are using margin/padding top/bottom to display dynamic content, take a moment to shrink your window to a smaller size and see the impact on usability/information density. If there is an impact, use media query to mitigate it.