BeFor Web

为网而生 - 关注互联网及移动端产品的用户体验设计

眼下是较为宁静的周日下午(但这篇没打算周日发)，滚石和Led Zeppelin一张一张的放着。别说我老了，10多年前同样是在听这些，特别是在没有多余的精力可以发泄或是没有特别负面的情绪需要抑制的时候。老东西总是最有沉淀感和安全感的，毫无疑问。

正坐在沙发正中间，左右一边一只喵，都盘成个团安静的睡着；从10.1假期把推推从医院接回家开始，每天基本没有晚于6点起床了，加之这一两个月学车的频率也变高了，周末也便是同样的起床时间。搞得这样的下午恍恍惚惚的像是每一个感官都要逐渐睡去的样子了。据说人在将睡未睡的时候，脑波是最利于记忆和创造什么什么的，真真么？倒是记得好多年前以设计博客模板为职业的时候，有几次在睡着之前好像突然看到些特别赞的页面，但接下来要么是没办法让自己醒来，要么是起来试图描画出来的时候又寻它不见了；挺奇妙的。

那么不多说了，和上周的15个响应式前端设计框架同属一个系列，时间较新，用的到的朋友可以看看有无所需。以下文字内容均来自原汇总帖。

你会发现，随着响应式Web设计的不断成熟，各类框架也变得越发健壮和可靠。也许是受到了Bootstrap、Foundation和Gumby的影响，如今很多新的框架都开始向一体化多功能的模式进化，它们提供了更多的功能，同时会包含可复用的组件和模块，例如图标、对话框、页码导航、面包屑、导航栏等等。

当然，不是所有的框架都塞入了大量的功能，有些只是简洁的提供了固定布局的基础。接下来是15个最新的响应式框架。

不年不节不周末的，临时加演一篇资源帖。响应式框架，偏前端的同学可能会有所欲求。

之前念叨过，但凡资源帖，多数是自己眼前用的着的东西，才会趁自己搜罗的机会汇总一下放到这边。话说回来，根本也没做过几篇的样子，印象里有iOS7免费设计资源汇总和iOS设备及界面模板免费资源汇总吧。这次拿来15个响应式前端框架；声明，我自己没用过，做这事起初只是为了我们自己有可能的项目收集有可能的素材和解决方案而已。如果您需要，可以挨个访问过去了解详情，也可以直接从Github获取，我最多算个牵线儿的，不做任何support方面的工作，还请理解了。

不多说了，直接上货吧。

今次的译文中，我们继续响应式Web设计方面的话题。前面的几篇相关文章以概念诠释、方法说明为主，本篇则围绕一个实际网站案例展开，从需求、流程、步骤细节等方面描述了响应式设计在项目中的实践方式。

本篇的部分内容要点会与之前几篇产生交集；我们会在这些地方提供相应文章的入口，便于深入参考阅读。接下来进入正文。

根据DailyTech的统计，到2015年，移动互联网的用户数量将会超过桌面用户。除了智能手机之外，使用平板电脑甚至是电视机进行上网的用户也在持续增加。在这种形势下，怎样让我们的网站尽量兼容各种类型的设备，并确保优良的用户体验，这将是越来越重要的问题。

通过响应式的设计开发方式，我们可以使网站页面随浏览设备的不同而自行响应，动态的调整布局结构、元素规格样式，将相同的内容以不同的格式呈现给不同设备的用户。

如果你对响应式Web设计还不大了解，可以先参考阅读我们之前的关于响应式设计的概念、组成要素及基本实现思路方面的文章，全方位预热一下。

继两篇关于响应式Web设计的译文之后，再来搞一篇“网站移动化”方面的。琢磨着自己大概是无论穿着什么鞋都打算趟趟这摊浑水的样子了。

今次篇幅不长，在我看来，本文更像是当老板或产品决策者无论穿着什么鞋都打算趟趟这摊浑水时，作为项目执行者，尤其是用户体验设计团队，所能给到的建议和方法参考。正像前面那篇“步步为营的用户体验设计 - 团队、影响力、协作与策略” 一文中提到的：“其实，‘用户体验设计’并非用来获取答案，它应该为项目执行方式的选择提供建议，或是为更好的设计开发流程创建架构。”OK走着吧。

眼下，移动互联网正扮演着越来越重要的角色，无论开发者还是普通用户，几乎所有人都在谈论它。传统互联网用户所习惯的那些访问内容、使用服务的交互方式正在被智能手机、平板电脑等设备迅猛的改变。作为线上内容及服务的提供者，我们必须尽快进入这个新兴市场，学习新的游戏规则。

愿望是好的，“移动化”的方式却会时常让人找不着北。究竟应该怎么做？开发一款iPhone或Android应用吗？还是为网站专门搞一套或N套适用于不同移动设备的设计方案？最重要的莫过于首先对自己产品的内容及功能进行正确定位，对移动化需求的程度进行合理的评估；在此基础上，尝试最适合自己的移动化方式。目前，有一些比较常见的思路可以供我们参考选择：

十一长假已然过去了一大半。今天倒真是晴朗的不行，向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生，对每年的几次长假就无比珍惜，想方设法让每一天都尽量过的饱满一些；夜里闭上眼，满脑子就都是Drupal、博客、咖啡、使命召唤、南方公园...也许需要出门走一走了。

OK开始说正经的了。在之前一篇译文中，我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题，我们将从前文介绍过的“弹性布局结构”这方面出发，通过一个具体的实例来深入学习。

如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大显示器)，变化范围极大。除了使用传统的台式机，用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下，固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性，其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来，我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案。

开始第一篇。老规矩，先无聊的谈论天气一类的话题。十一长假，天气也终于开始有些秋天的味道，坐在屋里甚至觉得需要热咖啡。话说两年前也是在国庆假期里开始做Joomla文档翻译的；长假好时光，总会可以抽出一两天，安静的窝在家里做做博客、学做些新东西，简直没有比这更舒心的事情。

说正事儿。准备在近期的几篇里集中翻译学习一下“响应式Web设计”的相关话题，包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文，这些文章篇幅要长的多(甚至要加分页了！...)，今天放上的这篇几乎花掉了两天的“闲暇时间”；对耐力是个考验，努力提高喽。废话结束，here we go.

眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle...各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面？这种疯狂什么时候算个头？

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

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