响应式Web设计——最佳指南

2012年被称为智能手机年。根据最近一份调查显示,美国的智能手机覆盖率已达50%。现在确实是提升移动终端用户体验的大好时机。如果你正运营一个网站,那就必须有一个响应式的Web设计,以便可以从移动终端上很好地访问你的网站。如果你还没意识到响应式设计的盛行,你应该多去了解一下它。

响应式Web设计


首先了解什么是响应式Web设计,这一点很重要。精确的说,响应式Web设计是一种技术,可以使网站适应于任何设备。任何设备,可以是智能手机、平板电脑、TV、PC显示器、iPhone和Android手机,包括横向、纵向的屏幕。你需要做得只是正确地实现响应式Web设计,到时你的网站就可以很 好地适合各种设备。

响应式设计的替代方案



自从移动设备成为除桌面浏览器外的另一选择时,响应式Web设计便开始广泛流行起来。有些人认为响应式Web设计是让更多人访问该网站的最佳方法。但有些网站由于太复杂而无法实现响应式Web设计。针对这样的网站,有如下两个解决方案:

开发针对网站的、完全独立的移动版本

如果你认为你现在的网站无法实现响应式Web设计,你可以为你的网站再开发一个全新的移动版本。如果用户通过移动终端访问你的网站,他们将被引导至网站的移动版本;系统将检测他们的智能手机,相应地显示网站内容。

开发移动应用

如果不想陷入设计响应式网站的麻烦之中,开发一个移动应用是最好的办法。但单独开发移动应用可能会很昂贵,同时它也不是“开放Web”的一部分,搜索引擎无法找到他们。

响应式Web设计的优点和缺点

不要认为响应式Web设计是针对移动终端的万能解决方案。它并不能真正替代移动网站。但它非常受欢迎,且有很多优点。世间万物,有优点,必有缺点。响应式Web设计同样也有缺点。让我们来看一下响应式Web设计的正反两个方面。

优点


1.对用户友好
很显然,响应式Web设计可以向用户提供友好的Web界面,因为它可以适应几乎所有设备的屏幕。现在技术发展日新月异,每天都会有新款智能手机推出。如果你拥有响应式Web设计,用户可以与网站一直保持联系,而这正是开发响应式网站的目的所在。

2.移动频段(Mobile Segment)
在响应式网站的帮助下,你可以获得网站流量的全景图。你需要做的只是创建一个移动频段(的流量统计),以获得与网站流量相关的所有必要信息。流量的状态在分析网站性能及采取必要措施提升性能方面十分有用。

3.积累分享
响应式Web设计可以让你(作为网站的拥有者)通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网站而做出积极贡献。

4.最佳化搜索引擎
搜索引擎也在变得越来越聪明,它们足够智能可以完成移动网站和桌面网站的连接。

5.无重定向
响应式Web设计最大的优点之一是,你不必在乎任何重定向,它包含无用户代理定向。所以当你很少负责解决重定向及定向用户时,这是一件很棒的事情。

6.更少维护
开发一个独立的移动网站,会增加你的工作负担。实际上你就拥有了两个独立网站。如果你有一个响应式网站,维护的成本将会很小,因为它只有一个布局,且可工作在所有类型的设备上,而这可以明显地减少你的工作量。

缺点


1.加载需要一定的时间
虽然,它不是一个大问题,在响应式设计中,需要下载一些看起来并不必要的HTML/CSS。除此之外,图片并没有根据设备调整到合适大小,而这正是导致加载时间加倍的原因。

2.优化搜索引擎
对于响应式Web设计,为搜索引擎确定关键字不是一件容易的事。因为相比一般桌面用户,移动用户多采用不同的关键字,修改标题及其他事项都比较困难。

3.Google排名
如果响应式网站仅基于移动内容,它可能会影响到网站的Google排名。因为Google不支持这样的网站,它不会对你的网站进行索引。

