Making this site
Apologies in advance if this post goes on a little long and seems a bit self-indulgent – it is for my own personal benefit more than anything else, just so I have a record of exactly how I approached things and what I was trying to achieve, as no doubt I will have completely forgotten within a couple of weeks…
So the big thing the past year or so has been responsive web design, it has been pretty hard to get away from it. And it has opened up a whole new world of questions, issues and priorities which need to be addressed in order to successfully design for multiple devices. And I personally feel that to some extent, many responsive sites currently out there have compromised on the level of attention given to every design decision, at every viewport width. And the result is sites that are instantly recognisable as ‘responsive’, before you even resize your browser window.
And so what I was trying to do with this site was ultimately create a responsive design, which at first glance may not appear to obviously be a responsive design (to those of us who open and new site and bet with themselves whether or not it is responsive before resizing the browser window… Just me?).
By this I mean incorporating elements which might not frequently be seen in responsive sites, such as a fixed header navigation when at ‘desktop’ width, and mobile navigation more akin to a mobile website than responsive site, rather than simply creating an inline list of links. These aren’t groundbreaking things in themselves by any means at all, my goal was to use techniques such as these in tandem to create a decent user experience at all widths, not simply a desktop site that displays all elements at 100% width below 500px.
I was also keen to stick to as many best practices in terms of performance and scalability that I could, meaning a heavy reliance on CSS for presentation, and optimising the front-end code as much as possible.
It’s more than fair to say the best parts of the site are due to other developers’ hard work:
The site uses the HTML5 boilerplate, and makes plenty of use of the included frameworks (jQuery, Modernizr) and H5BP Ant build script.
The site is built on WordPress, which I like more every time I use it. Turning the static HTML/CSS/JS in to WordPress templates and migrating content literally took about 3% of the time I spent building the site.
Fonts are served through Typekit, background patterns are from Subtle Patterns. The icon font used is made from Pictos icons, hosted myself, and the icon set was actually put together using IcoMoon by Keyamoon, which is an incredibly useful font-building app.
The image slider on the homepage is thanks to Flexslider, which I seem to be using on every project at the moment. The slideshow which is displayed at tablet-y widths and below on each project page is powered by Photoswipe. The layout for the ‘snaps’ page is thanks to jQuery Masonry. The code syntax highlighting on blog posts uses Google Code Prettify.
The site is fully responsive: fluid layout, flexible media and media queries. Unfortunately I initially didn’t design it with Mobile First in mind – I thought I would be able to retrospectively adapt the CSS to be mobile-first but it turned out to be trickier than first anticipated, and so had to put that on hold, I may revisit this later at some point.
As mentioned earlier I tried to put a focus on performance and front-end optimisation – using CSS for presentation, and minimising HTTP requests where possible. This was done through combining, minifying and concatenating all JS and CSS, using a font for icons, using data URIs for background images where possible and reusing assets across the site.
I also tried to improve the user perceived load time by lazy-loading some assets, such as larger images and third party requests, such as the social media feeds on the homepage or sharing buttons in the projects/blog areas.
The W3 Total Cache WordPress plugin takes care of caching database objects and pages, and gzipping and adding expires headers to all site assets.
As far as desktop goes – unfortunately, older browsers don’t much like sites that extensively use CSS3, and so any browser that doesn’t like
box-shadow will not play nicely with this site… Basically, that means the site will either look fine (most ‘modern’ browsers), look fine but not have CSS3 transitions (IE9, old versions of ‘modern browsers’), or… will look like arse (IE8 and below). I did think about polyfilling the CSS holes, but in the end didn’t have time, perhaps I will revisit this in the future (I won’t).
I haven’t had time to do a great deal of multi-device testing, but I know the site works fine on iPhone 3GS+, iPad 1+, Android 3.2+ and Opera Mini on iPhone.
So that’s it
This is my first personal website, and so I wanted it to be good, use cutting-edge techniques, and be something I can be proud of. But ultimately, the speed things move with the web, I anticipate that it will be completely outdated in no time, so I hope I get the time and motivation to do it again in the not so distant future.
Hello, Neat post. There is an issue with your site in web explorer, might test this? IE still is the marketplace chief and a huge component of people will pass over your wonderful writing because of this problem.