Responsive Design

Don't be lazy to adjust your layout for different devices a bit. Simple rules can help you a lot

• use media queries
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->
• avoid complex libraries with heavy dom and js (jq mobile).. at lease for nearest year.. at least for Androids :)
• in Debitoor: for tablets - don't set autofocus to inputs (to avoid half-screen keyboard), use native selects for touches etc (abu)

Info

http://playground.johanbrook.com/css/mediaquerydebug.html
http://mattkersley.com/responsive/
http://responsivepx.com/
http://habrahabr.ru/post/142120/ (big, RU)
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps (quick start)
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ (detailed)
http://frontender.com.ua/media-queries/ (nice dimension table)

Examples of x-device sites

http://themeforest.net/item/wp-flexishop-2-a-flexible-woocommerce-theme/full_screen_preview/2080989
http://themeforest.net/item/smartstart-wp-responsive-html5-theme/full_screen_preview/2067920

It's not a rocket science!

Given by Anton (ama)