I've been talking a great deal about responsive web design, and more importantly, responsive web design tools. All my latest custom Orchard Themes and Orchard Websites are responsive so they look good on mobile phones and tablets as well as desktop PC's. Responsive Web Design Tools are important and so I have mentioned quite a few tips and tools like: Responsive Web Design with Adobe Shadow, the new iPad and iPhone emulators in WebMatrix 2, the new Responsive Mode in Firefox, etc. Now I want to mention some really cool features in Google Chrome Canary.
Google Chrome Canary and Responsive Web Design
I was really excited about the new Responsive Mode in Firefox Nightly only to realize Google Chrome Canary has a cool User Agent Tab in the Developer Toolbar when you click on Settings ( Gear icon in lower right corner ). You not only get to specify the user agent of say an iPhone, iPad, or Android Device, etc., but you can also specify device resolution as well as emulate touch events. I used the single touch emulator for kicks to view one of my responsive websites and it indeed responded to the swipe events of the emulator! Absolutely love it!
What you get is the same type of display with Firefox in Responsive Mode. You have full-width access to your development tools, add-ins, extensions, etc. and just the view of the website itself displays in the screen resolution specified by you. It's a beautiful thing.
Shown below is this website displayed as it would be on an iPhone in iOS 4 at 320 x 480. Notice you don't have to shrink the entire browser, which gives you full-width access to the browser tools while viewing the website at smaller resolutions. Again, just like Responsive Mode in Firefox Nightly.
Conclusion
Nice to see both Firefox and Chrome desktop browsers helping with responsive web design for mobile phones and tablets. Love all the different tools we have these days to help with mobile web design and development.
David Hayden is an Orchard CMS Developer that specializes in developing Orchard Themes, Orchard Modules, and Orchard Websites. His Orchard Websites and Themes use responsive web design so client websites reach mobile users as well as desktop users.