Mobile design
Understanding the physical context
The physical constraints and requirements of mobility require in most cases using subsets of existing standards.
-
To begin to understand these constraints, read the two resources in links: a section from the W3C Scope of Mobile Web Best Practices and a visionary article about the future of the internet within a mobile context
- As you read, note the constraints designers need to consider with mobile web access, including
- display
- navigation
- user support (e.g. manuals/help)
- accessibility
- As a group, develop a dot point list of these design constraints to inform the design of your mobile project.
- Mark this up so that you can use this as a test page for mobile access. Keep the HTML very simple as you will later turn this page into one that’s suitable for mobile access.
Best practices
The Mobile Web Initiative's goal is to make browsing the Web from mobile devices a reality”, explains Tim Berners-Lee, W3C Director and inventor of the Web. “W3C and mobile industry leaders are working together to improve Web content production and access for mobile users and the greater Web.”
The W3C has over the past few years been developing a range of resources and best practices in collaboration with industry to ensure the web can move to mobile devices
-
Consult the Mobile Web Best Practices 1.0 documents listed in links.
- The amount of content on a single page designed for mobile access is an issue.
- Create a Mobile Design page(s) for mobile use by answering the following questions. Remember your markup needs to be simple and conform to standards.
- Identify at least 10 best practices which are implemented on your Mobile web page, and explain how your page implements them.
- Use the W3C Mobile Web Best Practices checker to check your page.. Note that it only checks for about 30 of the best practices.
- How many errors and warnings did you receive on the first check?
- How many were you able to quickly fix?
- Which errors were you not able to fix? List them
Design Guidelines
Mobile devices and services while still a rapidly developing field has begun to accumulate a rage of guidelines and resources that help developers avoid some of the early problems.
-
Review the three resources in links that have been developed specifically to support interaction design practices for mobile products and services.
- At least one of these will help inform the design of your mobile project.
- Choose the resources most relevant for your needs and briefly summarise the main issues identified.
- Be sure to include these ideas in your project.
Technical aspects
Mobile Markup Languages
Knowledge and skills in XHTML and CSS go a long way to preparing you for creating mobile Web pages. Such a common device-independent language makes possible the notion of ‘one web’. Considering the constraints of mobile devices (such as display real estate) it is clear that web pages designed for desktop browsers should not be presented in the same way to current mobile devices.
-
From the resources you have already accessed in the first tab, and those listed in links, respond as a group to the following questions:
- What is the relationship between the document types of XHTML 1.0 and XHTML 1.1 Basic? Which is the more appropriate document type for the mobile Web? Why?
- What is the relationship between XHTML 1.1 Basic and XHTML Mobile Profile (XHTML-MP)?
- How does WML (Wireless Markup Language) relate to XHTML 1.0, Basic and Mobile Profile?
- If you haven’t already, insert an appropriate document type in your Mobile web pages.
- Ensure that your Mobile page has a CSS media type for ‘handheld’, and that it accords with the CSS Mobile Profile subset. Use a separate CSS media type for ‘screen’.
Testing
There exists a multitude of mobile devices, with new ones coming out every month. It is not usually feasible to test mobile Web pages on all of them. Apart from the real devices, we can use simulators. Serious mobile Web development however must at some point be tested using real mobile devices.
-
There are many simulators available. The Tablet PCs at CDU have one called Openwave V.7 Simulator. You are not limited to this one though. If you don’t have one installed then install one of your choice. (see Links)
- Alternatively there are products like Opera Mini which can be downloaded to some mobile devices. (see Links)
- The standard Opera desktop browser also has an option to simulate the display web pages. Use shift-F11 or View, Small screen on any web page.
- Test some mobile web sites to find out their appropriateness for mobile
- Create a table similar to the one attached, and test at least five Mobile Web sites for mobile appropriateness.
- You may need to also use a standard desktop browser to easily see the code (View,Source).
- Include in the table a test of the mobile Web pages you created earlier on your web site.
- Create a Mobile Web page to display the data you have collected in the table. Note that table structures are not usually very Mobile friendly, so consider an alternative structure.
Mobile Web Trends
There are probably far more mobile devices than desktop computers. According to Bai et al <http://inderscience.metapress.com/media/1d8cffrgtrcyxm77
tmdq/contributions/h/b/7/f/hb7fnvkhpvcy2yyu.pdf > , Mobile penetration rates in the European market were already higher than the PC penetration rates by 2003.
-
Explore the general trends in terms of Mobile usage using the provided resources, and any you might identify through your own search. This is the type of research you will need to do for your finding out activities for your mobile project to understand the context and where specifically the mobile product or service you are developing fits.
- As you browse these resources, consider in what ways does the Mobile Web have the potential to address issues cocerning the “digital divide”? (You will need to find out what the ‘digital divide’ means.)
