So. Responsive Design. It's been explained in ways more detailed and eloquent than what I can write. So you're best off reading this Responsive Web Design article, and this here book. You can also find some jolly nice inspiration and in-action examples at http://mediaqueri.es. There's loads of other places to get your fill of it. I dunno. Google it or some such. Lazy.
I do have my own take on it all. My own thoughts on how best to approach it. A few articles are saying "you must do it like this and do that", but - like many things - there are shades of grey, and there are also variations on methods which aren't without merit - given the right circumstances.
These thoughts I shall publish in a separate article, but not here. I ramble, and so wish to keep things semi-digestible. No one likes getting the windy-pops.
What I done
I contemplated an entire redesign - or at least a "re-imagination" of the site. There are techniques used on the site, as is, that I would try differently if I approached them again, and also the code in general still isn't as ultra clean and tidy as I would like - but then every year I guess we all look back and mutter the same complaints, such is the break-neck speed in which things progress here on the inter-webs. That's my excuse anyhow.
But I also had a voice in my head saying "Throw sausages at owls" and "I wonder if I can take what is already here on my site and make it work in a somewhat responsive way?"
A kick up the backside was also hearing / reading that 24ways.org had managed it with their site, so perhaps "money for old but good rope", so to speak, was possible with my own site.
So after some media queries here, and some extra little bits and pieces there, my site now adapts to mobile devices. I admit at this stage I've been a little lazy and set my initial break point at 600 (seems like a nice enough number, right?) and then another break point at good ol' 320.
But is that all she wrote?
It's good. But it's not right.
Is what Roy Walker would say if he was still alive today. Which he is.
One thing I have learnt is that merely un-floating and resizing stuff, just doesn't cut the mustard when switching from a desktop experience to a mobile one. Removing a couple of wheels from your neighbour's car don't make it a bike now don't it. Nope. It makes you a "wheel-thieving-swear-word", apparently.
The few glaring problems are as follows:
- OK, so my site is more "adaptive" than "responsive". With only a few areas that are fluid, and only below a set width at that. I guess this was onlys going to be the case when converting my site, rather than starting from scratch.
- I need a mobile navigation. And my idea to remedy this is to create a "touch to show" navigation at the top of the page in mobile, which will display all my main links and possibly anchor links to certain content on page.
- My slide-show in portfolio opens images smaller than the original shown. Stupid and pointless. Although it is the only mechanism I have to display images where there is more than one in the set. So my solution is to use some Javascript to swap between the slide show for desktop, and a "back and next" image swap navigation thingy for mobile. Bish bash bosh.
I'm going to sort the above as soon as I can. Promise.
In the meantime, please feel free to hop on your devices and take a look. If you find any issues or have any comments, "form" them to me below.
Go on. Do my testing for me. I have some left over Christmas chocolates I could leave on a wall outside for you. You know. As payment. Yeah?





COMMENTS
"I admit at this stage I've been a little lazy and set my initial break point at 600 (seems like a nice enough number, right?) and then another break point at good ol' 320."
Lazy? Not at all. You've decided that you want your site to look / feel / behave differently on different size screens and you have done just that. It doesn't have to change at every screen size.
It looks good, nice work.
@Tom : Cheers :) And I guess I can always tweak as and when. No big deal.