Device simulators with PHP

When a new mobile application is launched, it often is an issue how it is to be presented to the targeted users on the web. Linking directly to the application URL often results in a poor browsing experience on standard web browsers. Likewise, relying on one of the known online device emulators may result in compatibility problems, performance issues and dependencies on third party web servers. In this article we learn how the device simulator feature of the HAWHAW library can be used to create highly customizable device simulators with PHP.

HAWHAW Basics

No simulator

Coding a mobile application with HAWHAW basically goes like this (see this article for a complete introduction to HAWHAW):

When a web browser is pointed to this kind of application, the HAWHAW library displays the content in a green display field. In the situation that the content does not fit into the display area, the web browser creates a scrollbar on the right border of the display.

This kind of simulator may be appropriate for some quick-and-dirty hacks, and it is helpful during the development process, but we can improve on this.

Using the default simulator

Default simulator

The HAWHAW library provides a standard device simulator, that can be enabled by a simple function call:

With this solution the web browser output is remote-controlled by a CSS-file located on the HAWHAW web site. This means that the rendered device can change from time to time and there is no device displayed at all in case that the HAWHAW server goes down.

The clear advantage is that programmers can realize a good-looking device simulator without any programming or image processing effort. The mobile content will be displayed properly within the display area and scrollbars will be created automatically whenever necessary.

Creating your own simulator device

Customized simulator

Replacing HAWHAW's default simulator with your individual one goes like this:

First you need an image file of a device or whatever you want to see your content within. The image file is not restricted to mobile devices. You can project your content onto images of beer bottles or washing machines, if you want to do that. The only important thing is: Your image must contain a rectangular display area, where your output appears readable within.

The next thing you need is a cascading-style-sheet (CSS file) that controls your device simulator. As a template you can take the HAWHAW default ccs sheet which looks like this:

There are just a few settings concerning the #skin and #display sections that you have to modify:

In the #skin section you have to set the width and the height attribute according to the size properties of your image file. The background-image attribute must point to the url where your image file is located.

In the #display section four settings have to be adjusted according to the desired placement of the display area within the whole image. The top and left attributes must be specified relative to the upper left corner of the image, while the width and height attributes are defining the display size.

Finally you have to activate your CSS-file like this:

Finetuning

Device with custom scrollbars

If your style demands are still not satisfied by the approaches shown here, you can try some more sophisticated hacks. The web development company tweede golf has pointed out at UFO London how to customize scrollbars within a device simulator by combining HAWHAW with the fleXcroll script.

fleXcroll is based on javascript and css handling and facilitates the creation of highly customizable cross-browser scrollbars. fleXcroll requires a valid license, but is free of charge for non-commercial websites.

A comprehensive description how fleXcroll works in detail would go far beyond the scope of this article. Instead we will just list those code snippets, which are necessary to create the scrollbars as shown here.

  • First thing you need is an image that contains several important scrollbar segments.
  • The CSS file has to be enhanced by some scrollbar-specific settings
  • The fleXcroll javascript code has to be downloaded from the fleXcroll website
  • Finally there is some Javascript code to be inserted within HAWHAW's HTML output. While the documented HAWHAW API does not provide a legal way to insert arbitrary HTML output, we can use the (undocumented) HAW_raw class to make this happen:

Conclusion

The HAWHAW PHP library provides more than one approach to present mobile applications on web browsers. Go ahead and find your favourite solution and style for your next mobile project. Further information is available at the HAWHAW website.

Exclusive tips, how-tos, news and comment

Receive monthly updates on the world of mobile dev.

Other Products

Market leading device intelligence for the web, app and MNO ecosystems
DeviceAtlas - Device Intelligence

Real-time identification of fraudulent and misrepresented traffic
DeviceAssure - Device Verification

A free tool for developers, designers and marketers to test website performance
mobiReady - Evaluate your websites’ mobile readiness

© 2024 DeviceAtlas Limited. All rights reserved.

This is a website of DeviceAtlas Limited, a private company limited by shares, incorporated and registered in the Republic of Ireland with registered number 398040 and registered office at 6th Floor, 2 Grand Canal Square, Dublin 2, Ireland