My first adaptive website
With all the excitement of responsive design I thought a little personal project would be a good starting point in getting to grips with this new approach to designing websites.
A mixing of interests
I've been reading a fair amount of philosophy of late as well as re-visiting a number artists I studied way back when I was at art college. With this in mind I set out to build an adaptive site called enlighten my mind to house my favourite quotes from a bunch of the more popular of these creative folk.
A little recent history
For those unaware responsive design is a term coined by Ethan Marcotte back in the summer of 2010. In essence the approach provides users with a more contextually appropriate layout, depending on the device they are accessing the site from. For many websites, creating a version for each resolution and new device would be impossible, or at least impractical and so responsive design provides a viable solution to these issues.
Getting involved
In all honesty I was surprised with how straight forward it was to create a basic adaptive layout. As the site design was relatively simple, after sketching out my designs I skipped photoshop and did most of the work directly in the browser. Once a set of media queries were in place it was easy to experiment and work out how the design elements would play out over a number of different breaking points. I used the fantastic Less framework which is a nice way to get started. Before you say it, yes I'm aware this is not a 'responsive' design in the true sense of the term, as it simply 'adapts' rather than 'scales', however until I read Ethan Marcotte's forthcoming book I thought I would just dip my toe in the water with this little experiment.
Adding interactivity
I was interested in using a slider to display each 'thinkers' set of quotes. It also added a little more complexity to the task as I wanted iPhone and iPad users to be able to swipe through the quotes with their fingers. After a little research I settled on a plug in that was up to the job. With a little configuring I got it to work across the various breaking points of each layout. My only gripe is resizing the browser causes the quotes to fall out of place momentarily until you click or swipe to slide. Of course it's only front end designers that re-size their browsers so it's not really an issue.
Varying the experience for the device
There are a number of small but subtle changes to the site depending what device you are viewing it from. For example the photo in the 'info' tab of each set of quotes disappears on the iPhone along with the large left and right slider buttons. My thinking is the photo isn't essential (although a nice to have when more screen space is available) and the buttons are not needed as swipe is used in this context. There is also a little overlay when you mouse over the photo which is disabled on all but the desktop version.
Well that's about it really. I had alot of fun experimenting with this site and have already gained a wealth of knowledge which I'm keen to use as I get to grips with fully responsive layouts. Finally I should mention there are 120 quotes to explore, so do have a snoop around Enlighten my mind and as always do let me know your thoughts.
