More on Responsive Web Design for Non-Coders

Following my post last week answering some questions about RWD I got another email with some additional questions. This time the focus is on responsive images, standard breakpoints, CSS frameworks, and WordPress in general. Here we go…

Q: how do i know what size to make my ‘master’ header image or inset images, so that they will scale (always down and never up, i would assume? to retain best quality) properly? make them the largest size that they will ever be used and the code scales from there?

Doing responsive design well requires a lot more communication between the designer and the front-end developer. You always want to start with the largest image that you will need and then be able to downscale. However, you don’t have to serve that large image to everyone. You can create multiple sizes of your main images and use some clever CSS, PHP, and/or JS tricks to serve the most accurate size image for each device.

This works especially well for theme files because you can crop them however you want and then create very specific CSS rules to do whatever you want with them. However, for user-uploaded images (like images in blog posts) you need a different kind of solution. You also have to consider retina devices which need double-size images to look crisp.

This opens up a whole new conversation about how to manage responsive images properly — a conversation I won’t get into here. It’s still a new technology so the techniques are a little hack-ish right now but there are a lot of smart people trying to figure this out. Just to demonstrate a little of the conversation you can see Chris Coyier’s post on RWD image solutions.

For WP images (not theme images but user-uploaded images for posts, etc.) you can check out:

Q: with all of the different frameworks available, is there a ‘standard’ or best one to use as my ‘base’ for responsive designs? i don’t really want to write any code myself but i do want to prep the design elements so that they work in the responsive environment when i hand the design over to my developer. is bootstrap referring to wordpress only?

Each CSS framework is different. There is no one specific CSS framework that is necessarily better than another. None of the frameworks are WordPress-specific per se. However, you can get WordPress starter themes that have CSS frameworks integrated. Your framework decision really comes down to the preference of the front-end designer because he either has to use the framework’s built-in styles for elements or change the styles depending on what he needs to accomplish with the overall site design.

Here are a couple of resources that let you use Bootstrap’s default element styles in your PSD designs:

 

Many of the available CSS frameworks are based on some sort of 960px grid and then sort of standard device screen size breakpoints. However, these breakpoints are entirely in the hands of the front-end developer since they are declared in the CSS file(s). You can set breakpoints wherever you want; it’s just often easier to use the default ones set in your chosen framework — which have been chosen by the framework creators for a reason.

More on breakpoints:

Bootstrap is not a WordPress-specific framework. However, you can incorporate it into WP themes and it is great. There are other WordPress “starter” themes that include their own responsive CSS frameworks. I think it all comes down to a design/development shop picking one tool and getting really good at it rather than bouncing around to different ones project-to-project.

Here are some WP-specific starter themes that don’t use Bootstrap:

My Bootstrap Responsive Grid PSD post also lists some WP starter themes that do use Bootstrap. Although, now I suggest any developer roll his own because Bootstrap becomes so much more flexible when you have the ability to fully customize the pre-configured LESS files for each project’s needs.