Introduction to responsive web design
- Responsive Web Design - Ethan Marcotte
- How to Approach a Responsive Design - Designmodo
- Future Friendly
- This is Responsive - Brad Frost
Mobile first approach
- Mobile First - Luke Wroblewski
- Mobile First!
- Why Design Mobile First?
- The many faces of 'mobile first' by Brad Frost
- Browser detection: determining the identity of the user agent (web browser) being used to visit that page.
- Device detection: determining the hardware that user agent is running on.
- Feature detection: determining the capabilities of the user agent in question
- Capability detection: combining aspects of feature, device and bandwidth detection, to test the overall capabilities of the viewport in question.
Current Preferred Approach
Feature detection is currently considered best practice and most Future Friendly
Browser detection is less used due to browsers being able to “pretend” to be another browser by editing their User Agent string.
Device detection becomes unmanageable as the number of devices grows.
The features of the viewports (what it can actually do) are more important for adjusting the display of information than the name of the viewport of the platform it runs on.
- Modernizr combines feature detection with conditional resource loading.
- Modernizr 7.x-3.x supports Modernizr.load() — any theme or module can use it.
- Categorizr – A server-side device detection script
- Agent IQ - A server-side device detection script
- Detector - A server-side device detection script
Testing Tools for desktop, laptop & mobile
- Firefox addon - https://addons.mozilla.org/en-US/firefox/addon/modify-headers/
- Chrome addon - https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhpha...
- Responsive Design Testing Tool - http://mattkersley.com/responsive/
- Opera Mobile Emulator - http://www.opera.com/developer/tools/mobile/
Responsive grid systems
- 1140 CSS Grid http://cssgrid.net
- Bootstrap http://twitter.github.com/bootstrap
- Columnal http://www.columnal.com
- Fluid Baseline Grid http://fluidbaselinegrid.com
- Foundation http://foundation.zurb.com
- Golden Grid System http://goldengridsystem.com
- Gridset http://www.gridsetapp.com/
- Skeleton http://www.getskeleton.com
- Susy http://susy.oddbird.net
- Singularity http://singularity.gs
- Zen Grids http://zengrids.com
Drupal 6 & 7
- AdaptiveTheme http://drupal.org/project/adaptivetheme
- Omega http://drupal.org/project/omega
- Zen (7.x-5.x) http://drupal.org/project/zen
- Arctica http://drupal.org/project/arctica
- Aurora http://drupal.org/project/aurora
- Boilerplate http://drupal.org/project/boilerplate
- Bootstrap http://drupal.org/project/bootstrap
- Corked Screwer http://drupal.org/project/corkedscrewer
- Foundation http://drupal.org/project/zurb-foundation
- Mojo http://drupal.org/project/mojo
- Sasson http://drupal.org/project/sasson
- Square Grid http://drupal.org/project/squaregrid
- Groundwork http://drupal.org/project/groundwork
Responsive theme generators
- Responsive tables - ZURB
- Responsive Data Tables - Chris Coyier
- A Responsive Design Approach for Complex, Multicolumn Data Tables
Jason Grisby has an excellent series of posts on the problems of responsive images: http://blog.cloudfour.com/responsive-imgs/
Jeremy Keith’s two golden rules for dealing with responsive images:
- The small image should be default.
- Don’t load multiple images.
- Responsive Images: Experimenting with Context-Aware Image Sizing
- Adaptive Images
- Responsive Images: How they Almost Worked and What We Need
<picture>element and polyfill
- Responsive images - a Drupal implementation
- Picture is part of Drupal 8 core and is backported to Drupal 7. It follows responsive design principles. In order to use it, select the 'Picture' instead of 'Image' formatter when managing the display of a content-type.
- Adaptive Image http://drupal.org/project/adaptive_image
- Adaptive Image Styles http://drupal.org/project/ais
- Client-side adaptive image http://drupal.org/project/cs_adaptive_image
- Responsive Images http://drupal.org/project/responsive_images (not maintained any more)
- Responsive images and styles http://drupal.org/project/resp_img (replaced by “Picture”)
- Fluid html grid that can be used with responsive design techniques http://drupal.org/project/views_fluid_grid
Responsive thumbnail galleries
Responsive background images
- Example of a "lightweight" slideshow: http://yiibu.com/articles/rethinking-the-mobile-web/page-3.html#slideshow
- Flexslider module http://drupal.org/project/flexslider (based on http://flex.madebymufffin.com)
- Full screen image slideshow: http://buildinternet.com/project/supersized
- CSS only http://amobil.se/2011/11/responsive-embeds/
- FitVids module http://drupal.org/project/fitvids (based on http://fitvidsjs.com)
- FitText module http://drupal.org/project/fit_text (based on http://fittextjs.com)
- Responsive Typography, reference of core concepts by Tim Brown - http://nicewebtype.com/notes/responsive-typography/
Responsive navigation menus
Simple navigation menus lend themselves to larger display platforms (laptops) as well as smaller displays (smartphones). In general, drop down menus are not often used on smaller displays (smartphones) since visual space is limited.
Usually, you find drop down menus converted to stacked vertical lists when the display detected is a smartphone.
Excellent background info:
A common method to provide a more sophisticated menu system for both large and small displays is to use conditional menu blocks. Be aware that complex, lengthy menus do not lend themselves to small displays.