Welcome!

Machine Learning Authors: Elizabeth White, Liz McMillan, Jack Jachner, Pat Romanski, Progress Blog

Related Topics: Machine Learning

Machine Learning : Article

AJAX Navigation and Links

Mobile devices, by definition, have limitations. These include limited display, limited input capabilities

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

Navigation and Links
Mobile devices, by definition, have limitations. These include limited display, limited input capabilities, and the possible absence of a pointing device. Hence structure and navigation become critical in ensuring a good end-user experience. The following design recommendations should be considered:

Navigation and Links Recommendations

  1. Keep URIs short.
  2. Provide minimal navigation at the top of the page.
  3. Balance the numbers of links on pages against the depth of navigation.
  4. Provide a thematically consistent experience.
  5. Use navigation mechanisms consistently.
  6. Assign access keys to links in navigational menus and frequently accessed functionality.
  7. Clearly identify the target of each link.
  8. Don't use image maps unless you know that the target client supports them.
  9. Don't cause pop-ups or other windows to appear and don't change the current window without informing the user.
  10. Don't create periodically auto-refreshing pages.
  11. Don't use mark-up to redirect pages automatically.
URIs of Site Entry Points: Keep the URIs of site entry points short because typing on mobile devices is difficult.

Navigation Bar: Provide minimal navigation at the top of the page. Two or three links should be enough to provide basic navigation. Navigation should be placed on the top of the page. Any other secondary navigational element can go at the bottom of the page if needed.

Balanced Structure: Balance the numbers of links on pages against the depth of navigation. The design should aim to provide a balance between having an excessive number of navigation links on a page and the need to navigate multiple links to reach content. Each retrieval of a navigation page takes time and adds cost so the number of links on a page shouldn't be minimized at the expense of adding page retrievals.

Thematic Consistency of Resource Identified by a URI: According to One Web principles, content should be accessible on a range of devices regardless of the differences in presentation capabilities. It's necessary to ensure that links provide a thematically coherent experience when accessed from a device other than the one on which they were captured.

For instance, a bookmark captured on one device should be usable on another type of device even if it doesn't yield exactly the same experience. If the page that was bookmarked isn't appropriate to the device that's using it, a suitable alternative that's should be provided.

In addition, URIs can be decorated to provide session or other information. If the URI is decorated with session information that's no longer current, the user should be directed to a point in the navigation hierarchy that's appropriate to his device to establish an appropriate session and other parameters.

Navigation Mechanisms: Use navigation mechanisms in a consistent way. Using the same navigation mechanisms across a service helps users orient themselves and lets them identify navigation mechanisms more easily. Users of devices that don't have pointing devices have to scroll between hyperlinks using the keypad. Intelligent grouping, perhaps optimized through adaptation according to usage patterns, can assist usability.

A drill-down method, based on major headings, can often provide an effective means of navigation; because of the linearized arrangement of content, small screen size, and lack of pointing device, it's often useful to provide a way to jump entire sections of content. At each target of the drill-down navigation, an "up" link should be provided so the user can jump an entire section.

Access Keys: Assign access keys to links in navigational menus and frequently accessed functionality. Where there's no pointing device, assigning an access key (a keyboard shortcut) to a link can provide a convenient way for users to access the link and avoid navigating to the link by repeatedly pressing the navigation key.

Provide the same access key for links that are repeated across pages, such as links to the home page. When building a list of links, use numbered lists and assign access keys appropriately. It's understood that not all characters can be used as access keys since many mobile devices have limited keyboards.

Link Target Identification: Clearly identify the target of each link. Use clear concise descriptive link text to help users decide whether to follow a link. Identify the implications of following a link if the target is notably large and the user might not anticipate this from the context. Note the target file's format unless you know the device supports it.

Users of mobile devices can suffer undue delay and cost as a result of following links. It's important to identify where a link leads so users can assess whether following it will interest them. While it's unlikely that the cost in monetary terms of a particular user following a particular link can be specified, it should be possible to give an idea of the size of the resource in bytes or in an abstract way, e.g., that it's a large file.

Links to content that's in a different format than the format of the page the link is on (i.e., content that can only be interpreted by other applications or downloads) should be human signposted so that users aren't led to download content that their device may not be able to use.

