Kirkaldie & Stains

Kirkaldie & Stains - homepage

Website: no longer online - view screenshots

Size: SilverStripe includes and layout files for 35 page and popup templates

My professional status: contractor at Heyday

Website client: Kirkaldie & Stains

Dates: August - October 2012

Categories: Showcase sites, Scoping/pitching/quoting, Website designer, Front-end developer, CSS-based layout, CSS3, HTML5, jQuery/JavaScript, SilverStripe, E-commerce, Large sites

Brief: The late lamented Kirkcaldie & Stains was a traditional department store that had been a feature of Wellington's Golden Mile since it was first established in 1863. It was an icon of the New Zealand retail industry with a singularly distinctive character, and was renowned for its integrity and consistent standards of excellence.

The existing Kirkcaldies website was old and outdated, and badly in need of refurbishment - and in 2012 the company decided it was time to develop part of the website into an Online Store, as well as re-designing their brochure content and introducing news & events pages and a blog.

Heyday were invited to design and develop the new website, and I was asked to join the team for a few weeks to carry out the front-end development for the site.

I was responsible for the HTML, CSS and some of the jQuery for the new designs, and I was also responsible for integrating my new code into SilverStripe, building the CMS's layout and include files which were then programmed by Glenn Bautista from Heyday.

Achievements:

  • Taught myself how to use LESS as my pre-processor during my first day on this project
  • Learned how to code the layout and include .ss files within SilverStripe, in order to integrate my templates into the CMS ready for the developer to work on
  • Also figured out how to use modernizr.js, HTML5 Boilerplate and normalize.css for the first time
  • Built a number of templates without having been given the designs, working off the original wireframe drawings instead and extending the design from other pages
  • Produced HTML/LESS/CSS code that met Heyday's very strict guidelines and naming conventions, enabling their in-house front-end developers to reclaim the website easily once I had finished working on the project.

My responsibilities included:

  • Reviewing the set of wireframes and template designs in order to provide an estimate of how long it would take me to do the front-end dev
  • Building 35 page and popup templates in LESS (a dynamic stylesheet language that extends CSS with dynamic behavior such as variables, mixins, operations and functions) and HTML5, including sample content and unique layouts for each template - as well as the chrome, background layers, headers, banners, footer and navigation elements for the entire website
  • Using HTML5 Boilerplate as a starting-point for the front-end dev - this had already been set up by Kelle Connolly, Heyday's front-end developer, when I took over the project
  • Using LESS to define global colour variables and grid settings which were then referenced in the main stylesheet
  • Using Typekit to download and render the non-websafe font chosen for the overall site design (Adobe Garamond Pro) as well as styling the fallback web-safe alternatives
  • Using a 15-column grid for template layout, as this was requested by the Heyday team
  • Using the normalize.css stylesheet instead of a reset stylesheet to provide better cross-browser consistency in the default styling of HTML elements
  • Hand-coding (using Sublime Text) to a reasonable level of accessibility
  • Ensuring that all styles were logically grouped within the appropriate stylesheet, and labelling each with a description, summary of use, template reference and example HTML, to make ongoing use as easy as possible for the Heyday web team
  • Coding the jQuery for a number of dynamic graphical effects including popup containers and accordions, using Modernizr, a JavaScript library that detects HTML5 and CSS3 features in the user's browser - and styling the no-js version of these elements to match the design
  • Creating styles that would allow the jQuery to provide progressive enhancement while still allowing complete accessibility for those users with JavaScript disabled
  • Incorporating various CSS3 effects within my stylesheets including box-shadow, border-radius, RGB and RGBa opacity, linear-gradient and text-shadow, and ensuring that old browsers such as IE7-8 (which have patchy support for CSS3) still looked nice and worked without them
  • Coding up the SilverStripe layout and include .ss files - these combine to produce the various HTML templates within SilverStripe - which were then integrated into the CMS programming structure by Heyday's programmer Glenn Bautista
  • Putting together a few of the templates using the wireframes as a guide, rather than design
  • Creating a range of dummy text pages within the SilverStripe CMS where I could test the layout and functionality of my new templates and where Glenn could test the deeper programming aspect of the site
  • Extensive testing of the site at all stages of the development process, and ensuring consistency across the following browsers and platforms; using VirtualBox to host the range of test PC operating systems and browsers required:
    • PC (WindowsXP): Internet Explorer IE7, IE8; Firefox 4
    • PC (Windows7): Internet Explorer IE9, Chrome (latest)
    • Mac (OS X 10.6): Chrome (latest), Firefox 13, Safari (latest)
  • Ensuring that all my templates were validated using the W3C Markup Validation Service and that they conformed to HTML5 requirements
  • Setting up a local version of the site templates on my Mac using MAMP and SourceTree (a Mac client for Git and Mercurial version control systems) so that I could view the pages properly using my Mac as a server, and so that Glenn could access my work and integrate it into the test version of the CMS
  • Taking part in progress meetings with the rest of the Heyday Kirkaldies web team, and adding/changing design/HTML elements identified in these meetings.

This project was a massive learning curve for me, and as a result, I loved every minute of it.

On this project I used LESS, modernizr.js, HTML5 Boilerplate and normalize.css for the first time. LESS is an extension of CSS, which meant that it took me a couple of hours to get my head around it and to understand its capabilities and methodology, and then I was off and running. I used a couple of new bits of software to manage it - Sublime Text 2 in addition to Dreamweaver and Less.app to manage the conversion of LESS files into CSS files.

Heyday has a very specific set of guidelines and naming conventions for front-end development (which were still in the process of being written at the time) and it was important that I figured out and then followed these guidelines and built the templates in the approved manner, so that it would be straightforward for the team to pick up my work after I had completed the project.

The biggest learning curve for me was that I was responsible for coding the layout and include .ss files within SilverStripe. When Tom and I work together on WebWeaver projects, I build static HTML/CSS templates which I then hand over to him. In addition to the deeper programing that he does, Tom integrates my templates into SilverStripe and adds the code required to display various elements within these templates. In this way we have a very clear delineation between front-end dev and programming.

For the Kirkaldies project, my job was to step over that line and integrate the files myself, as I was responsible for pretty much everything within the theme folder. This required me to get my head around SilverStripe and to learn SilverStripe template tags, template variables, loop blocks, if blocks and all the rest. Awesome fun.

Fortunately for me, Heyday's Kelle Connolly had had a couple of days before I arrived to set everything up, and she had started the build of a single basic page, which meant that I could see how everything fitted together in terms of the includes and other elements that were unfamiliar to me. This gave me great starting point, and Kelle provided ongoing support when I had questions about the best way to fit my work to Heyday's way of doing things.

The site was made up of two very different types of content - the text-rich brochure-type pages and events/news/blog sections; and the e-commerce Online Store. The Online Store was divided into two main parts - everything to do with the products themselves, including search results/multiple product display pages of various kinds as well as individual product detail pages; and the shopping cart e-commerce purchase process pages.

I began by building the text-heavy pages, as these were the most straightforward in terms of layout, and therefore the easiest to get my head around in terms of jigsawing together the layout and include files. I then moved on to the blog and news & events pages (both the individual detail templates and the section homepages), and the homepage with its multiple (optional) modular elements. Then I put together all of the product category and section pages, built the shopping cart process pages, and finished off the product detail page, parts of which had already been put together by Kelle.

I am completely indebted to Heyday's programmer Glenn Bautista, with whom I was working on this project. He gave me time to start figuring out what was what, and once I reached the limit of my understanding he very patiently, with examples, showed me how to put it all together. He's a very good teacher.