- Choosing a Proper Layout for Mobile
- Working with Components
- Considerations When Going Mobile
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Considerations When Going Mobile
Knowing how to handle layout and some of the components will help in the retrofitting process, but you need to be aware of some other surprises.
For example, using the :hover CSS pseudo class is generally not a good idea with mobile devices. Having a click-to-call button, dealing with modal windows, and even using input fields are all extra matters that need to be taken into consideration.
No More Hover
Mobile devices are currently in an interesting place. Some devices, such as certain Samsung devices, can actually detect hovering fingers or stylus pens, but most devices cannot. Many laptop manufacturers have also started to include touchscreens, making this a potentially larger problem for more than just mobile devices.
This has a tendency to “break” the :hover CSS pseudo class. What happens is that you tend to get a tap-to-activate action that triggers the hover and then forces you to tap again to make your selection or dismiss the hover. This can get confusing and frustrating, depending on the touch target areas of your site. This doesn’t mean that you can no longer use hover, but it requires you to think ahead.
Think about it this way: Let’s say that you have a category with several items underneath that appear in a drop-down list that is triggered by using :hover. Now, if you had clicked on the category name to go to the category page, all your mobile visitors would have to tap the name once to activate the drop-down and then tap the name again to go to the category page.
This leaves the mobile user wondering whether tapping the category name will close the drop-down or take them somewhere. To get around this, you need to add a link named View All or similar so that mobile users know that they have a safe place to tap to get where they want to go.
Click to Call
People love convenience, and mobile users thrive on it. This might be the reason you need to consider adding a Click to Call button. This is not new: Maximiliano Firtman talked about doing this in 2010 (www.mobilexweb.com/blog/click-to-call-links-mobile-browsers). It seems that many designers and developers overlooked it.
You are likely aware of the major benefit of talking to a person when making a purchase. By adding a Click to Call element to your design, you empower your users and your marketing teams to help make both parties happy.
A simple way to add Click to Call to your site is with an anchor element, like the following:
<a href="tel:+15555555555"></a>
You want to make sure that you have styled the element to display: block and have added width and height values to it as well. Finally, you should consider adding an icon to it to help visually convey to users that, by tapping the icon, they can instantly dial the number. Also, for users not on a smartphone, this will appear as a link that does nothing. Some operating systems are looking to solve this issue by incorporating features that, when clicked from a desktop, will dial through various Voice Over IP systems or even push the call directly to your phone.
Modal Windows
Not long after everyone agreed that pop-up windows were a terrible idea because of potential distraction and mistrust (thanks to malware and infested sites that added Close buttons that actually installed malware instead of closing the window), the modal window was born. This particular style of window allowed pages, images, videos, and more to be displayed within the main window.
Many different types of modal windows are available, but they all have one thing in common: They are terribly implemented on mobile devices. What worked on your desktop design is suddenly not an option on mobile.
To design around this particular problem, you can use the following solutions: using a new window modal and using a resizing modal.
New Window Modal
Use a modal that takes users to a new page. This is similar to the approach that would be used with a framework such as jQuery Mobile. The modal window becomes a transition that displays a new page with a Close or Back button that takes users back to the original page.
The disadvantage of this particular style is that you are jarring the user with two experiences, and some users might not realize that they are on a new page that they need to close to get back to where they were.
This is of particular note when using product image galleries because moving users to a new page could cause them to become distracted or irritated that they left the page they wanted.
Resizing Modal
Many modal solutions currently employ a resizing technique to keep the contents of the window inside the available viewing space. These techniques work well for images (because most smartphone browsers can resize them to fit), but text content can be a major concern.
To handle the text elements, you need to either keep your content minimal or stick with using images. Regardless of the content, you need to make sure that close links are visible at all times so that users can exit the modal and return to the page they were on.
To visualize how a resizing modal works on multiple devices, see Figure 8.6, which shows the modal being used on an iPad and an Android phone.
)
Figure 8.6 The image is clearly visible on both devices, while allowing access to close it.
Input Fields
The last consideration that needs your attention is the way your input forms work. You already know that search fields will change based on the input type; however, you might not have thought about how some of the built-in device features can sabotage your site.
You can leverage several HTML5 input types with properties to help get around these issues.
For email fields, use a type of email to add built-in browser validation:
<input type="email" name="email />
Any iOS devices running iOS 5.0+ (which should be 100%) will, by default, disable the autocapitalization and autocorrect on this field. If you find that some users are still getting autocorrect or autocapitalization, you can add properties to the input like so:
<input type="email" name="email" autocorrect="off" autocapitalize="off" spellcheck="false" />
This tells the browser that the field should not correct what the user has typed in. Note that these properties can also be used on text areas and text input elements.
It might seem like a small issue, and it doesn’t play a direct role in the visual design process; however, as part of the user experience, paying attention to tiny interaction points is vital to a winning design, especially when it comes to mobile devices.