在为移动设备设计网站的早期阶段，大多数开发人员将其产品分成两部分。他们发布了功能齐全的桌面版本，然后发布了“移动优化”版本，剥离了大部分品牌和图像，以适应糖果手机和3G无线网络的有限功能和网络速度。
然而，现代智能手机可以通过网络提供与昨天的DSL线路一样好或更好的方式，使网页与桌面PC一样高效。
然后，设计会聚回到单用户界面。但设计师面临的风险并不是智能手机或平板电脑无法呈现现代化的响应式网站。相反，用户在触摸屏设备上输入的方法需要对底层网站设计进行有意义的更改。假设访问者拥有键盘和鼠标，建立网站的日子已经结束。
基本触摸屏设计规则
设计具有触摸屏感知的Web界面需要过去传统的监视器 - 鼠标 - 键盘方法的演变。特别是，您必须适应手势，点击和多点触控输入等交互。
- 攻丝不准确。除非客户拥有幼儿的手指，即使使用非常精确的软件控制，也很难点击并且精确。
- 手势与水龙头不同。为了在触摸屏上滚动长页面，用户滑动一个手指 向上 浏览器窗口。在您意识到使用鼠标进行浏览之后，移动鼠标可能看起来并不重要 下 .
- 两个（和更多）手指点击。用户可以同时在设备上使用多个手指点按来控制它。这些额外的抽头可能意味着某些特定的东西，具体取决于用户设备的操作系统。
- 高眩光装置。大多数触摸屏平板电脑的屏幕都是用坚固的玻璃制成的。在明亮的光线条件下，这种材料很难通过，有很多眩光。此外，通过所有触摸，它们会在屏幕上出现可能影响页面外观的指纹和污迹。
- 屏幕键盘。虽然有些用户使用无线键盘连接到平板电脑，但大多数平板电脑用户使用屏幕键盘输入数据。 OSK进入可能导致一些搞笑的错别字以及长时间使用的不舒服。
由于设备的这些功能，Web设计人员应该强调触摸屏用户的几个基本设计规则：
- 不要将可点击的物品放得太近。没有严格的规则定义接近距离太近，但链接列表，特别是小字体，可能难以通过用胖手指点击（点击）来导航。只需尝试单击链接就可能很烦人。这个原则适用于按钮和链接。
- 层次结构很难保持开放。一种流行的动态菜单形式使用JavaScript在用户单击时打开子菜单，然后将鼠标悬停在子菜单上。这些状态在触摸屏上使用起来非常困难或不可能，因为它们要么不保持打开状态，要么不会关闭。
- 将链接和可点击区域移离窗口的右边缘。大多数人都是右撇子，并且倾向于在屏幕的那一侧滚动。由于滚动是通过手势完成的，因此有时可能会错误地开始在链接上滑动。如果用户想要在页面上滚动而不是意外地点击链接，他们会感到恼火。通过将链接从右侧移开，您可以帮助他们避免这种不便。
- 没有老鼠。这意味着没有鼠标 指针 。您不应该依赖鼠标指针更改来帮助指示某些内容是可点击的。
- 悬停状态不存在。作为上述的必然结果，由于没有鼠标，因此没有什么可以悬停的。在触摸屏设备上点击（点击）或不点击链接，因此用户无法从诸如颜色更改，工具提示或状态栏更改等悬停状态中推断出任何有用信息。
- 黑色背景增强眩光。由于眩光，具有黑色背景的站点在触摸屏设备上很难读取。黑色使设备上的指纹显得更清晰，屏幕模糊。并且黑色可以将屏幕变成反射用户脸部的镜子，而不是屏幕上的文本。
- 表单中的长文本块很难编写。虽然可以在iPad或Android或Windows平板电脑上编写完整的小说，但大多数人不喜欢使用屏幕键盘进行长篇文章。您的设计越多，数据输入越简单越好越好。
设计触摸屏的最重要方面是 在触摸屏设备上测试您的页面。虽然有很多iPad和Android模拟器可供选择，而且有很多Windows平板电脑，但它们仍然没有提供触摸屏的感觉。你不能说链接太近或者按钮太小 - 或者眩光使得页面难以阅读 - 除非你拿出一台平板电脑并试用它们 之前 你发布了新的网站设计。