4.时间花费
开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站,可能耗时更多。如果你想要一个响应式网站,最好从草图开始重新设计。

5.布局
响应式Web设计的布局主要是液态的,这也正是设计者对设计样式不好控制的原因。而且眼下正是设计者提前展示各种“复制品”的时候。设计者试图针对移动和桌面布局分别显示线框和设计原型。只有等到这两种布局均得到提高后,响应式Web设计策略才能真正实现。

结论


响应式Web设计并非适合所有类型的网站。尽管,由于技术上的最新进步,从移动设备上访问网站的数量已经增长,但在顶端、最著名的网站中,只有9%拥有他们的移动网站。最新好消息,Google已经推荐使用响应式Web设计,这将使其更加流行。

来源:立方网http://www.L99.com
立方网(www.L99.com)——立体交友,极品分享,给记忆一个落脚的地方!

 

转载于:https://www.cnblogs.com/shijianzhou/archive/2012/06/29/2569867.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361388.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Eclipse扩展的轻量级集成测试

最近,我为Eclipse扩展点评估引入了一个小助手。 辅助程序努力减少通用编程步骤的样板代码,同时增加开发指导和可读性。 这篇文章是希望的后续文章,展示了如何将实用程序与AssertJ定制断言结合使用,以编写针对Eclipse扩展的轻量级…

原生js实现简单的焦点图效果

用到一些封装好的运动函数&#xff0c;主要是定时器 效果为图片和图片的描述定时自动更换 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><style type"text/css">ul,li,p,h3 {padding: 0;…

二:熟悉 TCP/IP 协议

一篇文章带你熟悉 TCP/IP 协议&#xff08;网络协议篇二&#xff09; 同样的&#xff0c;本文篇幅也比较长&#xff0c;先来一张思维导图&#xff0c;带大家过一遍。 一图看完本文 一、 计算机网络体系结构分层 计算机网络体系结构分层计算机网络体系结构分层不难看出&…

NYOJ 451(组合数+全错位)

光棍节的快乐 时间限制&#xff1a;1000 ms | 内存限制&#xff1a;65535 KB难度&#xff1a;2描述光棍们&#xff0c;今天是光棍节。聪明的NS想到了一个活动来丰富这个光棍节。 规则如下&#xff1a; 每个光棍在一个纸条上写一个自己心仪女生的名字&#xff0c;然后把这些纸条…

在Completablefuture和Observable之间转换

Java 8中的CompletableFuture<T>是对T类型的值将来将可用的承诺的高级抽象。 Observable<T>非常相似&#xff0c;但是它承诺将来会出现任意数量的项&#xff0c;从0到无穷大。 异步结果的这两种表示与仅使用一项即可使用Observable而不是CompletableFuture情况非常…

Box 'laravel/homestead' could not be found.

vbox vagrant.box Homestead 都安裝好的情況下。在homestead目錄下&#xff0c;執行vagrant up出錯 Homestead\scripts\文件夹中&#xff0c;打开homestead.rb文件打开homestead.rb文件 把config.vm.box_version settings["version"] || "> 0.4.0"改为…

DOM操作案例之--全选与反选

全选与反选在表单类的项目中还是很常见的&#xff0c;电商项目中的购物车一定少不了这个功能。 下面我只就用一个简单的案例做个演示吧。 <div class"wrap"><table><thead><tr><th><input type"checkbox" id"j_cbA…

沈阳出差归来

两个礼拜的出差终于结束了&#xff0c;现场开发锦江之星晚上熬夜到2点...我们开发着并快乐着&#xff0c;至少有一点是出差最大的收获&#xff0c;如何在高强度的项管中把握每个人的内心活动&#xff0c;在最及时的时候给与最贴心的帮助&#xff0c;以至于能让开发人员得到满足…

带有Swagger的Spring Rest API –公开文档

