Creating Interfaces for the Mobile Web

When you look at a regular web-based application or website on a mobile device, things seem small and are difficult to read or visualize. Morfik makes it possible to create a special interface for those devices so that when users access your application or website from a mobile device they are automatically shown the appropriate interface.

Mobile Devices

As more and more mobile devices become able to properly display web content and the processing power of mobile devices grows to allow for the execution of more complex Javascript code new possibilities open for the development of websites and applications specifically targeting mobile users and for the extension of current websites to better service these same users.

Morfik allows the user to specifically target the iPhone and iPod Touch as the hand-held devices that are both more popular and more capable of rendering a full website at this time. Special support is also available for Apple's new and extremely popular iPad tablet, allowing the user to offer an interface that is not designed for the smallish screens of phones, music players and mobile Internet devices, but still allow for touch based interaction.

project-view-iphone-desktop-pages.png
Figure 1: Project view of a Morfik application with iPhone specific pages.


Automatic Redirection

The Morfik Framework provides automatic redirection of the end-user access to the set of pages most appropriate for the device he is using, provided that a set of pages for that particular device or platform is available within the application. It is also possible for the developer to specify that more than one type of device will be directed to the same set of pages. It is possible for example to specify that desktop computers and iPads will be shown one group of pages while iPhones and iPods will be shown a different set.

iPhone and iPod Touch

With over 82 million devices sold in under three years Apple's iPhone and iPod Touch are arguably the most popular mobile devices to be equipped with a full featured web browser. Morfik allows the developer to specifically target these devices and design interfaces which are adequate for their specific screen size and resolution.

When and end-user access the website with an iPhone or iPod Touch he is served a special set of pages, designed specifically for these devices, if they are available in the application. The screenshot in Figure 2 shows a page specially designed for an iPhone or iPod Touch. In this image it is possible to clearly notice how the general design is different from regular web page, designed for desktop or notebook computers. In fact the page is more reminiscent of a native iPhone application despite following a color theme that would match the regular website.

mobile-page-iphone.png
Figure 2: A Page designed for an iPhone or iPod Touch.

iPad

Announced this year, Apple's iPad tablet computing device has shown itself to be extremely popular selling over a million units in under a month. Morfik makes it easy for the developer to choose between having an iPad specific interface, directing iPad users to the regular web interface or to the mobile web interface.

While the iPad's built-in Safari browser is quite capable of rendering most websites designed for desktop and notebook computers, it might be interesting to design interfaces which show controls which are more spaced and in some cases a bit larger to accommodate the difference in precision between a mouse pointer and a finger tip. The mouse pointer is extremely precise having a single pixel sized contact area with whatever the user is pointing at. In contrast, when you "touch" a button with your finger the contact area is much bigger.

Having a slightly bigger controls which are a bit more spaced can help the end-user avoid having to zoom in on a button just to avoid touching the wrong control.

One application for all users

Morfik allows the developer to create multiple interfaces within the same application, thus allowing all the logic and some interface components to be reused between the different interfaces easily. This means that users don't need to worry about creating entirely different applications for different platforms and can concentrate in building the best interface for each device.

Templates5.png
Figure 3: Configuration dialog that allows the developer to choose which will be the "home" page for each kind of device.


Mobile Preview

As all content is served by the same Morfik application, regardless of the client device, it is possible to preview how that content should look to users of different devices using the Morfik debug browser.

The built-in debug browser now offers support for previewing iPhone and iPad applications in their respective pixel resolutions and orientations. Both the iPhone and iPad applications can be seen as if they were in the respective device. The user can alternate which device is being used to browse the application and which orientation from a drop down menu that is available under the device button in the toolbar of the debug browser.

While it is recommended that users test applications against real devices, this feature can be quite handy during the design process when things need to be aligned and positioned in relation to the final page size.


iphone-app-preview.png
Figure 4: Application preview for iPhone in the Morfik debug browser.


Figures 4 and 5 show the new mobile preview feature of the built-in debug browser for the iPhone and the iPad respectively.

ipad-app-preview.png
Figure 5: Application preview for the iPad in the Morfik debug browser.

Related Topics


Back to top