Friday, July 22nd, 2011

What ‘Responsive Web Design’ means to designers who can’t code.

There’s been a lot of excitement and ho-ha about responsive web design recently and it seems to have been a major talking point at the conferences this year.

Like many web designers and developers I’ve just started experimenting with RWD myself and honestly believe it’s the way forward now we have many screen sizes and devices to cater for.

What is Responsive Web Design

For those of you who don’t already know – responsive web design essentially means coding a website to have a flexible layout which adjusts to suit screen widths and devices accordingly.

This is acheived using CSS media queries and techniques to present a varierty of image sizes.

You can see some great examples of Responsive Web Design in action by visiting one of the sites below or indeed this one (though still some tweaks to make) and resizing your browser window*.

Hicks Design (One of the first examples I came across and still one of the best – check Jon’s redesign blog post from June 2010)
CSS Wizardry
Matt Hamm
David Bushell
Thirst Studios (hot off the press!)

Hopefully you can see how usefull this can be in providing one website for all rather than directing to bespoke mobile sites which has been the previous trend.

So what does this mean to designers who can’t code?

Essentially I think it means this:

Learn and learn fast.

Responsive Web Design has made it more important than ever for web designers to understand code.

Without a basic understanding many ‘web designers’ will be left behind as RWD becomes standard for website builds. It will mean more decisions and development time for the developer (who may not understand design) and likely lead to poor results.

Another issue will be how to present designs to clients and RWD makes a strong case for designing in the browser.

Designing 3 or more different layouts in photoshop to present your client will not only be more time consuming but also potentially misleading.

Personally for sometime now I’ve favoured starting in photoshop then quickly moving to html/css before presenting to the client. An approach I’ll continue with responsive design.

Is it important for designers to be able to code? I certainly think so.


For those of you wanting to learn more on Responsive Web Design here are some resources I think you’ll find useful.

A List Apart – Responsive Web Design
Responsive Web Design
(Printed book – I’m yet to read but heard good reports)
inuit.css (a great starting point for developers)
Techniques for Context Specific Images
(CSS Tricks)
Fluid Grid Calculator (quickly and easily create a custom fluid grid)
Guidelines for responsive webdesign (Smashing Magazine)

*provided you’re not browsing in Internet Explorer 6/7/8**
**Unless the developer has also used respond.js

Tuesday, July 12th, 2011

Elliott James @ the Living Room – Oxford

Whilst *midly* intoxicated on Saturday afternoon I agreed to join Elliott in Oxford on Sunday night, not that I wouldn’t normally agree to see Elliott play, but Oxford is a fair trek for a Sunday Evening. I regretted this decision on Sunday morning when I woke up hungover with a 3ish hour round trip to drive in the evening. Still, that’ll teach me.

Elliott played well and I enjoyed the evening but the venue was a little on the quiet side – where were you all?

Anyway as I’m such a jolly nice chap I thought I’d share a couple of videos I took on the night.

Friday, July 8th, 2011

Be yourself

If there’s one thing I’ve learn’t since I’ve matured*, my career developed, taken risks, worked for ‘myself’ – it’s this:

Be yourself

Show your personality through your approach, your work, in your website, your stationary, your dress code and manner in meetings, proposals and all things to do with your business – be relaxed and be yourself.

Don’t pretend to be a big company if you’re a one man band, be honest and have confidence in what you do. Present yourself in a way in which you feel comfortable.

Some clients won’t even notice, some might not like you, others will really appreciate you. One things for sure – the average company, freelancer, contractor are a thousand a penny. Who wants to be average? not me.

Present your personality, present your ideas and what you are passionate about. If the client doesn’t like it, that’s cool – joe blogs design is just around the corner.

Below is a scan of the front of my business card:

Just this evening I met a new client – had a great meeting, passed him my card – I was still talking when I realised he was half listening though a little busy looking at my card. I shut up, he looked up, smiled and said:

That’s brave, I like that.

I designed those business cards roughly 2 years ago and think nothing of them really, but guess I am making a bit of a statement. It doesn’t matter that I’m a designer, a developer  - I’d want to work with a nice bloke.

People do business with people.

* Still working on that.

Wednesday, July 6th, 2011

Animated transitions with Media Queries

I discovered something cool!  ( demo | video )

At least I didn’t know about it until now – maybe you all knew already and no-one told me – why the secrets?

I was thinking about CSS transitions and wondered if they would work within the media-queries in your stylesheet. So I tried it out and guess what. It worked!

Now in our responsive web designs we can also animate the layout changes when a user resizes the browser window, no more rezise, snap, resize, snap.

I tested in Chrome, Firefox 4, Safari 5 and Opera 11 – it worked in all but best in Chrome.

All we need to do is add the appropriate CSS to the elements which change width, height etc in each declaration of that property (anywhere the width & height change in the media-queries).

/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;

/* firefox 4+ */
-moz-animation-property: -webkit-width;
-moz-animation-property: -webkit-height;
-moz-transition-duration: 1s; 

/* Opera */
-o-animation-property: -webkit-width;
-o-animation-property: -webkit-height;
 -o-transition-duration: 1s;

I uploaded a demo and a video of it in action (just incase you’re unlucky enough to use a non supporting browser).

In my haste I had used : -webkit-width  &  -webkit-height in my CSS for Firefox and Opera which is incorrect. However, it still worked:

… this is because you can literally just have a transition duration and it will transition everything (colour etc) automatically.

Thanks for pointing that out Harry!