How to view your lens (or any website) with Responsive Layouts

Responsive Web Design is one of the latest paradigm shifts in web design. It is all about making your content look good everywhere.

The blog post on Squidoo HQ Introducing The New Responsive Layout tells how Squidoo has updated the design of the lenses so they respond to display nicely and fit on all sorts of mobile devices, phones, tablets and still look good on laptops and desktops.

So this is cool, your lens will display nicely, but what will it actually look like on a tablet or phone?

I helped an older couple update their wifi password recently and they had 2 smart phones, 2 netbooks and 2 kindle devices all with different screen sizes. It would be rather expensive to buy all of the different mobile devices that are available to check how you lens will display on them. Thankfully there is a free tool you can install into your web browser to see how your lens will look in the most common screen sizes for mobile devices.

Web Developer Extension

The Web Developer extension by Chris Pederick shows web pages in the following sizes:

Mobile portrait (320x480)

Mobile landscape (480x320)

Small tablet portrait (600x800)

Small tablet landscape (800x600)

Tablet portrait (768x1024)

Tablet landscape (1024x768)

In addition to these common screen sizes, you can add your own to view your lens at any size.

This lens teaches you how to install this powerful extension and use it for viewing Responsive Layouts.

Photo Credit: Brad Frost

Mozilla Firefox and Google Chrome both support the Web Developer extension that has the View Responsive Layouts option.

For Firefox you can install the Web Developer extension with the Add ons tool.

For Chrome you can get the Web Developer extension from the Chrome Web Store.

Alternatively you can get the extension from http://chrispederick.com/work/web-developer/ and click on the Download button for your browser.

Click on the Web Developer icon.

Choose Resize.

Choose View Responsive Layouts

Got a tip for developing content for responsive layouts? Share it here.