5 Free Tools To Test Websites In Various Mobile Devices & Different Screen Sizes

Hundreds of thousands of people use various mobile devices to browse the Internet, and often times you can lose a lot of vital traffic if your website does not properly display in those devices that have small screens.

How To Check Your Mobile Traffic

If you are using Google Analytics you can see traffic breakdown by screen display sizes, this is very helpful in determining what sizes of screens your visitors are using most.

How To Access Mobile Traffic Stats on Google Analytics

1. Select the site from the main GA window
2. Select Audience from the left menu navigation
3. Select Overview from the drop down under Audience
4. Scroll down to the bottom of the page
5. Select Screen Resolution link under mobile.

In the Screen Resolution report you will see the screen sizes and numbers of the mobile traffic that is going to your site.

Test How Your Site Looks In Various Mobile Devices & Screen Sizes

It is really important to actually see how your sites and WordPress blogs look on various devices. You might be surprised at what you find.

Here are the 5 best tools to see how your site looks in different sizes of screen displays and mobile devices, including many popular smartphones, like the iPhone and Samsung Galaxy Tab. Different tablets, like the iPad. And, also in book readers like the Kindle.

RESPONSINATOR

This one is my favorite, it actually shows the website in various devices on the screen and you can use an actual scroll button like the one that users of these devices must use to browse your site.

Shows How Sites Look In:

• All  iPhones in Landscape and Portrait views
• Crappy Android Phones
• Samsung Galaxy Phones
• Apple iPad
• Kindle Readers

QUIRKTOOLS

With this tool you can view your site in various screen sizes:

Shows How Sites Look In:

• Desktop
• Tablets - Choose from popular models in the drop down
• Mobile Phones - Also choose from popular models
• Television

MATT KERSLEY

This one let's you choose to see you site from various width sizes of display screens or from actual devices

• 240 x 320 (small phone)
• 320 x 480 (iPhone)
• 480 x 640 (small tablet)
• 768 x 1024 (iPad - Portrait)

Firesizer - Firefox Add On

Provides a menu and status bar to resize your own browser window dimensions  to a specific size. Unlike other similar extensions, this one sets the size of the *entire window*, not just the HTML area, which results in a much more realistic reflection how your sites look to end users in the specific screen size.

This one is a Firefox Add On that sits in the Firefox Add On Bar (the one at the bottom of your browser screen). From there you can select a bunch of different screen sizes and when you right click and select one while viewing your website in that window it will actually change your own browser screen to that size and you can see how your sites looks in various display sizes.

MOBi READY

This one provides an actual report that grades the mobile readiness of your site and also provides problem areas and fixes.

Mobile Friendly Theme Options

Fixed width is what typically works best with small screens, such as those in mobile devices. 990px fixed seems to be the option of choice for most webmasters. Fixed width has a setting of a certain amount of pixels, such as 990px, which means the site will render at this size in all devices, as opposed to fluid that detects the users screen display and fills the entire screen accordingly.

I personally hate fixed width because when you have people browsing your site on a desktop monitor that is large, like mine which is 23 inches, you get this very narrow website display, instead of a fluid width, which allows the site to display as per the users monitor size and fills the entire screen. Fixed width can significantly reduce the size of all your available web real estate because it is so narrow it results in users having to scroll down to see a lot of the content on the page.

Some are choosing to have 2 themes in their sites, including those on a WordPress platform, one theme is for non mobile users and the other is a mobile theme.

There are also mobile friendly themes for WordPress that come out of the box compatible with all mobile screen displays, but this is not as good as having a responsive theme,  more on this in the next post.

There are various WordPress plugins that claim to make existing sites mobile friendly using various methods. I tried all of these and not one worked on this site with my theme. I listed them below in case they might work on yours. I love my Atahualpa theme too much to switch and they are working on a responsive version of their theme as well, so for now I have set the layout on Dot Comers at a fixed width of 1350px.

Mobile Plugins For WordPress

• WordPress Mobile Pack
• WP Touch
• Wapple Architect

Responsive Theme

Using a Responsive theme is one of the best ways to have a site that is user friendly for both mobile and non mobile users.

The next post will cover Responsive Themes in detail so please stay tuned.

It's your turn, please share what mobile solutions you have implemented? Your favorite mobile themes? Just don't care?