Spring Cleaning
Spring Cleaning êŽë š
â ïž
This post was written 14 years ago!
Personal opinions and technical details may have changed since writing.
May 2011 â I redesigned my website (this website) with the primary goal of making it responsive. I was happy with the result and it has served me well, but it also lacked some of the finesse of previous iterations. Never being satisfied, I deciding to partake in a little spring cleaning. Well, a little turned into a lot.
âStage oneâ is live! A complete overhaul of the build and a touch of class to the design. Youâre seeing it now (unless youâve arrived here from a future redesign. In that case, how long did this one last?). âStage twoâ will happen at some point later this year. Itâs currently noted down as âdo something with my portfolioâ.
The Design
In making my previous design responsive I focused too much on the build on not enough on the basics. This realignment is typographic at its core. I took it upon myself to set the whole site on a baseline grid. An unusual and difficult choice for a website design but the vertical rhythm has added a noticeable improvement.
White space is one of the most powerful elements of design and Iâve given it massive respect. When designing for multiple screen sizes finding a balance in proportions is a challenge. Here Iâve used a flexible grid with percentage-based margins to ensure content is framed beautifully.
Iâm very pleased with the result! Though Iâm a strong believer in pushing the boat out in regards to client work, some ideas are just too new and crazy to experiment with on anyone but yourself. This website will be a platform for all of those âwhat ifâŠâ moments of inspiration I have in the shower, or at the bottom of a pint glass. I have a few things in store.
The Build
This time around Iâve finally tamed WordPress. Or at least we have agreed to mutual terms. Either way, the comments system now works properly and looks great so please tell me what you think. Alongside the usual clean-up of plugins this build has a few noteworthy aspects:
Responsive Design
Just like the design, the whole build of this website is based around typography. Specifically, the CSS em unit of which all font sizes, margins, and media queries are based. Without tying layout to content in this way design breaks down rather spectacularly when the base font size is adjusted.
Another practice Iâve heavily favoured in recent months is saying ânoâ to media query polyfills. I use to be a big fan of scottjehl/Respond â an ingenious piece of engineering no doubt â but is it really necessary? I donât think so. The primary targets Internet Explorer 6, 7 & 8 donât need to respond to mobile screen sizes. I simply serve up a semi-fluid build between around 960 and 1280, similar to Nicolas Gallagherâs technique but without Sass (for now). Other browser that arenât old-IE and donât support media queries get the basic small screen version which is still highly readable, accessible, and nicely formatted.
Iâve also found that combining both min- and max-width media queries leads to tidier CSS. More planning is required but it does mean a lot less resetting of styles. If your mobile design is miles apart from the desktop layout â which it probably is â use max-width to scope those styles. Iâm experimenting with min-height on this here website too, see if you can find itâŠ
Resolution Independence
After championing scalable vector graphics in the biggest web design arena there is I thought it only right to make full use of the standard. Though CSS takes care of most of the visual design, I do have a few icons and logos. Theyâre now 100% SVG-ized. For a couple of other graphics Iâm supplying high-res sources. My portfolio section is still lacking, but then I have large plans for that in the near future anyway. The iPad 3 is almost upon us! Is your website ready?
Performance
Page speed has improved in all the places that make a different. Iâm using Socialite.js to defer those nasty bandwidth hogging external resources â new version out soon! Iâve gone from 5 @font-face imports down to 1. ---
Going Forward
This new design and build is all part of a grander scheme for the work I do online. I have quite a few new and old projects that need attention, some of which will be incorporated into this website. Barring a few bug fixes, version 6 of dbushell.com is ready!
What do you think?