创建API文档后&#xff0c;将其提供给涉众非常重要。 在理想情况下&#xff0c;此发布的文档将具有足够的灵活性以解决任何最新更改&#xff0c;并且易于分发&#xff08;就成本以及完成此操作所需的时间而言&#xff09;。 为了使这成为可能&#xff0c;我们将利用我在上一篇文…

Laravel 不同环境加载不同的.env文件

假设有4个.env文件。分别为 .env.local .env.dev .env.test .env.prd 方式一 第一步&#xff1a;bootstrap\app.php 加入代码 $envs [local,dev,test,prd]; $env get_cfg_var(env); if(empty($env) || !in_array($env, $envs)){exit(no env files); } $env .env..$env; $app…

伪类 选择器优先级

:link 匹配所有未被点击的链接&#xff1b;a:link{color:red} :visited 匹配所有被点击的链接&#xff1b;a:visited{color:red} :hover 匹配鼠标悬停其上的E元素 a:hover{text-decoration:underline} :active 匹配鼠标已经其上按下&#xff0c;还没有释放的E元素 a:active{…

hinkphp项目部署到Linux服务器上报错“模板不存在”如何解决

检查了服务器上的文件&#xff0c;并没有缺少文件&#xff0c;再次上传文件到服务器&#xff0c;还是报错。莫名其妙&#xff0c;怀疑是代码问题。 仔细检查后&#xff0c;发现是模板的文件名问题&#xff1a; 用过TP的都知道&#xff1a;thinkphp会在$this->display()的时候…

VS2008调试总结

从文件Form1.cs和文件Form1.Designer.cs中&#xff0c;可以看到它们定义了同一个类Form1&#xff0c;并且都有一个关键字partial。该关键字作用是允许类分开定义&#xff0c;并且可以将类定义放在不同的文件里面&#xff08;命名空间必须相同&#xff09;。 总结上述三个文件&a…

使用FizzBu​​zz和JUnitParams进行单元测试

我有时使用FizzBu​​zz向新手演示单元测试的基础。 尽管FizzBu​​zz确实是一个简单的问题&#xff0c;但它也可以用于演示更高级的单元测试技术&#xff0c;例如实现参数化测试。 FizzBu​​zz的可能解决方案之一是&#xff1a; public class FizzBuzz {private static fin…

Elements in iteration expect to have v-bind:key directives错误的解决办法

一、错误如下[eslint-plugin-vue][vue/require-v-for-key]Elements in iteration expect to have v-bind:key directives.Renders the element or template block multiple times based on the source data. 使用VS Code 出现如下问题&#xff0c;如图 二、解决 在用vscode编写…

统计年鉴 付费下载 夏泽网

夏泽网链接 转载于:https://www.cnblogs.com/camelroyu/p/11597533.html

浏览文件按钮

private void btnSelect2_Click(object sender, EventArgs e){string path GetPath();if (!string.IsNullOrEmpty(path)){tbText2.Text path;}}private string GetPath(){OpenFileDialog fileDialog new OpenFileDialog();fileDialog.Title "选择文件";fileDialo…

无法使用JDK 8卸载JavaFX SceneBuilder 1.0

我最近从旧的基于Vista的笔记本电脑中删除了一些我曾经使用过的软件开发应用程序&#xff0c;工具和文件&#xff0c;因为主要使用该笔记本电脑的人们现在对软件开发不再感兴趣。 作为该工作的一部分&#xff0c;我尝试删除了几年前在该笔记本电脑上安装的JavaFX Scene Builder…

分享一个不错的表格样式

先贴个HTML生成的源码出来&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"> <head>…

微信小程序如何检测接收iBeacon信号

前话 微信小程序开发带着许多坑&#xff0c;最近就遇到了个需求&#xff0c;检测iBeacon来进行地点签到。 (╯▔皿▔)╯ 微信小程序对于iBeacon的文档也写的十分精简&#xff0c;只简单介绍了每个接口的作用&#xff0c;这就导致我以为简单调用单个接口即可实现功能&#xf…