Question 1

Responsive web design (RWD)響應式網頁的重要性

Accepted Answer

RWD響應式設計可以幫助網站解決許多問題，可以使網站適合行動裝置使用，改善各種螢幕裝置上的顯示方式，並且增加用戶在網站上使用的時間，RWD響應式設計還可以幫助提高搜尋引擎上的排名以下是google 所公布的資料，證實RWD 會影響網站的排名名次使用RWD網站設計的技術，不需要變更網址HTML也不變!這樣的條件，確實符合google所提出來的條件， 理所當然能夠為你所做的網站加分!隨著平板電腦及智慧型手機的普及，若沒有響應式設計，當網站分開做成桌機版以及手機版兩種版本，就要同時在兩個版本的後台更新兩次資料響應式網頁設計：讓網頁不受使用者的裝置 (電腦平板電腦行動裝置非視覺瀏覽器) 影響，可在同樣的網址上提供相同的 HTML 程式碼，卻又能根據螢幕尺寸，以不同的方式轉譯 (亦即回應) 顯示內容回應式設計是 Google 建議採用的設計樣式動態服務：使用的網址不會因為使用者裝置而有所改變，但會根據伺服器對使用者瀏覽器的認知，為不同類型的裝置提供不同版本的 HTML網址獨一性：以網址獨一性為每台裝置提供不同的程式碼這種配置會嘗試偵測使用者裝置，然後利用 HTTP 重新導向以及 Vary HTTP 標頭，將使用者重新導向至適當的網頁

Question 2

什麼是 Responsive web design (RWD)響應式網頁

Accepted Answer

