Introducing the New OSTraining Design
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.
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.”
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:
- Blue is used for links and those buttons that aren’t of critical importance.
- Dark gray is used for regular text.
- Dark blue is used for main menu links and footer block.
- Orange is used as a divider, including between the main menu and the rest of the content.
- Yellow is used for the most important action buttons on the site.
- Light blue is used for sidebar blocks.
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:
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.
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!
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!
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.
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.
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?