Redesigning my personal site
I've just launched a new version of my site. For those interested I thought a short post would provide a good overview of some of the decisions I made along the way.
Although I had a nice little one-page site I was keen to show a little more of my work and it was high time I started sharing my thoughts and inspiration in a much stronger and more accessible format.
Taking a content first approach
I took the now (almost) orthodox approach of content first. I wanted the design to stay out of the way and let my work and thoughts take the main stage. After a few sketches I worked up some wireframes to make sure I was happy with the structure before considering a few design details in photoshop. After some deliberation (Yes I'll vouch with those who say designing for yourself can be difficult!) I settled on a very simple design to house my content. The main challenge was getting the balance right between providing enough structure to hold the pages together while trying to eliminate as much visual noise to allow the content to take centre stage. I'm fairly happy with the result, however I'm sure I will be making a few tweaks here and there as the site grows and develops.
Considering various screen sizes
As we all know it's becoming clear that the designs we produce for the web need to accommodate a whole variety of screens sizes. In essence our sites don't just sit on desktops anymore. This isn't a fully responsive layout, however I was keen the site at least scaled nicely to iPhones and so I wrote a few extra styles to get it to display on this device.
My initial sketches for my 'work' section included a listings page with a further page to showcase each project. I realised that in this context it's a much better experience for users to be able to view each project in succession. With that in mind I decided to incorporate the whole section into one long page. I felt this was even more important on mobile devices like the iPhone as having to load a new page for each project becomes quite a chore.
Once I started testing the designs on a number of different devices I felt the layout of my 'work' section felt a little oversize on your average laptop. With that in mind I implemented a media query for screens at 1280px or over. If your reading this on a wide display, visit my 'work' section and re-size your browser if your interested in seeing the layout changes.
Dealing with bandwidth
Because I'm serving up large images in the 'work' section something had to be done for mobile users. Particularly those downloading over 3G. This is a topic that is getting a lot of interest at the momment and there are number of solutions being experimented with. However a lot of this goes beyond my field of expertise and so for the time being I settled on a lazyloader that reduces page load by simply loading each project image as you scroll down the page. I'm not entirely satisfied with this method and it's a area of the site Im keen to optimise and improve in the near future.
Making reading easy
I've added the plug in Readability to my blog posts to provide a more comfortable reading view for those that only want the raw content. Although I'm happy the design of my post pages are clutter free and easy to read this app is growing in popularity and Im always keen to let the user take control in this way. If your not familiar with 'Readability' scroll to the top of this page and just hit the 'read now' button and you'll be able to check out some of it's features.
A little CSS3 and type optimisation
The site allowed me to try out a few CSS3 techniques and take advantage of HTML5. Im a huge fan of wrapping multiple sections of content within one anchor tag (yes it's now valid) which helps make link areas, well more clickable! When it came to choosing a typeface after a lot of deliberation I settled on Myriad Pro. It's served up via typekit and if your nosey enough to be looking through my stylesheet you may notice the windows optimised versions have been included. What this means is now the browsers ie6-8 get served up the full set of weights, which if your a type geek like myself will make you feel good!
Running without constraints
Finally I think it's worth mentioning my site is CMS free. As I'm the only one making updates and it being such a breeze with Coda I really couldn't see a benefit. Of course that means running without blog comments, however I'm not a huge fan as I think they rarely facilitate the right sort of conversations. If I do ever want to add comments I can easily integrate Discus so for the time being I'm happy with the benefits of being CMS free. Not being confined to a specific set of templates is a nice feeling to have.
Well, I think that covers the main aspects of the design and development. Do have a snoop around and as always do let me know your thoughts.
