架設企業網站與規劃內容(下)

by Beatrice
213 views

承上篇:架設企業網站與規劃內容(上)

與老闆開會之後,就要開始正式進行。

大致有幾個主軸要發展,包含:

  • 站點地圖、文案內容
  • 網頁排版
  • 美工設計
  • 架站
  • 網站優化(SEO)
  • 上線
  • 成效分析(GA)

以下重點式分享,詳細再請閱讀文中提供的相關連結。

站點地圖、文案內容

站點地圖幫助你將網站所需的頁面、頁面之間又有什麼關聯給具體化。

站點地圖範例

舉例來說,我們家舊網站的產品描述是在一頁當中全部道盡,也就是包含產品功能、產品應用、產品帶來的效益等全都混在一起介紹。在這次新規劃的站點地圖中,決定把「產品功能」和「產品應用」分開介紹:「產品功能」描述產品的具體功能說明,而客戶可以用這個產品發揮出哪些各式各樣的應用與價值,就在「產品應用」的頁面描繪。

有了這個決策之後,文案的內容就有所區別了,頁面也會變成兩頁。

在撰寫文案內容時,還不需要到 wordpress 上建立文章,只需先用 word 打字就可以(我是用 google 雲端硬碟的 「文件」,隨時隨地任何裝置都可上網編輯,還可以開共享,蠻方便的)。用 word 表格也可以模擬排版,若需要放圖片,也在這時候一併規劃上去(例如:圖片擺放位置、圖片內容有什麼等等)。

在文案內容的專業度和嚴謹度方面,我有找我們公司任職 20 年、負責市調與行銷的資深前輩協助,在我寫好文案後請前輩過目與提供意見,確保語意、專有名詞、慣用語與關鍵字有符合業界的習慣,確保可以打中我們的客戶。

關於更詳細的文案內容發想方法與注意事項,可參考這一篇文章:網站內容設計:文案篇

網頁排版

大眾對於網頁的喜好會隨著時代、產業、目標族群等而有所有不同。我要做的是資訊業產品官方網站,經評估後我選擇以一頁式/卡片式排版來呈現我們公司的產品資訊。

關於更詳細的網頁排版介紹與優缺點比較,可參考這一篇文章:網站內容設計:排版篇

美工圖片

我找的是接案美工(不是美術工作室的那種)。配合方式上,我這位合作對象表示可以先出幾張風格圖,確定合作之後,再依照所需的頁面數量和複雜度計價,最後等全部完工再一次性收款。

首先請美工設計網站首頁的風格、配色及背景圖片。我請美工一次做三種,做好之後我再寄給老闆確認老闆的喜好,喜歡的話再延伸,不喜歡的話就換一批圖。

老闆光看圖可能無法描述他喜歡或不喜歡的地方,但至少像是主色系(黃色系、藍色系、白色系、黑色系、…)或是明暗(這個太亮了、這個太暗了)之類的意見都可盡量問出來。我們家老闆也詢問我意見,我也會依照我逛遍各大國內外網站後的視角提供我的看法,我們家老闆大多都同意。

光選背景圖和配色風格的程序,就往返了至少3次。第3次結束時老闆已經不想再看下一次了,說交給我決定。所以前幾次除了了解老闆喜好之外,也要盡量透過溝通來確認自己的看法跟老闆的看法通常是不是夠接近,還是是反指標(知道是反指標也行,就反著決策即可)。

風格圖出來之後,還要考慮圖片跟文字配合起來的效果,例如會不會擋到文字、會不會影響使用者閱讀焦點?以及這圖片在響應式網頁所呈現的效果如何?(什麼是響應式網頁?圖片在響應式網站中的效果怎麼了? 請參考這篇:網站內容設計:響應式網站與背景設計技巧)

為了讓背景圖片可以順利呈現在響應式網頁,讓使用者在各種裝置上瀏覽網頁文案內容時不會受背景圖片影響,那麼圖片與內容、與排版就要配合。但文案和排版在網站架設初期尚未定案,這樣要如何讓美工發揮?

解法有二:

  1. 文案和排版都確立之後,再請美工設計圖。
  2. 用美工設計的圖當素材,自行復刻圖片,這樣就能配合網頁開發進度自行設計調整。

我是用 2 的方式,運用從網路上下載到的免費繪圖軟體 Inkscape 1.0.2  復刻美工人員提供的網站風格圖片,做出我需要的圖片尺寸和設計(註:美工人員設計風格圖的工錢我們是有付的)。並且除了網站背景圖片之外,為了配合公司產品/服務的文字說明,也會需要製作一些圖片,如作業流程圖、架構圖、服務內容說明圖等等。如果要請美工人員繪製,美工人員也會要你把畫好的草稿提供給他,他再來美化。但若真這樣做,會增加很多校稿、調圖的時間,不如圖就自己畫,畫得盡量簡單清楚,看上去美觀且資訊正確即可,不需要太花俏的美術設計。

我用的免費繪圖軟體是 Inkscape 1.0.2  繪製 2D 的向量圖(它有出更新的版本,但我覺得沒有比這版好用,比較推薦這一版!) 。更多說明可參考這篇:如何自製網頁圖片(Inkscape, powerpoint, picpick)

選擇網站架設平台

網站架設平台就相當於有一個工程師,先把你需要的網頁元件都先設計好,只差由你決定想在網頁中放入甚麼元件組成你的網站頁面,而這個備有各式各樣網頁元件、讓你或其他人可以自由設計網站的工具介面就是網站架設平台,例如:Wordpress、Wix、Weebly 等等。

