• 
• 
• 
• 
• 
• 
• 

知識普及 ? 響應(yīng)式網(wǎng)站的利與弊

響應(yīng)式網(wǎng)站的利與弊

網(wǎng)站工程師 于2019-08-22 10:49發(fā)表 閱讀次數(shù) 2492次

響應(yīng)式網(wǎng)站，或者是html5+css3網(wǎng)站，對于很多普通青島網(wǎng)站建設(shè)用戶來說這是一個比較新的名字，這種技術(shù)最大特點就是對一些移動設(shè)備的兼容性更好些，但是這個也并不是萬能的。 　　好消息是，你可以改善它。 　　在這篇文章中，我們會談到移動互聯(lián)網(wǎng)和響應(yīng)式設(shè)計的關(guān)系，首先將介紹如何巧妙的運用響應(yīng)式設(shè)計，為什么性能對移動端非常重要，為什么響應(yīng)式設(shè)計不能作為你網(wǎng)站的目標(biāo)，最后技術(shù)的性能問題幫助我們更好的理解這問題。 　　隨著移動互聯(lián)網(wǎng)的大熱，移動網(wǎng)站的設(shè)計也成了眾人關(guān)注的焦點。如何設(shè)計出用戶友好度更高的網(wǎng)站呢？至今，仍有很多設(shè)計師認(rèn)為響應(yīng)式網(wǎng)站可以解決移動站點的一切問題，這一想法似乎真的有些“太傻太天真”了呢！那么，到底怎樣的“響應(yīng)式網(wǎng)站”才能真正解決“移動化”帶來的問題呢？ 　　你調(diào)整了瀏覽器，笑容攀上臉頰。你感到非常開心，認(rèn)為自己實現(xiàn)了友好移動的目標(biāo)。在正式討論前，讓我來預(yù)測下未來：你會失掉用戶和經(jīng)濟效益，如果你把響應(yīng)式網(wǎng)頁作為唯一目標(biāo)和唯一的解決辦法。 　　自2000年開始，設(shè)計者和開發(fā)者就把移動設(shè)備的問題過于簡單化，以至于現(xiàn)在仍然有人認(rèn)為響應(yīng)式網(wǎng)頁設(shè)計能解決一切問題。 　　大家必須明白，凌駕于任何目標(biāo)，移動網(wǎng)絡(luò)體驗必須和閃電一樣快。迅速、實用、兼容的體驗對所有移動設(shè)備都是挑戰(zhàn)。當(dāng)你使用響應(yīng)式設(shè)計時，這些挑戰(zhàn)都存在。從一開始就重視性能會讓過程容易些。 　　響應(yīng)式設(shè)計是很棒，但不是萬能鑰匙。如果你在移動設(shè)備上一味堅持，在轉(zhuǎn)換率后就可能隱藏著性能問題。大約有11%的網(wǎng)站是響應(yīng)式，這個數(shù)字每月都在增長，所以現(xiàn)在是談?wù)撨@個問題的時機了。 　　據(jù)GuyPodjarny研究，72%的響應(yīng)式網(wǎng)站不分屏幕大小都提供相同的字節(jié)，盡管這會降低移動網(wǎng)絡(luò)連接。不是所有用戶都有耐心等著網(wǎng)站加載。 　　對響應(yīng)式設(shè)計存在的問題有了基本認(rèn)識，我們就能減低它帶來的損失。 　　移動網(wǎng)站來自過去 　　我不是說你不應(yīng)該采用響應(yīng)式設(shè)計或者去用m.*的子域名。事實上，現(xiàn)在社會分享無處不在，不分設(shè)備，分配給給文檔一個URL，這是聰明的做法。但這并不意味著一個單獨URL應(yīng)該提供相同的文檔或每一個設(shè)備都應(yīng)該下載相同的資源。 　　援引EthanMarcotte的話，他創(chuàng)造了“響應(yīng)式網(wǎng)頁設(shè)計”這個術(shù)語。 　　最重要的是，響應(yīng)式網(wǎng)頁設(shè)計的初衷不是要取代移動網(wǎng)頁。——EthanMarcotte 　　服務(wù)器端層 　　智能響應(yīng)策略的最后一個選擇是服務(wù)器。 　　服務(wù)器端功能檢測和決策不是移動網(wǎng)絡(luò)的新鮮玩意。類似WURFL和DeviceAtlas的庫在市場上有好多年，響應(yīng)式設(shè)計和服務(wù)器組件的混合也眾所周知。有時被稱為是響應(yīng)式設(shè)計和服務(wù)器端組件（RESS）,有時又叫自適應(yīng)設(shè)計，這提高了響應(yīng)式設(shè)計的速度和可用性，同時每一個服務(wù)器端都保持一個代碼庫。 　　很遺憾的是。這些技術(shù)這幾年并沒有什么突破性的發(fā)展。只能在博客和雜志里看到一些開發(fā)者對“RESS”、“響應(yīng)式”、“自適應(yīng)”做比較。原因就是：我們是前端專業(yè)人士。任何涉及到服務(wù)器的事情看起來都是不太愉快的問題。在一些情況下，前端設(shè)計師能把握好服務(wù)器的腳本，另一些情況是，服務(wù)器由遠(yuǎn)程開發(fā)團隊管理，設(shè)計師不想每做一次小的UI改變就要和遠(yuǎn)程團隊溝通處理。我能體會這種感覺。 　　這就是在大型項目中要花時間思考新架構(gòu)層的原因，這樣前端工程師對服務(wù)器做決定時不會影響到后端架構(gòu)。Node.js是一個極好的備選平臺，是介于當(dāng)前企業(yè)后端基礎(chǔ)和前端之間的服務(wù)器端層。 　　在這個新的端層里，前端的工程師可以根據(jù)有現(xiàn)實的決定權(quán)，這會使得在不觸及后端架構(gòu)的情況下，讓所有設(shè)備上的體驗更為快速、響應(yīng)、可用。 　　交互、移動、快速 　　如果我們能使用一些其他的技術(shù)，就可以實現(xiàn)獲得響應(yīng)式設(shè)計好處的同時，不影響移動設(shè)備的性能。響應(yīng)式設(shè)計從來不是意味著要解決“性能”，這也是為什么我們不能因此指責(zé)它的原因。然而，相信它能解決你所有問題，這大錯特錯。 　　設(shè)計響應(yīng)式很重要，因為我們需要解決跨桌面和移動端視窗大小范圍的問題。但是只考慮屏幕大小就低估了移動設(shè)備。桌面和移動端的界限正在變得模糊，基于不同的設(shè)備對我們而言仍然有多種可能性。但是我們還不能通過媒體查詢來決定響應(yīng)式設(shè)計的功能。一些評論家稱之為“可靠的響應(yīng)式網(wǎng)頁設(shè)計”，然而另一些人則認(rèn)為它是伴隨現(xiàn)代視覺的響應(yīng)式網(wǎng)頁設(shè)計。在沒有了解其基本語義的情況下，我們需要搞清楚這個問題。 　　雖然沒有可應(yīng)用于各類文檔的萬全之策，但是能夠運用一些技巧來改善現(xiàn)有響應(yīng)式的解決辦法，并且力求性能最大化。 　　1、實現(xiàn)每一個文檔對所有的設(shè)備都使用相同的URL和相同的內(nèi)容，結(jié)構(gòu)不必要相同。 　　2、當(dāng)從零開始，遵循“移動先行”的方法。 　　3、在一個真實設(shè)備上測試當(dāng)資源加載和顯示會發(fā)生什么。 　　4、不要依賴調(diào)整你的桌面瀏覽器。使用優(yōu)化工具測量和提高性能。 　　5、通過JavaScript傳輸響應(yīng)圖片，雖然我們更期盼著瀏覽器供應(yīng)商（例如srcset）能解決這個問題 　　6、當(dāng)你需要當(dāng)前設(shè)備具備加載條件時，只加載JavaScript，這會在onload事件之后發(fā)生。 　　7、對移動設(shè)備，內(nèi)聯(lián)文檔的原始視圖，或者發(fā)送一屏顯示內(nèi)容。 　　8、使用下面一種或幾種技術(shù)應(yīng)用智能響應(yīng)式的解決方案：條件加載、按組響應(yīng)、服務(wù)器端層（如適應(yīng)性方法）。 　　條件加載 　　不要總是在CSS中依賴mediaqueries，因為瀏覽器將會為所有設(shè)備加載和解析所有選擇器和樣式（后面詳細(xì)討論）。這就意味著手機為了一個大屏要下載和解析CSS。因為CSS塊的呈現(xiàn)，你要浪費一些時間等待聯(lián)接成功。 　　在設(shè)備上用JavaScript的matchMedia查詢來代替CSSmediaqueries，你知道這些內(nèi)容是不會變化的。例如，大家都知道iPhone不能動態(tài)的轉(zhuǎn)換成iPad的規(guī)格，所以我們只在正在需要CSS時才用。 　　可以用特征檢測，例如Modernizr，對UI和功能性做出更明智的決定而不是僅僅根據(jù)屏幕尺寸。 　　按組響應(yīng) 　　在處理簡單文檔、為臺式電腦和智能手機提供相同的HTML時，雖然為我們可以讓所有屏幕依賴一個單一的HTML基礎(chǔ)和響應(yīng)式設(shè)計，但這并不總是最好的解決方案。為什么呢？同樣是由于移動設(shè)備的性能。 　　即使我們在服務(wù)器端儲存相同的文檔，但是根據(jù)設(shè)備組別的不同給用戶不同的文檔。舉個例子，為一個6英寸甚至更大的屏幕提供大的浮動菜單，為一個小屏幕提供漢堡菜單。在每個組群里，使用響應(yīng)時技術(shù)以適應(yīng)不同的場景，例如肖像模式和風(fēng)景模式的轉(zhuǎn)換，切換iPhone（320像素寬）、5英寸Android設(shè)備（360英寸）和平板（400像素）。

