RWD是什么?RWD跟AWD有什么不同?

Author: 路卡斯特
RWD or AWD

网站不能没有 RWD、AWD,Google官方曾经提到「演算法以行动网站为主」,网站没有行动网站流量就会慢慢消失,RWD跟AWD都是行动网站,所以网站一定要有RWD或AWD,现在用行动装置上网的比例超过80%,简单来说没有手机版的网站等于宣告死刑,没有手机版的网站请赶快改版,即使是B2B网站,RWD、AWD都不是新技术,已经是成熟的网页设计方式,而且套版网站设计费没有很高,赶快改版才是当务之急。
〈延伸阅读:网页设计公司不会告诉你的5个真相

 2020年台湾行动上网人口
没有RWD网站无法生存
来源:TWNIC
   

RWD 是什么?

RWD的英文全名是 Responsive Web Design,中文翻译是「响应式网页设计」,最大优势是能够符合使用者体验,让一个网址随着各种装置银幕的大小,自动会显示不同的网站尺寸,用手机就跑手机版网站,用桌机就跑桌机版网站,用平板就跑平板网站,RWD就是把三个版本网站合而为一。知道网站是不是RWD的做法非常简单, 只要把浏览器的视窗放大缩小就知道了,RWD会读取「同一个CSS」,会自动排列网站,请点击看下方影片就知道可以RWD怎么变化。

RWD自动放大缩小网站尺寸

 

AWD 是什么?

AWD的英文全名是 Adaptive Web Design,中文翻译是「自适应网页设计」,AWD跟RWD外观、使用起来都没有太大差别,因为AWD跟RWD一样都是「以同一个网址同时出现手机、平板、桌机的网站设计方法」,但是AWD不会放大缩小,因为AWD是会读取「多个不同的CSS」,所以只会在真正的装置上显示自适应的页面。使用者可以透过网址观察网页是否为AWD,例如:如果用手机浏览时,网址的网域结尾名称有出现/mobile或.mobile。

〈延伸阅读:网页设计与SEO的完美整合
〈延伸阅读:网页设计为什么需要前端工程师?

 
CSS是什么? 
CSS,英文是Cascading Style Sheets,中文称做:样式表、级联样式表、串接样式表、阶层式样式表,CSS不能单独使用,必须与 HTML 或 XML 一起协同工作,CSS样式表是在定义网站的外观、样式、字体大小、字体粗细、字体颜色、元素对齐、定位...这些元素,CSS主要目的就是设定网页的布局、设定网页的样式,CSS样式定义完成之后,就可以用在全部的网站,让网站不用一页一页设定字体、颜色、位置、样式....,可以加速网站设计,RWD是共用CSS,AWD则是分开CSS,CSS样式工作都是由前端工程师负责制作。

 

RWD与AWD的差异

不刻意去辨识之下,RWD、AWD 从外观是看不出来差异的,虽然都是同一个网址跑多个版本网站,但两者在技术上是有差异的,RWD在HTML文本中,加入一套可以符合不同宽度排版样式的CSS,能够大幅降低调整时间、维护成本、开发时间短,比较不会出现重复内容,也有较多的框架开发工具;而AWD读取不同CSS,效能略优于RWD,且能针对行动版做UX优化,以及不同装置制作差别较大的版面设计,适合复杂的网页使用。

〈延伸阅读:网页设计的使用者体验(UX)如何执行?  〉

RWD与AWD比较表

项目

RWD响应式设计

AWD自适应设计

不同版本网站

同一个网址

同一个网址

CSS 样式表

同一个CSS

不同的CSS

网站内容一致

内容一样

不一定

自动判断各种装置

自动判断

自动判断

行动装置速度

速度中等

速度较快

行动装置体验优化

固定内容

可优化

网站制作费(客制)

中等

较高

网站资料维护

维护容易

部分维护多版本

开发时间

快速

时间较长

结构重复内容

不会发生

偶尔发生

网址重新导向

不会重导向

不会重导向

Google检索速度

适合执行SEO

适合

适合

框架开发工具

设计公司使用率

手工网站切版

可以

可以


(制表: 达文西数位科技)

 

RWD与AWD选哪个比较好?

如果没有特殊的需求,用RWD进行网站设计就可以了。 大部分的网站都不需要AWD这样的模式,因为AWD制作费比较高,会做的人少,成本比较高,开发时间比较久,以成本效益来说,除非有需要,不然就是用RWD就可以了。

 

