50个增强网页兼容性设计模版.docxVIP

50个增强网页兼容性的设计模版 关于作者：Igor Ovsyannykov —— 19岁的奇客、博客玩家，设计师 数字时代已经到来，适者生存。智能手机、平板电脑（比如iPad）、笔记本电脑逐年递增。进入所谓的“后个人电脑时代”，现代网页设计师的任务更加 艰巨了。现在，增强网页兼容性设计都成了邻里之间谈论的话题了。网页设计师和开发者每天都在忙活。同时无缝云储存技术也会变得渐渐流行。网页正在革新，紧 跟时代潮流刻不容缓。 网页兼容性设计到底是什么？网页兼容性设计并不是什么新鲜事，让我们回到图形输入板的时代，设计师会选择动态或静态设置。而如今的兼容性设计就是用了类似的方法，通过使用以百分位和 em为单位的变动宽度。还不止这些，图片可伸缩、页面布局也可调整。所有这些取决于用户使用的显示器屏幕尺寸。在网页兼容性设计里，有三点非常重要： 灵活性强的页面布局——兼容性设计的第一步应该是创建一个灵活易变的页面。因为随着浏览器的宽度的变化，fluid grids 必然会重置内容排版。 HYPERLINK / \t _blank Tiny Fluid Grid 就是一个创建 fluid grids 好工具。用户可以免费使用，赶紧试试吧。 灵活的图片处理——显然，图片处理是非常重要的。这里分享了很多方法。用户可以设置动态图片，或者剪裁图片。通过结合两种方法，当你可以任意调整图像到一个特定的大小。 Media Queries 代码——在CSS3, W3C（网页制作技术）里，很容易添加 media queries。media queries和conditional comments差不多。比如，你可以为较大的浏览器选择某种风格的显示页面，同时还可以为不同屏幕尺寸的移动终端选择不同风格的显示页面。Media queries允许设计师用同种代码内容创建多种页面布局。为了实现可伸缩性，根据一定的参数（比如，小尺寸、方向等），设计师会用CSS media queries设计出不同的页面风格。 结论网页兼容性设计对于拥有自主网站的企业来说是非常重要的。据 Google Analytics 统计，超过33%的用户是用手机浏览器浏览这个网页的。个人觉得有必要丰富、简化用户的浏览体验。我们可以对网页兼容性趋势抱有争议，但是不可否认，兼容 性设计确实能够提供我们各种设计难题的解决方案。 一如既往，我们的目的是激发用户灵感和推动用户发展。这次，我们搜集了一些网页兼容性设计的优秀模版供读者们参考。以下网页适用于任何尺寸的屏幕。光看是没用的，请亲自试试吧。  HYPERLINK http://www.touchtech.co.nz/ \t _blank Touch Tech  HYPERLINK / \t _blank More Hazards 之前发布的《 HYPERLINK /archives/26069 \t _blank 网页设计中40个色彩运用Icon设计的最新优秀案例》中也推荐过此网站。  HYPERLINK / \t _blank Get Skeleton 上周发布的《 HYPERLINK /archives/35764 \t _blank 分享：20个增强网页兼容性设计的实用工具》中也推荐过此网站。  HYPERLINK http://www.designmadeingermany.de/magazin/5/ \t _blank Design made in Germany Magazine 5 之前发布的《 HYPERLINK /archives/27765 \t _blank Inspiration: 60个黑白网站新案例》中也推荐过此网站。  HYPERLINK http://earthhour.fr/ \t _blank Earth Hour  HYPERLINK / \t _blank CSS-Tricks  HYPERLINK / \t _blank Spigot Design  HYPERLINK http://staffanstorp.se/ \t _blank Staff Anstorp  HYPERLINK / \t _blank Forefathers  HYPERLINK / \t _blank Conferencia Rails  HYPERLINK / \t _blank Designing With Data  HYPERLINK / \t _blank Form CMS  HYPERLINK / \t _blank The Happy Bit  HYPERLINK / \t _blank Webdesign Yorksh