Introducing the New OSTraining Design

| OSTraining News

OSTraining redesignLast week we launched a redesign of the OSTraining site.

The original OSTraining site design was launched all the way back in 2008. We made some incremental improvements since then, but no radical changes.

This year we decided to completely redesign OSTraining and make the entire site mobile-friendly.

The whole process took about 6 weeks from start to finish.

In this post we'll take you through the new site and the tools that made it possible.

The framework and base template

We went back-and-forth on whether to use a commercial template. In the end we decided an existing framework would help us build and iterate more quickly. We choose the Warp 7 framework from YooTheme.com with Lava as a base template.

My favorite feature of Warp 7 is UIKit, a front-end framework that works as alternative to Twitter Bootstrap.

On the negative side, the site is measurably slower. We choose responsive design and to use existing framework. Both of those add to the size of our codebase. Over the next few days, we're going to start turning on some heavier cache and compression features to speed up the site again.

OSTraining redesign

The font

Open Sans is a very lightweight font from Google that loads very quickly. Open Sans is used an a lot of Google sites and is also used by WordPress.com and the WordPress admin interface.

The designers of Open Sans designed it to be readable above everything else. They planned for this font to be "optimized for legibility across print, web, and mobile interfaces."

OSTraining redesign

 

The color scheme

It was a huge help to have clearly defined color palette to work from. The new site's color scheme is based on the OSTraining redesign by Chiara Aliotta:

  1. Blue is used for links and those buttons that aren't of critical importance.
  2. Dark gray is used for regular text.
  3. Dark blue is used for main menu links and footer block.
  4. Orange is used as a divider, including between the main menu and the rest of the content.
  5. Yellow is used for the most important action buttons on the site.
  6. Light blue is used for sidebar blocks.
OSTraining redesign

 

OSTraining redesign
 

Mobile

The new site design is now fully responsive. This is achieved by using CSS media queries to play with width, display and other properties.

The trickiest part of the design process with CMS is normally the 3rd party extensions. We spend part of the design process reducing the number of public-facing extensions and eliminating any that would be be particularly difficult to make responsive.

For our Kunena support forum we relied on the NTS Kinfinite template as a base.

We hope you like the end result! Here's a screenshot from the mobile, laptop and tablet versions of the site:

OSTraining redesign

CSS3 animation

We use more CSS3 on the current site. For example, we now use the Hover library to subtly emphasize some key site features, including our Start a FREE 7 day trial button on home page. Place your cursor over the button to see the animation.

Start a FREE 7 day trial

Next steps

  • We need to make the site faster.
  • We have a whole series of improvements to the video class pages due to launch this week.
  • We're going to go back to a lot of our old, but still popular posts, and make them responsive. For example, many YouTube video embeds are not responsive. We'll use this solution outlined here.
  • The sign up pages need to be made mobile-friendly.
  • We aim to place the whole site behind an SSL certificate.

In short, we've just finished a big round of changes, but it's immediately time to look ahead.

We hope you like this improved version of OSTraining. There's more to come!


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.