了解自身网站类型

内容很多才需要用AWD,因为RWD内容只能在桌机、平板、手机之间做重新排列,内容是不能少的,所以像是像MOMO、PCHOME...这类内容超多的网站,就必须要手机版减少内容,不然画面会很长,所以这类大型购物网站都是用AWD,或是用两个不同网址的网站,企业网站、小型购物网站就比较适合RWD,像是 Shopline、Cyberbiz 都是RWD制作的,内容非常多的网站才建议使用AWD。
〈延伸阅读:套版网站看起来都很像,到底差在哪?

 

考量维护成本

响应式网页设计(RWD)上线后的维护是比较容易的,AWD维护上较繁琐,AWD必须在后台维护各版本的网站,制作成本AWD也比RWD贵,因为做的人比较少,开发时间也比较长,性价比来看还是RWD比较划算,AWD在设计与维护上成本都比较高,也是大部分的网页设计公司都采用RWD的最大原因。

〈延伸阅读:网站建置费用? 网页设计报价为何这么乱?

 

需要更深入使用者体验(UX)

AWD可以对手机版做更深入的使用者体验(UX),针对手机使用者做内容调整与优化,让使用流程更友善,但近年来的RWD设计已经趋向简单干净,并以手机流程为主要设计,而且大部分的网站都不会像momo、pchome那样复杂,所以AWD使用机会并不是很高,就算是大型购物平台也慢慢把手机版网站转向到APP,使用者体验也以APP为主,AWD对手机版进行优化的这个优势已经没有这么明显。
〈延伸阅读: UX/UI不一样,UI/UX设计是什么?

 

RWD、AWD 哪一种对SEO比较好?

哪一种对SEO比较好?答案是:「两者差距不大」,SEO的排名规则有「SEO以行动版网站内容为主」、「网站行动效能影响SEO」、「网站版本之间的内容一致性会影响SEO」,手机网站部分:AWD、RWD 两个都有手机版,所以都符合条件。网站效能部分:AWD手机效能略优于RWD,这里是AWD稍微优势一些。内容一致性部分:AWD的网站版本之间的确会因为优化,产生内容不同步,RWD版本则是内容一致,所以在内容一致性上面,RWD胜AWD。 要做好网站SEO除了要做好网站架构,还要强化页面内容与连结,并时常观察成效,即时进行调整。
〈延伸阅读: SEO是什么? 简单说让你听得懂
〈延伸阅读: 关键字排名优化最重要的3件事
〈延伸阅读:好的SEO网站架构是什么?这样做SEO成功率才会高!  〉

 

网站效能好坏怎么判断?
PSI 的英文是 PageSpeed Insights,简称PSI。 PSI 是Google 提供的「检测网站性能与速度的线上工具」,除了检测结果以外并提供各种修改建议,分数是透过运行 Google Lighthouse 资料库来分析网站,90分或以上是非常好,50 到 90 中等架构,低于 50 是很差的架构,通常要执行SEO,最少都要有80分以上。
网站PSI是几分?马上来测试 PageSpeed Insights

 

RWD设计及制作方式

RWD(响应式网站设计) 分成两种制作方式:「框架工具」跟「手工切版」,如果不考虑SEO跟网站效能的话,其实这两种方式制作的网站,几乎没有什么明显差异,都可以达到RWD的设计呈现,但如果要针对网站效能与修改弹性,「手工切版」是远胜于「框架工具」制作的RWD网站,这个可以从Google的PSI测试工具得到测试结果。
〈延伸阅读: 什么是RWD切版?

 

以RWD框架工具制作

选择现成的RWD框架开发工具,可依照既有的RWD模版去套用网站素材,然后将网站素材组装网站交给客户,后续根据客户修改需求进行修改,好处是可以减少制作时间,因为有很多现成的模组跟效果可以用,但因为模组因素所以程式无法精简,网站效能会比较差,还有网站修改幅度不能过大会有技术难度,常见的RWD框架工具有:Bootstrap、Semantic UI、Foundation、UiKit...,最多人使用的就是Bootstrap,Bootstrap有很多现成的版型,也使用在知名的套版与软体,例如:Wordpress、Adobe Dreamweaver,缺点就是有「很多的累赘程式码」。以下将介绍常见响应式网页模板,让无法进行手工切版的使用者也能制作RWD。
〈延伸阅读:RWD网页设计好坏差很多 〉

 

