加入RUN!PC粉絲團
 
企業採購 - Application
分享到Plurk
分享到FaceBook
 
七種可根據行動設備解析度調整網站視覺的建置工具(Responsive Design)
文/Nathan Segal‧譯/Nica 2013/7/5 下午 03:33:24

隨著智慧型手機與平板電腦的使用日趨頻繁,你所經營的網站在小螢幕看起來是否很好就越來越重要了。本文所介紹的這七套工具程式,有助於建置針對手機、平板電腦與傳統桌面環境裝置所設計的全方位網站。

當顧客透過越來越多不同種類的裝置存取網站時,回應式網站設計(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的是:它沒有建置費用,也沒有合約的存在。