Responsive Design Testing with IE9

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.

Device Resolution
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

The F12 IE developer tools are a suite of on-demand tools that is built into every installation of Windows Internet Explorer 9. F12 tools is available anytime, on any page, and enables website developers to quickly debug JavaScript, HTML, and Cascading Style Sheets (CSS), as well track down performance problems on a webpage or network.

Customizing your Resolution

  1. Open up your browser
  2. Hit F12 (this opens up IE Developer Tools)
  3. Unpin from window (Click the button highlighted below)
    1.  
    2. Select Tools > Resize > Custom…
      1. Add Custom Sizes
        1. 320 X 480
        2. 768 X 1024
        3. Select the Resolution you want and click the Resize button
        4. The Browser window should now be resized to your custom resolution
Nate Bunton

Nate Bunton is a Lead Software Engineer at Meta Payment Systems. He has over 10 years developing software and leading teams. He works with the Microsoft technology stack focusing in ASP.NET, MVC, HTML, JavaScript, CSS and Web Security. Nate also focuses on Application Lifecycle Management (ALM) engaging his teams with key stakeholders using a variety of agile principals. At Meta Payment Systems, Nate has been a leader in driving technology in the enterprise from new Web Technology to Service Oriented Architecture using WCF and NServiceBus. Nate’s greatest passion is for User Experience, Web Technology and Engaging Teams. He is driven by his desire for continuous learning & improvement.

Posted in Web Development Tagged with: , , ,