A Bit of a New Look
A Bit of a New Look ź“ė Ø
ā ļø
This post was written 10 years ago!
Personal opinions and technical details may have changed since writing.
I redesigned my website!
This iteration has taken longer than usual because the visual changes are much more dramatic. Iām really pleased with the results:
Itās been two years since I last updated the design. That is a record because itās usually an annual tradition. Past updates include: 2014, 2013, 2012, and 2011. Last year I improved performance and deployment.
Business priorities
While I loved the simplicity of my previous homepage, it wasnāt selling me as a business. It made for a wonderful portfolio cover but nowadays I need to convert passersby into paying clients. That means content (and sparkles).
Iām in the process of rewriting my services page and Iāve introduced two new pages speaking directly to clients and web agencies. The content is, as always, a work in progress.
Design inspiration
The retro style emerged from the small āFor Hireā sign I created for my sidebar/footer last year. It was well received but a few people noted it could be mistaken for an ad because it didnāt fit into my design. Too nice to consider removing, I realised it was the ideal starting point to inject more colour and personality into my website.
dbushell.com brand colours
I spent a long time adjusting the colours to discover the perfect palette:
dbushell.com brand colours
And from here I experimented with typography. I wasnāt sure how the script/hand-written style would translate online. Itās tricky because such a variety in weights doesnāt suit the web. Web fonts are heavy; a big performance cost. Ultimately I knew this style wouldnāt be viable to use for headings. I settled on a simple sans-serif, Futura being the natural choice.
Responsive navigation
Iāve always been a fan of off-canvas navigation but I was concerned my previous version was a little too hidden. Is a link unseen a link unclicked? Iāll put that hypothesis to the test. My new design has a fixed header with an overflow menu that prioritises key pages.
The build
I was short on time to complete this project (if I ever wanted to ship something). Rather than building from scratch I decided to use my existing CSS as a foundation. Things have gotten a little messy because I didnāt have a clear vision for the design initially. My front-end optimisation has regressed but after launch Iāll tighten up the bolts.
Previous incarnations of my website have had ridiculously good support for legacy browsers. Unnecessarily so, but Iāve always seen it as an exercise in ābest practiceā. When building from the ground up, progressive enhancement makes such support a natural by-product, for the most part! Retrofitting on the other hand isnāt so simple and requires more dedicated testing. In the interest of my own sanity Iāve abandoned old IE. No one would have noticed, I know my analytics, but it still feels a shame to lose that backwards compatibility. That said, itās still looking good in IE9!
Just because I can
My old typography used CSS gradients and text shadows to create custom link underlines. Iāve taken this one step further:
Yeah I know, the animations are overkill, but so many websites these days donāt even underline links. Itās a bit of fun for now.
What do you think? Like my new website? Let me know on Twitter @dbushell.
