A New Look for 2013

Introduction

My son, Sam, has been hard at work over the Christmas holidays building a new format for the Clyde Street blog.
Sam has been working on web design for five years and has transformed my understanding of how to share ideas and information.
In this post, Sam outlines what he has done with Clyde Street.

New Look

Like many projects around the home which linger in the background, I had been putting off updating Keith’s website for too long. When the Christmas break came around, I finally had the time and more importantly, the inclination, to make a start.
Having read the Clyde Street blog for many years, I felt I had a pretty good understanding of what we should be aiming for in any redesign but I forced myself to sit down and think formally about what these aims were. I came up with the following:

• Simple – Clyde Street is a place where people come to read. The articles vary in length and complexity so we needed to make the layout uncluttered and the reading experience as nice as possible.
• Modern – As an “educational technologist”, Keith’s blog needed to utilise current web standards (such as html 5 and css 3) as well as embrace open source tools.
• Reflect – I have often heard people say that this blog was a “journey of discovery”. Prior to the redesign it had very little personality in terms of branding to reflect this. Without going overboard we wanted to change that.

With these goals in mind I set off on the redesign.
The blog had been previously been hosted on wordpress.com, the official hosted version of WordPress. This is an excellent service but limits your ability to extend the blog with custom plugins and designs. I therefore made the decision to transfer the blog to wordpress.org, the open-source version of the WordPress platform.
As the platforms are analogous it made the export and import of the blog including all pages, posts and attachments fairly simple, although with 1.5GB of media the transfer process was a little on the slow side.
In order to save time in the production of websites, I often espouse the use of frameworks or templates. Unless the website you are creating is trying to be groundbreaking I often feel the time taken to create exactly the same resource that is already out there is better spent customising content or enjoy time with your family.
With the goals that I had established for the site I searched several WordPress Template sites and narrowed the choice down to the “Fixed” theme by Okay Themes via Themeforest. The simple design is responsive (scales to fit the device you are viewing it on) and also was compatible with retina screens (where the resolution of each image is twice that of a “normal” image), this optimisation for retina is becoming more important with the increased prevalence of new Ipads, Iphones and now laptops that all have this increased resolution. Images that are not optimised for retina can appear blurry on the new screens however the increased image size can lead to it taking longer for a page to load and so there are definitely pros and cons to this.
After uploading the purchased theme to the website I set about customising it to fit with the vision for the website. I had the brain wave that Clyde Street was a good station name and that the station metaphor was a great fit for the “journey of learning” that this blog provides. After playing around with several concepts of logos and attempts to code it I finally managed to get to the finished product.
I have been lucky enough to absorb some of Keith’s teaching about Performance Analysis over the years and one lesson in particular which was, “there is no point in having new equipment, if you do not know how to use it and/or it does not add to what you are already doing”.
Keith’s knowledge of the web is already excellent but I in order to avoid the above philosophy being relevant here, I talked to him about a couple of ways that in creating his content he can make it easier for people to read, such as:

• where there is a list, always using bullet points or numbers (depending if it was an un-ordered or ordered list)
• ensuring that the headings correctly cascade down a page, a “Heading 1” or <h1> tag is normally used for the page title or site title, “heading 2” for the title of the page, “heading 3” for sub heading and so on.

These small formatting tasks may appear to be annoying but they all add up to improved readability for users and more importantly for people using screen readers.
In the end, a blog is driven by its content, people do not keep coming back to see a fancy design, they keep coming back to read new ideas. My aim was to make it is as easy as possible for people to get to those ideas.

Tools I used to create the website

• Codepen – I use codepen to play around with css and see the results live, it is also a great place for inspiration.
• Contact Form 7 – A simple contact form plugin for wordpress.
• Jetpack – A plugin with lots of great tools like visitor statistics and the ability to log in via social media to place comments.
• Sublime Text 2 – A code editor for mac, that has a beautiful and customisable layout.
• Transmit – An FTP client for mac that makes it very easy to sync local and remote (on the web) files.
• Tower – A version control tool, which basically means if I make a mistake in my coding or design, I can go back to the point before I made the mistake.
• Adobe Illustrator – A graphics creation tool (similar to photoshop but more drawing based)