●前言
在2016年的時候
數位時代的文章提到，根據 StatCounter 追蹤全世界超過 250 萬個網站的點閱數及來源報告顯示，2016年10月全球網路使用中，手機與平板等行動裝置上網用量首度超越桌機已達51.3%。行動裝置成為主要上網工具，網站經營者也應隨趨勢調整策略。過去網站常優先設計電腦版，現在可能得優先考量行動裝置的瀏覽習慣和需求。
因為手機上網的需求增加，為了配合全球使用者習慣，2010年5月由國外著名網頁設計師Ethan Marcotte提出了RWD響應式網頁的概念
大家來找碴，這兩張圖，2005年和2013年有什麼變化
● 什麼是awd
談RWD之前先聊一下AWD….
適應式網頁設計英文全名為Adaptive Web Design (AWD)
是網頁設計的另外一種技術，大致上與響應式網頁設計Responsive Web Design (RWD)相近，但是有幾個關鍵的設計差別。
關鍵的差別在於適應式網頁設計主張行動上網的用戶，基本資訊的正確顯示是重點，而進階的功能應該受到限制，所以行動用戶所看到的不僅是排版上的差異，連內容都有受到限制，也就是說手機版與電腦版是不一樣的網站是拆開來製作的。
ex.yahoo、fb、購物網站、蘋果日報…等等
最簡單的區分這是awd還是rwd的方式，可以從網址判斷
pc：https://tw.yahoo.com/
手機：https://tw.mobi.yahoo.com/
兩者是不同的網址
為什麼這些網站是做awd，也就是拆分手機版和網頁版呢？
通常有幾個特色
- 網站內容複雜度高，非三言兩語就能結束的網站
- 資訊量很大，如yahoo
- 適合點擊多次才能瀏覽所需資料、分類多層的大型資料網站，如MOMO、小米等等購物網
這樣的網站，若使用rwd會遇到的問題：
- 一是規劃困難
- 二是手機效能會有影響
這樣的大網站，要用rwd方式精簡實在太困難了，可能會燒破頭
這裡有個特殊案例：nike
有rwd也有awd，大家可以自己試試
https://www.nike.com/tw/zh_tw/
https://m.nike.com/tw/zh_tw/
● Mobile First ＆ web first ？
我是要Mobile First 還是 web first 呢？
以趨勢來說，現在開始比較偏向為 Mobile first
所以目前逐漸導向為，優先規劃手機版的內容，再去規劃pc版的
這樣規劃方向，優點是會讓你的內容精簡很多，也可以避免掉如果先規劃大版在規劃小版時根本塞不下的問題
也可以做一些篩檢，不重要的東西隱藏（display:none；），但又存在了另一個seo的問題
當爬蟲來到你的網頁，明明有爬到的東西卻不顯示在頁面上，很可能被當作欺騙或假內容，這會被扣分甚至處罰的
所以Mobile First 還是 web first ！這不是絕對！
如果你的TA主要是用電腦做處理，當然就是web first
也就是說，要先掌握好TA使用習慣，使用目標，網站定位在哪
再來決定是 Mobile First 還是 web first ，而不是盲從的跟風啊～
● rwd是什麼？
響應式（自適應）網頁設計(Responsive Web Design)
最能夠完美解釋 RWD 的金句就是 “Content is like water.”（內容就像水，當水進到不同容器時，會隨著容器的形狀而改變，而 RWD 則是讓內容能隨著裝置做出調整。因此，製作 RWD 的技術也稱為 「液態排版 (Liquid Layout)」。
一個可愛的動畫，讓大家稍微了解一下rwd在不同螢幕寬度時，佈局的變化
● rwd的優點？
● 製作一個網頁，可以用在不同尺寸的裝置
● 維護成本低：
只要維護一個網頁就好
● 利於分享：
RWD響應式網頁分享出去的都是同一個網址，不論什麼裝置點回來都可以正常瀏覽。
● 利於SEO：
可以避免重覆的內容、保持單一連結，流量統計。
若是拆成電腦版、手機版兩個網址，按讚數、流量分析等也會跟著拆成兩筆數據，對SEO相對比較弱。
GOOGLE特別在2015年4月21日宣布修改搜尋引擎演算法，主要修改內容針對智慧型手機、平板等行動裝置的『友善度』做排序，並且增加手機相容性檢測網站，供業者測試網站是否適合使用行動裝置瀏覽，並且在短時間內Bing( Yahoo!奇摩採用的搜尋引擎技術)也跟進此作法，所以RWD網站對於SEO是非常具有影響性的。
google指南：https://developers.google.com/search/mobile-sites/get-started?hl=zh-tw
● RWD的10個設計重點
響應式網頁設計最重要的觀念就是：「提供給使用者最佳的體驗效果」。
10大重點，針對手機板的介面使用，為各位點出響應式網頁設計都該具備的重要條件
1.容易操作：
不須思考就能了解如何使用，然後還要考慮到輸入的方式，不同裝置的使用者操作網站方式差異，如桌機或筆電使用者利用滑鼠與鍵盤操作網站，手機、平板使用者則是以手指來點擊輸入，因此按鈕或表格的設計上必須注意使用者是否能順利、有效地點擊。
2.表現重點：
因爲手機上的空間有限，”講重點“變很重要了，過濾不需要的內容，或是隱藏或收合等方式來決定內容顯示與否。（但隱藏內容前面有稍微提到，會對seo有影響，這就需要取捨了），且空間已經很小了，要審慎安排每個重點的位置
3.版面位置：
為了讓畫面有最佳的呈現，頁首頁尾和每個區塊的大小，都要仔細思考
4.風格一致：
應該不會有網頁版主色調藍色，縮成手機版變紅色這種事情發生吧。
5.簡化以及簡化選單：
漢堡選單
手機、平板這些行動裝置的螢幕比電腦小，處理效能也不一定比電腦好，因此設計必須要簡單，儘可能縮小網站檔案，才能縮短網頁載入的時間，即使在3G環境下也能順利瀏覽。
6.善用圖標：
圖片一直是我們的好朋友，人類處理影像元素的速度，是文字的6萬倍！所以在網頁上適量的使用圖標元素，會讓畫面的豐富度提升，使用者的好感度提升。
並且 icons 可以取代冗長的文字，用在螢幕空間有限的裝置上尤其有幫助
檔案格式的話通常以 SVG為首選，此種可縮放向量圖形（Scalable Vector Graphics）在放大縮小的過程中皆不會失真，且檔案大小也不因圖像大小而改變，是 RWD 的好選擇（還可以運用css去修改顏色做多種應用，你說讚不讚）。
7.方便點擊：
小互動，請您先拿起自己的手機，請觀察看看：「您用單手操作還是雙手？手機在您哪隻手上？」
大部分的人都是「單手操作」、「右手拿手機」，因此，將選單按鈕放置在右上方、點擊按鈕置中且拉長，提升單手操作的點擊便利性，是很重要的。
另外就是，手機上的按鍵、超連結若沒有1個食指尖大(約44px)，將會是一場永遠都點不到的悲劇。
滑鼠移到按鈕上可以觸發某些功能的特有效果，基本上不會出現，因為手機只能點擊，沒有hover的特效，這時反而是需要注重“點擊”也就是按下時的效果。
8.容易閱讀：
「易讀性」是使用者願不願意閱讀下去的決勝點！手機板的文字大小通常建議至少16px以上，還有適當的調整字距也是會幫使用者體驗加分的喔。
若要更仔細的話，可以在探討，例如：細體字的部分，細體字在字體夠大的時候是可以看得很清楚的，但縮小時是有可能變得不夠清晰，這時候就要考慮調整一下字體粗細了。
另外就是手機的閱讀性的關係，要垂直設計，直式往下滑，就可以看完所有資料，盡量捨去橫向捲軸的使用（但通常遇到落落長的表格，逼不得已還是會用到橫向捲軸）。
9.合適影像：
讓使用者「看清楚」是首要考慮的條件，如果使用者需要透過「放大」，才看得清楚圖片內容，那就不是很友善了。
10.善用手機原生功能：
手機瀏覽時可以一鍵撥號、可以一鍵開啟地圖，透過手機原生功能可以加快交易速度（html5有語法可以使用）。
網站上可安裝套件讓網址即時分享到FB、微博、LINE、或WeChat，便利客戶為您口碑行銷。
利用行動條碼QR code，方便手機網民隨時收納你的網站。
● RWD的佈局與流動
下面這是其中一個說明，rwd是用％百分比去設定的，才可以隨著螢幕寬度去做變化。
響應式網頁設計的9個基本原則
現在我們來介紹一下rwd的重點，打開網頁http://blog.froont.com/9-basic-principles-of-responsive-web-design/
這個Froont是一個響應式網頁的設計工具，註冊他的會員，可以在上面利用他的工具快速產生一個rwd網站，很便利很快速，在他的說明網頁中有提到
他很棒的地方是，他利用gif動畫展示了一些版面流動的效果，幫助我們更清楚的理解rwd
請在自己連結過去看吧
以下一些單字先幫大家翻譯出來，方便閱讀，之後完整翻譯好再提供給大家
Responsive ＝響應式
Adaptive = 適應式
Flow=流動
Static=靜態的
Relative units= 相對單位
Static units= 絕對單位
Breakpoints= 斷點
Nested=崁套對象，我把他解讀為分組或是群組
● RWD網站的限制
雖然RWD聽起來可以因應各種裝置，卻也不是萬能的….
- 限制一：舊的瀏覽器不支援
RWD 是採用 HTML5 + CSS3 網頁技術來製作，因此像IE8以下的瀏覽器並不支援這些程式語法，可能會產生版面破壞的情形。 - 限制二：不適合太複雜的頁面內容
RWD 採用百分比的方式來配置版面，設計時必須同時考慮桌機與手機上的呈現效果，因此，較複雜的表格以及文字資訊過多的圖片就不適合用在RWD網站。
● RWD參考網
日本RWD JP：http://responsive-jp.com/
歐美Media Queries：https://mediaqueri.es/
Media Queries 網站最下面右下角，可以選擇“order by popularity”（受歡迎程度）來排列。
可以利用chrome的F12，開發模式調整螢幕寬度，觀察rwd變化
順帶一提，很多時候我們會用line傳連結並直接開啟，但line的瀏覽器其實是精簡版的，所以常常一些效果也是會有問題，所以還是要把網址複製出來用chrome或是safari看比較準確
● RWD Framework（框架）
3種熱門好用的Responsive Web Design 自適應的 FRAMEWORK
一般設計師如果要開始切版，可能是從頭開始刻CSS慢慢地建構，這樣的做法不僅緩慢，而且技術門檻較高。
俗話說：工欲善其事，必先利其器。想要快速、又要有效率的設計RWD響應式網站，運用Framework是很棒的選擇。
Bootstrap是一套非常強大且具知名度的Framework，是由Twitter所開發的，功能相當豐富，你所常用到的css工具語法（例如表格、表單、按鈕、選單、格線….等元件。）通通都包含了，而且有相當多的元件可以使用（例如常見的 nav導覽、彈出視窗、廣告輪播、摺疊功能….等
Foundation，它是由一家名叫”Zurb”的設計公司所製作的。https://zurb.com/，採用 mobile first 概念，適合製作於以 mobile 為先的網站
Pure 由 Yahoo 打造，單純支援 CSS 的 RWD Framework，輕量，檔案小，適用大量客制化的網站
以上是目前最熱門的3種Framework，希望可以幫助大家找到最適合自己的工具來進行RWD自適應的網頁設計
● 新一代（PWA)
Progressive Web App (PWA)漸進式網頁應用程式
一個新技術正在興起
最早是在2015年被提出，並且在次年也就是2016年的Google I/O大會上列入重點開發項目，如今Google成為PWA的主要推手之一
PWA是Web網頁和App的混合體，也就是使用新一代的Web功能，使網頁具有App應用程式般的使用經驗。
漸進式網頁應用程式(PWA)是使用HTML標籤、CSS樣式及javascript程式控制功能所製作的網頁，具有Responsive Web Design (RWD)性能，可以針對手機、平版及桌上型電腦等裝置不同的螢幕解析度自動調整最佳畫面，也具有類似App的操作經驗
融入了原生的優點：
- 直接被使用者安裝到桌面
不需要經由App store，就可以安裝到手機、平版主畫面或是桌上型電腦的桌面 - offline（離線） 使用
可以在品質低落的連網環境下使用，或是離線使用，可快速啟動然後在背景中漸進的載入資源 - 擁有推播功能
- 開啟時看不到 URL Bar可以全螢幕操作
- 開啟時有 Splash Screen（啟動畫面）
PWA特性
Progressive — 漸進增強：
在越完善的環境下，能執行更加完整的服務，若環境不許可，能夠優雅降級，運行最基本的功能。
Responsive — 響應式介面：
能夠在各種螢幕尺寸下顯示、能夠因應多種輸入方式與設備回饋（震動、音頻等）
App-like — 類原生程式的操作模式與使用者介面：
採用原生平台（Native App）的 Style 與資料更新方式
Fresh — 持續更新：
使用 Service worker API 來自動更新應用程式（無需透過 App store, Google Play 等）。
Safe — 應全面採用 HTTPS 提供最基本的安全防護。
Discoverable — 透過設置 manifest 檔案，一樣能進行 SEO 優化，讓搜尋引擎找得到你的 APP。
Re-engageable — 透過推播，能主動與使用者互動。
Installable — 可安裝：
透過 Add To Home 等方式，將 Web App 放在手機桌面，並且能在應用程式中單獨列出與切換，就像一般的 App 一樣，但完全不用透過應用程式商店下載。
Linkable — 透過 URL 可以隨時分享你的 App。
以上是官方所提供的一些資訊
參考來源：https://blog.techbridge.cc/2016/07/23/progressive-web-app/
http://newsletter.ascc.sinica.edu.tw/news/read_news.php?nid=3708
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=zh-tw
● Google developers 範例
我呢，稍微看了一下教學說明覺得頭有點痛，所以這部分讓有興趣的人在自己研究囉
● 總結
- 設計rwd網站時，溝通是很重要的（取捨）
需要不斷的溝通！跟PM確定方向、決定取捨；要討論版面設計、流動方式；如果有互動設計師，還要注意在手機上能夠使用的動效或反饋和電腦上不一定一樣（手機與pc的javascript支援度不同），並與工程師討論可行性！ - 可以考慮用Framework幫助自己開發
- css概念是很重要的
- Mobile First ＆ web first ？
看專案看需求沒有絕對答案，但不管哪種優先，在設計時也是要同時想到另一版的時候要怎麼呈現，而不是小版完成才開始想大版，或是大版完成才開始想小版之類的 - 新一代技術 PWA漸進式網頁應用程式
有google當推手，想必之後會越來愈普及的
若我的文章有幫助到您，歡迎給我「拍手」或是「讚」給我支持喔。
當然也歡迎用街口支付，掃碼請我喝杯咖啡！https://www.jkopay.com/transfer?j=Transfer:900734870
