How Good Are The BrowseEmAll Mobile Simulators?

Every now and then one of my customers ask about the quality of the BrowseEmAll mobile simulators. How good is the rendering compared to real world devices? In this post I would like to show you some techniques used to develop mobile websites and a side-by-side comparison between real world devices and the BrowseEmAll simulator.

Overview Mode

Websites that are not optimized for mobile devices are displayed using the so called Overview Mode. This mode reduces the zoom until the user can see the whole page-width (even if you cannot read anything). This mode is triggered by all major mobile browsers and you don’t need to take any additional steps to accomplish this.

Maybe the most prominent example of this is the New York Times website and the iPhone (can you remember the keynote?). Let’s compare the iPhone 4 and the BrowseEmAll simulator:

Real device

BrowseEmAll

Viewport

You can use a special meta-tag (known as a viewport meta tag) to tell the mobile browser how wide your website should be rendered and what initial zoom the browser should apply. This enables you to create websites which are always 100% zoomed on mobile devices. You can read more about the viewport here:

A tale of two viewports

Apple Documentation

Android Documentation

The BrowseEmAll simulators do support the viewport tag. Let’s take BrowseEmAll and Facebook as quick examples:

Real device

BrowseEmAll

Real Device

BrowseEmAll

Media Queries and Responsive Design

The term responsive design is based on the idea to create website designs that are automatically adapted to the user’s screen size. To do this you can use so-called CSS media queries which allow you to define rules based on screen size. A quick example:

@media only screen and (min-width : 1240px){.header { max-width:70em;}}

Of course, the BrowseEmAll simulators do support this as well. Let’s take an example of great responsive design: OwlTastic (need more?)

Real Device

BrowseEmAll

Supported Devices

Currently BrowseEmAll supports 19 different mobile devices and operating systems. Here is the list:

Android devices, Android tablets, iPhone and iPad. If you buy all these devices it would look something like this:

If you cannot fit all these devices into your office please feel free to download and try BrowseEmAll!

Photo by wlodi