Resources for Responsive Web Design

Just a bit of a round-up for articles and information about responsive web design.

A reference article: loads of tools and techniques, good sites to review:
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

Get your images to scale up and down responsively:
Part 1
http://blog.cloudfour.com/responsive-imgs/
Part 2
http://blog.cloudfour.com/responsive-imgs-part-2/

And another interesting option for image scaling/sizing
http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/

Boilerplates, Media Queries & less

If you're venturing towards mobile development, or HTML5 / CSS3, heard about Media Queries and thinking about looking into it, I'm just going to list a load of links I've found that might enlighten you...

Page layout / media queries - http://foundation.zurb.com/

Boilerplate HTML5 - http://html5boilerplate.com/

Media queries / min-width example - http://www.unmatchedstyle.com/sandbox/min-width/

Media queries - size info - http://nmsdvid.com/snippets/

Haven't read up on this yet but I know its going to be something important -
http://twitter.github.com/bootstrap/

LESS the dark side of CSS3 - read this first it helps! - http://www.stuffandnonsense.co.uk/blog/about/less
Then this - http://incident57.com/less/erg Mac version!!
Windows version here - http://winless.org/
or this - http://lesscss.org/
Then OMG this! - http://lesselements.com/

If I can megamix/mashup/mixin all this stuff together and get it to work, I should be able to finish stuff before I start doing it! :o)

Adaptive Images

Adaptive Images automatically adapts your existing HTML images for mobile devices. No mark-up changes needed. Just drop it in and forget about it.
http://adaptive-images.com/

CSS grid generator

Neat css based grid generator, creates a PNG file to work from.
http://www.netprotozo.com/grid/

Card sorting article

A great article on boxesandarrow.com all about card sorting
http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide.

Visual Map | Usability.gov

Quite a nice to have, useful little image map for planningVisual Map | Usability.gov

Customizing Fan and Business Pages on Facebook : Discovering Facebook Pages

Could be a useful article to have to hand in the future, for creating Facebook pages for business / groups / clubs etc. Customizing Fan and Business Pages on Facebook : Discovering Facebook Pages

Saving PNG files from Photoshop

As you save images out for the web from Photoshop, particularly PNG images, its possible to experience differences in the Hue with what should be exactly the same colour. With different browsers even different file manangers showing the colour (on the same monitor) as different.

Very odd?

Well it's the export command Photoshop...
Details are covered here http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/
In a nutshell what needs to happen is when you are attempting to save the file in Photoshop click the >> advanced features, and make sure that "Convert to sRGB" is UN-TICKED. This stops the applications interpreting the colour differently

Grid layouts made easy

Here's another good one via Smashing Mag.
Grid Layouts - and if you're rich and can afford CS5 then it has a plugin!
http://modulargrid.org/#app

CSS3 animation - for pukka browsers anyway

Smashing Magazine does it again, this is very well explained and beautifully illustrated example of CSS3 animation.
http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

Haslayout

Zoom: 1;

(listen to me oh floaty object when I need you to heed my padding!)

Dummy text generators

http://www.lipsum.com/ - bog standard lorum ipsum text

http://html-ipsum.com/ - a great sample html generator

CSS3 and HTML5 compatibility help

On http://caniuse.com You can search for a css property, it’ll tell you what browsers support it and any prefixes needed for support in some browsers (like –moz-gradient), and links to some groovy on-line editors that let you play with sliders to create some CSS effects and give you the resulting CSS code, and also links to related resources like IE workarounds.