- HubPages Tutorials and Community
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
Step 2: Install Web Developer extension
Step 3: Preview your lens or web page
Click on the Web Developer icon.
Choose View Responsive Layouts
Or get a smart phone or three from Amazon
Got a tip for developing content for responsive layouts? Share it here.