What is Responsive Design?
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
Standard Responsive Design Breakpoints
Desktops, Tablets and Phones come in varying shapes and sizes. To test your website on all possible resolutions is nearly impossible. The best practice when developing for responsive design in to focus on a few standard responsive design breakpoints.
|Phone||320px x 480px|
|Tablet||768px x 1024px|
|Desktop||1024px x 768px|
|Desktop**||1366px x 768x|
**The Desktop resolution of 1366px x 768px has recently surpassed the typical 1024px x 768px resolution that had been the top browser resolution for desktops. See Global Stat Counter for updated information.
IE Developer Tools
Customizing your Resolution
- Open up your browser
- Hit F12 (this opens up IE Developer Tools)
- Unpin from window (Click the button highlighted below)
- Select Tools > Resize > Custom…
- Add Custom Sizes
- 320 X 480
- 768 X 1024
- Select the Resolution you want and click the Resize button
- The Browser window should now be resized to your custom resolution