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.
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:
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:
The BrowseEmAll simulators do support the viewport tag. Let’s take Google and Facebook as quick examples:
Media Queries and Responsive Design
The term responsive design is based on the idea to create website designs which automatically adapted to the users 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:
Currently BrowseEmAll supports 19 different mobile devices and operation systems. Here is the list:
Android (2.2, 2.3, 4.0, 4.1), Android tablet (3.2, 4.0, 4.1), iPhone (3G, 3GS, 4, 4S) and iPad (1, 2, 3) using iOS 4.2, 5.1 and 6 Beta. 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