我們身為網站公司，如果沒有好好的去了解RWD的運作，有點說不過去，所以Pagemax團隊特地將RWD拆解來做簡單的分析及說明。

今天的學習不講語法，只針對原理，所以不會有CSS、不會有很多的英文，目的只有了解運作，好的，我們將這次講解分為3個項目：

• RWD如何作用?
• RWD範圍影響。
• RWD對SEO的影響。

單元一 – RWD如何作用?

如果要讓您的網站擁有RWD技術，我們必須要擁有HTML5的結構，您會說那HTML4可以嗎?當然也可以，只是會不會出問題而已，所以很明顯的，如果要完整運作就必須有HTML5的結構，很多客戶會來問網站是早期製作的(假設已經有10年以上)，我們想要改為RWD網站，當然評估完重新設計的答案比較OK，先不論架構的問題，光是上稿資料是不是能完整呈現就是一個問題了，所以架構必須為HTML為前提。

已經知道骨架是HTML5了，再來就是改變骨架的裝置，CSS由於今天不講語法，我就簡單說明一下，在裝置上遊走變化的控制者就是CSS　層疊樣式表（英語：Cascading Style Sheets，簡寫CSS）出自於WIKI，總之它就是會依設計師幫您在想要的裝置上變化架構、樣式、顯示隱藏．．．。

再來呢?還有嗎?當然有，這個就是meta，meta是甚麼?
簡單來說meta是很重要的東西，您會說我好像沒解決您的疑惑，的確，meta是一個博大精深的標籤，舉例：

它可以說．．．

• 網站是甚麼語言的編碼
• 網頁描述、 關鍵字、 Facebook要用的東西、 Google要用的東西
• 搜尋引擎要用的東西
• 還有RWD會用到的東西
• ．．．很多講不完的東西

所以結論是網站要覺醒RWD的能力，必須搜集HTML5、CSS、Meta，三樣神器，這三樣神器可以透過服務您的網站公司來諮詢下落。

單元二 – RWD範圍影響。

當已經擁有RWD的能力之後，重點就是要在哪邊啟動這個功能，很簡單：只要可以看網站的地方幾乎都會啟動，差別在於如果某些裝置沒特別去處理，可能會造成UX或UI的不便，這時可能會針對某種尺寸或是裝置來處理，網路上其實都找的到裝置及尺寸的對照表，對設計師而言是一大福音，相對的也是一個煉獄，因為真的很多裝置，我們來看看下方這個煉獄尺寸表：

．．．

．．真的很多種裝置跟尺寸，所以您做一個網站，設計師就要幫您顧到這麼多種尺寸跟裝置，您要說網站沒甚麼，都只是在表面上遊走而已，真正是背後的運作，要讓一個網站符合這些規格才是真正本質，而且，我只能說裝置只會越來越多，不會越來越少，所以其實有時候還是需要鼓勵一下，真的要體諒設計師，很多時候網站或APP使用上很順，但它的背後是用很多辛勞所堆積出來的，多一句支持的話，相信會比任何行為來的好，OK，有點離題了。

結論RWD是無所不在的。

單元三 – RWD對SEO的影響。

這部分其實很多文章都有提過，尤其是針對Google，Google喜歡一些主流的東西引入搜尋引擎，一方面也希望，搜尋出來的網站品質要優，一方面也是希望既然要做網站就要有一定的標準，不然下廣告或行銷都是白搭的，Google在2015年4月21日修改搜尋引擎演算法，就是開始對行動裝置(手機、 平板)友善度的排序調整，並且增加手機相容性檢測網站，輸入網址就可以看是否符合。

行動裝置相容性測試- Google Search Console

除此之外，Bing( Yahoo!奇摩搜尋引擎)也跟進，所以RWD已經到不得不去重視的時候了，而且如果沒RWD基本就不用談SEO要做得多好了~
怎麼說呢！在行動裝置的搜尋結果一定先有RWD網址優先，如果相同的搜尋條件下前1000家都有做RWD，可想而知那沒有做的，就會被往下擠，道理就這麼簡單。

結論是既然有心在網路市場經營，就必須擁有各裝置對應的UI及UX。