Responsive web design (RWD)響應式網頁因為螢幕總類越來越多，在 2011年美國設計師 Ethan Marcotte 提出因應多螢幕時代的網站改善方案，以流體移動方式來適應螢幕大小調整網頁內容縮放重新編排或隱藏部分內容，RWD如今已經成為網頁設計中製作網站時不可逆的開發趨勢與技術概念，這樣的製作概念可以稱為響應式網頁設計(Responsive web design 簡稱 RWD大約在2010年之前，網頁設計製作的網站，都是依照固定的尺寸來設計，比如 寬1920px,高920px 類似海報報紙書本設計...等，尺寸是無法變動的，但是現在有數十種不同螢幕尺寸規格，如智慧型手機平板PC電腦多種螢幕尺寸，都會造成網頁設計中常常因為螢幕尺寸不同而困擾RWD響應式網頁設計變得更加重要，是因為行動裝置流量現在占網際網路流量的一半以上因此，Google 宣布行動裝置時代的到來（Mobilegeddon）（2015年4月21日），如果搜尋行為是來自行動裝置，將會提高對行動裝置友善的網站排名RWD 的網站使用CSS3中的Media queries，以百分比的概念與液態彈性的編排設計，網頁本身會隨著螢幕的大小去滑動隱藏縮放變化，即時產生相對應的改變，好讓瀏覽者可以舒適的瀏覽網站在RWD響應式網頁尚未成熟與普及以前，手機板網站也曾經流行一小段時間，但在手機版網站使用上還是有不少的缺陷無法改善，例如需要兩個後台管理等，而現在RWD響應式網頁是用一個網站取代多種螢幕尺寸版本的網站方式，在製作以及管理上相較於簡單，所以手機板網際已慢慢被取代

Question 3

RWD響應式網頁設計原理

Accepted Answer

RWD響應式網頁設計原理隨著時代進步以及行動網路的普及，現在越來越多人使用手機進行往上行動，於是網頁設計就面臨一個新的問題，該如何在不同尺寸的行動裝置上完美的呈現內容呢?手機的螢幕都較小，跟電腦以及IPAD比起來這樣尺寸較多，而要將同樣的內容呈現在不同尺寸的螢幕上而不是一件簡單的事情，有一些人的解決方式是因應不同的尺寸去製作網頁，雖然這樣對達到效果，但是在製作成本變得較高以及維護起來也會變得較麻煩，而RWD就這樣隨著這問題而誕生了CSS3 Media QueryMedia Query在設計網頁時以CSS3中可以設動不同螢幕尺寸導出不同的顯示方式給用戶，包含顏色高度與寬度等等，而網頁會自行判斷顯示範圍並且不用改變內容

Question 4

網站建構基本觀念解析

Accepted Answer

網頁及各種線上資源已逐漸融入我們的生活當中，具備網頁設計的能力也日趨重要，但網頁設計代表甚麼呢?簡單來說，網頁設計就是設計以及建構網站其中包含了許多技巧，舉例來說，資訊架構使用者介面網站架構導覽版面顏色字體以及整體效果呈現 這些技巧都與設計原則環環相扣，進而創建出一個能符合該公司或個人需求的網站是否常常聽到親朋好友說”網頁設計”這個詞彙呢?網頁設計其實是網頁與設計兩個字詞組成的，本文描述網頁設計的基本介紹以及這個行業所需的規則及技巧什麼是網頁?什麼是設計?什麼是網頁這部分先要從上網開始說起，上網就是我們電腦上的瀏覽器軟體，目前常用的上網供具有IEChrome等等… 當我們用上網工具上網時，開啟的畫面就是”網頁”，網頁只是單一頁，很多不同內容的網頁就可以構成一個網站設計的過程需先蒐集資料，並依循著原則實行網頁設計亦是如此，將所要傳遞的內容置入於網頁中，在進行美編排版等因此，使用者進入網頁時才比較容易獲取所需要的內容顯而易見的，設計是網頁設計重要的關鍵這句話代表什麼呢？設計不僅僅包含了設計原則—協調對比強調韻律和規律，也包括了設計元素—線條形狀質地顏色和方向這裡網頁設計的設計，不單單只是一般美化的形容詞，設計的解釋如同室內設計建築設計產品設計一般，是包含許多網站製作技術的融合，如企業形象視覺HTML程式CSS程式jQury程式動態程式(PHPASPJSP等等..)使用者體驗數據等技術架構起來的除了能理解網站所受的侷限以外，一位稱職的網頁設計師更需要具備架設網站的的專業能力與知識將上述所提及的結合在一起，網頁設計師就能建置好一個網站不過作為優秀的網頁設計師，不僅必須掌握設計原則外，也要能了解網站製作上的侷限舉例來說，一位成功的網頁設計師，在堅守印刷設計原則的同時，也能瞭解網頁設計的挑戰，更能進一步說明此網站與其他的不同之處網頁設計的元素網頁設計中有許多的重要設計元素，例如：頁面布置:部分使用者介面設計受到頁面布置品質的影響字型設計:網頁設計師可以選擇將網站字型的種類限制為僅有少數具有相似風格的網站字型，而不是使用各種字型或字型樣式大多數瀏覽器都辨識特定數量的安全字型，設計者主要使用這些字型來避免複雜性動態圖形:使用動態圖形也可能影響到頁面布置和使用者介面是否選擇使用動態圖形可能取決於網站的目標市場娛樂導向的網站預期或至少更容易接受動態圖形然而，一個更嚴肅或正式的網站（如商業社群政府網站），可能就會覺得出於娛樂或裝飾目的的動畫沒有必要，還會分散人們的注意力這不是說比較嚴肅的內容不能用與內容相關的動畫或影片演示來提升無論哪種情況，動態圖形設計都可以使更有效的視覺效果或分散注意力的視覺效果有所不同內容:網站的產生方式有兩種：靜態網頁或動態網頁做網頁的目的是什麼?網頁是一個曝光媒體，大部分企業製作網頁的目的是讓別人更了解自己，無論是個人的曝光或是公司產品或是形象的曝光，希望藉由增加曝光率來達到目的，此目的可能是與好友社團的的聯繫互動或是增加商業活動迴響，當然以企業來說藉由網頁讓產品與服務大量曝光，讓更多人接觸到相關訊息

Question 5

SEO搜尋引擎優化:SEO站外優化(Off-Site SEO)

Accepted Answer

Off-Site SEO是指在您自己的網站之外採取的操作，用來影響您在搜索引擎結果 (SERP) 中的排名因為Google搜尋引擎會根據兩者之間的相關性可信度權威性等等，來計算排名的分數而且，Off-Site SEO在整體SEO的排名計算上，占50%以上的因素然而Off-Site SEO與連結密切相關，何種的連結才是真正有效的呢？網頁設計SEO有效反向連結主要有三種類型：自然連結：無法自行修改或刪除的連結如：部落客的開箱文等等手動建置連結：刻意建立的連結，可以用某些方式修改或刪除如：相關企業連結讓客戶連到你的網站，或部落客及網紅的業配文自創連結：透過各種平台的登錄，由自己創建的連結如：自己建部落格分享自己的網站申請論壇帳號推廣網站但要注意自創連結較容易被搜尋引擎判定為黑帽SEO不管是以上哪一種連結，只要是能傳遞較多可信度以及權威性的網站，就能對SEO有較多的貢獻所以重點不是反向連結越多越好，而是從哪裡連結了你網站通常這些傳達較高可信度以及權威性的網站，會以下幾種行為產生；社群行銷訪客流量多的部落格被連結的網站，在放了連結的平台上產生品牌討論度口碑行銷結論由於Off-Site SEO遠比On-Page SEO來得困難許多，因此當你考慮建立反向連結時，建議不要輕率下決定過去你可以利用許多連結的方式提高排名，但是這樣的行為容易被判定為黑帽SEO不妨將所有的努力都投入在一篇在業界具有高度價值的文章上，並將這篇文章利用上述所提的幾種管道進行SEO雖然會需要多花一點時間，但是只要正確的執行並推廣它，搜尋引擎排名就會自然上升了參考文獻:Moz - What is Off-Site SEO

Question 6

SEO搜尋引擎優化:網站內部SEO

Accepted Answer

網頁內部SEO是什麼?網站內部(On-Site SEO)SEO，也可以稱為網頁內部SEO(on-page SEO)，是指單在網站上執行的優化網站的元素(其它如，連結到其它網際網路與其它外部信息，統稱為非網站內部SEO，在此章節先不討論)，從自然搜尋上，提高網站搜尋排序並賺取更多有意義的流量，藉由優化網頁內容與HTML程式碼的網頁來達成僅此於幫助搜尋引擎解釋網頁內容，適當的網頁SEO指是幫助網頁瀏覽者快速明確的了解這個網頁內容是什麼，是否可以處理他們網頁上所搜尋的問題，在本質上，如果有人拜訪一個網頁，一個好的網站內部SEO可以幫助搜尋引擎了解人們會看到什麼(與人們將會獲得什麼價值)，如此來說，搜尋引擎可以可靠地提供服務，使用網頁搜尋的人將會考慮使用特定問題來查詢更高品質的內容網站內部SEO最終目標是可以被認為是盡可能的嘗試使得搜尋引擎與搜尋者更簡單化：了解網頁內容是什麼識別網頁內容與搜尋問題或問題相關的確切性在搜尋排序上(SERP)，找尋有用的與有價值的網頁關鍵字,內容,與網站內部SEO在過去，網站內部SEO已經成為關鍵字的代名詞使用 - 特別是在網站上的幾個關鍵位置包含了高價值的關鍵字了解為什麼關鍵字不再是網站內部SEO的中心，記住 content topics (內容主題) 這個關鍵字名稱是重要的，從歷史的角度來看，一個網頁排名是否取決於在網站的某些預期位置使用正確的關鍵字，以便搜索引擎能夠找到並理解該網頁的內容 用戶體驗次要; 只是確保搜索引擎找到關鍵字，並排名與這些名稱相關的網站是網站內部SEO做法的核心然而，今天，搜索引擎已經快速成長 他們可以從同義詞的使用，內容所出現的上下文對照，甚至於特定字詞組合的使用頻率來判斷網頁內容的含義 雖然關鍵字的使用還是重要的，但制式的方法，例如在特定位置上使用完全匹配關鍵字等...，必要的次數比例已不再是網站內部SEO的重點 重要的是相關性 對於您的每個網頁，反問自己與查詢者經果查詢後的結果（根據您的關鍵字在頁面和HTML中的使用情況）有多相關通過這種方式來說，網站內部SEO已經不是關鍵字重複或放置多少的方法，而是要去了解您的查詢者是誰，他們正在尋找什麼需要什麼以及哪些主題（關鍵字）最能滿足需求的內容 符合這些標準的頁面的內容為：深入：細緻的內容是Google Panda的具體目標之一， 今天，關鍵字主題資料內容必須足夠徹底包含多多少少的細節也必須齊全，以便在排名上有一個很好的機會用戶友好： 內容是否可讀？ 它是否在您的網站上以同樣的方式進行組織，是否容易瀏覽？ 它是乾淨的，或者是散佈著廣告和許多外部連結？獨特：如果處理不當，從您網站上其他地方（或互聯網上的其他地方）複製的內容可能會影響網站在SERP上的排名權威： 是否值得信賴 您的內容是否作為特定主題的資訊，並且是可靠網路資源而可以獨立存在？與瀏覽者的搜尋預期相同： 此為網頁質量內容創建和優化的一部分，也是對搜尋者的期望 內容主題的完整度應該與他們排名的搜索查詢一致非關鍵字相關的網站內部SEO除了網頁內容中使用的關鍵字（主題）以及它們如何討論外，還有一些“與關鍵字無關”的元素可以影響頁面的現場優化這些包括：在網頁上的連結使用：有多少連結？他們是內部還是外部？他們指向哪裡？網頁讀取的速度：使用Schema.org結構化數據或其他標記網頁URL結構手機友善程度網頁元數據所有這些元素都與相同的基本思想相結合：創造一個良好的用戶體驗 網頁的可用性越高（從技術角度和非技術角度而言），網站內部SEO越好資料來源:https://moz.com/learn/seo/on-site-seo

Question 7

SEO搜尋引擎優化:蜂鳥演算法

Accepted Answer

什麼是蜂鳥演算法?與之前發布的熊貓演算法和企鵝演算法更新不同，後者最初是作為Google現有算法的附件發佈的，目前蜂鳥演算法已徹底轉變成為核心算法引用， 雖然核心算法中許多先前組件還是保持著，但蜂鳥演算法表明Google開始深入了解搜尋者查詢資料的意圖為何?，並將其與相關結果進行匹配谷歌在2013年9月26日宣布了蜂鳥演算法，但實際上大約一個月前已經開始執行，雖然之前演算法更新時，常會發生流量和排名流失的嚴重情形，但蜂鳥演算法似乎沒有對一般網站造成嚴重的負面影響，此次更新，主要被解釋為大幅改善Google資料庫的準確性，是為“Knowledge Graph 知識圖譜”的建立而準備，然而地區性SEO操作者們推論說，在地區性搜尋引擎結果中已經有文件記錄了所有的搜尋結果知識圖譜和語義搜索為了充分理解蜂鳥演算法背後的目的，重要的是首先要熟悉受它影響最大的搜索引擎功能：語義搜索和知識圖譜在蜂鳥演算法發布前一年，Google 推出了它的知識圖譜：不是一個真實的圖，而是一組 SERP 功能在為用戶對人物地點和事物的查詢提供快速準確的答案您可以在搜索巧克力曲奇餅乾時產生的結果頁面上看到正在運行的知識圖譜SERP 確實包含標準的結果和指向合適網站的鏈接，但它也包含一組豐富的知識圖數據，包括一個帶有食譜的答案框一個包含有關該甜點的營養事實的右側知識面板，以及相關建議搜索主題右邊為知識圖譜Google如何確定這些搜尋結果反映了搜尋者的意圖並充分滿足他們的需求呢？這就是語義搜尋的切入點了語義搜索嘗試將適當的 SERP 結果與互聯網用戶查詢的語言相匹配，即使使用者的關鍵字不明確，也會根據上下文找出相關的語意搜索要查看語義搜索的實際效果，請回顧上面的“巧克力餅乾”SERP 圖片雖然是針對餅乾本身查詢的，但語義搜尋會推斷，搜尋中使用的字詞（從字面上看，可能是圖片或餅乾的意思），但搜尋背後的意圖可能會不同於所使用的文字，Google另外會提供可能符合搜尋者意圖的搜尋結果，而不是搜尋者所打的關鍵字，因此我們看到SERP(搜尋結果頁面)充滿食譜，營養成分和與製作或吃餅乾相關的其他主題用他們自己的話來說，谷歌對語義搜索的日益掌握使他們能夠理解“現實世界的實體及其相互之間的關係”Hummingbird 專注於將查詢上下文與結果相匹配，這依賴於 Google 技術的智能——解析意圖的能力蜂鳥和本地搜尋雖然自然SEO操作者們努力了解蜂鳥演算法對一般網際網路的影響，但本地的SEO操作者們，分析了一些更新後所感受到的改變，最初的蜂鳥演算法似乎在許多本地搜尋結果中，只是提供讓人不甚滿意“單箱方式”，例如像“丹佛律師”這樣的查詢將產生單獨的答案，而不是一組典型的本地企業，由於這樣的“單箱方式”藉由使用假的商業名稱（例如將自己標示為“丹佛律師”而非他們的真實名稱“吉姆戴維斯律師事務所”），反而會獎勵那些發送垃圾郵件的企業，以至於Google無法提供，更好的訊息與相關經驗給用戶，這種令人沮喪的情況最後終於可以解決了此外，本地SEO操作者們推測蜂鳥演算法可能對當地和當地的自然搜尋結果產生以下影響：有區域性意圖的自然查詢結果將會更區域化經由大量存在目錄類型的結果導致了區域性自然搜尋結果我怎麼知道我是否被蜂鳥演算法懲罰？雖然本地企業所有者可能會遇到一些因為使用假的商業名稱方式而減少本地搜尋引擎曝光度的臨時問題，但大多數網站不太可能會受到此更新的負面影響如果您的網站發生流量下降，或許您認為可能與蜂鳥演算法有關，請務必查看Google更新的完整列表，可能會發現您的網站，有可能是另一個更新導致，例如熊貓演算法或企鵝演算法蜂鳥的機會蜂鳥演算法向所有網站所有者發出信號，表明Google企圖增加，用戶搜尋背後的真實意圖並嘗試去理解它，將整個查詢視為前因後果，而不是像關鍵字串那樣對待它們網站所有者最佳的應對方式是，確保網站內容是可體驗的自然文字，蜂鳥演算法可以被視為修正舊有不適合體驗和現代搜尋引擎優化（SEO）之間的差距，它試圖呈現出讀者的自然語言，並且是用它自己的話說巧妙的辨認並發佈公眾最熱門的查詢答案的網站，有可能會被Google選為相關資源使用於特定主題，當您的內容被視為與搜尋者的意圖匹配時，不僅可以在自然和本地搜尋排名良好，還可以將其放置在SERP(搜尋引擎結果頁面)功能中，例如答案框或知識面板中，在現今的搜尋引擎結果中，對於搜尋者的意圖加以服務，是應該放在您的SEO優先級列表上，並且結合用戶互動研究關鍵字和研究專題來幫助網站實質改善知名度資料來源:https://moz.com/learn/seo/google-hummingbird

Question 8

SEO搜尋引擎優化:企鵝演算法

Accepted Answer

企鵝演算法是什麼緊隨熊貓演算法之後，Google的企鵝演算法是一項新的努力，主要是在獎勵高質量的網站，並減少搜尋引擎結果頁面（SERP）涉及操縱連結和關鍵字填充存在的網站企鵝演算法首次推出影響了3.1％的英搜尋引擎查詢結果，在2012年和2016年之間，經歷了10次更新，企鵝演算法隨著時間持續發展，這段時間SEO操作者們試圖去理解企鵝演算法想要解決的問題與做法，截至2017年初企鵝演算法已經成為Google核心算法的一部分企鵝演算法的觸發企鵝演算法兩種具體做法：連結的意圖從低價值或不相關的網站開發購買或購買的反向連結，企圖人為創造流行與相關的照片，試圖操縱谷歌並獲得高排名，例如一家保險公司在眾多論壇刻意刻意發佈大量的垃圾評論，並將反向連結錨點文字“最佳保險公司”，誇大不實這些非自然連結的相關性，或者同一家公司可能會付費閱讀連結“最好的保險公司”出現在有可能是關於寵物美容與主題毫無關連這種第三方文章中關鍵字填充填充大量關鍵字或重複關鍵字的網頁，試圖以特定搜尋詞組與相關的關鍵字來操縱排名我怎麼發現我是否被企鵝演算法懲罰了？首先區分企鵝許可的連結和人為處理的非自然連結是最主要的，簡而言之，企鵝演算法是通用於被Google索引的所有網站，而懲罰方式為Google確定為垃圾郵件連結的特定網站，這些手動處罰可能是Google使用者報告垃圾郵件連結的結果，同時也推測Google可能對某些行業會使用人員監控(如貸款公司)，某些行業可能相對較不會（如蛋糕麵包店）如果您的網站分析數據與企鵝演算法更新的日期同時排名或流量一起下降，那麼您可能已受此影響，請確保您排除淡季旺季預期現象的流量波動，並仔細評估您的SEO或連結做法是否會被Google視為垃圾內容，而使您的網站容易受到企鵝演算法更新影響如何從企鵝演算法中修復網站？與手動連結處罰不同的是，如果清理了的連結後，您必須向Google提交請求重新審核，但您無法提出取消懲罰這樣的要求，不過修正的問題通常會在Googlebot下次抓取您的網站時獲得“寬恕”，這些恢復步驟包括：刪除您自己添加的任何非自然連結，包括您自己創建的連結或已放置在第三方網站上的連結阻止垃圾郵件的連結是無法自己控制的修改過度優化網站內容以補救，確保自然撰寫關鍵字而不是使用機器人文章，重複或無意義地在網頁上呈現，避免與主題和正在使用的關鍵字之間是無意義的然而，創建企鵝演算法是為了彌補Google系統嚴重的弱點，使他們的算法被大量低價值連結和過度優化關鍵字的頁面“欺騙”，為避免Google將您的網站貶低為垃圾連結網站，您發布的所有內容應該是自然語言，並且您的收入連結和架構必須“是安全的”關於企鵝演算法的其它事項企鵝最初是作為一個單獨的“過濾器”發佈的，為通過該過濾器的搜尋結果，但在2016年9月，谷歌宣布企鵝已經成為核心搜尋引擎算法的一部分，並且攸關排名Google員工John Mueller稱企鵝演算法為全站點算法，這意味著如果大量低價值連結指向您網站的一個網頁，可能會降低Google對整個網站的信任度，然而，一些SEO組織聲稱，通過企鵝演算法4.0的更新，過濾器可能已經沒有那麼嚴格，所以它不再懲罰整個網址資料來源:https://moz.com/learn/seo/google-penguin

Question 9

SEO搜尋引擎優化:熊貓演算法

Accepted Answer

SEO搜尋引擎優化前，必須先認識Google演算法，瞭解Google搜尋引擎決定排名的規則，是依據哪些因素來決定關鍵字搜尋後的網站排名順序由於Google持續優化演算法規則，因此對於操作SEO搜尋引擎優化而言，必須要即時掌握更新的Google演算法相關資訊分析搜尋結果，才能避免讓SEO網站排名受到演算法更新影響而波動熊貓演算法更新 (Google Panda Update)Google演算法每年更新不下百次，但其中最重大的更新之一就屬2011年推出的熊貓演算法(Google Panda Update) ，其更新目的是為了降低內容品質低落的網站排名進入Google搜尋結果，並使具原創且有價值的內容網站排名上升而這項更新對於認真操作SEO搜尋引擎優化的網站而言，無疑是一大福音以下列出數個主要的熊貓演算法的過濾規則：內容稀少貧瘠的網站: 最常見於各種購物車網頁與小型電商網站中，僅放上商品圖，沒有針對各別商品撰寫內容重複性內容: 例如複製性的內容出現在不同的網站或是同一個網站不同網址，卻出現內容相同或高度相似的頁面，就有可能受到熊貓演算法的懲罰內容農場，大量的低價值文章或傳播錯誤資訊的網站付費廣告比例過高，缺乏SEO優化最重要的原創內容搜尋結果與網站內容不一致: 操作網站SEO搜尋引擎優化時，利用錯誤的Meta Title與 Meta Description誘導訪客點擊進入網站，但網站內卻沒有訪客要找的內容，致使跳出率提高太精簡內容如何防止網站排名受到Google熊貓演算法的懲罰？當網站已上線時，網站排名一直不佳，是否表示受到演算法的懲罰?建議您不妨透過以下兩點來檢視您的網站SEO搜尋引擎優化策略，將錯誤的部分一一改善，如1.消除網站中重複性內容頁面2.檢視網站內的文章內容是否豐富資訊正確等資料來源:台北數位集團

Question 10

RWD 響應式網頁設計優點

Accepted Answer

RWD 響應式網頁設計有什麼優點?隨著行動裝置以及網路的發達，網頁設計也必須符合行動用戶，企業很多都朝向響應式網頁設計的方向去改版與設計，較符合現今台灣使用者習慣，而響應式網頁設計為何如此重要？他又能為企業網站帶來什麼樣的價值呢?以下幾點為響應式網站的優點:可適用於不同尺寸的裝置採用 media queries ( 媒體查詢 ) 技術，針對不同的螢幕尺寸可以調整網頁版面的操作介面圖片大小...等，在電腦平板手機等裝置都可以瀏覽，無論他們的屏幕有多大或多小，響應式設計都能更方便的使用網站利於 SEO ( 搜尋最佳化 ) 經營使網站讓更多用戶觀看對您來說至關重要，而 SEO 是為您的網站帶來流量的最佳方式之一為了改善用戶的搜索結果，Google 也在行動版網站搜尋引擎最佳化設定指南中建議使用 RWD 技術來開發網站，以便它們在搜索引擎結果中的排名更高利於分享網頁當使用者分享網站文章時，常常因為另一個使用者開啟網址的裝置不同，而得不到好得瀏覽效果，有時還會因為網站的裝置判斷而導進首頁，而無法順利觀看到文章，文章的按讚數流量分析也容易被分散；RWD 只有一個頁面，分享出去的網址也只這一個，就不會有這些問題產生更易於維護在多個設備的多個網站意味著需要對所有網站進行任何更改，對於響應式網站，這意味著您只需進行一次更改

Question 11

GOOGLE中對RWD的定位

Accepted Answer

GOOGLE中的RWD在GOOGLE中對於RWD的定位為:回應式網頁設計是一種設定，可讓伺服器一律向所有裝置發送相同的 HTML 程式碼，並透過 CSS 調整網頁在裝置上的呈現方式 如果所有 Googlebot 使用者代理程式均獲准檢索網頁及其資產 (CSSJavaScript 和圖片)，則 Google 的演算法應能自動偵測這項設定為什麼在GOOGLE建議要使用RWD?原因有以下幾點:使用者可以使用單一網址，以更輕鬆的方式分享及連結到您的內容可協助 Google 的演算法為網頁正確指定索引編列屬性，不需要發送訊息指明既有的相對應桌面版/行動版網頁無需維護多個內容相同的網頁，減少工程師的處理時間降低行動版網站發生常見錯誤的機率使用者無需重新導向即可瀏覽最適合裝置大小的畫面，縮短載入時間此外，根據使用者代理程式執行重新導向容易出錯，可能導致網站的使用體驗大打折扣 (詳情請參閱偵測使用者代理程式時遇到的問題)Googlebot 檢索您的網站時可節省資源對於採用回應式網頁設計的網頁，任何 Googlebot 使用者代理程式只要檢索這些網頁一次 (不需依據不同的使用者代理程式多次反覆檢索)，即可擷取所有版本的內容提高檢索效率可間接協助 Google為網站中的更多內容建立索引，並確保擷取的內容是最新版本綜觀上述，什麼是RWD?RWD（Responsive Web Design）又稱為響應式網站，這種網頁設計可以使網站能針對螢幕大小的不同而自動調整畫面內容，並且讓使用者不必再縮放捲動等操作所以使用者透過各種裝置瀏覽網站，此網頁不用在擁有電腦版以及行動板來調整版面，而是利用相同網址以及程式碼，來達到不同的顯示效果因此，GOOGLE才會建議您使用RWD資料來源: GOOGLE

Question 12

2021網頁設計新趨勢

Accepted Answer

每年的網頁趨勢都將會有些新變化，而在2021年的網頁設計趨勢似乎並有著相同的一個目標:網頁設計所追求的不是高科技的幻想，而是尋求現實主義的新高度以下所整理的數個特性在2021年使網頁更有關注度:網站的視差動畫 視差是當距離觀看較近的物體與較遠的物體移動起來，會發現較遠的物體移動得較快，而這就是所謂的視錯感儘管在我們日常生活中發現這一點，可是在網頁的應用的效果卻是真實與超現實的從微動畫到視差動畫，我們會發現現在的動畫效果越來越常應用到直到2021年網頁動畫透過頁面元素分離，利用圖與背景來達到視差效果 圖片來源:Pinch Studio擬態化設計(Neumorphism)Neumorphism 是由New Skeuomorphism組合的新名詞，也就是新型態的擬物化風格設計，中文稱作新擬態同化，也有設計師稱其為 Soft UI（軟UI）Neumorphism 是 2020年最熱門的新風格，它透過燈光的原理，替圖形加上高光和陰影，類似於浮雕的效果，賦予元件真實和立體感此風格源頭為烏克蘭的設計師 Alexander Plyuto，於 2019年底所發表的作品Skeuomorph Mobile Banking擬態化具有以下幾點特徵:元件不漂浮元件顏色與背景統一，不能純黑或純白利用明的暗陰影產生凹凸感對於擬態化設計的期待則是在2021將設計中的按鈕搜索欄和文本框上看到這種風格化的現實主義圖片來源:99Designs ODarka抽象設計抽象的形狀則是利用幾何元素(如正方形以及圓形)所組成的形狀，可以給人簡單以及極簡的感覺在大多數的情況下，可以搭配照片給人極端的對比以及讓網頁注入活力，我們相信在2021年，抽象設計會融入更多元的網頁設計中圖片來源:99Designs ODarka顏色的舒適度現在大多數人在手機以及電腦上花費大部分的時間，因此眼睛會造成較大的負擔，所以在顏色搭配上能讓眼睛更輕鬆也是網頁設計師的一大重點在2020的以暗色系的趨勢說明了這特性，而在2021年程式設計師在暗色以及較亮的顏色中找出更柔和的顏色，如:健康的綠色柔和的藍色溫暖的粉色這些顏色不像純黑或純白那樣，反而會使人更平靜與放鬆圖片來源:99Designs ODarka圖片來源:Davina Spriggs Dribbble更多互動的網頁設計隨著COVID-19流行以及居家上班學習，網際網路已成為不可或缺的一部分，線上活動已成為社交聚會以及娛樂的常態，許多品牌都已轉向網站來維持發展，網頁設計師為了這特點，創造了許多有意義並具有衝擊力的設計圖片來源:SixtyTwo Dribbble滾動動畫當使用者在滾動網路頁面時，他們所做得並不只是瀏覽頁面，而是在體驗網站所給予的感受當使用者感受到網站在與自己互動時，會使他們會有更多的興趣找到網站想要留給使用者的資訊而滾動(Scrolling)是一種最能讓使用者體驗到微妙且簡單的互動之一，因此在2021，網頁設計師正在增加在滾動時所給予的反饋，能使使用者在滾動時都會感覺到一個新頁面圖片來源:outer Dribbble使用者體驗問卷使用者在使用網站時，會為此網站甚至是品牌默默打上分數，而現在多數品牌會利用使用者問卷來得到使用者的體驗，並且讓其描述感覺並從中了解使用者喜好，並且提升自己的產品在2021趨勢，利用使用者體驗問卷，並將其美化，讓使用者填寫起來感覺不無趣，這樣並可以針對使用者去提升網站圖片來源:Alena Sokolova良好的使用者體驗網站功能一直都是網頁設計的關鍵，隨著頁面速度以及行動裝置有好設計的提升，會讓使用者對網頁設計需求慢慢增長，製作時必須考慮到多方面的需求，讓網站在任何情況化都可以有良好的體驗，所以優化您的網站，使網站更具功能性，不僅可以讓客戶有更好的印象，還可以提升SEO資料來源: 99designs

網頁設計新知