One of the last projects I completed before going away to Toronto in March 2012 I was a responsive web site and app for an annual Sitecore event called Digital Trendspot. This was a great project to be involved with as it used some features like Geo Location and CSS Media Queries to create a web site which could also be used as an app for the event’s attendees on the day.
I attended the second #anoraks talk last Thursday at AKQA in London. It was great to hear @denodell speak on responsive design. He did a really great job looking back at the past and some creative ideas for the future.
One thing which caught my attention was how he covered the topics of supporting older versions of IE. We’re in an intermediate stage with media queries where there are still a significant number of users out there who are on browsers which don’t support them.
I have just finished a project for Adam Ball who is an artist based in London. This has been a real challenge and has made me push boundaries in to new territory.
Responsive Design, Responsive Images
The main area has been with serving appropriate image sizes according to the device. I have previously talked about my responsive images jQuery plugin which is a good stop gap for getting this to work across the current browser landscape. I have liked working with responsive images in this way because it is a much more organic solution than the ones I have seen elsewhere. It’ll be great when we’ve got something natively to handle this sort of thing.
I’m often a bit of a purist, but as I age, I’m realising more and more the history of the web, much like most other histories is a pretty messy pit of layers laid on top of layers. After reading this revolutionary email from the birth of the img tag, I’m reminded we’re just working on the next layer so it’s probably going to be messy ;).
I have been reading this evening over people’s thoughts about how we tackle responsible responsive images and there seems to be no perfect method. In fact many of the methods currently being seen have major gotchas. It just feels like we are far from getting a stable way of providing responsive images using the img tag.
It’s always nice to start another responsive project, each a little more daring than the last. I’m still in the infant stages with these projects as I find that I’m lacking some good tools to make the process easier. I’ve created a a simple responsive device browser which simply gives an at a glance impression of how a responsive site will look at the various screen widths.
I’m finding one of the biggest challenges is catering for the user to be able to resize the browser window once it has been loaded. One may think that this isn’t likely to happen very often. Especially not to the extent where it starts off less than 480 and increases to above 768. This is exactly what happened on my last project where someone’s browser settings opened certain links in a new window which happened to be tiny. They then realised they wanted it larger and maximised the window to find that most of the functionality hadn’t been initialised because the JavaScript turned on only the small touch device functionality on load.
Dave Taylor - Software Engineer
