<commit_before>---
layout: shared/narrow
title: "Usability and form factor"
description: "Mobile users will notice and be delighted by the small things you do for them to enhance their experience."
authors:
  - petelepage
published_on: 2014-09-17
updated_on: 2015-09-17
order: 5
---

<p class="intro">
Delight your mobile users with small things that enhance their experiences.
</p>

{% include shared/toc.liquid %}

## 19. Optimize your entire site for mobile

Use a [responsive layout](/web/fundamentals/design-and-ui/responsive/) that changes based on the size and capabilities of the user’s device. Study participants found sites with a mix of desktop and mobile-optimized pages even harder to use than desktop-only sites.

## 20. Don't make users pinch-to-zoom

Users are comfortable with scrolling sites vertically, but not horizontally. Avoid large, fixed-width elements. Use [CSS media queries](/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries) to apply different stylings for different screens. Don’t create content that only displays well at a particular [viewport width](/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport). Sites that force users to horizontally scroll fail the [Google Mobile-Friendly Test](https://www.google.com/webmasters/tools/mobile-friendly/), which may negatively impact their search rankings.

## 21. Make product images expandable

Retail customers expect sites to let them [view high resolution closeups](/web/fundamentals/design-and-ui/media/images/) of products. Study participants got frustrated when they weren’t able to see what they were buying.

<div class="mdl-grid">
  <figure class="mdl-cell mdl-cell--6-col">
    <img src="images/sw-make-images-expandable-good.png">
    <figcaption class="wf-figcaption-good">Do: provide easy ways for users to continue browsing or shopping on another device.</figcaption>
  </figure>
</div>

## 22. Tell users which orientation works best
<commit_msg>Fixes #2205<commit_after>---
layout: shared/narrow
title: "Usability and form factor"
description: "Mobile users will notice and be delighted by the small things you do for them to enhance their experience."
authors:
  - petelepage
published_on: 2014-09-17
updated_on: 2015-09-17
order: 5
---

<p class="intro">
Delight your mobile users with small things that enhance their experiences.
</p>

{% include shared/toc.liquid %}

## 19. Optimize your entire site for mobile

Use a [responsive layout](/web/fundamentals/design-and-ui/responsive/) that changes based on the size and capabilities of the user’s device. Study participants found sites with a mix of desktop and mobile-optimized pages even harder to use than desktop-only sites.

## 20. Don't make users pinch-to-zoom

Users are comfortable with scrolling sites vertically, but not horizontally. Avoid large, fixed-width elements. Use [CSS media queries](/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries) to apply different stylings for different screens. Don’t create content that only displays well at a particular [viewport width](/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport). Sites that force users to horizontally scroll fail the [Google Mobile-Friendly Test](https://www.google.com/webmasters/tools/mobile-friendly/), which may negatively impact their search rankings.

## 21. Make product images expandable

Retail customers expect sites to let them [view high resolution closeups](/web/fundamentals/design-and-ui/media/images/) of products. Study participants got frustrated when they weren’t able to see what they were buying.

<div class="mdl-grid">
  <figure class="mdl-cell mdl-cell--6-col">
    <img src="images/sw-make-images-expandable-good.png">
    <figcaption class="wf-figcaption-good">Do: Make product images expandable and easy to see detail.</figcaption>
  </figure>
</div>

## 22. Tell users which orientation works best

{'fraction_non_alphanumeric': 0.0946940847930947, 'fraction_numerical': 0.014216806296014217, 'mean_word_length': 4.677233429394812, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3527911', 'n_tokens_mistral': 1153, 'n_tokens_neox': 1059, 'n_words': 433}