Image Maps: Don't use image maps unless you know that the target client supports them and has sufficient screen area and an appropriate means of selection such as a stylus or navigation keys. When using image maps under these circumstances, use client-side image maps unless the regions required can't be described with an available geometric shape. Don't use a server-side image map unless you know that the client provides a means of selection within the image map.

Image maps allow fast navigation, provided the requesting device can support the image involved and provided that there's a way of navigating the map satisfactorily. Up, down, left, right, enter are available on most mobile devices even if no pointing device is present and this is usually sufficient to allow the navigation of the active regions of client-side image maps.

Pop-ups: Don't cause pop-ups or other windows to appear and don't change the current window without informing the user. Auto Refresh: Don't create periodically auto-refreshing pages unless you've informed the user and provided a way of stopping it. Redirection: Don't use mark-up to redirect pages automatically. Instead, configure the server to do redirects by way of HTTP 3xx codes.

Page Content and Layout
Page Content and Layout Recommendations

  1. Ensure that content is suitable for use in a mobile context.
  2. Divide pages into usable but limited size portions.
  3. Limit scrolling to one direction, unless secondary scrolling can't be avoided.
  4. Ensure that material that's central to the meaning of the page precedes material that isn't.
  5. Don't use graphics for spacing.
  6. Ensure that information conveyed with color is also available without color.
  7. Don't use background images unless you know that the device supports them.
The page content and layout section discusses elements such as design, the language used in its text, and the spatial relationship between constituent components. It refers to the user's perception of the delivered content and doesn't address technical aspects of how the content is constructed.

Page Content: Ensure that content is suitable for use in a mobile context, use clear and simple language, and limit the content to what the user has requested.

Since users are looking for specific pieces of information and aren't browsing in the conventional sense, it's important to ensure that the users know upfront what they're getting. If the information specified isn't what the user is looking for, the user can skip the page.

Page Size: Divide pages into usable but limited sizes. Ensure that the overall size of a page is appropriate to the bandwidth, the memory limitations of the device, and the delivery channel characteristics if they can be determined.

There has to be a balance between page size and the number of pages. Big pages take too long to load and can be affected by the constraints of the device. On the other hand, small pages imply that the user has to make multiple requests for each page.

Scrolling: Limit scrolling to one direction, unless secondary scrolling can't be avoided.

Navigation Bars, etc.: Ensure that material that's central to the meaning of the page precedes material that isn't.

Navigational elements such as menu bars and search functions are often displayed before the actual page content. This can be a hindrance with small devices because it prevents the user from viewing the actual content (which he may not be interested in when he actually sees it). Hence, such navigational elements should be displayed later in the data retrieval process where possible.

Graphics: Don't use graphics for spacing. Don't use images that can't be rendered by the device. Avoid large or high-resolution images except where critical information would otherwise be lost.

Color: Ensure that the information conveyed with color is also available without color. Ensure that foreground and background color combinations provide sufficient contrast.

Support for color varies across devices. Also, in most devices, color contrast is not well supported. This means information that relies on color or color contrast can be misinterpreted.

Background Images: Don't use background images unless you know the device supports them. There could be a number of problems with background images - they may not be supported, or when they are supported they may not be rendered correctly. They are "extra" elements that don't add to the value of the content (see the point on the navigation bars above) and finally - the user may have to pay for them (bandwidth costs).

Page Definition
Page Definition Recommendations

  1. Provide a short but descriptive page title.
  2. Don't use frames.
  3. Ensure that perceivable structures in the content can be programmatically determined.
  4. Don't use tables unless the client supports them.
  5. Provide textual alternatives for non-text elements.
  6. Don't embed objects or script in pages unless the device supports them.
  7. Always specify the size of the images in the mark-up and resize images at the server.
  8. Create documents that validate to published formal grammars.
  9. Use stylesheets to control layout and presentation unless the device won't support them.
  10. Use terse efficient mark-up.
  11. Send content in a format known to be supported by the device.
  12. Ensure that content is encoded using a character encoding known to be supported by the target device.
  13. Provide informative error messages.
  14. Don't use cookies unless you know the device supports them.
  15. Use caching to reduce data reload.
