IT tutorials
 
Mobile
 

Mobile Web Development with WordPress, Joomla!, and Drupal : PRIMARY SITE CONTENT (part 3) - Forms

1/23/2013 11:34:38 AM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

4. Forms

Developers are often tempted to make the mobile version of a website far more of a read-only experience than its desktop equivalent. It's certainly true that entering large amounts of text into a mobile device can be a trying experience, and a design decision to temper, say, the account registration functionality on a mobile site may be a wise one. Nevertheless, forms and data entry are unavoidable parts of a modern web experience, if only so the user can enter text into a search box on the site. Large forms can be usefully broken up into sections — a wizard-like experience — to try to mitigate the daunting nature of a page full of form fields for the user.

Mobile devices adequately support most types of input field, at least in their own particular way. You can certainly rely on <input type='text'/>, <input type='password'/>, <input type='radio'/>, <input type='checkbox'/> and <select> widgets — although, as you can see in Figures 9 to 12 (which show iPhone, Android, Nokia Series 40, and Windows Mobile rendering of the same form), their appearance can vary wildly. It can certainly be very frustrating trying to create consistent layouts for forms across multiple devices, so leave lots of space and limit your expectations of pixel-perfect precision.

Figure 9.

Figure 10.

Figure 11.

Figure 12.

Advanced form widgets and behaviors can wisely be avoided. <input type='file'> elements for uploads are risky, because not all devices allow unfettered access to all parts of their file system (and indeed the iPhone disables such form elements altogether). Clickable image maps may work as expected for devices with suitable pointers, but are likely to be of dubious reliability across all devices. And, although using AJAX for background form submission would provide lots of usability benefits in mobile, it is asking a lot of a device's JavaScript support to be able to post forms reliably. Regular form submission, using GET and POST methods, is recommended.

Because the act of filling in and submitting a form can often be a lengthy and fiddly one for the user, it is highly advantageous to ensure that form validation is as intelligent as possible. If the device supports the required level of JavaScript, you should try to detect any validation errors before the form is submitted — or even as the offending field is in focus, so that the user does not have to scroll back up the form to reach it. As an alternative, older devices that support XHTML-MP may honor the {-wap-input-format:} property in CSS that allows you to construct simple input masks for freeform data input fields.

On the server-side of the form processing, you should try to be as flexible as possible with the submitted data, being tolerant of obvious data entry errors. (A location-based search for "londob uk" can reasonably be assumed to have been for 'London, UK', and it's probably not necessary to present another page asking the user to confirm her mistake — proceed as though she got it right in the first place.)

 
Others
 
- Mobile Web Development with WordPress, Joomla!, and Drupal : PRIMARY SITE CONTENT (part 2) - Embedding Images and Media
- Mobile Web Development with WordPress, Joomla!, and Drupal : PRIMARY SITE CONTENT (part 1) - Text and Typography, Pagination
- BlackBerry Bold 9700 and 9650 Series : Email Set Up - Setting Up Email for the First Time
- BlackBerry Bold 9700 and 9650 Series : Email Set Up - Learn Your BlackBerry and Getting Around
- Enter Java ME on Symbian OS : Java ME Management on Devices (part 2)
- Enter Java ME on Symbian OS : Java ME Management on Devices (part 1) - MIDP Security Settings
- iphone Programming : Handling Data - Parsing XML
- iphone Programming : Handling Data - Data Entry
- The BlackBerry Mobile Data System : Configuring MDS
- The BlackBerry Mobile Data System : Knowing That Your Data Is Being Securely Transmitted, Using the BlackBerry MDS Simulator
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.