How simple visual treatments can improve usability – Case: Halbooking

Halbooking (for Københavns Kommune) is a webapp for booking rooms for social events and courts for various sports such as badminton and hockey.

However, the current user interface design is hard to use and a bit dated with very small font sizes, tiny button click areas and oddly placed key navigation select boxes.

So, how – using only CSS, not altering the HTML – can the design be improved and a tad modernized?

Before:

After redesign:

Try it out yourself in Google Chrome:

1. Get the Stylebot Chrome extension
2. Go to kk.halbooking.dk/
3. Open Stylebot and click the "Edit CSS" button
4. Paste in the following CSS and click Save:

/***********************************************************
   Created by Andreas G. Ibsen, agib.dk
   ------------------------------------
   Go to http://kk.halbooking.dk/default.asp?pid=14&skift=1
   Then try paste this CSS into Stylebot Chrome extension: 
***********************************************************/

#boxtop {
    background-image: none;
    border-top: 4px solid #ddd;
    color: #333;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 20px 0 15px 0;
    text-transform: uppercase;
}

#mf_rqqcogoq {
    margin-bottom: 4px;
}

#logon {
    background-color: rgba(0,0,0,.4);
    border-radius: 4px;
    color: white;
    display: inline-block;
    font-size: 1.15em;
    line-height: 1.5;
    padding: 3px 9px;
    text-align: center;
    text-decoration: none;
}

#logon::after {
    content: "Log ind";
}

#omrvalg, td[width="250"] + td div select {
    background-color: #fff0c0;
    font-size: 16px;
    width: 260px;
}

#omrvalg:focus, td[width="250"] + td div select:focus {
    background-color: white;
}

#sddm li {
    font-size: 16px;
    padding-right: 10px;
}

.book_top {
    background-color: #f3f3f3;
    background-image: none;
    border-top: 1px solid #ccc;
}

.btncolor {
    display: none;
}

.textbox, .textbox_login {
    font-size: 13px;
    height: 30px;
}

a[title="Gå en dag frem"] {
    border-right: none;
    margin-left: -1px;
}

a[title="Gå en dag frem"]::after {
    content: "⟶";
}

a[title="Gå en dag tilbage"] {
    margin-left: .5em;
}

a[title="Gå en dag tilbage"], a[title="Gå en dag frem"] {
    background-color: transparent;
    border: 1px solid #ddd;
    border-width: 0 1px;
    color: dodgerblue;
    display: inline-block;
    font-size: 36px;
    line-height: 1px;
    padding: 20px 15px 15px 15px;
    text-decoration: none;
}

a[title="Gå en dag tilbage"]::before {
    content: "⟵";
}

body {
    font-size: 18px;
}

td {
    font-size: 13px;
}

td.header {
    width: 1px;
}

td.header + td {
    text-align: left;
}

td.header + td table td {
    color: white;
    font-size: 1px;
}

td.header strong {
    font-size: 2em;
    white-space: nowrap;
}

td[width="250"] + td {
    text-align: left;
}

td[width="250"] + td div select {
    margin-top: 6px;
}

td[width="250"] + td div strong, td.header > img, #logon > img {
    display: none;
}

td[width="40%"] {
    font-size: 18px;
    width: 30%;
}

td[width="40%"] + td {
    white-space: nowrap;
    width: 1px;
}

td[width="60%"] {
    width: initial;
}