Print this page

How to test your website layout on iPhone & iPad

Responsive Design

You may be happy now with the look of your website when you view it with a computer, but you should be aware that your visitors out there may be viewing your site with a handheld device such as iPhone or iPad and seeing a broken site or a horizontal scroll bar which is very annoying. As the owner of the site, you must check to see if your site fits those mobile layouts or there are any problems when displaying the site with them. Here are some tips for you to check within your PC:

1. Use iPadPeek:

- Open Safari browser in your PC and change User Agent string to that of Apple iPhone or iPad

- Open iPadPeek.com and type the URL of your website in the built-in Safari browser of the iPad/iPhone.

This tool will render your websites in landscape mode by default but you can click the top edge of the iPad image rotate page orientation from landscape to portrait mode and back.

The screen resolution of your current desktop is probably much higher than a iPad (which is 1024-by-768 pixels) so this tool may not exactly simulate iPad's web browser but its as close as you can get without the real thing.

There's an on-screen keyboard as well that gets activated when you click the address bar (just like the real iPad) but it's non functional.

LeeBros responsive

2. Use Web Developer tool:

- Open your Firefox browser and install Web Developer Addon, then restart the browser to get the addon activated.

- Open your website with Firefox, wait til it finishes loading and click to Resize button of Web Developer toolbar and select View Responsive Layouts.

This tool will give you a page of 6 different iFrames of 6 standard mobile layouts (mobile & tablet).

It'd be very great if your site looks perfectly on both desktop and mobile layouts, it helps your visitors feel comfortable when surfing around your site and keep them stay longer or visit back. It's more important if your site is an online shop so your customer can buy your products from their mobile devices.

What if your site looks very ugly and has a horizontal scroll bar when being view by a mobile device? You should improve it as soon as possible buy using another theme/template which supports responsive design, in case you want to stay with your current theme/template for some reason you can contact us to have a low quote of implementing responsive design for your site.


Copyright © LeeBros 2011-2012. All rights reserved.