Introducing the New OSTraining Design

OSTraining redesign

Last 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!

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Article Rating
Subscribe
Notify of
4 Comments
Oldest
Newest
Inline Feedbacks
View all comments
John Coonen
John Coonen
9 years ago

Looking good! We use the same solution for all our sites, and have found it very easy to update, plus, YooTheme does a great job with Warp 7 framework. Speed will ALWAYS be an issue, would love to share ideas with you guys on ways to make it even better. NICE WORK!

steve
steve
9 years ago
Reply to  John Coonen

Thanks John
We use all of Joomla’s default caching features (Global Config, plus the cache plugin with browser caching).
We also use JCHOptimize Pro: [url=http://extensions.joomla.org/extensions/core-enhancements/performance/site-performance/12088]http://extensions.joomla.or…[/url]
We’ve got a CDN too, via our hosting company. All our images run off the CDN. We hope to move most of our JS and CSS scripts there soon also.

sabarnett
9 years ago

A lot of thought seems to have gone in to the new site. However, as a new user here, I’m struggling. I’ve completed three of the programming courses and am starting to work through the WordPress courses. Out of five courses, four of them have proven difficult to follow because the topics are out of order.
While the site looks good and functions really well, the ‘content’ seems to have suffered and, after all, it’s the content you are selling.

steve
steve
9 years ago
Reply to  Steven Barnett

Hi Steve
I apologize for that. I know we had some problems with 2 courses because of bugs with the site launch. We were emailing back-and-forth with you on those. Thanks for your help.
Could you ping me at @OSTraining.com">steve@OSTraining.com with details of our courses you had problems with?

4
0
Would love your thoughts, please comment.x
()
x