網站建設的核心不在于技術，而是在于思維！

網站建設行業從90年代發展至今，經歷了多次更新換代，網站開發技術已經足夠于成熟，過去幾年我們一直沒有過多強調開發技術，因為我們知道網站建設的核心不在于技術，而是在于思維。技術只是作為基礎，支撐著我們實現企業所有需求，更像是工具，但是如何用好這個工具就是我們需要深入研究的問題。

網站技術開發的三個原則

當我們力求做好一個優質網站時，自然需要將網站建設的每一個環節做到最好，甚至是在上一個環節之下，實現更深層次地提升，在技術環節上，同樣如此。

基于網站建設的三大思維（產品、數據、增長），我們提煉出了足以指導我們進行技術開發的三個原則：

1.100%還原度

2.用戶體驗舒適

3.實用且便捷

① 力求100%還原度

但是很多企業在技術開發時，會遇到一個非常常見的問題：為什么設計稿和網站成品差距甚遠。最終前端所呈現出來的網站，才是真正的一個“產品”，因此，還原度尤為重要。這是技術開發的重要的第一步！

除去過于浮夸導致的技術無法實現的需求外，技術最為基礎的原則就是竭盡全力100%還原所有需求，例如基礎的字體、顏色、頁面排版，尺寸大小等等。如果無法實現最基礎的還原，那就更不用追求流暢度、用戶體驗等其他非本質需求的東西了。

② 用戶體驗舒適

用戶體驗是個老生常談的話題了，從網站建設三大思維中的產品思維來講，以用戶為本是核心，因此，在網站開發階段，對于每一個交互，每一個點擊、切換、刷新，每一個動作，都需要盡可能更加貼合用戶思維和行為習慣，確保良好的用戶感受，追求舒適的體驗。

這方面是初級的技術人員會忽視的事，“跑起來就行了”這是非常錯誤的想法。網站不僅只為我們的訪客群體所設計，還需要為內部人員在考慮，比如網站運營人員上傳內容、更新內容，也同樣是用戶。

③ 安全穩定

我們在上網的過程中，經常會不小心就進到一些賭博、色情網站，明明我們點擊的不是這種網站，其實這是因為很多沒有做安全防護的企業網站，這是最常見的黑客攻擊，篡改頁面掛載了病毒，導致網站被非法劫持。

為了確保網站能夠正常使用，我們在技術開發時，需要對網站進行加密處理，安裝安全防護軟件等，并且在上線前進行安全檢測，修復存在的網站漏洞。在質檢時，需確保所有安全防護質檢項目都能通過。

以這三個點為原則，即可正式開始網站的技術開發，基本的流程為：前端開發（可視化）-后端開發（數據聯動）-測試（BUG修復優化）。

測試方面這里就不過多講解，基本是以內部人員進行使用測試，記錄網站存在的BUG或者不合理的地方，之后再進行優化即可，核心還是在前后端開發上，也是技術開發最為基礎的兩部分。

一、前端

01 HTML+CSS+JS

前端工程師要根據網頁設計師交來的設計稿，實現頁面重構和頁面邏輯跳轉，優化網站瀏覽體驗，以及網站界面交互動效與功能的制作。

可以從廣義上來說，所有用戶終端的產品與視覺交互有關的部分，都是前端工程師的專業領域。 簡單來說，前端開發就是將前端界面呈現給訪客的過程，目前常規的網站前端技術配置是 HTML+CSS+JS 代碼的組合。

簡單來講，這三種代碼主要以三種不同形式進行表達，負責不同的功能，從而實現網站前端的展示和使用。

HTML-結構：html（超文本語言）作為一種標記語言，主要作用是表述網站頁面的信息和信息之間的關系，是網站形成一個整體，目前主流的版本為HTML5。

CSS-表現：CSS（層疊樣式表）是一種用來表現HTML或者XML等文件樣式的語言，也就是網站的信息呈現出來的外觀形式主要都是由CSS來實現。

JS-行為：JS（JavaScript）是一種解釋型的腳本語言，主要作用在于為HTML頁面提供交互行為的實現，這也讓目前的網站開發更加多樣化，可玩性更高。

代碼是技術的基礎，如果作為網站建設的負責人起碼需要了解其中的基礎邏輯，只有了解這些才能理解前端工程師的工作，以便更好地配合他們。

02 自適應與響應式

1.自適應與響應式區別

自適應和響應式在網站建設領域應該是一個老生常談的話題，經常會混淆，因為本身在命名上就較為模糊，很多情況下只有追溯本質技術才能分得清。我們可以把響應式網站看作是流動的，而是自適網站應則是固定分割。

以用戶體驗來講：

自適應：需要開發多套界面，對不同分辨率屏幕進行判斷，進而分配不同頁面進行適配。

響應式：只需開發一套界面，對不同分辨率進行代碼處理（縮放），實現不同布局和內容適配。

基于用戶體驗，如果你選擇自適應開發，技術人員需要起碼開發三套界面，分別為PC端、手機端、平板端，根據預先設置的判斷標準范圍進行適配。自適應網站在同一分辨率范圍下的變化，更多是以寬度縮放為主，像大多數的平臺網站、商城網站都使用自適應技術進行開發。

