Error message

Notice: Undefined offset: 1 in counter_get_browser() (line 70 of /volume1/librarythings/www/sites/all/modules/counter/counter.lib.inc).

響應式網頁設計:發現與挑戰

響應式網頁設計:發現與挑戰

Responsive Web Design, Discoverability, and Mobile Challenge

  越來越多人希望能使用行動載具(mobile device)來完成在桌上電腦上能做的事情,面對這樣的趨勢,圖書館可以做些什麼?就圖書館網站而言,圖書館網站是否該在行動版網站與電腦版網站提供相同的內容與功能?事實上,許多圖書館網站的使用者都已有使用行動載具來瀏覽圖書館的電腦版網頁(non-mobile optimize library websites)的經驗,這些網站在使用者的智慧型手機上看起來可能會非常的小,他們需要不斷地放大縮小畫面(zoom and pinch)來前往已知的網頁區塊,或是透過猜測的方式,來探索所需的資訊。若是圖書館能提供響應式的網頁設計,這個過程可以變得較不麻煩與簡化。

什麼是RWD?

  在談RWD之前,我們可以先了解一下過去的網站設計方式。過去大多的網站設計開發是採用固定像素的方式來設計(pixel-perfect web design),這種設計方式讓網頁看起來像是一本雜誌,其目標是讓網頁可與原始的設計盡可能的相似。然而,使用者的瀏覽器並不像是紙張有固定的大小,如果網站設計時是以1024x768螢幕解析度為設計基準,使用者只要一調整瀏覽器視窗的大小或是調整螢幕解析度,網頁的設計將會有跑版或是大亂的可能。隨著行動載具螢幕尺寸的多樣性,採固定像素設計的網頁就開始出了問題,而RWD的想法與網頁設計的方式也開始出現。RWD的目標希望可以讓網頁在不同裝置不同尺寸螢幕上,看起來都一樣的容易閱讀與瀏覽,為解決固定像素設計的問題,RWD使用下列三種方式來進行網頁的設計:

  1. 彈性的(flexible)、格狀基礎(grid-based)的版面設計
  2. 彈性的圖像(flexible images)
  3. 媒體查詢(media queries)

Responsive Web Design

Pixel-perfect Web Design

#page { width: 90%; }

#page { width: 960px; }

h1 { font-size: 1.5em; }

h1 { font-size: 24px; }

img, embed, object, video { max-width: 100%; }

 

@media screen and (min-width: 1024px) { … }

@media screen and (min-width: 520px) { … }

@media screen and (min-width: 768px) { … }

 

  RWD可以讓網頁本身適應不同行動載具的螢幕尺寸來調整內容的排版,這表示,一個網頁的排版不再是固定的,網頁中的各種元件也不再是永久的擺置在同一個地方;取而代之的是,當螢幕的尺寸只要一改變,網頁的排版將會根據CSS自行調整,並重新安排網頁中各項元素的呈現位置。

RWD的優點

  1. 圖書館僅需維護一個版本的網頁內容。
  2. 圖書館不再需要額外的推廣行動版網站。
  3. 使用者在RWD設計的網站中可以找到與完整版網站(full website)中相同的資訊。
  4. 使用者更容易瀏覽網站的內容,不需要不斷地在有限的螢幕尺寸中縮放網頁內容。

RWD的缺點

  1. 不良的RWD設計會與非RWD設計的網頁一樣難使用:受限的空間和小螢幕尺寸讓設計者重新思考最重要的內容是什麼?以及其他的內容該如何以精簡整潔的方式呈現。
  2. RWD沒提供使用者回到檢視完整電腦版網站(full desktop website)的選擇:對於熟悉圖書館網站使用的使用者而言,他們明確的知道所需資訊的所在位置,RWD重新排版網頁元素,可能導致使用者失去方向或產生疑惑(解決方案:http://creativeandcode.com/demos/responsive-view-full-site-update)。
  3. 網頁讀取時間與獨立建置之行動版網頁(separate mobile website)相比會耗費較多時間:獨立的行動版網頁提供簡化的網頁內容,RWD則是提供完整的網頁,雖然CSS可隱藏部分內容,但JavaScript libraries等仍會被完整下載,故RWD可能會有存取效能的疑慮。

RWD的資源與建置工具

  1. CMS的RWD版型:例如Drupal、WordPress、Joomla等CMS系統的響應式網頁設計版型。
  2. Bootstrap(http://getbootstrap.com)。
  3. JQuery Mobile(https://jquerymobile.com)。
  4. Responsinator(https://www.responsinator.com)。

結論

  響應式網頁設計是目前最新的網頁設計趨勢,可以幫助圖書館來滿足使用者在行動優先文化下(mobile-first culture)對於圖書館行動服務需求的高度期望。但這並不表示RWD是圖書館提供行動化服務的最佳方案,亦有圖書館經考量後仍選擇建立獨立的行動版網站或是開發專屬的App應用程式,部分圖書館亦採取複合式的方式提供網站的行動化服務,例如同時提供RWD與獨立的行動版網站,供使用者依需求自行切換網站版本。無論是採取何種設計方式,圖書館最大的挑戰是該如何將複雜的內容與網站的特色以不複雜、簡單的方式傳遞給行動載具的使用者,如此,才能便利使用者利用圖書館各項豐富的資源,提升使用者的使用圖書館網站的經驗與效率。

參考書目

Kim, B. (2013). Responsive web design, discoverability, and mobile challenge. Library Technology Reports, 49(6), 29-39.