最後，我們題外來看裝置的使用率，到2017為止，在手機使用率已經遠超於桌機(80.5%)，真的幾乎人們已經完全被手機黏住了，已經到了可以整天不開電腦，但不可以不看手機的時代了。

所以網站真的該改RWD了~

(轉貼本文禁止修改上述內文，禁止商業使用，並且必須註明來自Pagemax原創作者 ，及附上原文連結：RWD解密 – 響應式網站的機密)

這篇文章 RWD解密 – 響應式網站的機密 最早出現於 Pagemax。

附上外掛連結：Full Page Screen Capture

您可以先安裝起來再回頭來看我們的介紹與教學。

首先您要先知道裝好之後，這外掛的位置在什麼地方，其實如果您有安裝Chrome瀏覽器的外掛位置大多會在同個地方，如下圖所示：

大部分外掛都會在Chrome瀏覽器網址列的後方，上圖紅色圈起來的就是本篇的主角「Full Page Screen Capture」。

接下來我們來試試這好用的外掛，您可以先找一個想要截圖的網站，篇幅長一點，接下來，點選一下剛剛的相機小圖示。

您會發現有一個小精靈在移動．．．接著視窗畫面也會慢慢往下移動，此時就是外掛在幫您把圖片一塊一塊的銜接起來。

緊接著會自動將結果轉到另一個頁面。

此時您已經順利的把網頁整個篇幅都抓下來了，最上方有幾個功能我來一一說明：

由左至右依次序 –

• 旗子 – 問題回報。
• 垃圾桶 – 放棄此次截圖，簡單說就是關閉。
• PDF – 存成PDF格式
• 圖片 – 存成圖片格式，這邊有JPG跟PNG可以選擇
• 時鐘 – 歷史紀錄，就是您有用這個外掛抓過的網站位置，都會幫您記錄
• 齒輪 – 設定
  • 可以設定預設下載圖片的格式。
  • PDF的尺寸。
  • 設定一個存檔的目錄名稱。
  • 截圖完自動下載。
  • 下載權限(預設不用去設定)
  • iframe權限(預設不用去設定)

這個截圖工具真的很好用，試過蠻多的工具為什麼要特別推薦它，因為現在網站大多是jquery的一些特效，截圖的過程常常會有異常，但是這款真的很穩定，就是妥妥當當的整個抓下，目前測試到現在沒有發生過問題，所以推薦給會常需要截圖的朋友們，另外它抓下來的圖片真的很清晰，不會有被壓縮的感覺，真的是一支很不錯的小工具。

(轉貼本文禁止修改上述內文，禁止商業使用，並且必須註明來自Pagemax原創作者 ，及附上原文連結：Full Page Screen Capture 螢幕截圖的好幫手)

這篇文章 Full Page Screen Capture 螢幕截圖的好幫手 最早出現於 Pagemax。

今天我們就來解決這個問題，

要打造一個有設計感的公司或商家品牌 LOGO，必須要建立在一套專業的標準下來製作，這樣才可以隨心發揮保有質感，今天給大家介紹一個線上製作LOGO的工具 – DesignEvo

在開始之前，我簡單的介紹它的幾個優點：

• 它有中文
• 步驟簡單
• 很直覺

我講的其實很容易，但實際操作真的很容易，如果真的喜歡DIY設計品牌的朋友，真的可以試試看這支強大的線上LOGO製作工具。

斗大的標題就很直接跟您說「隨心所欲免費製作你的專屬Logo」。
底下就說 「DesignEvo提供了7000+ Logo範本，只需簡單三步，即可輕鬆製作出獨一無二的Logo設計」。
有沒有看到就是3個步驟就可做出來獨一無二的LOGO喔，現代人講求的就是要效率。

這個平台是不用註冊就可以使用的，所以您可以先點選中間的「免費製作LOGO」的按鈕，開始3步驟來設計。

經過一陣子的頁面讀取…

一開起來，還蠻多東西的，很豐富，我先來一一介紹，先看到左方有一排可以用關鍵字搜尋，也可以按照分類的項目，非常多類別，隨便點選一個分類您會發現右方會改變內容。