如果你選擇響應式開發，技術人員只需開發一套界面，在代碼中嵌入一些布局的判斷，通過檢測不同分辨率，代碼自動進行處理，實現布局變化、尺寸縮放等，適配每一個分辨率下的屏幕。響應式網站的根據不同分辨率的變化不只是簡單的寬度放縮，更像是流動的網格，在布局上也會進行變化調整，擁有液態網格和液態圖片技術。

2.自適應與響應式怎么選?

目前主流的企業網站都是響應式，不管是開發還是運維，響應式更加簡單、快捷，并且具備良好的用戶體驗。如果追求極致用戶體驗的話，自適應是更優的選擇，但是后續需要進行修改的話，基本是每套界面都需要進行調整，在時間成本和繁瑣程度都較高。

如果有在移動端以及PC端進行網站推廣，建議是雙端分離。PC端以響應式為主，移動端在單獨開發一套界面，可以是自適應也可以是響應式，都是以創造良好的用戶體驗為目的。其實本質就是雙端分離，提升適配度，確保更為優質的用戶體驗，從而提高我們的廣告轉化率。

以下是目前市面主流的分辨率、瀏覽器，需要進行兼容性重點檢查：

分辨率：

2560×1600、2560x1440、2048x1152、1920×1200、1920×1080、1680×1050、1600x900、1536x864、1440×900、1440×960、1366×768、1280×800、1280×720、1024×576、800x600、414x896、393x873、375x812、360x800、360x780......

瀏覽器：

Chrome、Safari、Firefox、Microsoft Edge、搜狗、360、獵豹、百度、QQ、Opera、UC、遨游、IE......

二、后端

01 語言+環境+數據庫

前面說到，前端開發是用代碼將網站頁面呈出來，屬于無法進行數據調用調配等交互的“靜態頁面”，因此，后端開發就是讓網站的服務器、數據庫、系統程序實現交互，最直觀的體現就是網站后臺管理系統。

比如，商城常用的會員系統，需要通過注冊、表單填寫等獲取信息，收入數據庫之后為登錄調配數據，實現數據動態交互，運營人員可以從后臺進行查看會員信息；又比如我們通過企業網站后臺的開發和上傳資訊文章等，都是由后端來完成。

常規的后端技術包括「開發語言」、「部署環境」、「建立數據庫」。

目前主流的開發語言有java、php、python等，常規的網站后端使用php會更加高效快捷，安全系數較高的是java，一般銀行、政府、大型平臺和辦公系統用的都是java。之后采用Apache、Nginx、Linux等進行開發環境部署，以及建立MySQL、sqlserver等數據庫，實現網站數據存儲。

02 網站后臺-內容管理系統

網站后臺是網站非常重要的一部分，后續的網站運營中使用后臺的頻率非常高，例如常規的新聞資訊欄目的文章上傳和更新，頁面信息修改等，都需要在后臺進行操作。

網站后臺主要以下面三點為中心進行開發：

安全穩定是基礎，簡單實用是目的，功能強大是為后續網站優化和營銷推廣提供幫助。在功能上，我們可以按實際需求進功能開發，比如與一些統計工具的聯動，實時獲取網站流量信息、用戶行為等，或者與第三方功能進行對接，實現營銷自動化。

這里要特別注意網站的SEO和后臺SEO設置功能。

三、網站SEO

SEO即搜索引擎優化，是一種利用搜索引擎的搜索規則，進而提高網站在有關搜索引擎內的自然排名的方式。

時至今日，SEO已成為建站的標配，企業在建設網站時，不僅要考慮用戶，還需要考慮到搜索引擎的抓取，需要滿足搜索引擎的搜索規則。

基礎的SEO規范質檢表：

網站的SEO規范是一個需要注意的重要課題，除去網站后臺的頁面基礎TDK設置功能之外，我們在開發時還需要注意網站框架、內容元素、代碼等是否符合SEO規范。確保符合常規的搜索引擎的抓取規則，才能為后續的網站SEO提供牢固的地基，也能讓SEO效果更加顯著。

總結

其實還有許多前端技術類型沒講，像視差滾動、3D動效等等，都是目前較為主流的交互技術，感興趣可以參考我們過往的案例，當中都有講到一些，感興趣可以看看。

事實上，技術開發是網站建設中非常考驗技術含量的一環，就如開頭講到的，技術開發的還原度、用戶體驗和安全性是技術考核的關鍵點。不僅是產品經理、設計師需要懂得產品思維、數據思維、增長思維，技術人員同樣需要了解，這樣才能實現網站建設全過程同頻，最終才能達成統一目標。

希望能對大家有一定的幫助，資料整理和原創內容撰寫不易，喜歡的可以點贊、收藏，這是對我們內容團隊最大的支持~筆芯。

最后，可以關注我們公眾號（增長超人），定期會分享《2022網站建設白皮書》的章節，發布后也會開通免費領取通道，現有的《2021數字營銷白皮書》也可以在公眾號（增長超人）「直接領取」。

推薦閱讀：

網站視覺設計的本質是什么？如何平衡藝術與商業？

原型圖設計有必要嗎？怎么畫好原型圖？

網站數據分析具體分析什么？如何做好歷史數據分析？

建站市場調研怎么做？如何做好市場調研？