响应式网站建设

WordPress技术博客wp应用技术

响应式网站建设

什么是响应式的网站设计?

响应式网页设计,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的!

在这种架构的设计之上,不管您的用户使用何种终端访问您的网站,都能够自动识别适应终端设备的分辨率以及宽度,让您的网站在众多设备中无缝浏览。对于智能手机和平板电脑的逐渐普及,普通的网站对于这些持有移动设备的用户来说,访问无疑是困难的,他们必须在设备上放大和缩小整个网页,以便能够阅读适合字体大小,稍不小心可能会点错进入别的区域,这种状况在响应式网页设计中会有所改善。

如何建设响应式网站?

我们在这一技术开发和学习的过程中,总结了响应式网站的建设应当分为如下几个几段和特点:

设计环节:

为了适应不同的分辨率,我们所需要设计的版本总结起来有三种形式:

1 . 17寸显示器到22寸以上显示的分辨率排版以及动画效果

2. ipad横竖尺寸的排版以及动画效果

3. iphone终端的横竖排版效果。

三种设计稿虽然内容一致,但是必须实际的做出设计,否则变形起来会非常别扭。

设计风格: 由于下拉式的拖移访问是移动触屏设备的通用访问方式,所以在做整体设计上,我们建议采用长页面设计,而并非传统的导航分为雷打不动的5个页面切换(首页、关于我们、新闻、产品、联络),把这些页面整合起来,放在一个长页面中,让用户无需点击去另一个页面,就能够访问到整个网站的重要信息!

效果:作为传统网页的动画效果,大部分都是通过鼠标经过而触发的(hover),但是在移动设备上,触屏设备是无法触发这种鼠标经过的效果(设备的控制是直接接触,而非区域感应),在移动设备的动画效果中,我们使用网站下拉到一定的区域触发动画(效果可见工作室网站),这样的效果不仅在移动设备上表现非常出色,在个人桌面电脑上也毫不逊色。

前端设计:前端设计中,从不同浏览器支持判断使用不同的样式表(CSS),从而改善哪些老旧的,低性能的浏览器(ie6、ie7、ie8)访问感受,这些浏览器对新的技术(CSS3、HTML5等)无法支持,所以使用旧的技术让他们表现出合适的状态,适合低端浏览器用户访问,整个区域采用百分比宽度设计,自动缩放图片,使整个网站的区域始终不会撑出浏览器。

性能:由于设计风格是长页面设计,对资源的下载会有一定的时间要求,这里我们采用GZIP网页压缩技术,能够要压缩网页大小的30%,让用户使用缓存(cookies)而非重新下载,从而更快捷的访问,图片的使用尽量精简,使得整个网页的设计整洁,简洁而访问速度大大加快!

移动设备访问量逐年增加

    全球有超过53亿手机用户(包括传统手机)
国内3G用户超过1亿
iPhone4手机在2010年出货量超过3000万部;
iPhone 4S上市前3天卖掉400万部;
Android手机每天激活超过50万部;
iPad出货量已经超过2.5亿部;
预计到2015年,移动互联网的数据流量将超越桌面端的流量。
。。。

嗯,大家也许已经开始注意到,自己和身边的朋友也都越来越多的用上了iPhone或者android手机或平板——一两年前我们预料的移动互联网时代即将来临,现在已然实现了——我们正处在移动互联网快速发展的时代——已经不再是起步阶段了。

马上联系我们,改版自己的网站吧!

上一篇:

下一篇:

文章评论

您好!请登录

取消回复
    展开更多