您也可以點選上方「我的設計」選單，緊接著，因為是您個人的資訊，所以就得要註冊一個身分。

註冊的好處，可以將您設計的結果存檔到雲端，之後要修改或取得就不用擔心資料不見啦！

接下來正式來操作：

Step1 – 

點選畫面的右上角有一個「新建空白畫布」。

進入空白畫布可以用關鍵字來搜尋想要的圖示來編輯。

也可以用顏色工具來改變圖示的色彩、透明度工具改變透明度，或是翻轉鏡射工具改變方向。

Step2 –

有圖就要有字，說到字的部分不得不大推一下，您可以想像如果電腦沒字型就得用醜醜的預設字型打字當LOGO，一旦加入了字型，整體質感提升非常多，而且DesignEvo提供的字型真的很多，非常夠用，而且有繁體字，有些平台的要碼就是只有英文，不然頂多中文給你個簡體字型，所以說DesignEvo這點真的很佛心。

再來還可以做一些裝飾用的花邊或是線條，總之這也是一堆可以選擇，真的應有盡有。

編輯的最後就是背景色了，這邊有透明背景、純色、漸層那文檔顏色是甚麼呢?

文檔顏色就是色碼或是您可以直接用顏色選擇器自訂色彩。

Step3 –

最後一步呢~就是準備將您辛苦的設計變成品了，再編輯畫面右上角有三個可以使用的功能，分別為預覽、保存、下載。

使用「預覽功能」系統會幫您直接套用在文宣上面，您可以想像未來您的設計會是一個怎樣的樣式，是否要再繼續調整或定案。

「保存功能」就是存檔，下次要編輯時可以再取出繼續編輯囉！

「下載功能」點選之後會出現下方資訊：

它分為2個方案，差別在哪裡呢？

講白了就是多了以下項目：

• 矢量圖文件 (PDF, SVG)
• 下載字體文件
• 版權所有

這邊其實主要是版權的部分，您可以用您自行做的LOGO來做商標註冊，但是DesignEvo所提供的範本是不允許去做商標註冊的，差不多就這樣。

對了，如果真的想先簡單的免費使用一下，DesignEvo是有讓您下載500X500像素大小的試用版喔~

代價很簡單就是在您的網站放個DesignEvo的連結，幫忙分享一下，畢竟人家架構一個這樣的平台也是花了不心思。

附上連結：DesignEvo

(轉貼本文禁止修改上述內文，禁止商業使用，並且必須註明來自Pagemax原創作者 ，及附上原文連結：LOGO設計自己來，強大商標製作工具-DesignEvo)

這篇文章 LOGO設計自己來，強大商標製作工具-DesignEvo 最早出現於 Pagemax。

為甚麼我們一定要用SSL呢?

首先，我們先了解與HTTP向較之下，HTTPS是較安全的網路通訊協定，可保護傳輸內容及防止資料遭竊，資安部分在此篇文章先不深入。

2014年，Google也提出，HTTPS作為排名信號

然而在Google也說明，網站在默認情況下為HTTPS頁面編制索引，致力於推廣更安全的網絡，並為用戶提供更好的瀏覽體驗，可見Google其實在網站整體面向不斷的更新，讓使用者可以在安全的前提之下得到良好的瀏覽體驗。

而且HTTPS網站不但擁有安全的環境，而且加載速度更快，比非HTTPS網站快70％以上。

您可以自行體驗一下：HTTP VS HTTPS

未來，在整體的網路市場，HTTPS是不可缺少的一環，不光是Google連蘋果也要求APP開發者也必須遵守HTTPS協定，Facebook的API也強制網站跟進，甚至各大SEO廠商都會要求，所以如果您的網站沒有加裝SSL，請詢問您的設計公司是否有提供安裝服務。

(轉貼本文禁止修改上述內文，禁止商業使用，並且必須註明來自Pagemax原創作者 ，及附上原文連結：SSL與Google排名的關係，你的網站Google喜歡嗎?)

這篇文章 SSL與Google排名的關係，你的網站Google喜歡嗎? 最早出現於 Pagemax。