显示标签为“响应式设计”的博文。显示所有博文
显示标签为“响应式设计”的博文。显示所有博文

2013年8月5日星期一

传统网站如何变为响应式设计


响应式网站设计已经成为目前主流的网站设计模式,那么对于传统网站,应该如何让它实现响应式设计呢?是否需要进行网页的重构?
WDOPS提倡在XHTML(HTML) + CSS文件里将页面内容、布局、颜色、字体设计等分开,如果在当初进行设计时严格遵守了这一原则,那么在响应式设计中,只需要更改页面布局相关的CSS内容。对于固定宽度和像素的页面,需要按比例换算成百分比模式。
是否需要进行页面重构,这就要看网页在"裸奔"情况下是否可以有序的展示,如果在CSS无效的情况下网页无法有序地展示内容,那么是必须重构的,其实这跟是否进行响应式设计无关,符合W3C的HTML + CSS标准,是对网页结构的最基本要求。
一般而言,出于展示的原因,移动设备不太适合内嵌网页地图等元素,这就需要在CSS文件里面做相应的调整。另外,若从用户的手机流量和网速方面考虑,大页面最好还是进行重构,以减小用户向服务器请求的数据量。因为过大的数据请求一方面会增加用户在手机流量上的开销,更重要的一方面会降低页面的加载速度,导致移动设备的用户体验变差。

支持响应式网站设计的条件

响应式设计之所以会产生是由于新出现的各种设备(如智能手机、Pad、Tablet、宽屏电视、普通电脑显示器等)的浏览器(或浏览器模块,如android系统的webView等)支持对CSS3 Media Queries的解析。
响应式网站设计无法普及到传统的非智能手机,但是对于采用主流移动操作系统的手机都是可以支持的。对于将来的新设备,只要其中的浏览器支持CSS3特性,那么它依然可以支持响应式设计。

响应式网站设计是大势所趋

响应式设计是在展示设备日趋多样化这一背景下产生的,可以预见,只要设备生产厂商一日不统一,响应式设计就会一直发展以满足不同规格设备的页面展示,如此看来确实给我们呈现出一种时代产物的感觉。
我们在这里提及响应式网站设计中两个紧密的伙伴: HTML5和CSS3,HTML5是最新的标准,用来做一些性能出色的Web应用。而响应式设计利用CSS3的特性可以弹性布局页面上的元素,对HTML5开发的Web应用而言是最好的协助。二者的结合已经成为当前网站设计的趋势。
相关阅读

2013年7月31日星期三

响应式设计逐渐成为趋势


现今,无论是移动设备还是平板电脑亦或是PC屏幕,屏幕大小各不相同,若是针对每个屏幕大小单独设计一个解决方案,则会大幅增加网站建设的复杂程度和运营成本。响应式Web设计的概念就是可以让网页根据用户的使用环境进行自动调整,有效的改善用户体验。

什么是响应式设计?

响应式设计的概念由著名网页设计师 Ethan Marcotte 在2010年5月份提出,其目标是要让设计的网站能够响应用户的行为,根据不同终端设备自动调整尺寸。通俗地讲,响应式设计是指可以自适应屏幕宽度、并做出相应调整的网页设计。一个网站能够兼容多个终端(iphone、ipad、android),而不是为每个终端做一个特定的版本,这样就可以不必为不断到来的新设备做专门的网站版本设计了。

响应式设计的基本原理

网页的宽度使用百分比制以及利用CSS3 Media Queries语句事先设定各种分辨率下的页面布局。相当于对同一个网页,设计师要进行好几份设计(例如宽屏下的三栏设计、普通屏幕下的两栏设计以及移动设备上的单栏设计等)。但现在似乎还没有一个比较统一的CSS框架或设计模式来减少CSS设计师的工作量。

响应式设计的用户体验

一个网站若是没有良好的用户体验,即便有诱人的内容也无法很好的吸引用户。响应式设计虽然可以合理的呈现给我们想要的内容,但并不是将整个网页完美的缩放给我们。由于移动设备屏幕大小的限制,在其上进行显示的内容一般是经过精心筛选的。过多的内容会使页面看起来杂乱不堪,用户也很难找到自己想要的东西,根据WDOPS的经验,比较好的做法是留下少部分最重要的内容直接进行展示,其余的部分可以先隐藏起来,用户点击时再展开。这样信息都保留在了页面上,但是不会一次性的全都推到用户面前,用户可以按需索取想要了解的内容。对于移动设备流量上的考虑,可以设计成AJAX模式,而不是预先加载所有的页面数据,这样可以节省一部分的流量。

响应式设计对于SEO的影响

相对传统的网页设计来说,响应式设计对搜索引擎更加友好。Google的官方建议也是优先采用响应式设计。https://developers.google.com/webmasters/smartphone-sites/

响应式设计正成为通行的趋势

越来越多的公司开始采用响应式设计,今年微软也开始重新设计自己的网站。

WDOPS为您建设的网站采用响应式设计

我们依据"一次设计,普遍适用"的原则,让您的网站能自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout),能同时适应个人电脑,平板电脑,手机等各种的平台,提供优秀的用户体验。