Cleardrop news, web industry observations and views, and other interesting stuff!
14 May 2014
There are many frustrating aspects of web development, but surely one of the most frustrating is when something works fine for you, but not for someone else. That frustration is compounded if you establish you’re using the same browser version on the same platform! This happened to me during the redesign of this site.
I was using both Googles and Twitters Bootstrap CDN’s to serve fonts. I’d enabled Cross-Origin Resource Sharing (CORS) in my .htaccess file to avoid known issues of fonts not showing in IE and Firefox on Windows. On my test environments all was fine, but someone testing for me from their companies network still wasn’t seeing the fonts in either IE or Firefox. The CORS directive which sets a header to allow content from another domain was seemingly being stripped out by the firewall, although Chrome was fine. The only information I found to really confirm this was an article on Six Revisions.
I don’t know how common this problem is, but it’s made me very wary of relying on CDN’s for fonts, especially icon fonts, with no fallback mechanism such as the Web Font Loader. Rather than that I decided to just host the fonts myself. I loose the benefits of a CDN, but I’m more confident everyone is seeing what they should be.
27 February 2014
It’s a task all web designers face eventually - redesigning your own site.
Every redesign for Cleardrop entails much internal debate (in my head) and hand wringing. And all that before I even get to deciding what colour the damn links should be! While it’s nice to have absolute creative control of a site, it’s certainly a double edged sword; that creative freedom can breed never ending tweaks and ‘what if’ moments.
For most sites, content is often the trickiest element to get right and that’s how it should be. For Cleardrop however, the content is straight forward; a portfolio, a tiny bit about me and contact information. I've long since got past the need to include the marketing spiel that is prevalent on so many sites. Whether included for 'SEO' or to make the site, company or individual look bigger and more impressive, it rarely adds value for clients, actual or potential.
The hardest part about pulling content together for Cleardrop? Portfolio size. Since Cleardrop has been trading since 2001 there’s a huge catalogue. Of course, as is the nature of the internet, much of that work is either no longer online, technically dated (Flash anyone?) or was designed for another era. Plus, I know full well from my own viewing habits, user fatigue hits well before the ninety seventh portfolio piece, so a curated selection of only very recent work is all that’s to be found here.
So, the design. I imagined all manner of crazy whizz bang designs and effects, but in the end settled on a minimal one page format with some modest transitions. There’s always a danger of effects and styling distracting from actual content and since I always try to avoid that for client work, I didn’t want to fall into that trap myself.
No redesign is complete without sweating the details of the HTML and CSS. The HTML5 is (hopefully) as concise as possible for the purposes it serves. The CSS is authored via SASS, which I’ve adopted recently. The animations are pure CSS, triggered by Javascript.
The backend (which isn’t complicated for a site like this!) is custom PHP and uses my own content management / blogging system - more on that in a future post!
Everything was authored in my code editor of choice Coda with a helping hand from the wonderful CodeKit.
Oh, and the links colour is #00aadd. At the moment…
27 February 2014
After months of threatening a redesign it’s finally happened. Plus, the new site has this Blog attached, so watch out for regular posts from now on.
I dare say they’ll be future tweaks and enhancements, but for now it’s live!
