幾個非營利組織的行動網頁建議及範例

（本文參考了 Seven Tips for Nonprofits Going Mobile 及 4 Mobile Nonprofit Sites to Learn From）

（圖片來源 shutterstock）

許多數據顯示，使用手機和平板電腦瀏覽網站的人數，已經超過桌機和筆電；這代表更多人透過行動裝置瀏覽資訊、購買產品，甚至捐款。因此對非營利組織來說，如何讓網站在各種裝置的介面上容易被閱讀、讓使用者快速找到相關資訊，成為重要課題。

現在也有越來越多 NGO 開始嘗試「回應式網頁設計」（Responsive web design，縮寫為 RWD）——不論使用哪一種行動裝置瀏覽（不同的解析度／瀏覽器／觀看方向等等），都能獲得良好的瀏覽經驗，目前 CSS 與 HTML5 等規範化的協議技術，都能達到瀏覽器兼容的需求。改善網站整體功能，讓影響力可以更深遠、接觸更多不同裝置的使用者、增加線上捐款的便利性，將成為 NGO 未來在網站上的重要趨勢。

那麼，做一個行動版網站或使用回應式網頁設計，有什麼需要注意的？以下是幾點原則：

1. 先分析網站的訪客數據

可以透過 Google Analytics 等網站分析工具，瞭解使用者透過什麼樣的裝置瀏覽網站？透過什麼作業系統？哪一種瀏覽器最多人使用？針對這些族群，注意行動版網頁的設計細節及程式的測試。

2. 做好行動版與桌機版網站的轉換

目前已有技術可以自動判斷使用者的裝置，讓手機或桌機讀取各自適用的網頁版本。頁面上最好也有超連結，讓使用者可以自行選擇在手機上閱讀電腦版本，畢竟電腦版本的資訊會比較豐富。

3. 避免頁面上塞滿過多資訊

小螢幕上沒有太多空間可以放很多的訊息，而且，使用者往往將內容「滑」過去，而不是一字一字細讀，所以必須將內容的優先順序排列出來：哪些是最重要的訊息？並把非必要的內容直接刪掉。考慮多使用小標題、條列及清單示的寫法。

4. 降低網站的讀取時間：注意網頁檔案的大小

手機讀取網站的時間請控制在 5 秒以內。有一些線上工具可以幫助你確認網站的讀取效能和問題，例如 Google 的網頁效能工具，會告訴你還有哪些問題有待改善。如果頁面上使用了一些圖片，要確保它們在小螢幕上的排列、設計及檔案壓縮（最好使用 jpeg 檔），簡潔好看。記住：讓網站快一點，使用者會更喜歡它！



（這是科技濃湯部落格在 Google 網頁效能工具的測試結果，會顯示需要修正的問題及建議）

5. 網站設計簡約

太多文字和圖片，過於雜亂的設計，都不適合在小螢幕上呈現。盡量保持簡單、讓相關的訊息在正中間的上方，這樣使用者就不需要到處找尋，並且記得將頁面上的行動指示（call to action）減至一二個就好。

6. 不要使用多數行動裝置無法支援的技術

包括 Flash 和許多動畫技術，捨棄這些元素會讓你的網站表現得更好。

7. 別讓你的支持者輸入太複雜的表格

只要求支持者輸入最必要的資訊。減少輸入的字數，盡量使用下拉式選單和勾選方塊，畢竟在行動裝置上打字是很痛苦的一件事。

8. 網站的按鈕必須適合成人的指頭點選

確保人們不需要將螢幕放大，就可以點選按鈕；而且按鈕的周邊要保留適當的空白空間。Apple 公司建議適合指頭點擊的大小是 44x44 px，特別是線上捐贈的按鈕，要夠大並引人注意。

9. 確保組織的社交媒體有露出

行動裝置用戶在社交媒體上時常很活躍，例如臉書或 LinkedIn，別忘了在頁面上保留組織的社交頻道的超連結，吸引更多新的支持者。

最後，網站上線時，記得多多測試不同的行動裝置，以及同一個裝置上不同的瀏覽器。接下來，一起看看幾個值得學習的 NGO 行動網站：

1. AIDS.gov
這個網站有開放而簡潔的設計，它把許多資訊編排得很好，你可以往下拉到你需要的資訊而不會迷路。
2. Boot Campaign


這個網站有清楚的行動指示、很棒的影片及資訊圖表，讓人們可以快速瞭解他們的使命及目標。 3. Charity Water


這個網站使用許多具有渲染力的圖片，並且一開始就有簡潔明瞭的目標陳述。同時，他們也把捐款的成果及流向，呈現在網頁上，透過財務責信讓捐贈者增加信心。 4. World Wildlife
這個網站透過圖片引導使用者、有很強的行動指示，頁首選單讓人可以快速找到相關資訊。此外，即便有很多圖片，這個網站的讀取速度仍舊很快。

另外，根據非營利組織共好科技（Nonprofit Tech for Good），以下 11 個網站也有很棒的 RWD 設計（建議您可以使用行動裝置讀取）：

1. 反對強制最低量刑家庭組織（Families Against Mandatory Minimums (FAMM)）
2. 比爾及梅琳達‧蓋茨基金會（The Gates Foundation）
3. 美國同性戀者反詆毀聯盟（Gay & Lesbian Alliance Against Defamation (GLAAD)）
4. 國際小母牛組織（Heifer International）
5. 預防青少年及非預期懷孕的全國活動（National Campaign to Prevent Teen and Unplanned Pregnancy）
6. 自然保護協會（Nature Conservancy）
7. 美國樂施會（Oxfam America）
8. 善待動物組織（People for the Ethical Treatment of Animals）
9. 皮尤研究中心（Pew Research Center）
10. 荷蘭國家博物館（Rijksmuseum）
11. 荒野社會（Wilderness Society）