响应式设计：基础实践

网页设计师似乎已经有了一个共识，就是为大量设备建立不同的网站几乎是不可能的。响应式网站是未来的趋势，除非这个移动设备需要一些非常具体的功能或完全不同的内容值得开发。

你可能已经知道响应设计，移动第一方针，和得体的退化。这些都是建立广泛可访问站点和网络应用程序的主要工具和技术。在这篇文章中，我将集中着重讨论移动设计方面和一些亮点技术，从而能改善您的桌面站点。移动第一并不意味着，你应该开始从320px屏幕宽度的向上延伸扩展。更多考虑的是从工作流程中所有可能的使用情况。

简单

即使在一个很小的屏幕，一个简单而整洁的布局，也能确保用户得到最好的体验。但是你只有这一种方法为手持设备的用户考虑吗？一旦你创建了一个伟大的无障碍和良好的流动性的移动网站，再回头看看对比下你的桌面版本。不要忘了触摸和鼠标是完全不同的性质。不要让您的桌面用户仅仅因为需要在两个菜单项之间移动200px而扭伤了手腕。媒体查询是你的朋友。

放弃它，隐藏它

因此你应该决定要花费比别人更多的代价为这些看似不太重要的体验上建立一个移动网站。最好的做法就是摆脱他们，不仅仅是为了节省一些像素和提供更好的用户体验。现在问你自己，有必要把桌面版本上的东西全部展现出来吗？那样可能让用户感到迷惑或分心？也许这些选项应该是为高级用户而设计为隐藏在子菜单？也许用户会体会到只有4个主菜单，而不是6个主菜单项？

桌面浏览器的响应

对于我而言，尤其是当多任务时，更喜欢频繁的调浏览器窗口大小。有时，你不能浪费时间在某一个站点上，使用媒体查询创建网页时，要把桌面用户考虑在内。如果让我重新调整站点来适应视频或图像，我想，我不是唯一一个会发疯的。所以，请开始使用响应媒体，这么做会给站点带来更多变化。

方位

方位是一个基于当前正在纵向或横向位置看设备的规范。通过媒体查询，你可以在不同方位分配不同的布局。一些桌面浏览器是“伪造”的方向，根据窗口的宽度和高度的比例。这使您可以添加一些很好的调整，以增强用户体验。

输入类型

HTML5有一些新特性能帮助移动用户填写表格。例如：如果你添加类型为email的字段，它会告诉移动浏览器提供像“@”字符或“.com”扩展性的电子邮件地址。请记住，它也有助于桌面用户。他们将得到他们以前使用的电子邮件地址提供的一个下拉菜单，甚至根据他们以前使用的细节，自动填充整体表格。

少的导航，更好的用户预测

在移动设备上浏览，如果我有从主页丢失了印象深刻的几个链接，我会很恼火并感到失落。我会问自己：我在正确的地方吗？我应该回去并开始了吗？这是不应该出现的，用完整的URL栏和臃肿的文字描述当切换标签对于移动用户来说是不明智的。

滚动似乎比通过浏览菜单项更适合触摸屏用户。在可能的情况下，避免创建一个复杂的网站结构，不要试图预测用户可能寻找并尝试相关的菜单或命令。

拥抱新标准

没有通过不必要的“哦，闪光，为什么”的辩论，我只是建议你让您的网站面向未来，尽可能地利用新兴的标准。CSS3的过渡和其他花哨的视觉效果，先进的互动HTML5的。这似乎是以后要走的，除了一些过时的标签，W3C已经支持相当一部分新特性了，所以我认为从长远看来这是一个不错的选择。

正如你看到的我没讨论过多的技术细节，但我一般都认为，拥有这方面技术的眼光会让你更加节省开发时间。要考虑跨平台而不仅仅为移动设备。让您手持设备和桌面站点在某个内容上的行为更加接近。

本文编译自：意雅互动，原文地址。

标签： 响应式设计 交互设计 网页设计 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。