I’m playing around with a redesign for the site, trying out new things I’ve learned and new ways of approaching various problems.
My first step was to look at the content. Discussions with clients during last year and the number of new approaches and ways of thinking that have been popping up in the web design and development world made me decide to write these two reference pages: Web Site Basics and How I do things.
Web Site Basics is aimed at the complete beginner. It answers the questions: “What makes up a web site?” and “How can I keep it up to date?”
How I do things is more News and Current Affairs in the Web Development world: One Web; Progressive Enhancement; Responsive Web Design; Mobile First / Content First. It’s a brief summary of the direction things are going and a round up of the thinking of a lot of smart cookies out there.
I think it would be a little melodramatic to say that Hardboiled Web Design by Andy Clarke changed my life, but it’s not that far from the truth. I bought the electronic version of the book on the day it came out from Five Simple Steps and raced through it. Something about the “no compromise” approach really resonated with me, and I became very excited about my work again. I was hungry to try new things and work even harder than before.
The worked examples of the various bits of HTML5 and CSS3 look beautiful (which I find is not always the case in web design books), but what really go me going was Part 1 of the book: the day to day practicalities, how do you sell this to clients, and so on.
I bought the paperback a short while after, and I’m glad I did: it’s a thing of beauty and a weighty tome forever. I find that paper books have a stronger visual memory hook for me. I find them easier to dive back into and flick through to find a particular technique or idea that I want to revisit.
This list from the end of the Workshop page sums up the Hardboiled approach quite nicely:
At the end of the day, you’ll understand
Why web browsers don’t limit your creativity
That websites shouldn’t look, or be experienced the same in every browser
How to handle older, less capable browsers
That browser differences are creative and business opportunities, not obstacles
A parting aside: Five Simple Steps has a small but strong catalogue and is well worth perusing. I’m particularly fond of Brian Suda’s Designing with Data. It tickles all my minimalism muscles, and he’s pleasingly rude about Chart Junk.
Just read an interesting post by Craig Russel from January that I’ve just picked up: Responsive Images and Context Aware Image Sizing, which has some follow-up some thoughts on Filament Group’s article. I’m interested in this from a WordPress point-of-view, since that’s what I do most of my work with.
A first step would be to use add_image_size to generate the different image sizes.
One problem is deciding what set breakpoints to use.
Then, rather than using Craig’s getimage.php, a filter would be added to post_content, looking for WordPress images (maybe looking for .wp-post-image) and replacing them on the fly with the desired size.
If you wanted to do this just for featured images it would be very simple. You could write a tiny custom script to pick the right argument for the call to the_post_thumbnail().
I’m looking forward to experimenting with this on my next project to see how practical or fiddly it is.
There’s a very nice article by Marc Drummond on responsive design, To hell with bad devices: Responsive web design and web standards, which covers lots of the points I’ve been thinking about recently. The one that really struck a cord is in the Responsive vs device-specific design: Workforce considerations section: there has to be a balance between having just a small screen and large screen version and having a whole basket of breakpoints. It has to stay practical.
Responsive design is exciting, but it’s also very new and the web design community is still figuring out how it works and what to do with it. Luke W‘s famous Mobile First approach combined with responsive design is a very pleasing way of approaching a new project. I think that the wide side is the most challenging to deal with: what do you do when you’ve got over 2,500 pixels of width to play with?