The page definition section addresses the technical aspects of page creation and covers the following aspects:

Page Title: Provide a short but descriptive page title. Many mobile browsers don't display the title of a page. Where the title is displayed, the available space may be limited or truncated.

Frames: Don't use frames.

Structural Elements: Ensure that perceivable structures in the content can be programmatically determined. Use HTML headings and subheadings to indicate the structure of documents.

Tables: Don't use tables unless the client is known to support them. Don't use multi-layer tables.

Non-Text Items: Provide textual alternatives for non-text elements.

Objects/Scripts: Don't embed objects or script in pages unless you know the device supports them. Many mobile clients don't support embedded objects or script and in many cases it's not possible for users to download plug-ins to add support. Content must be designed with this in mind. Design pages as though they were to be displayed on a text-only browser.

Image Sizes and Resizing: Always specify the size of images in mark-up and resize images at the server.

Valid Mark-up: Create documents that validate to published formal grammars. Refer to www.w3.org/QA/Tools/#validators for more information on valid mark-ups.

Measures: Don't use pixel measures and don't use absolute units in mark-up language attribute values and stylesheet property values. Instead use percentage and other relative measures.

Stylesheets: Use stylesheets to control layout and presentation unless the device is known not to support them. Organize documents so that they can be read without stylesheets. Keep stylesheets as small as possible.

Minimize Mark-up: Use terse, efficient mark-up. For example, don't contribute to page weight by introducing unnecessary white space. If white space is used for formatting, try to ensure that it's stripped down when serving the page.

Content Types: Send content in a format known to be supported by the device. Where possible, send content in the client's preferred format.

Character Encoding: Ensure that content is encoded using a character encoding that's known to be supported by the target device.

Error Messages: Provide informative error messages and a means of navigating away from an error message back to useful information.

Cookies: Don't use cookies unless you know the device supports them.

Caching: Use caching to reduce data reload.

User Input
This section contains statements relating to user input.

Minimize Keystrokes: Keep the number of keystrokes to a minimum.

Avoid Free Text Entries: Avoid free text entry where possible.

Provide Defaults: Provide pre-selected default values where possible.

Default Input Mode: Specify a default text entry mode, language, and/or input format, if the target device supports it.

Tab Order: Create a logical tab order through links, form controls, and objects.

Labels: Label all controls appropriately. Explicitly associate labels with controls where the device supports this. Position labels relative to controls appropriately.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.

More Stories By Ajit Jaokar

