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

数字时代已经到来，适者生存。智能手机、平板电脑（比如iPad）、笔记本电脑逐年递增。进入所谓的“后个人电脑时代”，现代网页设计师的任务更加艰巨了。现在，增强网页兼容性设计都成了邻里之间谈论的话题了。网页设计师和开发者每天都在忙活。同时无缝云储存技术也会变得渐渐流行。网页正在革新，紧跟时代潮流刻不容缓。

网页兼容性设计到底是什么？
网页兼容性设计并不是什么新鲜事，让我们回到图形输入板的时代，设计师会选择动态或静态设置。而如今的兼容性设计就是用了类似的方法，通过使用以百分位和em为单位的变动宽度。还不止这些，图片可伸缩、页面布局也可调整。所有这些取决于用户使用的显示器屏幕尺寸。在网页兼容性设计里，有三点非常重要：

• 灵活性强的页面布局——兼容性设计的第一步应该是创建一个灵活易变的页面。因为随着浏览器的宽度的变化，fluid grids 必然会重置内容排版。Tiny Fluid Grid 就是一个创建 fluid grids 好工具。用户可以免费使用，赶紧试试吧。
• 灵活的图片处理——显然，图片处理是非常重要的。这里分享了很多方法。用户可以设置动态图片，或者剪裁图片。通过结合两种方法，当你可以任意调整图像到一个特定的大小。
• Media Queries 代码——在CSS3, W3C（网页制作技术）里，很容易添加 media queries。media queries和conditional comments差不多。比如，你可以为较大的浏览器选择某种风格的显示页面，同时还可以为不同屏幕尺寸的移动终端选择不同风格的显示页面。Media queries允许设计师用同种代码内容创建多种页面布局。为了实现可伸缩性，根据一定的参数（比如，小尺寸、方向等），设计师会用CSS media queries设计出不同的页面风格。

结论
网页兼容性设计对于拥有自主网站的企业来说是非常重要的。据 Google Analytics 统计，超过33%的用户是用手机浏览器浏览这个网页的。个人觉得有必要丰富、简化用户的浏览体验。我们可以对网页兼容性趋势抱有争议，但是不可否认，兼容性设计确实能够提供我们各种设计难题的解决方案。

一如既往，我们的目的是激发用户灵感和推动用户发展。这次，我们搜集了一些网页兼容性设计的优秀模版供读者们参考。以下网页适用于任何尺寸的屏幕。光看是没用的，请亲自试试吧。

Touch Tech

More Hazards

Get Skeleton

Design made in Germany Magazine 5

Earth Hour

CSS-Tricks

Spigot Design

Staff Anstorp

Forefathers

Conferencia Rails

Designing With Data

Form CMS

The Happy Bit

Webdesign Yorkshire

Simple Bits

Owltastic

do Lectures

Trent Walton

2011 dConstruct

Stephen Caver

Electric Pulp

Teixido

Robot or Not

Tee Gallery

Urban Svensson

Authentic Jobs

Ribot

Asbury Agile

Sweet Hat Club

Cognition

CSS Grid

Lynn and Tonic

CalebAcuity

iaWriter

Miekd

Impact Dialing

Red Root

Paul Adamsmith

51bits

Glitch

Pgrady

See Sparkbox

Lanyrd

8Faces

Clearleft

10K An Event Apart

Boston Globe

Melt Media

Illyissimo

Food Sense