Digital Inspiration Technology Blog: How your Responsive Website Looks on Different Devices?

Digital Inspiration Technology Blog Digital Inspiration is an award-winning how-to tech blog around all things related to computer software, web applications, mobile and personal productivity.

How your Responsive Website Looks on Different Devices? Jun 4th 2012, 16:55 A good number of websites – including the one you're currently reading – are now using Responsive Web Design instead of building separate designs for mobile and desktop screens. The same design is served to all devices – including desktops, tablets, mobile phone, e-readers and even gaming consoles – and the layout magically adapts itself based on the screen's resolution. Google's about page and the Chromebook microsite also uses Responsive Design. The Webmaster Team at Google also wrote in favor of Responsive Design saying that "maintaining a single shared site preserves a canonical URL, avoiding any complicated redirects, and simplifies the sharing of web addresses." How to Test Responsive Design Websites The best part about responsive websites is that you test the design in your desktop browser itself without requiring any mobile emulators. For example, the iPhone is 480×320 pixels in landscape mode and if you resize your web browser to that exact size, you'll get a good idea of how your website looks like on the actual device. Then there are tools available that will help you test your responsive design across all popular screen resolutions (or devices) from one place. mattkersley.com/responsive – You can use this tool to quickly test your site layout against standard screen widths (or breakpoints). The source code is available on Github and you can thus expand it as per your requirements. quirktools.com/screenfly – This is my favorite tool for two reasons – it supports a much larger number of screen resolutions (including TVs) and second, Screenfly sends proper user agent strings while requesting web pages for different devices. Thus you get the best of both worlds (see notes). responsinator.com – Another nicely-done tool to help you understand how your responsive site will look on the most popular devices in various orientations. It can replicate the iPhone, iPad, Kindle and Android smartphones. [*] Some websites – like google.com or facebook.com – use the Same Origin policy for the X-Frame-Options header and thus, in simple English, they cannot be embedded inside an IFRAME. However, you can still use Screenfly to test their designs as this tool sends the fetch request behind a proxy server and doesn't just render pages inside simple IFRAMEs. See more ways to test your mobile websites. This story, How your Responsive Website Looks on Different Devices?, was originally published at Digital Inspiration on 04/06/2012 under Web Design, Internet. Related posts: Use Dropbox to Test your Website Locally How Does Your Website Look on Different Mobile Phones? Wikipedia Website Now Available for Mobile Devices Digital Inspiration Gets a Responsive Web Design What is Responsive Web Design? Media files: mobile_responsive-50x50.png (image/png)

You are receiving this email because you subscribed to this feed at blogtrottr.com. If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions