部落格

您在這裡

neema
對非營利組織網站來說,網站不只是資訊發佈的平台,更是連結支持者、傳遞使命與驅動行動的數位核心。而網站首頁是潛在支持者初次接觸組織的地方,通常在短短數秒內,就決定他們在網站上的下一步行動,是瀏覽更多、按下捐款還是關注行動。
 
我們相信,每個非營利組織都擁有獨特且豐沛的情感訴求,只要善用本文幾個首頁設計技巧,將組織最有力的訴求突顯出來,就能有效提升網站的轉換率。

 

*本文內容依據 TechSoup:How to Create High-Converting Homepages 課程影片整理,也歡迎大家收看、學習、交流。

留住訪客的黃金3秒,圖片、文案都準備好了嗎?

首先,請試著用一句話,快速傳達「我的組織要改變什麼?」
沒錯!首頁最引人注目的主視覺區,短短數秒就決定了訪客是離開還是留下,要做到的只有這三件事,過多的資訊都會干擾訪客資訊的接收:
  • 高情感訴求的照片:以組織服務過程中的真實互動情境取代制式圖庫
  • 找出組織的黃金敘事:用一句話快速傳達「我們是誰」、「我們在改變什麼」的資訊
  • 搭配高度對比色、視覺突顯的「行動呼籲(CTA)」
poliphilo

大家好!可以使用的雲端開源繁體中文字型選項變更多了!自從 2014 年「思源黑體」首次發佈以來,已經過了 10 年以上的時間,在更早之前,網頁適用的中文字型選項很少,尤其是在面向 Windows 使用者時,在沒有額外預算的情況下,往往就只能用當時的系統預設字體「微軟正黑體」,而「思源黑體」的出現,讓大家增加了中文字型的選項,不過與英語系網站相比,能用的中文字型選項仍然很少。近期在準備字型相關分享的簡報時,發現 Google Fonts 上提供的繁體中文字型變多了!

目前完整支援繁體中文的字型有以下 11 個(截自 2025-09-30) 

poliphilo

什麼是文字裝飾背景與圖像?

今天想跟大家分享一個在進行網站套版時很常遇到的一個需要處理的情境,為了讓標題或特定文字突出顯示,設計師會使用一些方法來區別一般文字段落。最基本的作法有調整文字顏色、字體、粗細與大小,為了讓畫面更美觀、更豐富與更貼近網站主題,設計師會為其加上一些裝飾元素,例如向量圖形、裝飾底線或符合主題的插畫圖像。在英語系網站中,比較接近的說法是「Text Highlighting」,這同樣是一種透過為文字加上背景顏色或效果以突出顯示的技術。

 


圖片來源:A CSS challenge: skewed highlight — Vadim Makeev

 

由於本文想分享的一些範例主要是透過圖像讓文字有更突出的顯示效果,因此我就先以「文字裝飾背景與圖像」來稱呼這種設計方法,常見的應用場景包括:

  • 標題強調:可以為重要標題增加背景色來突出顯示
  • 螢光筆效果:例如使用 `linear-gradient` 創造出類似螢光筆的標記效果
  • 連結裝飾:例如使用底線搭配 `transition`
peggy

多數架站專案的開場白,都是一句「請問可以幫我們做一個這樣那樣的網站嗎?」

有些客戶準備充分,身邊友人、ChatGPT早就調查過一輪;也有客戶還不知道自己想要什麼、該從哪開始說起。總之,初次見面總是難按計劃進行,往往客戶帶著答案紙來,又帶著問題集回去。

身為網站建置專案的PM,許多時候,比起快速出報價與排程,我們反而把時間花在辨別這些問題。

開了一堆功能清單,但真正需要的可能不是這些

當客戶初期攤開他的願望清單:會員系統、影片牆、多層分類、進階搜尋、登入區塊…這些聽起來都很棒,但深聊下去,才能知道這些「需求」背後真正的情境。

某個功能其實是從別人的網站看到覺得「

lynn
 
你曾好奇過 NETivism 這個名稱的由來嗎?其實,這個名字源自我們對自身的期許──成為網路世界中的行動者(Net + Activism)。
 
自 2009 年成立以來,我們始終秉持「透過科技推動社會變革」的理念,致力於支持非營利組織(NPO)與開源社群。除了以自由軟體為基礎,協助非營利組織建立與時俱進的網站,也透過 netiCRM 支持者關係管理系統,幫助組織實現永續經營。我們更自 2011 年起,透過實際的捐贈行動,支持各式公益計畫與開源專案。
 
截至 2024 年,我們累計的公益捐贈總額已達 2,058,867 元,其中對非營利組織的捐款為 1,245,813 元,對開源專案的回饋則為 813,054 元。這些資源分配至不同面向的行動,期望透過實質支持,推動社會公益與技術創新並進。
 

公益支出概況

一、直接支持非營利組織

我們長期投入資源協助非營利組織成長與數位轉型,除了曾經長期投入心力與資源合辦的
sharon

在 2024 年的尾聲,我們特別推出了一項專屬客戶的免費網站診療服務。
不僅是感謝大家對我們長期的支持,更希望藉由實際的行動,幫助 NPO 夥伴提升網站的使用體驗,使日常工作更加順暢。

為什麼推出免費診療服務?

網站對於組織的重要性,不僅是資訊傳遞的窗口,更是募款與支持者互動的關鍵平台。隨著時間的推移,網站難免會出現一些技術性問題,或是無法完全符合組織不斷變化的需求。因此,我們希望透過年底關懷的網站診療,主動幫助客戶發現並解決這些問題。

poliphilo

我們在建置網站時,有時候會需要製作客製化的嵌入式頁面,常見範例如要在 iframe 或光箱中顯示特定內容,在這些情境下,嵌入的網頁內容通常不需要(或不應該)包含網站的標準頁首、頁尾、側邊欄等元素,以避免多餘的檔案載入影響效能或重複元素干擾嵌入效果而影響使用經驗。今天就來跟大家分享如何在 Drupal 10 覆寫系統渲染機制以客製化嵌入頁面。

今天的介紹的範例是透過客製化嵌入頁面建立導覽地圖功能,導覽地圖擁有一個非常簡單的網頁架構與內容,並搭配特定的前端函式庫完成互動效果,最後會透過 iframe 的方式將其嵌入。


上圖為關渡自然公園的「參觀導覽地圖」功能之截圖

 

步驟一:製作客製化模組

首先,

poliphilo

大家好,本文是「如何在 Drupal 網站加入結構化資料(Structured Data)」第三篇,這次主題為「資料頁面(ProfilePage)」,在實作前可以先到 Schema.org 了解 ProfilePage 的完整定義 ,亦可以參考 Google 的 ProfilePage 說明文件

為資料頁面(ProfilePage)設定結構化資料(來源:

頁面