眾所周知，現(xiàn)在的建站市場(chǎng)進(jìn)入門檻低，可見競(jìng)爭(zhēng)也越來越猛烈，這對(duì)于中小企業(yè)探求突破口是件極其困難的事情。

但是由于網(wǎng)站建設(shè)行業(yè)的成功者大多有著鮮明的技術(shù)優(yōu)勢(shì)，領(lǐng)先的建站技能是長(zhǎng)遠(yuǎn)發(fā)展的基礎(chǔ)，那么，隨著期間的變化，不停更新順應(yīng)市場(chǎng)的技能的自然不會(huì)淘汰。既然H5是網(wǎng)站建設(shè)時(shí)代的產(chǎn)物，就要懂得運(yùn)用它來提升網(wǎng)站的質(zhì)量，才能適應(yīng)用戶的需求。

那利用H5建站畢竟有什么利益呢？

H5響應(yīng)式網(wǎng)站建設(shè)能給我們帶來什么？

一、頁面豐富簡(jiǎn)潔

H5技術(shù)實(shí)現(xiàn)的網(wǎng)站也即是常說的響應(yīng)式設(shè)計(jì)，改善了頁面多媒體元素的使用問題，之前建站頁面主張減少動(dòng)畫、視頻等的使用，由于所占的網(wǎng)站資源空間多，導(dǎo)致頁面加載速度慢的情況，但如今使用H5建站，不僅可以大膽使用這些元素，且無需擔(dān)心瀏覽不順暢的問題，同時(shí)讓頁面顯得更加豐富，又能保證其整潔性。

二、有利于轉(zhuǎn)化

如果你建的網(wǎng)站不能很好的利用互聯(lián)網(wǎng)資源進(jìn)行轉(zhuǎn)化的話，那么建站的價(jià)值就已不復(fù)存在了。其中搜索引擎這個(gè)大平臺(tái)就是利用資源進(jìn)行轉(zhuǎn)化的一個(gè)很好的渠道，由此網(wǎng)站必然少不了優(yōu)化。H5技術(shù)所使用的代碼程序相對(duì)于舊時(shí)的編程來說要簡(jiǎn)潔得多，且運(yùn)用多媒體的情況下，給與用戶一個(gè)良好的體驗(yàn)，也就涉及到我們下面要說的啦。

H5響應(yīng)式網(wǎng)站建設(shè)能給我們帶來什么？

H5搭載的一般都是最直接最有效的信息，打開速度快，加載時(shí)間少，再結(jié)合我們奉道的專業(yè)的推廣方案，網(wǎng)站的轉(zhuǎn)化效果想不好都難。

三、提高用戶體驗(yàn)

H5的出現(xiàn)，改善了網(wǎng)頁內(nèi)容被插件束縛的局面，創(chuàng)造了豐富多彩的網(wǎng)站，滿足了用戶視覺上的審美要求，且能夠保證網(wǎng)站的加載速度，更重要的是當(dāng)前的各種瀏覽器的推出，對(duì)于不同的用戶有不同的使用習(xí)慣，H5很好地兼容了各種瀏覽器的，讓網(wǎng)站的呈現(xiàn)效果不會(huì)因設(shè)備的不同而改變，大大提高了用戶體驗(yàn)。

H5響應(yīng)式網(wǎng)站建設(shè)能給我們帶來什么？

四、跨平臺(tái)應(yīng)用

由于H5技術(shù)實(shí)現(xiàn)了網(wǎng)站跨平臺(tái)的運(yùn)用，尤其移動(dòng)設(shè)備的多樣化，包括各種屏幕大小的手機(jī)，平板等等，毫無疑問，在移動(dòng)互聯(lián)網(wǎng)的趨勢(shì)下，大半的用戶流量將來源于移動(dòng)端的用戶，H5網(wǎng)站的建設(shè)，輕松拓展了用戶瀏覽渠道，企業(yè)無需另外開發(fā)移動(dòng)網(wǎng)站來獲得用戶流量，也同樣能夠分得移動(dòng)用戶群體的蛋糕，無形中給網(wǎng)站增加了流量。

雖然說建設(shè)網(wǎng)站并不一定要用H5技術(shù)，但可以減小搜索引擎優(yōu)化難度，且做到頁面豐富雅觀滿意用戶體驗(yàn)的網(wǎng)站，那么定能得到用戶的肯定，同時(shí)，能與互聯(lián)網(wǎng)期間同步的產(chǎn)品一定不會(huì)“老”去。

無處不在的響應(yīng)式設(shè)計(jì)與框架的興起直接相關(guān)。通過生成用戶可以遵循的簡(jiǎn)單模式，框架使響應(yīng)式設(shè)計(jì)更容易掌握并開始使用。降低復(fù)雜性是必要的，以允許工程師和設(shè)計(jì)師掌握響應(yīng)式設(shè)計(jì)概念。如果框架沒有推動(dòng)響應(yīng)式網(wǎng)絡(luò)，那么我們今天在網(wǎng)絡(luò)上的響應(yīng)式網(wǎng)站數(shù)量遠(yuǎn)遠(yuǎn)少于我們所擁有的，而我們所擁有的網(wǎng)站的性能要低得多。

