Responsive seems to be the latest buzz-word in web design & development, and rightly so with the advent of all the mobile devices out there and everyone looking up stuff 'on the go'.
As designers & developers it is our duty to discuss the responsive option with our clients. It could very well be that the expectations for your site visitors to be “practically never” that they will view your site on a mobile device. (We have to remember that iPads and netbooks are considered mobile too and have a smaller-than-usual viewport, or screen size.)
Or, it could be the other extreme - there may be a feature of your site that will be used often on a mobile device. In any case, this is a discussion that needs to happen for any project, whether it's a brand spanking new site, or a redesign/update of an existing site. Solve this piece of the puzzle before you get started. You will be much happier.
I've been getting down and dirty with responsive for the past couple of weeks. Thrilling and challenging! One thing about web stuff.. its not boring or stale. In my travail I've come up against some new challenges for delivering a site that adjusts to various screen sizes in a way that makes the site usable, easy to navigate, delivers information fast and will not frustrate the viewer and make them want to run. For as fast as the web already is, there seems to be a necessity to be able to deliver info even faster, if that’s possible, for mobile.
Here are some of the new tools, gadgets, methods, etc. that are helping to make my life in the web zone a bit better and make me happier. That’s important. Happy is good. And cuz everyone knows, if Momma's happy, then everyone eats cake!
Backstretch Drupal module - http://drupal.org/project/backstretch
Integrates the jQuery Backstretch plugin into Drupal to provide the ability to display an image stretched across the background of your website regardless of the browser window size. Matt has added the ability to manage backgrounds via a context reaction too. This is a handy tool for managing backgrounds on responsive sites.
Responsive Design Testing - http://mattkersley.com/responsive/
While you are working on a site you want to be able to see what it will look like in various devices. You can get an idea using Matt Kersley's online tool for Responsive Design Testing. Enter the url of your site on his site and see what it looks like on various viewport sizes.
Font sizing with rem - http://www.w3.org/TR/css3-values/#rem-unit
rem unit - Equal to the computed value of ‘font-size’ on the root element. When specified on the ‘font-size’ property of the root element, the ‘rem’ units refer to the property's initial value.
This allows you to define a font size on the html element and have the rem units be relative to that by percentages.
img {height:auto; max-width:100%:}
Manage your images using this little bit of css to constrain it to the parent container (ma & pa roping in the kids...) and not having it flow out the side of your device. Keep in mind that if you have a border or padding this may not fully constrain your image. So, trying adding this:
img {box-sizing:border-box; } or img {box-sizing:padding-box; } (however this value is at risk of being removed from CSS Basic User Interface Module Level 3). See http://www.w3.org/TR/css3-ui/#box-sizing0 for more info.
Convert a menu to a drop down - http://css-tricks.com/convert-menu-to-dropdown/
Chris Coyier never disappoints when it comes to solving CSS dilemnas. One great thing about the web community is they share tips & tricks. Chris gives us an example of creating a more easily managed option for menus on the mobile device.
Responsive Video Embeds with FitVids - http://daverupert.com/2011/09/responsive-video-embeds-with-fitvids/
FitVids is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. It currently supports the major video vendors: YouTube, Vimeo, Blip.tv, and a couple outliers. There is also a Drupal module available for it at http://drupal.org/project/fitvids.
There are so many neat things out there in responsive-land to find and try and use to fix what ails you. And how fortunate are we that we like to share! Please let me know some of your fave tricks, tips and troublespots! Email kathy(at)drupalconnect(dot)com