随着屏幕尺寸和设备(包括游戏机、网络电视)的不断发展,原有的网站设计方法已经完全不能满足这一任务。随着企业意识到需要优化移动用户的在线体验,那些不合适的设计师将被抛在脑后。响应式网站设计将取代传统的网站设计。今天,将讨论什么是响应性网站设计。

响应设计的主要组成部分是使用响应式网站设计。它的内容或布局可以自动适应屏幕的大小。从根本上讲,响应式网站设计的三个主要要素是灵活的网格、灵活的图像和媒体查询,这是CSS3的一部分。

灵活的网格基本上是主题和模板,其中设计元素以百分比而不是像素设置。以百分比计量,这意味着设计为50%的元素将始终占据屏幕的一半,而不管屏幕的大小。

本质上,这意味着如果一个元素大于它的容器,规则会强制它匹配容器的宽度。此外,由于现代浏览器将按比例调整图像大小,因此图像纵横比也可以保持不变。此外,100%规则也可以用于几乎所有其他元素,例如嵌入式视频。

但是,分辨率不是可以通过使用媒体查询来控制的设计元素。浏览器窗口的宽度和高度、水平和垂直,甚至布局都是可以设置的其他参数。例如,如果媒体查询检测到设备是智能手机,则可以加载一个设计,该设计在计算机屏幕上显示三列文本区域和两个垂直侧边栏,同时,它可以在智能手机屏幕上加载全文区域,其中两个侧栏作为下面的水平元素。

柔性设计的关键要求是设计人员具有灵活的设计思想。不幸的是,大多数网页在移动设备上仍然不那么友好,主要是因为大多数设计师通常使用智能手机和平板电脑来台式机。很少有设计师考虑设计的多个平台。将媒体查询合并到样式表有一条学习曲线,但它是从像素设计到百分比设计的过渡,这就阻止了一些web设计者的工作。事实上,按百分比设计其实没有什么区别,而且更容易。例如,考虑为两个相同元素之间的差异分配100%和100像素宽度。总之,您可以确保这个元素将填充屏幕,无论是桌面、笔记本电脑还是iPhone。不过,480像素iPhone屏幕上宽度为100像素的元素会很大,而分辨率为1600倍;900像素的桌面屏幕将非常小。

对于企业来说,实施响应式网站设计的主要原因显而易见。潜在客户越容易导航并找到他们想要的东西,转化率就越高。然而,对于许多设计师来说,企业网站的响应性设计通常只意味着缩小内容大小以适应更小的屏幕。任何花时间浏览、放大和缩小以找到所需信息的人都知道,微型站点不是解决方案。企业和设计师处理移动设备设计问题的另一种方法是为不同的设备创建单独的站点,并根据设备自动重定向。这提供了一个良好的界面,并避免了JavaScript和大型图像导致的缓慢加载。当然,这种方法有很多缺点,其中之一就是创建和维护多个站点以及协调它们之间内容的成本。当新设备出现时,还有另一个新的场地要建。幸运的是,如果做得正确,响应式网站设计可以解决移动设备设计中的几乎所有问题。