但網站架設平台需要一些軟體和硬體作為基底,才能正常運作。包含網站主機空間、域名、網頁伺服器、資料庫等。

大多數的網站架設平台會有自家或者配合的主機商,已把所有需要的軟硬體都準備妥當,讓你透過網路連進主機付費使用。wordpress 則是開源的免費軟體,只要下載下來安裝在自己的主機中,自己的主機就成了網站架設平台。考量到以下:

  • 主機如果在別人家,那每年就要付主機費,且主機的規格(例如網路流量頻寬、主機儲存空間、MailServer 收發信限制等)受限於主機商開出來的方案。但優點是有專人維護主機正常運作,有任何主機問題皆可聯繫專人客服。
  • 主機如果在自己家,主機的費用、規格就可以自行掌控,但需要有 MIS 人員維護主機的健康與安全性。

通常企業官方網站都會希望對網站的掌控度高一點,加上我們公司有自己的機房與看顧主機的 MIS 人員,這種條件下我選擇 WordPress 來進行網站架設。

準備主機與 wordpress

如果你是跟主機商(例如 A2 hosting、Godaddy等)購買主機,則購買時可以勾選預設安裝 wordpress。

如果是要在空主機中自行安裝 wordpress 軟體,步驟如下:

  • 準備主機
  • 安裝 Nginx
  • 安裝 MySQL Server
  • 安裝 PHP
  • 安裝 phpmyadmin
  • 登入 mysql 建立 wordpress資料庫
  • 安裝 wordpress
  • 調整 wordpress 環境設定

詳細作法可參考這篇:網站架設:自行安裝 WordPress

網站優化(SEO)

SEO(搜尋引擎優化) 重要性在於使網站在網路上的排名較前,使網站更有曝光度或更容易出現在使用者的搜尋結果中。只需透過一些設定與網頁內容編輯方式,即可強化 SEO,有效曝光給更多人看到我們的網站,讓更多的人流帶進更多的商機。

要點如下:

  • 網址結構
  • 頁面結構
  • 文章標題、文章描述、關鍵字、圖片名稱
  • 站內連結、站外連結
  • 響應式網站
  • 載入速度
  • https 與 SSL 憑證

詳細說明可參考這篇:網站內容設計:網站優化(SEO)

上線

我用了兩種方式:

  • 於測試環境開發完畢後,將檔案和資料庫備份下來,再上傳到新主機上,然後修改資料庫中的 ip 資訊。
  • 在新主機上才套用付費主題,套用後才啟用付費主題提供的功能並做部分的調整。

上線步驟 (跟 MIS 通力合作):

  • 先跟公司 MIS 敲定一個上線的時間,我們敲在週五的晚上。(隔天就是週末,若網站有狀況的話,影響相對較小。)
  • 上線前公司 MIS 先做好舊網站的備份,確認主機狀況、port 都有開通等等,並準備好切換網域的流程步驟。
  • wordpress 檔案、資料庫上線至公司主機。
  • MIS 進行網域切換(指到新網站的主機ip)。
  • 網域切換完畢,調整 WordPress 必要的設定檔和 WordPress 資料庫中使用的網址 (原本使用 ip,改成使用網域名稱)。
  • 檢查頁面連結及圖片顯示是否都正常。
  • 確認無誤,執行新網站的備份和主機的快照。

上線步驟 (收尾)

  • 套用付費主題,利用付費主題提供的功能做部分調整;我的情況是要重設選單。
  • 設定 SMTP 資訊:wordpress 網站給客戶填寫「聯絡我們」之後發送 Email 用的 SMTP 資訊 (要用公司指定的 Mail Server 與 Mail Account),設定完畢再做測試。
  • 添加 Google reCAPTCHA 防範垃圾留言:這個要用域名申請憑證。
  • 關閉 wordpress 的所有版本更新及外掛更新。 (凍版了,不要讓其更新,以避免未知的不相容或 Error)
  • 最後再做一次新網站的備份。

成效分析(GA)

GA (Google Analytics) 是 Google 提供的服務(可免費申請使用)。Google 是目前強勢的搜尋引擎之一,GA 提供了 Google 上的使用者搜尋行為並量化為許多分析數字。透過 GA 統計的數字可以讓網站維護者了解網站中的內容與瀏覽者的互動關係、瀏覽者所在地區、網站流量成長變化或瀏覽裝置的趨勢等。

例如透過 GA 看出某某頁面特別有人氣,那網站維護者就可以考慮趁勢強化該頁面所提供的訊息,讓訊息一次曝光給較多人看到;又或者得知瀏覽者有更多比例透過手機查看網頁,那麼就可以思考手機版的瀏覽體驗好不好?字會不會太小、圖清不清楚?讓網站維護者更具體了解網站的運行成效。

啟用 GA 需要 Google 帳戶,若公司有自己的 Google 帳戶且能夠允許你登入的話,就用公司的 Google 帳戶申請 GA。我的情況是公司的 Google 帳戶因為有其他用途而不開放,所以我用自己的名義開帳戶來啟用 GA。啟用後定期上去看看,觀察網站的運行狀況。

結語

很高興有這次機會可以實作一個網站架設,網站營運至今老闆很滿意、從 GA 看起來流量也都很理想。
透過這幾篇文章記錄一下自己的成果,也希望能提供給需要的人一些參考。

Leave a Comment

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

期待你透過 Beatriceverse 必翠斯生活獲得更多生活靈感,歡迎常常來逛逛喔!

© 2021 Beatriceverse. All rights reserved.