The cobblers shoes, err website.

Submitted by Micheas on Mon, 11/19/2012 - 21:37

Our latest website refresh has finally rolled out.

It's not done of course, we still need to convert the slideshow images and logo to the picture tag and the logo should really be converted into an SVG. We don't have an aural style sheet to keep the desktop and mobile websites from both appearing to screen readers, and a bunch of other things we'd like to do.

That said, we have finally dumped the mobile version of the site in preference of using a responsive theme.

If you are on desktop computer resize this window and watch how the site changes as you make the window bigger and smaller.

The site changes as the screen changes size and the browser gains and loses functionality.

Unlike our old mobile site which was just a barebones site that had being readable on a mobile as the only positive this new theme has features that only show up if you are on a smart phone.

How did we do it?

We started with the templates directory in the zurb foundation theme.

We used:

  • The CSS preprocessor SASS to allow us to reduce the amount of duplicated CSS being written.
  • The SASS extension compass to continuously recompile the CSS and generate most of the CSS3 markup.
  • The foundation framework by Zurb.
  • And our own inhouse extensions for backgrounds and courners

How did this compare to the last site update?

This update we tried three different versions of the site and went with the one that we felt best portrayed our image. Last update we created one design and refined it.

This site update we did QA with twelve(12) mobile browsers (Android browser 2.0, Android Browser 2.1, Chrome for android, Chrome for iPad, Firefox for Android, Opera for Android, Safari for iOS6 retina iPad, Safari for iOS6 retina iPhone, Safari for iOS5 retina iPhone, Safari for iOS5 non-retina iPad, Safari for iOS4 non-retina iPhone, and Kindle browser where as last site update we used two(2) mobile browsers for QA.

The previous version of this site had about 2,500 lines of CSS the current site has about 3,500 lines of CSS

Because we used SASS for this refresh we wrote approximately 350 lines of SCSS this time compared to the 2,500 lines of CSS we wrote last time.

Even though we did so much more testing and added a lot more features this update took about one fourth the time as the last update.

What would we like to add in the future?

All the unfinished stuff, like the <picture> tag.

Get the aural style sheets written and tested.

Integration with our bug tracking software so clients can see the status of issues. and see that we are and are not planning on working on. This is becoming more and more of an issue as our projects are growing bigger and more web apps than web sites.

A chat client using nodejs so that we can hang out on our website during the workday.