Interactive Llama

Right now, responsive pretty much all about the width of your website–although it may not always be that way. Responsive design is an approach though and not a specific technology (media queries, etc.). It’s about responding to the device the website is being displayed upon. For example, the appropriate design may change for touchscreens by making buttons larger.

People are used to scrolling up and down, so matching the width of your document to the width the browser is often the main goal. Although most of the tips below are related to CSS and media queries AND focus on informational sites (not web applications), I believe that JavaScript has a significant place to play in behavioral changes and touch implementations in responsive design. The following list is intended for front-end developers and designers that work with CSS regularly, but are just starting to build responsive sites.

Note: I am not going to use the term mobile, but small-screen. Using mobile implies that you are moving–not that you are viewing the site on a small screen. (via Zeldman)

The decision trees of your layout multiplies with responsive design. Where should this item if the screen resolution is…? This adds complexity to the project due to the multiple (or continous with fluid layout) layouts. Be sure to plan out how many layouts you will create from the beginning. Small, medium, and large? Two small layours (landscape and portrait?) Start with a media query boilerplate and add or subtract the media queries you need.

Wire frame your desktop and small-screen version before writing any markup. This allows you to know where and what order your markup (HTML) will be need to be in to achieve correct placement in your desktop version and your small-screen version. If your site demands efficiency, you can subtract and add navigation elements with JavaScript, just make sure you have enough of the basic navigation to go to every page first.

Make use of position absolute, relative-absolute and fixed. And know the difference. You might want the logo above the menu in one version and below the menu in another. Short of moving your markup around (remove/insert) with Javascript. This is the only way to visually re-order your markup.

Become familiar with fluid layouts. Knowing what adds up to 100% is helpful. Don’t forget to use percent margins and padding. Using percentages is called liquid layout or flexible layout.

Decide what content is important for small screen (which are often mobile and thus have a low connection speed). If you are a brochure site–that is your main purpose is to inform, not complete a task, then don’t hide content if you are downloading it anyway.

Make buttons big. If it’s something that most people are going to click, add some padding if it’s a text line. Avoid fat finger syndrome by making action item large enough for fingers.

Plan on adding around 30% more CSS design time for a typical brochure site to be responsive also. You wil probably be more for your first responsive site.

Use min-width over max-width for the width of your elements. Remember to scale media. Image, embedded objects (embed, object tags, video) should be scaled. Make them have a max-width of 100%. Read about creating CSS Elastic Videos. I usually limit this CSS rule to the children of a #primary div. Another possible route is to use JavaScript, via FitJS.

Use the correct video format for your device. The simplest way to achieve this is use a video distribution service (I like Vimeo for their minimal layout–if you pay) that will change the format for you.

Style rules outside any media query is the default style. You need to make the choice of whether you are going make small or large (read desktop) the default CSS style sheet. I think that small first will become dominant in the long run, but you will need to a JavaScript media query polyfill/shim for browsers that don’t support media query, and if you are using HTML5 already, then you probably already have a polyfill like Modernizr running anyway. Modernizr uses Respond.js to allow min/max-width CSS3 media queries. I would claim that creating a desktop first style sheet would be best if you are editing an existing site to be responsive or working on your first responsive site. If you want an detailed overview of the desktop or small screen first debate, I suggest  Essential considerations for crafting quality media queries.

Use the most appropriate size image if possible. If you are going to use JavaScript, to create content that uses images (read slideshow, gallery, etc.), you might as well check the width of your browser window and request smaller images than the “desktop version” in order to speed up their download. You might considering lazy-loading related content also.

And finally…

Forget about being perfect. Yes, it’s your job–you SHOULD have a close to pixel-perfect layout for the two or three devices that the majority of your audience uses, but for all those in between accept a less than perfect layout. And while I’m on the topic of perfect, these are guidelines that I’ve discovered in my small amount of responsive work, and are by no means rules or laws.

What guidelines have you discovered that aid in responsive design?