How simple visual treatments can improve usability – Case: Barricade

In the Barricade style guide the navigation options are rather ambigious on small screens (see "Before" screenshot below): It is hard to tell which is the current option and if the options are hierarchically organized or at the same level.

Before:

After quick redesign:

Try it out yourself in Google Chrome:

1. Get the Stylebot Chrome extension
2. Go to styleguide.barricade.io/
3. Open Stylebot and click the "Edit CSS" button
4. Paste in the following CSS and click Save
5. Resize the browser window to mimic a smartphone screen

/***********************************************************
   Created by Andreas G. Ibsen, agib.dk
   ------------------------------------
   Go to https://styleguide.barricade.io/
   Then try paste this CSS into Stylebot Chrome extension: 
***********************************************************/

@media screen and (max-width: 60em) {
  .styleguide .sidebar ul.side-nav .heading {    
    outline: 1px solid #dfdfdf;
  }
  .styleguide .sidebar ul.side-nav li.active a {    
    background-color: #f4f5f8;
  }
}

@media screen and (max-width: 40em) {
  body .styleguide .sidebar ul.side-nav li.heading, 
  body .styleguide .sidebar ul.side-nav li.heading:hover {    
    background-color: #dfdfdf;    /*#34495E;*/    
    color: #7c939d;    
    outline: 2px solid #F4F5F8;
  }
  body .styleguide .sidebar ul.side-nav li.heading a {    
    color: #333;
  }
  body .styleguide .sidebar ul.side-nav li.active a {    
    background-color: #f4f5f8;    
    color: #7c939d;
  }
  .side-nav .active > a::before, .side-nav .active > a::after {    
    opacity: .35;    
    content: "●";    
    color: #008cba;
  }
  .side-nav .active > a::before {    
    padding-right: .25em;
  }
  .side-nav .active > a::after {    
    padding-left: .25em;
  }
}