七種可根據行動設備解析度調整網站視覺的建置工具(Responsive Design)
隨著智慧型手機與平板電腦的使用日趨頻繁，你所經營的網站在小螢幕看起來是否很好就越來越重要了。本文所介紹的這七套工具程式，有助於建置針對手機、平板電腦與傳統桌面環境裝置所設計的全方位網站。

當顧客透過越來越多不同種類的裝置存取網站時，回應式網站設計(responsive Web design)就變得更為重要了。回應式網站設計指的是建置可針對桌面環境、平板電腦與行動裝置調整，並展現其功能的網站外觀。每種裝置的檢視大小各不相同，對網站設計者而言是個挑戰，這指的不僅在於設計本身，還包括由一種裝置調整為另一種裝置所衍生的管理網站元件需求。

圖片的展現方式便是其中一例。在桌面環境上看起來不錯的，在行動裝置上就不見得是那麼回事了，因此網站開發人員必須考量的目題就包括了像是比例、文字、圖片大小與壓縮等。另外要考量的是：各種不同的網頁元件要如何在尺寸不同的較小螢幕裡組織架構。

為幫助你解決上述與其它回應式網站設計的挑戰，本文介紹了幾個能幫助你達成目標的工具程式與線上服務。

Adobe Dreamweaver

Adobe Dreamweaver CS6可建構變動式的版面。此工具程式可以讓你三種版面—Web、平板與行動裝置—一次完成。只要把Media Queries加進這些變動式的版面，便能輕鬆控制網頁外觀。 Media Queries讓設計人員可以在不同裝置上展現不同風格，一個範例可代表一組樣式，而這組樣式只有在螢幕大於800像素時才生效。

Dreamweaver可同時建構行動app與網站。其主要差異在於有些行動站台可以設計成能在所有行動裝置上顯示。相對來說，行動app提供更具功能性，但必須針對每個裝置進行客製化。這麼一來成本馬上就提高了。你可以到New Media Campaigns blog部落格瞭解更多各種方法內容的差異與成本。

近期Dreamweaver的更新包括有Fluid Grid版面及Web前端整合的強化。

所有的Fluid Grid元件都被放在Insert選單的Structure類別下。新的選項包括Ordered、 Unordered與List。針對DIV元件的選項，像是複製(duplicate)、鎖定(lock)與置換(swap)，如今都會出現在你選擇元件的時侯。使用者也可以巢狀設計流變(fluid)元件。流變格線(Fluid Grid)可以在Web應用上運作，也能在行動式站台下使用。

此外，現在已經可以從Adobe Edge Web Fonts函式庫把東西加到你的版面裡。當你在作這件事的時侯，會加入script標籤。此標籤會參考從Creative Cloud伺服器下載字型的JavaScript檔，存放在瀏覽器的快取區裡。Edge Web Fonts由Adobe的Typekit所提供，所以它們可以與Adobe Edge工具整合。

Adobe以其Creative Cloud套件為基礎，提供數種價格模式。商用軟體元件的價格區間，從每個月$19.95美元起跳。

Adobe Edge Reflow Preview

由Adobe開發的Edge Reflow，使用可配合你設計的格線(或稱邊框)系統。

當你縮小版面的時侯，這個介面可以調整網站元件的定位，且設計的邊框可以在版面變動時讓元件往下移動。

Edge Reflow讓你在桌面環境或行動站台從中擇一優先建置。它包含了切換功能(toggle)，若有必要，你可以輕鬆地在各個版面間作轉換。這完全視你在建立邊框時是以像素為基礎，還是以百分比為基礎，這些元件要不就是能為你縮放版面，要不就是維持固定大小。
假設，螢幕上有數條水平邊框，每條都是固定大小。當你縮減工作空間的寬度時，右方的邊框就會開始往版面的邊界移動。若你繼續縮減寬度，邊框最後會掉到它本身的左下方。這在縮放設計時可以節省相當多時間。

Edge Reflow讓設計者以視覺化的方式測試他們的創意。Edge Reflow的介面讓使用者在行動式與桌面環境版面間前後切換變得簡單了，因而能夠讓設計者輕鬆看到發生了什麼事。當設計者作出她喜歡的版面時，可以取出這個版面的CSS作進一步開發。

Edge Reflow為Adobe Cloud的一員，免費。

TopStyle 5

TopStyle 5 Pro乃Windows上的HTML5與CSS3編輯器，具備了一些非常有用的功能，包括產生漸層(gradient)與文字陰影的工具程式，以及建置網站與Apple裝置app的框架。

由於CSS3規格仍未定局，你必須使用CSS特定瀏覽器的處理語法(vendor prefix)確保它們在各瀏覽器之間不會造成任何混淆。要記得使用了哪些設定其實很難，所以Prefixr會在你的程式碼裡加上特定瀏覽器的處理語法。

CSS3亦提供建立漸層功能。因此可以節省許多處理程式碼的時間。TopStyle擁有創新的工具程式，可以快速指定你版面要使用的漸層，而且之後還可以編輯這些設定。

同時，Text Shadow Generator可以讓產生文字陰影效果的工作更輕鬆，無須花太多時間編輯程式碼。

