Have You Gone Mobile or (crazy)?

More and more mobile users are starting to use their browsing capabilities, It’s time to mobilize your site.. I just ran tests on rigsmedia.com and it failed epically. So.. let’s fix that problem and I write it all out here for others to follow.

The mobile phone and computing market is exploding. With more and more phones and hand held devices gaining web browsing capability, it only makes sense to ensure that your site is at least viewable by these mobile browsers. In this article, I present possible solutions for detecting and redirecting incoming mobile browsers so you can customize and enhance the mobile users’ experience.

Why Design for mobile devices?

Mobile Web access has many advantages. Unlike the fixed Web, the mobile Web will go where you go. No longer will you have to remember to do something on the Web when you get back to your computer. You can do it immediately, within the context that made you want to use the Web in the first place.

Moreover, with mobile devices, the Web can reach a much wider audience, and at all times in all situations. It has the opportunity to reach into places where wires cannot go, to places previously unthinkable (e.g., medical info to mountain rescue scenes) and to accompany everyone as easily as they carry the time in their wristwatches.

Finally, today, many more people have access to mobile devices than access to a desktop computer. This is likely to be very significant in developing countries, where Web-capable mobile devices may play a similar role for deploying widespread Web access as the mobile phone has played for providing “plain old telephone service.”

Mobile Design Process

Step 1 : Research mobile devices.

• Operating systems?
• Mostly mobile phones?
• Tablets or cross-over devices?
• Best practices?
• Reference links.

Step 2 : Research mobile browsers .

• Basic resolution size?
• JavaScript capable?
• PHP?
• CSS style sheets?
• Adobe® Flash®?

Step 3 : Decide layout choices.

• Resolution ranges.
• Content selection.
• Degradable Content / Fallback.

Step 4 : Build the layout.

Step 5 : Test the layout .

Mobile Browser Engines

Considering the largest group of smart phone users are either using iOS or the Android operating systems, We’ll be designing for the WebKit based CSS layout, with a fall back layout for all other OS’s.

The basic idea in either case is that once you have detected that they’re running WebKit , you can modify what you deliver to them, either changing what’s on the page, perhaps giving them a completely different version of the page, or even taking them to a different site entirely.

WebKit

iOS: The iPhone® Operating System’s integrated Web browser is built off of the open-source WebKit browser engine.

Android®: The Android Operating System’s integrated Web browser is built off of the open-source WebKit browser engine. WebKit provides the basic functionality that allows a Web browser to convert a webpage’s HTML code into a viewable site. The WebKit engine powers many other browsers including Safari and Google Chrome.

NOTE: It seams to me that most mobile device manufacturers (for the most part) want to develop for HTML5. This is a great thing in my opinion.

Mobile and Adobe® Flash®?

Does the iPhone® Safari web browser support Flash®? The short answer simply is no, just as it has been since the original iPhone® shipped on June 29, 2007.

Android® OS for Flash®, well seems they do have a few versions that do support Flash® but they have reverted back since. So for the most part now they do not support Flash®.

Themes Tests, err somewhat.

Emulators

This is what I can up with:

RM: iPhone® simulator with my mobile dark theme
- rigsmedia.com css theme simulator.

Opera Mini Simulator
- A live demo of Opera Mini 5 that functions as it would when installed on a handset.

Mobile, Best Practices

Design for One Web

Content designed with diverse devices in mind reduces cost, increases flexibility, and reaches the needs of more people.

• Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.
• Exploit device capabilities to provide an enhanced user experience.
• Take reasonable steps to work around deficient implementations.
• Carry out testing on actual devices as well as emulators.

Rely on Web Standards

Standards are the best guarantee for interoperability.

• Create documents that validate to published formal grammars.
• Send content in a format known by the device.
• Where possible, send content in a preferred format.
• Ensure that content is encoded using a character encoding known to be supported by the target device.
• Indicate in the response the character encoding being used.
• Use style sheets to control layout and presentation, unless the device is known not to support them.
• Use features of the markup language to indicate logical document structure.
• Provide informative error messages and a means of navigating away from an error message back to useful information.

Stay away from known hazards

Thoughtful design can help reduce usability problems due to small screens and keyboards, and other features of mobile devices.

• Do not cause pop ups or other windows to appear and do not change the current window without informing the user.
• Do not use nested tables.
• Do not use tables for layout.
• Do not use graphics for spacing.
• Do not use frames.
• Do not use image maps unless you know the device supports them effectively.

Be cautious of device limitations

Remember that mobile devices vary greatly in capability.

• Do not rely on cookies being available.
• Do not rely on embedded objects or script.
• Do not use tables unless the device is known to support them.
• Where possible, use an alternative to tabular presentation.
• Organize documents so that if necessary they may be read without style sheets.
• Do not rely on support of font related styling.
• Ensure that information conveyed with color is also available without color.

Optimize navigation

Simple navigation and typing become critical when using a small screen and keyboard, and limited bandwidth.

• Provide only minimal navigation at the top of the page.
• Provide consistent navigation mechanisms.
• Clearly identify the target of each link.
• Note the target file’s format unless you know the device supports it.
• Assign access keys to links in navigational menus and frequently accessed functionality.
• Keep the URIs of site entry points short.
• Take into account the trade off between having too many links on a page and asking the user to follow too many links to reach what they are looking for.

Check graphics & colors

Images, colors, and style brighten content, but require care: devices may have low-contrast screens or may not support some formats.

• Re-size images at the server, if they have an intrinsic size.
• Do not use images that cannot be rendered by the device. Avoid large or high resolution images except where critical information would otherwise be lost.
• Specify the size of images in markup, if they have an intrinsic size.
• Provide a text equivalent for every non-text element.
• Ensure that foreground and background color combinations provide sufficient contrast.
• When using background images make sure that content remains readable on the device.
• Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.

Keep it small

Smaller sites make users happier by costing less in time and money.

• Use terse, efficient markup.
• Ensure that the overall size of page is appropriate to the memory limitations of the device.
• Keep style sheets small.
• Limit scrolling to one direction, unless secondary scrolling cannot be avoided.

Use the network sparingly

Web protocol features can help improve the user experience by reducing the impact of network bottlenecks and latencies.

• Do not create periodically auto refreshing pages, unless you have informed the user and provided a means of stopping it.
• Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.
• Keep the number of externally linked resources to a minimum.
• Provide caching information in HTTP responses

Help & guide user input

Keyboards and other input methods on mobile devices can be tedious to use, so effective designs minimize the need for them.

• Keep the number of keystrokes to a minimum.
• Avoid free text entry where possible.
• Provide pre-selected default values where possible.
• Specify a default text entry mode, language and/or input format, if the target device is known to support it.
• Create a logical order through links, form controls and objects.
• Label all form controls appropriately and explicitly associate labels with form controls.
• Position labels so they lay out properly in relation to the form controls they refer to.

Think of users on the go

Web users on the go want compact information when time is short and distractions many.

• Provide a short but descriptive page title.
• Use clear and simple language.
• Ensure that material that is central to the meaning of the page precedes material that is not.
• Limit content to what the user has requested.
• Ensure that content is suitable for use in a mobile context.
• Divide pages into usable but limited size portions.

Links to mobile guides and tools:

PHP API Kit
(not free)

Our most popular and oldest API Kit. Includes examples for device detection, mobile website redirection, click to call, click to send sms and more.

W3C The Mobile Web Initiative

Web Compatibility Test for Mobile Browsers – version 2

W3C provides a mobileOK icon that represents a claim that the content on which the icon is found is mobileOK conformant. – Link

RESULT: Our Mobile Site @ rigsmedia.com – RM5 MOBILE