Tag Archive: Articles

  1. How I got media queries all wrong

    Leave a Comment

    So this website adapts. It’s been on my to-do list for a while and it’s nice to check it off but I got my approach somewhat wrong.


    I got some things right. I built it using fluid grids paired with fluid images and when I pushed the site live it was about 90% flexible.

    My error was in thinking that once live I’d just bolt–on some media query magic and my website would be suitable for mobile. I was wrong.

    When I began the redesign of this site media queries were not on my radar. Ethan Marcotte had not published his article and some well known designers were not pushing this technique. Consequently my initial content gathering considered desktop only and not mobile.

    And when the time came to review that very same content before implementing a responsive design it was clear the content was not suited for the mobile world.

    The fluff was everywhere

    As I reviewed the content on each page the fluff became apparent. Content I added to pad out my website. Do mobile visitors to my website really want to see snapshots of my digital scrapbooking? Do they really want to read my latest mumblings on twitter? I doubt it. And what about those featured panels on the homepage!?

    So I have hidden some parts of the website when viewing on smaller resolutions, not ideal and left in my scrapbook for better or worse.

    The good parts

    What the layout handles well is varying viewport sizes. My website is not mobile ready, it just adapts nicely to different screen sizes.

    Summing up

    Media queries are simple. The syntax is not hard. The hard part is designing a website which works in varying resolutions and in a number of different contexts. Oh! and looks well of course. That’s the tricky part.

  2. Welcome to my new portfolio website

    Leave a Comment

    Welcome to the long-over-due redesign of my portfolio. The last version never felt quite right. Although I liked some aspects of it, I grew tired of it almost immediately. In hindsight the choice of headline font was more stylistic than functional. It was something I tried, ran with and although bold it was barely legible.

    This version is still not 100%. But if I waited until everything was perfect I’d never release. I still have to plug in WordPress to drive the Journal, static html will do for now. It’s also not responsive. It is fluid though — which was a first for me. Working in em’s and percentages was nice for a change.

    Regards responsive web design I’m still not convinced an iPhone is the best place to view a portfolio but I want to experiment with this technique none the less.

    Scraping out the time to work on this was more challenging than I’d thought. Pro tip: set aside dedicated time to work on personal projects. I’ve learned my lesson. Grabbing an hour here and there in between client work kills motivation and it’s often tough picking up where you left off a week ago.