这篇文章,我们会说明「RWD 响应式网页设计」是什么,以及响应式网站的重要性。移动设备(Mobile)日益兴起,有极大部分的网络用户,都是通过手机等 .. 移动设备来进行企业服务查询、电商购买、知识搜索等 .. 行动。因此,响应式网站(Responsive Website Design,简称 RWD)的设计,就变得十分重要。但你知道,RWD 响应式网页和自适应网站(Adaptive Website Design,简称 AWD)有什么不同吗?
我们会一同介绍响应式设计和自适应网站是什么,以及两者的差别!
- 手机版网页设计重要吗?
- 响应式设计如何呈现手机屏幕画面?
- 非响应式设计网页,在手机上会如何呈现?
- 响应式设计(RWD)v.s 自适应设计(AWD)
- 响应式网页(RWD)是什么?
- 自适应网页(AWD)是什么?
- 如何分辨网页是 RWD 还是 AWD?
- RWD 和 AWD 优缺点,完整表格比较
- 响应式设计和自适应设计,选择哪个更好?
- 使用 RWD 响应式设计,对 SEO 排名好处?
手机版网页设计重要吗?
开始设计网页,或是委托网页设计公司前,我们必须先了解一个重要的观念,那就是电脑、平板、手机等 .. 不同装置,都需针对其屏幕大小,进行设计。
尤其手机版本的网页设计更为重要,因为谷歌统计约有58%的搜寻是由手机端产生,搜寻量已远超过电脑版的次数,因此,让手机版的网页画面更好阅读,是刻不容缓的紧急任务。
有时使用手机设备观看网页,会看见不同的网页设计,可能是按钮、图片、文字位置不同,也可能是排版具有极大改变,这就是经过「响应式设计」的网页。
响应式设计会如何呈现手机屏幕画面?
网页内容可依照设备屏幕宽度不同,立即反应在排版上,这就是「响应式设计」的重要用途。
另外,还有将电脑版网页和手机版网页分开来制作的「自适应设计」。
这 2 种设计方式虽然不同,但都可以自然的呈现手机版网页。
非响应式设计网站,在手机上会如何呈现?
若没有使用相关的响应式设计,网页在手机版面上的呈现,可能会有变形的情况,导致用户难以阅读。
以下是来自 DequeUniversity 制作的没有套用响应式设计网页的范例:
可以看见,没有响应式网页设计的网站,会让手机版的页面难以阅读,用户必须使用手指滑动放大,造成不便。
所以使用响应式设计,将电脑版网页和手机版网页做出区分设计,是非常重要的事情。
响应式设计(RWD)v.s 自适应设计(AWD)
我们已经了解,将手机版网页重新设计成适合屏幕尺寸的视觉,让用户有更良好的体验,是很重要的。
将电脑版和手机版网页分开设计,有 2 种技术,分别是响应式设计和自适应设计。
那么,这 2 种不同的网页设计形式,分别是什么? 有什么区别呢? 我们继续往下看吧 ..
响应式网页(RWD)是什么?
响应式网页(RWD)英文原文为 Responsive Web Design ,也称作回应式网页设计。 可让网页自动在电脑、平板、手机等 .. 不同设备的屏幕上,自动切换不同设计样式,让网页画面更方便阅览。
RWD 的技术核心为读取同一个 CSS 文档,依照不同屏幕宽度,来显示网页设计排版。
桌机、平板、手机都是用同一个 HTML 代码和同一个 CSS 文档,能依照不同屏幕宽度的条件,来改变排版。
- CSS 是什么: CSS 是一种网络设计语言,不能单独使用,必须和 HTML 一起应用在网页制作上,主要用途在网站的样式美化。 另外,「媒体设备查询 @media」是 CSS 重要的能力之一,透过它可分辨开启网页的浏览器宽度大小,实时读取不同的样式呈现,就能达成 RWD 响应式效果。
因为手机设备的使用需求日益上升,于是响应式网页受到 Google 的推荐和奖励。
Google 会在 SEO 排名时,考虑该网站设计对移动式设备的友好程度。 如果你的网站没有使用 RWD 设计,你的网站关键词排名就会降低。
除了SEO排名外,响应式设计还可以提升用户体验,从而提升一定的转化率。
使用特色
- 响应式设计,可协助 Google Bot 快速读取网页索引,编列网站文档,不必跟着指定讯息前往相对应的电脑版 / 手机版页面,有利于机器人判读程序码。
- Google Bot 检索网站资料时,可节省爬取预算,所以 Google 鼓励站长使用响应式网页。
- 开发过程容易,降低人力成本,并且开发迅速,可快速取得网站。
- 只需要维护一组 CSS 文档,降低工程师处理时间,自然降低维护成本。
- 降低移动版网站加载错误的机率,像是:重定向错误、重复内容错误等 .. 。
- 资料可即时同步,更新网页内容较方便快速。
自适应网页(AWD)是什么?
自适应网页设计(AWD)英文原文为 Adaptive Web Design,跟响应式网页(RWD)一样,可在同个页面依据适合屏幕尺寸,呈现不同的视觉设计。
在不同的装置开启网页时,AWD 会先判定装置屏幕尺寸是哪一种,来读取不同的 CSS 文档,呈现网页设计排版。
但相对于响应式设计(RWD)网站,开发和维护会更花费心力。 因为 AWD 需要为一个网站设计多个 CSS,会增加工作复杂程度和开发成本。
虽然和响应式设计一样,可以依据屏幕尺寸读取适合的 CSS 文档,但是因为响应式设计已经可以做到 AWD 可以做到的功能,并且自适应网站开发成本较高,所以目前已渐渐在市场中消失。
使用特色
- 网页维护范围时间降低,因为 CSS 已经分好组,所以不怕电脑版 / 手机版被吃掉原本设计。
- 移动设备加载速度会更快,因为可针对单组CSS进行优化。
- 开发速度较缓慢,且人力&金钱成本会提高,因为要写出多组 CSS。
- 维护成本会相对提升,因为要维护两个以上的 CSS 文档。
- 较不利于SEO维护,容易有重复性内容问题,或者工程师误植两个网址,导致网站权重分散。
- 更新数据时,需要修改多组 CSS 文档,难以同步更新。
如何分辨网页是 RWD 还是 AWD?
基本上来说,是无法分辨的。 因为 RWD 响应式设计和 AWD 自适应设计,都会被放在同一个网站文档,只是依据 CSS 文档的不同,去分别呈现画面。
但还是有一个方法可以分辨,就是「 观察电脑版 / 手机版网页链接是否不同 」。
自适应网站是较早期就开发的技术,之前还不重视 SEO,所以会忽略将电脑版&手机版文档串联进同一个网址这个步骤。
像以上这种情况,只要分别进入手机版和电脑版网站,观察链接,若链接不同,就表示使用的是传统的自适应网站设计。
因为 Facebook、MOMO购物网 .. 都属于较早期开发的网站,因此分别进入电脑版和手机版网页,可以看见两个页面的网址是不同的,这就能分辨出,这 2 个网站使用的是「 自适应网站设计 」。
像是,原本桌机版网站连结为:https://example.cpm
进入手机版网页后,链接变更为:https://m.example.com
RWD 和 AWD 优缺点,完整表格比较
响应式设计(RWD)、自适应设计(AWD),这两种设计都各自有其优缺点,但哪一种选择更好呢?
整理了两个不同设计方式的优缺点做成表格,给站长们当作参考,希望能帮助到站长们:
比较项目 | 响应式设计(RWD) | 自适应设计(AWD) |
---|---|---|
运作逻辑 | 使用一组 CSS,在该组 CSS 中写入判断码,既可自动判断设备屏幕尺寸, 显示相对应网页版本。 |
写出多组 CSS,一般来说多为两套,一组电脑版 一组为手机版。 再依据屏幕尺寸宽度,叫出不同 CSS 文档。 |
适用网站 | 企业形象、个人品牌、中小型购物网站等 .. 一般需求网站。 | 大型平台网站,内容较多且复杂时才会考虑使用。 |
开发时长 | 快速 | 缓慢 |
加载速度 | △ | ✓ |
SEO 维护 | SEO 优化&维护容易。 | 需要有理解SEO策略的工程师,在同一个URL中,写出对应设备的CSS文档。 |
维护成本 | 较低,因为只需维护一套 CSS | 较高,因为需要维护多套 CSS |
开发费用 | 依网站复杂度,费用由低至中高皆有 | 依网站复杂度,费用由中高至高皆有 |
下个章节,我们会说明响应式设计和自适应设计选择哪个,会对网站有更好的成效。
响应式设计和自适应设计,选择哪个更好?
了解响应式设计(RWD)、自适应设计(AWD)是什么,以及各自的优缺点之后,那么站长也许会疑惑,选择哪一种来制作手机版网页会更好呢?
我们一致推荐站长们选择 RWD 响应式设计 」,这是因为,响应式设计适用大多数网站,已经是目前网页设计公司所使用的技术。
RWD 响应式设计:
最推荐站长使用的手机版网页制作技术,因为快速、开发&维护成本低、较适合大部分网站。
我们依据以下 4 种项目,说明响应式设计和自适应设计的差异和比较,以及为什么响应式设计(RWD)是最好的设计方式。
原因 1:开发时的时间成本
使用 RWD 响应式设计开发手机版网页,会是最快速的选项,因为只需要撰写一组 CSS 文档,并在适当的断点添加「 媒体设备查询 @media 」指令,即可自动适应不同屏幕尺寸。
AWD 自适应网站在开发时,会需要撰写电脑版 / 平板 / 手机版这 3 种 CSS 文档,来适应不同的屏幕尺寸,自然会增加开发时间。
通常网页设计公司,为了增加 AWD 开发速度,会将平板和手机版的 CSS 文档写在一起,这就会造成平板的画面有时可能会呈现不自然的状态。
所以,使用 RWD 响应式设计,不只节省开发时间,所需要花费的成本也会相对较低。
原因 2:网页建置预算
现今网页制作,大多都使用 RWD 响应式设计,因为 AWD 开发成本过高,并且 SEO 维护时需要较花费心力,所以站长需要付出较多的制作&维护费用。
RWD 响应式设计,开发迅速,工程师工作的时间较短,自然会比需要花费大量人力的 AWD 自适应网站还要节省预算。
原因 3:后续的维护成本
网页制作完成后,不论是使用哪一种方式制作手机版网页,后续的维护都是必要的,自然也会需要去评估,响应式设计和自适应设计的成本。
先看响应式设计,后续再更改网页设计时,虽然需要特别注意 CSS 文档的修改,因为牵一发动全身,但相对来说,只需要维护一份文档,对站长来说会是比较方便的选项。
而自适应网站,同样的修改,需要跑多组同样的流程,这样重复修改的流程,不只会耗费较多时间,也会消耗最多人力。
原因 4:SEO 排名优势
响应式设计对于SEO会是较良好的设置,因为AWD自适应设计需要为每个装置的CSS文档进行URL指向,较容易出错。
响应式设计会省去SEO前置步骤,自然会比较省时,也减少因为设置出错,导致SEO分数受到影响的机率。
在下个章节,我们会特别说明,使用 RWD 响应式设计对于 Google SEO 的好处,让站长们明白了以 SEO 角度来观察,选择 RWD 响应式设计 」会是高 CP 值的选择:)
小总结
整体来说,我们还是最推荐使用响应式设计,但并非 AWD 自适应网站就是不好的。
如果是大型平台网站,像是多达千件以上商品的购物商城,通常也可以考虑使用 AWD 设计,不过这种大型平台,多半会自己培养工程师撰写 AWD,因为很少有网页设计公司,会使用 AWD 技术。
一般的企业官网、个人博客、中小型购物商城,大多都使用 RWD 技术即可。
使用 RWD 响应式设计,对 SEO 排名好处?
Google 早在 2016 年就推出 Accelerated Mobile Pages (AMP)计划,目的是为了提升移动设备对网站的访问速度。
使用 RWD 响应式设计,对于 SEO 排名的好处,会相较 AWD 自适应设计和没有手机版设计的网站,来的更多。
这边我们整理出 4 点使用响应式设计对 Google SEO 的好处和优点,供站长参考。
优点 1:Google 等 .. 搜索引擎,鼓励响应式设计
Google、Bing、Yahoo 等 .. 搜索引擎,鼓励网站使用响应式设计。 更多 Google 资料来源。
因为RWD 响应式网页不只方便维护,也更方便 Google 等 .. 爬虫,抓取网站最新的数据。
即便 Google 也接受不同网址的自适应网站设计,但也在独立网址说明文件中,明确表示 Google 更喜欢响应式设计的页面。
优点 2:降低网页跳出率(Bounce Rate)
如果用户在移动式设备,点击进入网页,却发现不能顺利浏览,或者是手机版页面的设计不够友善,那么用户便会跳回搜索结果页面,增加了网站的跳出率。
跳出率会影响到SEO,Backlinko研究,排名越低的网站,跳出率就越高。 更多网站跳出率是什么。
如果使用 AWD 自适应设计,忘记分配好 URL 设置,导致使用手机版的访客,不小心从手机读取到电脑版页面,那么,跳出率就可能大幅提升,从而降低 SEO 分数 .. 。
优点 3:避免重复性网页内容
目前响应式设计和自适应设计,都会尽量在同一个 URL 中,放入 CSS 文档。
但早期的自适应网站,容易忽略 SEO 技术,导致电脑版和手机版网页,转变成两个不同的网址。
当网址不同时,Googlebot 在爬取网站资料时,会容易把手机版网页判定为电脑版网页的「重复性内容」。
虽然官方文件 表示非抄袭网页,有重复内容不会影响分数,但也可能会导致权重分散,手机版网页和电脑版网页互相打架的情景出现。
使用响应式设计,就是在同个网址拥有不同的页面呈现,因此就不会产生重复内容产生的相关性问题。
优点 4:节省 Google 爬取网站预算
Googlebot 会依照网站流量、更新速度、SEO 权重等 .. 多种因素,决定造访这个网站的频率,要拨多少「预算 」给该网站,这就是爬取预算。
Googlebot 会自动读取手机版和电脑版网页,并且分别出相似内容,以及避免误判重复内容问题。
但一个内容网页,有 2 种以上版本,会花费更多 Googlebot 更多的爬取预算在不同版本,这也是为什么 AWD 自适应设计,正在逐渐减少的原因。
若网站规模过大,像是拥有许多网页、更新频率越高,像是电商平台、新闻媒体等 .. 类型网站,就会产生不小的影响。
因此拥有响应式设计的网页,可大大节省 Googlebot 爬取预算。
使用 WordPress,响应式设计更轻松
看完以上介绍后,相信站长们也知道响应式设计是 CP 值较高的选择,也知道了多种响应式设计的好处。
原文链接:https://www.itaoda.cn/blog/12515.html,转载请注明出处。
评论0