響應(yīng)式網(wǎng)站的利與弊相關(guān)標(biāo)簽：開發(fā)網(wǎng)站，網(wǎng)站開發(fā)，網(wǎng)站申請，企業(yè)網(wǎng)站建設(shè)

相關(guān)熱點推薦

網(wǎng)頁界面設(shè)計教程七：動 青島網(wǎng)站建設(shè)之前應(yīng)該做 分析網(wǎng)站排名下降的影響 網(wǎng)站設(shè)計色彩該如何搭配 未來CEO必備十大IT 如何提高網(wǎng)站的用戶體驗 網(wǎng)站設(shè)計趨勢-互動站細(xì) 網(wǎng)站優(yōu)化的真諦到底是什 網(wǎng)站設(shè)計如何做好風(fēng)格統(tǒng) 如何做網(wǎng)頁設(shè)計的10個 跨境電商稅改新政實施 影響網(wǎng)站排名的因素有哪 10個重要的網(wǎng)頁設(shè)計技 博客論壇推廣技巧優(yōu)化網(wǎng) 企業(yè)網(wǎng)站推廣怎么做 網(wǎng)站建設(shè)中企業(yè)所面臨的 青島企業(yè)網(wǎng)站建設(shè) 快照又回到以前的了，是 40種網(wǎng)站設(shè)計常用技巧 History.bac 建立網(wǎng)站的好處 怎樣衡量網(wǎng)站用戶的價值 建站要向你熟悉的行業(yè)前 《設(shè)計師談網(wǎng)頁設(shè)計思維 網(wǎng)站形成視覺沖擊的幾種 網(wǎng)站：首頁所應(yīng)該達(dá)到的 一家公司的網(wǎng)站應(yīng)該有哪 怎樣交換友情鏈接 企業(yè)建站系統(tǒng) 化妝品的網(wǎng)站策劃分析 網(wǎng)站設(shè)計的思考網(wǎng)頁版面 靈感創(chuàng)意的八種簡潔網(wǎng)頁 網(wǎng)站優(yōu)化站內(nèi)很重要 微信紅包里的錢“去哪了 網(wǎng)站優(yōu)化目標(biāo)及意義 外部鏈接的優(yōu)化之一 黃島網(wǎng)站建設(shè) nev.cn奈薇網(wǎng)站開 企業(yè)建站關(guān)鍵注意事項

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