初衷: 為什麼要做網頁?
製作網頁的原始目的:
越多人看越好, 越多人看越好, 越多人看越好
傷害: 北轅適楚
- 那麼為何要貼 「建議使用 IE x.x 以上, 解析度 xx
以上瀏覽」﹑ 「請安裝 Adobe Flash」?
- 小吃店: 「民進黨才准來吃」; 雜貨店: 「國民黨才准來消費」
?!
(如果政黨付我錢, 還勉強考慮)
- 僱黑衣小弟在店門口發傳單,
他們卻要求好奇索取傳單的路人必須先加入黑幫... 6rz
- 濫用 Adobe 的 flash 有相同的效果
- 網頁製作者: 領僱主的薪水, 為何卻要犧牲僱主的人氣,
替軟體廠商強迫行銷?
- 老闆及 行銷/公關 部門主管:
不要放任資訊部門傷害您的業務!
- 回歸網站設計初衷: 莫讓資訊科技傷害行銷本意
傷害: 金玉其表不只無益, 可能有害 (I)
(想想您自己的瀏覽習慣)
- 增加載入時間, 趕走慢速連線訪客
(如果慢的是我們自己這頭的網路...)
- 要求太多特定軟體, 提高瀏覽門檻
- 分散訪客注意力, 誤導入不重要的連結或畫面細節
傷害: 金玉其表不只無益, 可能有害 (II)
- 要吸引的對象, 是對炫麗花俏有興趣的人,
還是買主/客戶/支持者/學生?
- 沾醬佐料 : 作菜 = 影音特效 : 製作網頁
- 炫麗不是科技進步的唯一方向。 「輕薄短小無處不在」 也是。
手機上網, 您的網站準備好了嗎?
- 最重要的是... 拜錯菩薩求錯神!
SEO: 臺灣網頁設計教育的盲點
"Search Engine Optimization" 搜尋引擎最佳化 (但勿走火入魔)
- 重要的標籤 (title, description, keywords) 應該含有重要,
切題的詞 (產品, 特色, 公司名稱, ...)
- 豐富而有意義的站內網頁互連 (及有用的他站, 包含對手)
- 不要阻礙搜尋引擎: 把文字及網址藏在 flash, javascript, 圖片,
... 裡面, 是
自我反推銷 (喜歡濫用 flash 的老闆必讀)。
- 網站地圖 (sitemap)
- 如何讓別人指向你? 從替別人解決問題的角度出發, 寫有用的文章
- 對別人有用的內容! (含自已的連絡資訊)
一些文章: 必讀,
1, 2,
SEO 與網頁標準; 關鍵字搜尋
SEO: 善待視障者好心有好報
為什麼要關心視障者? 因為搜尋引擎看到的與他們接近!
SEO: Graceful Degradation
- 重要資訊不要藏在 flash 當中, 不要藏在 javascript
當中:
超連結, 傳送鈕/送出鈕, 選單, ...
- 超連結如果藏在圖案當中, 或用貼圖方式顯示文字, 務必用
alt="..." 說明
- flash 與 javascript 不是不能用, 而是不要盲目濫用
- Graceful Degradation:
讓每位訪客都能看到他的瀏覽器所支援的該類型 (文字? 圖片?)
所有重要資訊, 而不要將該類型資訊藏在另一類型的資料當中。
揚棄舊觀念, 抓住新重點
(為什麼需要花那麼多時間探討今日網頁設計文化的謬誤?)
最困難的是改變觀念/習慣/心態
- 要提供那些 有用的內容? (含自已的聯絡方式)
- 如何幫助搜尋引擎?
- 頁面分類/連結/一致性
- 方便使用及美觀 (不是動畫, 是顏色對比等等)
- 太閒沒事做, 才去增加其他不重要的東西, 例如動畫
(某些行業例外, 例如設計/影視/...等)
內容: 提供固定內容的頁面
- 特性: 資料量大; 更新流量相對較低; 舊版不需要保留;
對許多不同人士/事件都有用
- 例: 學校交通, 某系簡介, 某科目講義, ...
- 如果換網址, 要做 redirect; 如果保留舊版, 要記得指向新版
<== 為了把舊網頁的人氣帶過來
內容: 針對特定人士的頁面
- 特性: 針對特定瀏覽對象
- 例: 潛在外國學生, 流設系校友專區, ...
- 單一窗口: 根據瀏覽者的思維,
從這一頁直接連到各相關處室下的相關頁面
內容: 針對特定事件的頁面
- 特性: 較常更新; 有時效性, 過了就沒太大價值
- 例: 2010 年校慶﹑ 98 學年度下學期管理數學﹑ ...
- 藉題發揮: 根據活動主題, 連到相關處室下的相關頁面
內容: 網頁撰寫要點
- 重視內容; 克制美化版面的衝動
- 提供聯絡資訊: 聯絡電話, 傳真, e-mail...
- 記得你在寫網頁: 善用超連結! (盡量指向
"提供固定內容的頁面")
- 歡迎校外人士參加的活動, 記得指向學校交通圖
- 用超連結在適當的地方幫忙宣傳相關單位/計劃
- 用連結取代複製, 減少重複資訊, 易將資訊維持在最新狀態
- 採用有助於搜尋引擎的關鍵字 -- 如果你要找這份資訊,
會用那些關鍵字搜尋? 不要藏在 flash 裡面! 例: 「用正版」﹑
「全部換正版」﹑ 「升級 Office」
排版: 網頁排版要點
- 採用統一, 簡單的樣版
- 預留擴充空間 -- include
- 共用排版規則 -- CSS (cascading style sheet) 例: 訪客自選 css
- Separation of Content from Presentation
內容與外觀分開處理
分享: 我要出名 歡迎拷貝
「版權所有, 禁止拷貝」? 過時的觀念。
禁止拷貝的東西幹嘛放到網頁上?
- 歡迎複製/映射/下載; 請註明出處:
那一種
creative commons license? 例: 招生簡章
- 限本地閱覽: ? (想不出有意義的例子)
- 限制讀取: 學生成績
工具: 像人一樣 不可貌相
最重要的不是製作花俏效果的工具,
而是可以幫助達到行銷目的的工具。
工具: 特殊互動功能的網頁
- 例一: 適合多人/多單位共筆的 wiki
- 例二; 適合新聞摘要的 blog/rss:
- 對內: 僅需一套, 以帳號由各處室分用
- 對外: 不需要提供最上層入口;
瀏覽者會從各處室適當功能當中發現
工具: 把信任交給誰?
誰的網頁製作工具, 誰的文書處理軟體值得信任?
誤導消費者的動機? 誤導消費者的歷史記錄? 軟體品質?
漂亮的文件與網頁比較重要, 還是行銷效果比較重要?
工具: 欠 User, 不欠 Programmer
這個時代,
最欠缺的不是軟體, 而是懂得善用軟體的人;
最欠缺的不是資訊系統, 而是懂得善用 cms 與 wiki 的人。
推廣: 誰該關心網頁行銷效果?
- 老闆/公關/行銷部門: 不要放任金玉其表的技術傷害行銷效果
(有英文網頁的外貿業者/觀光業者特別需要注意)
- 電腦補習班; 學校: 請教一些真正有助行銷的網頁課
- 行政院新聞局; 外交部; 交通部觀光局; 經濟部外貿協會:
辦活動時針對上述人士, 或許比針對技術人員更有效