毫無疑問，框架并沒有發(fā)明響應(yīng)式設(shè)計(jì)，但它們讓每個(gè)人都能夠輕松地設(shè)計(jì)響應(yīng)式設(shè)計(jì)。沒有框架，我們就不會(huì)成為今天的樣子。

盡管響應(yīng)式設(shè)計(jì)的想法似乎很簡(jiǎn)單，但很快就會(huì)發(fā)現(xiàn)仍存在障礙。一些工程師做得很好，從編寫簡(jiǎn)單的網(wǎng)站開始。他們?cè)谠O(shè)計(jì)時(shí)考慮了媒體查詢，因此這些網(wǎng)站在移動(dòng)設(shè)備上顯得非常壯觀。與此同時(shí)，其他開發(fā)人員開始使用媒體查詢較小的設(shè)備來快速改造舊網(wǎng)站。通常這會(huì)導(dǎo)致大量凌亂的覆蓋和成堆的固定寬度媒體查詢。響應(yīng)式設(shè)計(jì)看起來很簡(jiǎn)單：右側(cè)的東西位于左側(cè)的東西下，但是我如何處理導(dǎo)航，圖像庫或模態(tài)？

我們需要一套最佳實(shí)踐，一個(gè)規(guī)則框架 - 我們可以在其中構(gòu)建所有響應(yīng)式網(wǎng)站的基礎(chǔ)。

沿著基金會(huì)

ZURB在2010年與許多這些開發(fā)人員一樣受到了同樣的考驗(yàn)和磨難。我們被Ethan的帖子所吸引。作為一個(gè)設(shè)計(jì)工作室，我們一直在努力解決與客戶相同的想法和問題。我們?nèi)绾畏乐箤?duì)三個(gè)不同代碼庫的三個(gè)不同網(wǎng)站的需求？我們開始構(gòu)建我們的ZURB編碼風(fēng)格指南，并迅速?zèng)Q定這是其他人需要的東西。

我們最終啟動(dòng)了Foundation，這是一個(gè)完全響應(yīng)的框架，為開發(fā)人員提供了構(gòu)建響應(yīng)式站點(diǎn)的結(jié)構(gòu)。響應(yīng)式網(wǎng)格是教授響應(yīng)式設(shè)計(jì)概念的完美工具，同時(shí)具有針對(duì)不同屏幕尺寸的內(nèi)置樣式的組件。ZURB正在快速生成響應(yīng)式站點(diǎn)，我們的開源社區(qū)成員也是如此，甚至其他框架也隨后響應(yīng)。支持響應(yīng)式設(shè)計(jì)的更多框架意味著響應(yīng)性地構(gòu)建更多站點(diǎn)。這使得越來越大的公司更容易，更容易購買響應(yīng)式設(shè)計(jì)作為可行的選擇。

從響應(yīng)式Web到負(fù)責(zé)任Web

框架非常適合將重要的想法推向大眾。他們?yōu)槿藗兲峁┝艘粋€(gè)系統(tǒng)，可以使用分散在網(wǎng)絡(luò)各個(gè)部分的想法。框架創(chuàng)建了一個(gè)進(jìn)一步培養(yǎng)人的社區(qū)，它們?cè)试S代碼庫來討論代碼。我們?cè)僖淮问艿骄W(wǎng)絡(luò)各個(gè)部分中如此眾多熱情的人的工作的啟發(fā)，并希望使用Foundation來進(jìn)一步推動(dòng)Web標(biāo)準(zhǔn)。

我們正在關(guān)注下一版本的Foundation for Sites，使網(wǎng)站在處理標(biāo)記，導(dǎo)出代碼和處理可訪問性方面更負(fù)責(zé)任。多年來我們已經(jīng)涉足這些領(lǐng)域，我們的可訪問性推動(dòng)了5.4和基礎(chǔ)3中的Sass大修，但是我們致力于為框架用戶進(jìn)行下一次重大改變。我們將更好地幫助我們的用戶使用表示類快速原型，但強(qiáng)調(diào)使用我們的Sass mixins在啟動(dòng)之前創(chuàng)建語義標(biāo)記的重要性。

我們總是為用戶提供選擇性導(dǎo)入Sass文件的能力，但是為人們提供了更多選擇，以便更具選擇性和構(gòu)建系統(tǒng)，他們可以確保導(dǎo)出的代碼只是他們使用的代碼。最后，但同樣重要的是，我們正在重新編碼Foundation，以便具有損傷的用戶可以訪問每個(gè)組件和代碼段。

一、什么是響應(yīng)式網(wǎng)站

響應(yīng)式Web設(shè)計(jì)(Responsive Web design)的理念是：

頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。

什么是響應(yīng)式網(wǎng)站

具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。

無論用戶正在使用筆記本還是iPad，我們的頁面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；

換句話說，頁面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。

響應(yīng)式網(wǎng)頁設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這樣，我們就可以不必為不斷到來的新設(shè)備做專門的版本設(shè)計(jì)和開發(fā)了。 