Ajit Jaokar is the author of the book 'Mobile Web 2.0' and is also a member of the Web2.0 workgroup. Currently, he plays an advisory role to a number of mobile start-ups in the UK and Scandinavia. He also works with the government and trade missions of a number of countries including South Korea and Ireland. He is a regular speaker at SYS-CON events including AJAXWorld Conference & Expo.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@CloudExpo Stories
Blockchain is a shared, secure record of exchange that establishes trust, accountability and transparency across business networks. Supported by the Linux Foundation's open source, open-standards based Hyperledger Project, Blockchain has the potential to improve regulatory compliance, reduce cost as well as advance trade. Are you curious about how Blockchain is built for business? In her session at 21st Cloud Expo, René Bostic, Technical VP of the IBM Cloud Unit in North America, will discuss th...
The question before companies today is not whether to become intelligent, it’s a question of how and how fast. The key is to adopt and deploy an intelligent application strategy while simultaneously preparing to scale that intelligence. In her session at 21st Cloud Expo, Sangeeta Chakraborty, Chief Customer Officer at Ayasdi, will provide a tactical framework to become a truly intelligent enterprise, including how to identify the right applications for AI, how to build a Center of Excellence to ...
Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...
While some vendors scramble to create and sell you a fancy solution for monitoring your spanking new Amazon Lambdas, hear how you can do it on the cheap using just built-in Java APIs yourself. By exploiting a little-known fact that Lambdas aren’t exactly single-threaded, you can effectively identify hot spots in your serverless code. In his session at @DevOpsSummit at 21st Cloud Expo, Dave Martin, Product owner at CA Technologies, will give a live demonstration and code walkthrough, showing how ...
As DevOps methodologies expand their reach across the enterprise, organizations face the daunting challenge of adapting related cloud strategies to ensure optimal alignment, from managing complexity to ensuring proper governance. How can culture, automation, legacy apps and even budget be reexamined to enable this ongoing shift within the modern software factory?
SYS-CON Events announced today that Elastifile will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Elastifile Cloud File System (ECFS) is software-defined data infrastructure designed for seamless and efficient management of dynamic workloads across heterogeneous environments. Elastifile provides the architecture needed to optimize your hybrid cloud environment, by facilitating efficient...
There is only one world-class Cloud event on earth, and that is Cloud Expo – which returns to Silicon Valley for the 21st Cloud Expo at the Santa Clara Convention Center, October 31 - November 2, 2017. Every Global 2000 enterprise in the world is now integrating cloud computing in some form into its IT development and operations. Midsize and small businesses are also migrating to the cloud in increasing numbers. Companies are each developing their unique mix of cloud technologies and service...
@DevOpsSummit at Cloud Expo taking place Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center, Santa Clara, CA, is co-located with the 21st International Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is ...
SYS-CON Events announced today that Golden Gate University will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Since 1901, non-profit Golden Gate University (GGU) has been helping adults achieve their professional goals by providing high quality, practice-based undergraduate and graduate educational programs in law, taxation, business and related professions. Many of its courses are taug...
DevOps at Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to w...
With Cloud Foundry you can easily deploy and use apps utilizing websocket technology, but not everybody realizes that scaling them out is not that trivial. In his session at 21st Cloud Expo, Roman Swoszowski, CTO and VP, Cloud Foundry Services, at Grape Up, will show you an example of how to deal with this issue. He will demonstrate a cloud-native Spring Boot app running in Cloud Foundry and communicating with clients over websocket protocol that can be easily scaled horizontally and coordinate...
SYS-CON Events announced today that DXWorldExpo has been named “Global Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Digital Transformation is the key issue driving the global enterprise IT business. Digital Transformation is most prominent among Global 2000 enterprises and government institutions.
SYS-CON Events announced today that Grape Up will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct. 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Grape Up is a software company specializing in cloud native application development and professional services related to Cloud Foundry PaaS. With five expert teams that operate in various sectors of the market across the U.S. and Europe, Grape Up works with a variety of customers from emergi...
From 2013, NTT Communications has been providing cPaaS service, SkyWay. Its customer’s expectations for leveraging WebRTC technology are not only typical real-time communication use cases such as Web conference, remote education, but also IoT use cases such as remote camera monitoring, smart-glass, and robotic. Because of this, NTT Communications has numerous IoT business use-cases that its customers are developing on top of PaaS. WebRTC will lead IoT businesses to be more innovative and address...
21st International Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Me...
In his session at 20th Cloud Expo, Scott Davis, CTO of Embotics, discussed how automation can provide the dynamic management required to cost-effectively deliver microservices and container solutions at scale. He also discussed how flexible automation is the key to effectively bridging and seamlessly coordinating both IT and developer needs for component orchestration across disparate clouds – an increasingly important requirement at today’s multi-cloud enterprise.
DevOps at Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to w...
Vulnerability management is vital for large companies that need to secure containers across thousands of hosts, but many struggle to understand how exposed they are when they discover a new high security vulnerability. In his session at 21st Cloud Expo, John Morello, CTO of Twistlock, will address this pressing concern by introducing the concept of the “Vulnerability Risk Tree API,” which brings all the data together in a simple REST endpoint, allowing companies to easily grasp the severity of t...
Recently, WebRTC has a lot of eyes from market. The use cases of WebRTC are expanding - video chat, online education, online health care etc. Not only for human-to-human communication, but also IoT use cases such as machine to human use cases can be seen recently. One of the typical use-case is remote camera monitoring. With WebRTC, people can have interoperability and flexibility for deploying monitoring service. However, the benefit of WebRTC for IoT is not only its convenience and interopera...
Any startup has to have a clear go –to-market strategy from the beginning. Similarly, any data science project has to have a go to production strategy from its first days, so it could go beyond proof-of-concept. Machine learning and artificial intelligence in production would result in hundreds of training pipelines and machine learning models that are continuously revised by teams of data scientists and seamlessly connected with web applications for tenants and users.