1.Bootstrap

Bootstrap拥有大量HTML、CSS和JavaScript框架,是目前最多人使用的RWD框架制作工具。 方便使用者能在基础框架之下进行网站开发,达到自动适应萤幕宽度的效果。

【点我使用>>Bootstrap


Bootstrap


2.Foundation

Foundation主要以手机版面为优先考量,能够开发RWD网站和应用程式,同样提供HTML、CSS和JavaScript模板,并支援Sass扩充功能,帮助开发人员可以快速制作。

【点我使用>>Foundation

Foundation

 

3.UiKit

UiKit是一个轻量级前端框架架设工具,提供CSS和JavaScript框架,还能建立常见的UI功能,满足不同项目的需求。

【点我使用>>UiKit

UiKit

 

4.Semantic UI

Semantic UI的组件名称和类别使用了语义化的命名方式,使开发者能够更容易理解和使用。例如:使用 "button" 建立按钮、 "menu" 制作选单...等,且能够透过主题创建改变RWD网站的外观设计。

【点我使用>>Semantic UI

Semantic UI

 

5.Pure

Pure主要提供轻量型的CSS语法模组,可以快速载入,减少网页的负担,适合客制化需求高的使用者,让RWD网页制作更加容易。

【点我使用>>Pure

Pure

 

以RWD手工切版制作

手工切版不使用RWD框架工具,主要以从无到有产出网站的html来进行。 手工切版可以精简程式,让网站更有效率,不会有像框架工具的「累赘程式码」,同时可以有程式自主权,容易修改程式,也可以达到HTML最佳化,但缺点是需要更多的制作时间,从拿到网站设计图稿,慢慢把图片切成HTML,整个制作时间是框架工具制作RWD网站的两倍时间以上,八成以上的网页设计公司都不会采用,但如果要执行SEO,需要高效能PSI的网站,就需要手切网站。
〈延伸阅读:网站速度- SEO优化的重要项目
 

框架工具与手工切版比较表

项目

RWD框架工具

RWD手工切版

RWD网站呈现

完整

完整

代表性工具

Boostrap

---

程式修改弹性

设计修改弹性

PSI 效能分数

累赘程式

制作时间

现成的效果

需另外装

SEO效能

网站客制程度

设计客制

全程客制

设计公司使用率

开发成本

(制表: 达文西数位科技)

 

如何检查行动版网站的状况?

要怎么检视行动版网站状况呢?可以用Google Search Console(GSC)审查网址,Google于2020年正式以行动版作为搜寻收录与排名的基准,所以网站必须符合各种行动装置的规则,所以可以透过GSC去查看网站的「行动装置可用性」(此报表2024 年 12 月 1 日起失效)、「网站内容」、「中继资料(Meta Data)」、「结构化资料(Structured Data)」,可以从中找出网站是不是有符合规则,如果有检测到行动网站的错误,就可以根据错误进行修正,RWD、AWD都可以从Google Search Console检测,是SEO很重要的工作之一。
〈延伸阅读:SEO排名因素有哪些? 45个要点一次看完

 

Google以行动网站作为索引,响应式网站变得重要

Google以行动装置作为索引


Google Search Console检查行动网站(响应式网站)

Google Search Console检查行动网站

 

结论

RWD网页设计已经是最主流的网站设计方式,如果网站内容简单可以选RWD(响应式网页设计),例如: 企业网站、小型购物网站,如果是大型网站希望手机版可以单独优化,例如: PCHOME购物,那么可以用AWD制作,一般购物网站使用RWD就很够了,AWD制作与维护成本较高,也会有资料不同步的可能,如果没有特别的网站需求,用RWD(响应式网站设计)是比较好的选择,还有就是RWD并没有都一样,选择专业的网页设计才能达到高分数 PSI 网站,对SEO来说才是最佳方案。
〈延伸阅读:如何选择网页设计公司?
〈延伸阅读:SEO收费行情?该怎么选择SEO公司?
〈延伸阅读: SEO是什么? SEO怎么做? 2021重点教学


(本文为达文西数位科技所有,转载文图请注明出处)

迈入网站与SEO工作已经超过20年,喜欢探索新知与研究技术,总是希望给您最适合的解决方案。

SEO套版網站,優惠 $ NT 62,000 (1年代管+SSL)

請與我們聯繫
線上客服 TOP