響應(yīng)式網(wǎng)站：在網(wǎng)站開發(fā)過程中根據(jù)用戶行為以及設(shè)備環(huán)境進(jìn)行相應(yīng)的操作和布局，使網(wǎng)站可針對(duì)不同平臺(tái)、尺寸和定向進(jìn)行智能化調(diào)整，實(shí)現(xiàn)了在智能手機(jī)和平板電腦等多種智能移動(dòng)終端瀏覽效果的流暢，防止頁面變形，并可在任一瀏覽終端進(jìn)行網(wǎng)站數(shù)據(jù)的同步更新。

二、響應(yīng)式網(wǎng)站的優(yōu)勢(shì)

1.響應(yīng)式網(wǎng)站可兼容多個(gè)智能移動(dòng)瀏覽終端，并自動(dòng)適應(yīng)其屏幕尺寸，風(fēng)格統(tǒng)一，增加網(wǎng)站辨識(shí)度。

2.響應(yīng)式網(wǎng)站所用的后臺(tái)及數(shù)據(jù)庫是統(tǒng)一的，即在電腦PC端編輯了網(wǎng)站內(nèi)容后，手機(jī)、PAD等智能移動(dòng)瀏覽終端能夠同步顯示修改之后的內(nèi)容。

網(wǎng)站數(shù)據(jù)的管理能夠更加及時(shí)和便捷。

3.響應(yīng)式網(wǎng)站中的特效能夠更好地豐富手機(jī)等智能移動(dòng)終端瀏覽的效果，提升網(wǎng)站技術(shù)品質(zhì)。

4.響應(yīng)式網(wǎng)站能夠更好地發(fā)掘潛在客戶群體，給網(wǎng)站帶來更多訪問流量。

響應(yīng)式網(wǎng)站的優(yōu)勢(shì)

通過響應(yīng)式的設(shè)計(jì)和開發(fā)思路讓頁面更加"彈性"了。圖片的尺寸可以被自動(dòng)調(diào)整，頁面。

液態(tài)圖片技術(shù)布局再不會(huì)被破壞。雖然永遠(yuǎn)沒有最完美的解決方案，但它給了我們更多選擇。

無論用戶切換設(shè)備的屏幕定向方式，還是從臺(tái)式機(jī)屏幕轉(zhuǎn)到iPad上瀏覽，頁面都會(huì)真正的富有彈性。

通過液態(tài)網(wǎng)格和液態(tài)圖片技術(shù)，并且在正確的地方使用了正確的HTML標(biāo)記。 

響應(yīng)式圖片技術(shù)思想：不僅要同比的縮放圖片，還要在小設(shè)備上降低圖片自身的分辨率。

這個(gè)技術(shù)的實(shí)現(xiàn)需要使用幾個(gè)相關(guān)文件，我們可以在Github上獲取。包括一個(gè)JavaScript文件(rwd-images.js)，一個(gè).htaccess文件，以及一些范例資源文件。

大致的原理是，rwd-images.js會(huì)檢測(cè)當(dāng)前設(shè)備的屏幕分辨率，如果是大屏幕設(shè)備，則向頁面head部分中添加BASE標(biāo)記，并將后續(xù)的圖片、腳本和樣式表加載請(qǐng)求定向到一個(gè)虛擬路徑"/rwd-router"。

當(dāng)這些請(qǐng)求到達(dá)服務(wù)器端，.htacces文件會(huì)決定這些請(qǐng)求所需要的是原始圖片還是小尺寸的"響應(yīng)式圖片"，并進(jìn)行相應(yīng)的反饋輸出。

對(duì)于小屏幕的移動(dòng)設(shè)備，原始尺寸的大圖片永遠(yuǎn)不會(huì)被用到。

響應(yīng)式網(wǎng)站的優(yōu)勢(shì)

三、響應(yīng)式網(wǎng)站的發(fā)展前景

根據(jù)CNNIC統(tǒng)計(jì)，截至2012年12月底，我國網(wǎng)民規(guī)模達(dá)5.64億，全年新增網(wǎng)民5090萬人。互聯(lián)網(wǎng)普及率42.1%，較2011年底提升3.8個(gè)百分點(diǎn)。手機(jī)網(wǎng)民規(guī)模為4.2億，較上年底增加約6440萬人，網(wǎng)民中使用手機(jī)上網(wǎng)的用戶占比由上年底的69.3%提升至74.5%。2012年中國網(wǎng)民人均每周上網(wǎng)時(shí)長(zhǎng)達(dá)到20.5小時(shí)，相比2011年提升1.8個(gè)小時(shí)。移動(dòng)互聯(lián)網(wǎng)展現(xiàn)出巨大的發(fā)展?jié)摿Α?/p>

 網(wǎng)民正在以自己最方便的形式，上網(wǎng)查找其所需要的信息。他們或者選擇電腦，或者選擇手機(jī)，或者選擇平板。無論是通過哪種方式，響應(yīng)式網(wǎng)站都可以讓網(wǎng)民快速、便捷地找到適合自身的平臺(tái)信息。