最後要說的是，TopStyle 5還包括iWebKit 5功能，有助於產生自有iPhone、iPod Touch與iPad相容網站或Web應用的框架設計。

TopStyle 5單一使用者下載為$79.95美元。現有的Topstyle 4使用者支付$29.95美元即可升級。

WinkSite

WinkSite為免費的行動服務，可以幫你利用Google AdSense 讓站台賺錢，還可以決定將廣告放哪個位置最好。你也可以為贊助者建立自訂廣告。Winksite可免費使用的上限為五個站台。

Winksite的使用者可以建置社群並邀請其他人加入。你也可以建立電子雜誌或留言簿然後發表調查。此外，還能夠為各類型的贊助商產生自有廣告、選擇它們要出現在哪些網頁裡，並決定出現頻率及所在位置。其支援的檔案型態包括YouTube、DailyMotion、MetaCafe、Blip.TV影片與FLV檔。

Volusion

Volusion是一套全方位的電子商務工具程式，它可以讓你建置購物車並把它加到你的網站裡。這套程式還可以顯示你站台的桌面環境、平板電腦及行動版本。

Volusion是可以整合到版面裡的全方位網站購物車系統。若你想用不同的處理方式，必須先建置自已的網站，在完成網站建置之後，才能取得、客製化並加入購物車。在你網站的桌面環境與行動版本上，皆可列出數千筆商品。

Volusion提供免費版讓你可以快速上手，不過你應該知道，免費版會有所限制。若想測試你的服務在行動版上的狀況，那你就得付費。註冊帳號後，可以選擇在設計處理時，是要自行建置站台，還是和銷售代表合作。還必須特別留意的一點是：這是專利產品，它只能在Volusion的伺服器上跑，無法在你的代管主機上使用。

Volusion的價格模式，範圍從每個月$15美元到$195美元都有，亦提供企業級的定價。價格的決定因素包括了資料移轉、使用的產品數量、頻寬、社交媒體整合以及評價服務。

GoMobi

GoMobi內容管理系統可以用來建置行動網站，六千種以上的行動裝置皆可檢視之。你也可以將程式碼加入到站台的桌面環境版本裡，這麼一來透過行動裝置瀏覽桌面環境站台的使用者，便能無接縫地重導至行動介面上。

GoMobi提供易於使用的介面，讓複雜的程式設計隱於表演舞台背後。舉例來說，要加入你的GPS座標，只需要輸入地址、將這個段落加至行動站台並儲存變更即可，GPS的功能會自動出現在行動介面上，隨時可用。對於需要更多選項的設計人員而言，這個介面還可以經由使用版型客製化。此外，你可以透過將網頁連結至GoMobi介面的方式，加入客製化的CSS、HTML和JavaScript程式。還可以上傳你自有的小圖示。

雖然 GoMobi提供相當多的外觀選項，但還不支援表格與JavsScript。你可以用Dreamweaver建置客製化的行動網頁插入至GoMobi介面，用這種方式，就可以在行動站台裡使用 JavaScript、表格與客製化CSS。你想要的話也可以保留這些客製化的網頁，不過你得瞭解，GoMobi一如Volution，屬於專利產品，只能在GoMobi的伺服器下執行。

要註冊 GoMobi必須透過像HostPapa這樣的經銷商。它不貴—透過HostPapa每個月只要$5.95美元—但這也意謂著無法擁有完整的介面存取。若想全面控制你的所有物、註冊事項與GoMobi站台，你必須自已成為經銷商。這部份的費用各有不同，端視主機代管供應商而定，不過它可以讓你全面掌控GoMobi Site Builder、在介面上有系統地管理使用者，還可以向你的用戶端索取代管費用。

Mofuse

你可以用Mofuse自已動手建置網站行動版，也可以雇用Mofuse幫你作或成為該服務的經銷商。

Mofuse的外觀與GoMobi類似，因此容易理解、也能輕鬆建置行動站台。它只需要花二十分鐘左右便能完成，不過這要視你經營上的需求而定。輸入一些基本資訊、啟動預設的版型，然後就可以開始建置。Mofuse的介面可以快速輸入資訊至CMS裡，之後可以將它加入至介面，這種作法讓設計人員比較輕鬆，能夠快速建置行動站台。

接著便是Mobile Site Menu。你可以在這裡將元件加進站台，再編輯展現的順序、外觀與風格、CSS屬性、顏色、貨幣、分析、社交媒體整合等等。

就像其它行動版程式，你可以在網站建置完成後產生程式碼，再將它插入桌面環境版站台。若有人用行動裝置拜訪你的桌面環境站台，程式碼偵測出來，便能無接縫地將使用者重導至行動介面。

Mofuse提供十四天免費試用。其價格指標各有不同，視每月瀏覽量與所需建置區塊而定(範圍從RSS feeds到天氣預報widget都有)。以JumpStart套組為例，提供十個元件、每月1,500瀏覽，$7.95美元。相對地，Ultimate套組提供的是無限制的元件，每月1,500,000次瀏覽，$199.00美元。不過，Ultimate套組以及每月$89美元的Small Business套組，皆可讓你編輯CSS。

你也可以選擇成為 Mofuse服務的經銷商。但不同於 GoMobi的是：它沒有建置費用，也沒有合約的存在。