网页设计为什么选择响应式 响应式网页设计案例实现与分析

我们不的不承认一个事实，在web设计和开发领域，我们将会无法跟上设备与分辨率革新的步伐。对于多数网站 来说，为每种新设备及分辨率创建其独立的版本根本就是不切实际的；结果就是，我们将会赢得使用某些设备的用户群，而失去那些使用其他设备的用户。不过，或 许会有另外一种方式，可以帮助我们避免这种情况的发生。

响应式网页设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

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

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

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

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

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

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

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

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

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

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

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com