You may recall late last year, we posted 10 mobile web design best practices taken from our friends at Mobify’s 50 tip stash. Today we’re doing it again — this time for tablets. Enjoy these 3 killer tips, and read them all in the ebook Tablet Web Design Best Practice Guide.
1. Turn off autocorrect and auto-capitalize on form fields.
Autocorrect and auto-capitalize are very helpful on touch screen devices for texting and composing email, but they can be very problematic when filling in forms. Email addresses and user names are rarely autocorrectible the first time you input them into your device, and names and addresses can be auto-incorrected without the user noticing. Auto-capitalize is also problematic for user names but the most problematic for password entry, which often is masked to the user, who can’t figure out why his or her input keeps failing with every try. Make sure to turn them off using autocapitalize=”off” and autocorrect=”off” for the appropriate fields.
2. Use native UI elements.
Instead of trying to push a desktop element like a drop-down menu into a responsive design, use a simple media query to substitute native UI elements that are already optimized for mobile. Ideeli uses native selection menus with larger touch targets using this tactic.
3. Remove broken hovers.
Hovers don’t always work on tablets and can behave wonky even when they do — hello accidental activation! It’s recommended hovers be turned off, with the information contained behind them included somewhere on the page.
When viewing the lululemon site on a desktop, users see a quick-view button hovering on a product. Clicking that quick view opens up the product in a modal. Since the hover paradigm does not work on touch devices, a tablet user bypasses the quick view and navigates to the product page instead. For example, Lululemon links directly to product pages from category pages, nixing the Quick View feature.