To test this page, resize the browser window

You should install this Chrome extention and use Chrome to view this page https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

This box will turn to pink if the viewport width (which is slightly smaller than the browser window width) is less than 600px
This box will turn to orange if the viewport width (which is slightly smaller than the browser window width) is greater than 900px
This box will turn to blue if the viewport width (which is slightly smaller than the browser window width) is between 600px and 900px
This box will only apply to devices with max-device-width: 480px (ie. iPhone)

Your current viewport width (which is slightly smaller than the browser window width) is: less than 600px between 600 - 900px greater than 900px

You MUST put the following code in the head of your page so that the webpage will check if you are viewing the page on a mobile device. Without the following code, the page will be treated with no "responsiveness" or will not respond to your design changes based on the size of the device.

<meta name="viewport" content="width=device-width" />

 

 

There are two ways to think about how you want your website to respond to devices

  1. Change the website according to device displaying the site, not the design

  2. Change the website according to design, not the device displaying the site

OPTION 1: CSS breakpoints according to device, not design (NOT RECOMMENDED)

The problem with designing according to device is that new devices with different dimensions keep coming out. Keeping your website responsive to all devices can take away your time from what you really want to do.

Note: min-width:480px will respond on a desktop with a small browser window but min-device-width:480px will respond only if viewing on a mobile device

 

OPTION 2: CSS breakpoints according to design, not device (RECOMMENDED)

Version 1- simplest version - one design for tablets, laptops and desktops and a 2nd design for smaller mobile devices:

Version 2 - somewhat more specific:

Version 3:

Note:

Resources and articles

  1. http://www.smashingmagazine.com/
  2. http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
  3. http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile
  4. http://www.tangledindesign.com/blog/deciding-what-responsive-breakpoints-to-use/
  5. http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
  6. http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
  7. http://webdesignerwall.com/tutorials/responsive-column-layouts
  8. http://webdesignerwall.com/tutorials/css-responsive-navigation-menu