There’s a new look around here
The Westboro Systems site has been redesigned! There were a couple of goals for the new design, including:
- To create simple, straightforward, and to the point messaging that allows you to find information easily.
- Provide a clean and clutter-free look with most of the content easy to find and view on the home page.
- To be responsive; from mobile devices to tablets to laptops.
- To create a blogging area. Well, not so much to create one, but to simplify the entire blogging workflow.
- And finally, to create a static site that is easier to update, backup, change, and control.
The redesign also allowed the opportunity to tidy up some content, find and fix a couple of broken links, and optimize the page loading.
While it is still the early days, the new design and the toolset are exceeding my expectations.
The tech behind the site
Being not only an Agile Coach and Trainer but also a geek at heart I had to use leading edge tools to create the site. That way I could learn about the what is happening in website development and keep my development chops up to speed.
The new site uses Jekyll, a static site generator that allows for a simplified publishing workflow, use of markdown for content, and the ability to use developer tools such as git for version control. Jekyll/git allows for any of the people editing the site to simply clone the site and edit it on their laptops.
Jekyll supports page templates based on Shopify’s open-source Liquid templating engine. The most prominent use of Liquid on the site is generating the Blog summary page.
Once the edits are complete a simple rsync pushes the updates live.
Twitter’s Bootstrap front-end framework is used for the bones of the page layout and structure. Bootstrap’s responsive design and grid layout system simplify creating page layouts. Some additional CSS styling completes the creative inspiration!
A static website serves the same fixed content to every visitor. In particular, a static site does not process files, use a database, or accept input (e.g.: through POST). So, a third-party service, Disqus, handles the non-static requirements for commenting on posts. Disqus takes care of the entire commenting workflow including storage, display, and spam filtering. Disqus integration was simple, took less than 30 minutes, and looks professional.
Rounding out the list of technology and tools are:
- Less: for processing the CSS in a humane way
- spritemapper: for creating image sprites that reduce server round-trips
- Google Pagespeed: to tune page loading time
- W3C Link Checker: to check for broken links
- Javascript: just a wee bit
What do you think?
These posts may also be interesting...
Smaller User Stories?We are the Borg
Every little thing
What problem are you trying to solve?
Product Management
Business Agility
comments powered by Disqus