Blog

Mobile Web Development with WebMatrix 2 iPhone and iPad Emulators
Jun 09, 2012
Author: David Hayden
Mobile Web Development with WebMatrix 2 iPhone and iPad Emulators

I've been playing with WebMatrix 2 throughout the day and am amazed at all the new features. Developing mobile websites using responsive web design, Kendo UI, and jQuery Mobile is a big part of my day. I use numerous tools and recently I mentioned Adobe Shadow and Firefox's new Responsive Mode so you can see how your media queries react on difference devices like the iPhone, iPad, etc. Even more amazing is that Microsoft WebMatrix 2 has plugins that include an iPhone Emulator, iPad Emulator, and Windows Phone 7 Emulator!

Mobile Web Development with Microsoft WebMatrix 2

This Orchard Website is responsive and I used Adobe Shadow for kicks while developing it to make sure the media queries responded correctly to different devices and layouts. It's actually pretty cool to browse a website using Chrome and have Adobe Shadow keep your iPhone, iPad, and Android devices browsing in sync with remote editing of the CSS, etc.

If that seems like too much, you may be interested in WebMatrix 2, which comes with plugins that provide iPhone, iPad, and Windows Phone 7 emulators. Open your website in Microsoft WebMatrix, install the various emulators via the extensibility (plugin) gallery, and choose to run the website in the iPhone, iPad, or Windows Phone 7 emulator or open the website in all of them at once!

Microsoft WebMatrix 2 iPhone iPad and Windows 8 Simulators

Now browse your website and verify the responsive web design / media queries are correctly adapting to the size of the screen, etc.

Microsoft WebMatrix 2 iPhone Simulator

Microsoft WebMatrix 2 iPad Simulator

Conclusion

The free Microsoft WebMatrix 2 is pretty amazing and will provide some stiff competition to more expensive products that provide the same functionality. It is difficult to beat a free editor that supports node.js; less, sass, and coffeescript; JavaScript, jQuery, and Razor intellisense; downloads packages from NuGet Galleries (see Download Orchard Modules and Themes via WebMatrix 2 Nuget Gallery); and supports open-source plug-ins like the iPhone, iPad, and Windows Phone 7 emulators discussed here!

Orchard CMS Developer

Using Microsoft WebMatrix 2 to develop mobile websites with responsive web designs. In this case a responsive Orchard CMS Theme. Check out: Head First Mobile Web Book Review and Learn HTML5 and JavaScript for iOS Book Review for responsive web design.

Written by David Hayden, Jun 09, 2012