Test your responsive design
Also, if you want to test your responsive web design, you can try it out in Matt Kersley’s Responsive Web Design Testing Tool. Other than it’s testing ability, this tool is a great reference for remembering the most common breakpoints.

Dynamic Carousel
There are lots and lots of jQuery carousel, image sliders and gallery plugins out there on teh interwebs, but they are rarely responsive. Mat Marquis has made a responsive one, which scales beautifully and works pretty well.
You can get it on Github here: Dynamic Carousel 

Designing in the browser
Some would argue that you should start your designs directly in the browser. A rational approach, which also does a better job of eliminating the trouble with explaining, why your pixel-perfect design does not look the same in every browser. However, designing in the browser is also an approach that may somewhat limit creativity.

Starting out with Style Tiles
So before you even start your comp, maybe you should start somewhere else. Getting the look and feel right before designing a full page layout may be helpful.

Samantha Warren proposes using “Style Tiles” as a tool to help with team and client communication. A Style Tile is a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web:

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.
 An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?

Samantha Warren

Go check out Samantha Warren’s clever take on designing for the web at Styletil.es. You can also grab a neat photoshop template for making your own Style Tiles.

Luke Wroblewski’s keynote on Mobile First

Brad Frost has done a little research on different approaches to designing navigation for responsive web sites. In “Responsive Navigation Patterns” he takes a look the pros and cons of these, giving examples and links to useful resources.

Go read “Responsive Navigation Patterns” here.

However, I am getting really good help from a handful of online tools. They do a great job of remembering the syntax for me and making other tasks a bit easier as well. Here is a list of the online CSS generators, I use the most.

Prefixr and –prefix– my css

Repeating every property for every browser vendor can be a pain in the neck. Just write the standard CSS3 properties and then paste them into either Prefixr or –prefix– my css. They both take care of the necessary prefixes, outputting the code for you to copy and paste.

CSS3Generator

Don’t remember which prefixes are necessary for box-shadow or border-radius? Try creating your CSS3 effects with this handy tool.

ColorZilla’s Ultimate CSS Gradient Generator

This gradient generator makes it really easy to create gradient backgrounds, minimizing your need of Photoshop for the same purpose. It includes all the necessary prefixes. Copy and paste, and you’re good to go.

0 to 255

This color generator actually does nothing in terms of CSS3. It just makes life a lot easier, when it comes to finding lighter and darker hues of a certain color.

Animate.css

If you are not yet ready to write your own or just want to make it easy, Dan Eden’s Animate.css is a collection of CSS3 animations for you to pick and choose from. If there are none you like, he has even made it easy to create a custom build, so you don’t even have to write a single character by hand.

Gridpak

Gridpak is a reponsive grid generator for making fluid layouts, complete with media queries and ready for mobile. Mathematical skills are not needed here, because it calculates the gutter– and column widths on the fly.

Do you use any great online CSS tools or generators, you would like to share? I’d like to hear about it.

In this post I will try to explain, how I have made a fallback, making it sort of OK for my users to forget about the thumbnail.

A little history

Once upon a time, before version 2.9, WordPress did not support post thumbnails. But there were work arounds. One of the best, I ever found, was from a website called wp-fun.co.uk. Sadly, the site is gone today, but I managed to dig up the old post ‘Easy Peasy Images Suggestion Roundup’ by Andrew Rickmann on Archive.org.

Andrew wrote a nice little PHP class to include in your functions file, which gets the first thumbnail image attachment from WordPress posts. Luckily, I also managed to dig that one up on Archive.org. Go grab it here: post_imagephp.txt (remember to rename .txt to .php, before including it in your functions.php file).

“So why are You telling me about antiques like this?”, You ask. Because we can use it with advantage in our fallback for people, who forget to click the little ‘set as post thumbnail’ link.

That way, a thumbnail will still be displayed with the post, as long as the editor has just attached an image. If there are no images attached at all, we can always display a default thumbnail.

The fallback

Let’s take a peek at the code. Put the following where you would normally use the_post_thumbnail().

<?php
// First of all, check if there are any image attachments at all.
$imgargs = array(
'order' => 'ASC',
'post_type' => 'attachment',
'post_parent' => $post->ID,
'post_mime_type' => 'image',
'post_status' => null,
'numberposts' => -1,
);
$attachments = get_posts($imgargs);
// Next, check if there is a manually chosen thumbnail.
if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
}
// If there are no manually chosen thumbnails, check if there is an image attachment.
elseif ( $attachments ) {
// If there is an image attachment, call Andrew Rickmanns the_image function to get the thumbnail
the_image('thumbnail','attachment-thumbnail wp-post-image',false,false,true);
} else {
// If there are no attachments at all, display a default thumbnail.
?><img class="attachment-thumbnail wp-post-image" alt="" src="<?php bloginfo('stylesheet_directory'); ?>/the/path/to/your/image.jpg" />
<?php }?>

Requirements:

Remember to include this file, renamed to .php, in your functions.php: post_imagephp.txt

Icon fonts are vector based graphics and are able to scale indefinitely without losing quality, as opposed to the more well known and common pixel based icons. But icon fonts are also tied to characters and this is where the challenges come in, when we want them displayed correctly without making too much trouble in screen readers or screen scrapers.

I have been collecting a few resources on the topic.

Using Icon Fonts
Besides being a service, that offers a nice collection of scalable icons, Pictos also has a great article on the pros and cons of icon fonts and how to use them.

Icon Fonts are Awesome
Chris Coyier of CSS-tricks.com has put together a nifty example, where he demonstrates how easy it is to scale, colorize and shape the shadow of icon fonts with plain and simple CSS.

How to make your own icon webfont
Over at Webdesigner Depot, Heydon Pickering has written a tutorial on what makes a good icon and how to turn it into a webfont.

Icon Fonts
Finally, if you are not yet ready to make your own icon font, Font Squirrel has a small collection of free icon fonts, also available as @font-face kits. Go grab ‘em and try them out.

I recently launched Krimimessen.dk where I have used a small polyfill script written by Scott Jehl, respond.js, to make the site’s responsiveness work in older versions of Internet Explorer.

But then one of my colleagues made me aware of a bug that seemed to trigger when clicking on links in Internet Explorer 8. Not in everybody’s Internet Explorer 8, oh no. Only in Internet Explorer 8 on certain machines. Well, who said it should be easy to test for bugs?

Instead of going to the desired destination, the browser went to a URL with this pattern:
res://ieframe.dll/acr_error.htm#the-url-without-http

I have done a little searching on the issue, and generally people say the problem goes away if you delete the browser cache or disable browser extensions. However, that solves no problem, because I can’t ask my users to delete their cache.

Then I stumbled upon someone in the Drupal.org forum who had had the same issue and one of the proposed fixes was to move respond.js to the footer.

And there you go. It seemed to work. At least the bug disappeared.

But according to the Respond usage instructions, the script ought to be loaded as quickly after the CSS file as possible to avoid glimpses of “unresponsiveness” in ie.

So now I wonder if this is a bug in ie8 bug can be fixed within respond.js? Or is it something else, that triggers the bug? Or am I just using respond.js wrong?

Until now. Because Nick La from Web Designer Wall has a nice little trick up his sleeve, which involves wrapping the image in an HTML element and making an overlay for styling with a CSS pseudo-selector.

Go check out Nick’s tutorial here

The reason? The math is so much easier to do, when transforming the grid from pixels to percent in responsive web design.

It is such a simple and obvious approach, I’m almost embarrased, I haven’t thought of it before.

Elliot Jay Stocks: A better Photoshop grid for responsive web design