Tips for responsive web design

November 4th, 2011 | Comments are welcome »

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. Read entire article »


My Sites

Books Now Reading

  • Unfortunately, Amazon Web Services (AWS) has disabled wishlist requests. Please visit their site to view my Amazon Reading List.