Craig Grannell 访问了行业的精英们关于2012年Web设计和开发的趋势。
      2012看来注定是有趣的一年。经济的下滑继续广泛地打击行业，看不到结束的尽头。政府极力审查网络，否认公民的基本权利，支撑摇摇欲坠的媒体公司。对网页设计和开发，2012还是比较混乱的一年。我们处于很多小矛盾当中：移动贪婪地占领市场份额；原生App威胁开放的互联网；收费墙阻碍曾经免费的信息；合作与分裂的冲突；复古（Skeuomorphism）的交互模式挑战创新的设计模式。
      我们很难预测将来会发生什么，但是一些设计师、开发工程师和行业的大师提出了自己的观点。以下是他们对2012年的一些猜测，关注这些方面，你更可能取得成功。
1. 渐进增强（Progressive Enhancement）
      Happy Cog 的创始人 Jeffrey Zeldman说过，移动Web的暴增以及Webkit智能机超越传统桌面的Web浏览，让大家甚至是顽固的怀疑论者采用渐进增强、HTML5、CSS3以及基于Web标准的其它方面的设计。他还提到，IE对Web标准的支持越来越好，更加说明了大家迫不及待拥抱新的世界。

阅读全文

      Adobe宣布推出新的网页设计工具Shadow，该工具可以协助网页设计师在多个移动设备中检视网页，并进行调整。Shadow允许开发者将移动设备的浏览同步至台式电脑，便于测试和检查新设计和升级。它使得检查和调试变得更有效，并可让设计师同时看到每个版本在所有目标设备上的显示情况。Adobe同时也更新其HTML5动画工具软件Edge到Preview4。
      Shadow分为三个部分，计算机端的主程序、计算机端Chrome浏览器扩充功能及行动设备端App。目前主程序支持Windows7及Mac OS X，可以从Adobe Lab网页中下载，预计今年底正式发行。移动装置则支持iOS及Android，需从AppStore或Google Play免费下载。
      当计算机与移动装置配对之后，网页设计师可以透过Chrome浏览器，让计算机与行动设备同时显示一个网页的内容，检视计算机端与行动设备端的显示效果是否正确。由于Shadow可以同时控制多部移动装置，因此设计师可以同时在众多不同移动设备中检验网页。Shadow最多曾经连接35台行动设备，Adobe未透漏最多可以控制多少台，但认为用户不可能会遇到上限。
      若任何装置出现预期之外的差异时，设计师可以透过Chrome浏览器的Shadow扩充功能使用除错工具来修改网页内容，例如HTML、CSS或JavaScript，并在储存后于不同装置观看修改后的效果。

阅读全文

      过去，由于加载图片的格式限制(只能使用GIF格式)，设计加载动画不是那么容易。随着技术和浏览器的发展，用 CSS3 和 jQuery 就可以方便地设计加载动画，这种方式的高度可定制化以及服务器的进步使得开发者的各种要求得到满足。下面介绍10个实用的方案。

1. Sonic——循环的加载动画
Sonic是一个很小的JS“类”，你可以用它来创建自定义加载动画——蛇吞尾似的循环动画。

2. 闪烁的加载动画
用 CSS3 动画可以实现闪烁跳跃式的正在载入页面效果。
 
3. 旋转的加载动画(无需图片)
CSS transform(Firefox 3.5+和基于Webkit的浏览器中可用)有很多有趣的功能，如旋转、平移、缩放和倾斜等等都可以用来设计加载动画。

阅读全文

      在CSS中，与媒体相关的样式定义是从CSS2.1开始的。CSS2.1中定义了各种媒体类型，包括显示器、便携设备、电视机，等等。
      CSS3中加入了Media Queries模块，该模块中允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式。换句话说，允许我们在不改变内容的情况下在样式中选择一种页面的布局以精确地适应不同的设备，从而改善用户体验。
      我们知道，在不同的设备中，浏览器的窗口尺寸可能是不同的，如果只针对某窗口尺寸来制作网页，在其他设备中呈现该网页时就会产生很多问题，如果针对不同的窗口尺寸制作不同的网页，则要制作的网页就会太多。
      为了解决这个问题，CSS3中单独增加了Media Queries模块，使用这个模拟，网页制作者只需要针对不同的浏览器窗口尺寸编写不同的样式，然后让浏览器根据不同的窗口尺寸来选择使用不同的样式即可。
      到目前为止，Media Queries模块得到了Firefox，Safari，Chrome及Opera浏览器的支持。
      Media Queries的使用方法：@media 设备类型 and(设备特性)｛样式代码｝
      在代码的开头必须要书写"@media"，然后指定设备类型，也可以称之为媒体类型。CSS2.1中定义了10种设备类型，在此处可以指定的值与该值所代表的设备类型如下： 阅读全文

      Strategy Analytics研究报告指出：2013年前将有10亿台支持HTML5的手机售出。与2011年3.36亿台的数字相比，这是一个相当大的增长。预计大部分的增长会来自北美、欧洲、亚洲，和苹果、微软、Google和Adobe的支持也是分不开的。为避免误会，该调查公司对HTML5手机的定义是：能通过网页浏览器完整支持HTML5的手机，比如iPhone 4S。
      尽管该技术尚未成熟，但HTML5跨平台的特性让手机行业相关产商无法忽视。HTML5能把各种平台汇合到一起，包括智能手机、多功能手机、平板、笔记本、台式机、电视、甚至于汽车。
      今年夏天，ABI Research也预测在2016年前会有超过21亿台带HTML5浏览器的移动设备。尽管在2014年之前HTML5的标准还无法正式确定，ABI预测目前处于发展阶段的HTML5特性会在接下来几年内被广泛应用。在视频领域，HTML5已经取得了巨大的进展。较早前Adobe 宣布放弃移动版的 Flash 开发，而全面转向 HTML 5，为 HTML 5 与 Flash 之间的争论画上了一个句号。
      无论是在2013年前达到10亿，还是在2016年前达到21亿，HTML5明显已成为移动领域的一大趋势。