最近,響應(yīng)式網(wǎng)站設(shè)計(jì)和自適應(yīng)網(wǎng)站設(shè)計(jì)引發(fā)了設(shè)計(jì)行業(yè)的發(fā)展趨勢(shì)。當(dāng)您開始設(shè)計(jì)新網(wǎng)站或重新設(shè)計(jì)網(wǎng)站時(shí),選擇哪種設(shè)計(jì)是一個(gè)非常棘手的問題。面對(duì)挑剔的老板和客戶,如何解釋定義是網(wǎng)站設(shè)計(jì)師的考驗(yàn)。如果他們想要以前的設(shè)計(jì)風(fēng)格,您如何向他們解釋響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)缺點(diǎn)?
什么是響應(yīng)式網(wǎng)站設(shè)計(jì)?
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(RWD)是一種網(wǎng)頁(yè)設(shè)計(jì)方法,旨在允許查看桌面網(wǎng)頁(yè)以響應(yīng)正在查看的屏幕或網(wǎng)絡(luò)瀏覽器的大小。這意味著為單個(gè)網(wǎng)站的各種設(shè)備提供相同的支持。
您應(yīng)該考慮的三個(gè)步驟:
1.媒體查詢。也就是說,指定不同的CSS顯示樣式。
2.流體網(wǎng)格。百分比%將用于CSS而不是絕對(duì)值。
3.流體圖像/介質(zhì)。與第2點(diǎn)相同,它還使用百分比而不是絕對(duì)值來修改圖像,視頻和字體的顯示。這樣就可以根據(jù)不同的屏幕進(jìn)行調(diào)整。
響應(yīng)式網(wǎng)站設(shè)計(jì)的優(yōu)點(diǎn)
1.用戶體驗(yàn)友好
響應(yīng)式設(shè)計(jì)可以為用戶提供友好的網(wǎng)絡(luò)界面,因?yàn)樗梢赃m應(yīng)屏幕上的幾乎所有設(shè)備,包括智能手機(jī),平板電腦,電視,PC顯示器,iPhone和Android手機(jī),這些都有助于移動(dòng)友好的網(wǎng)站設(shè)計(jì)。盡管有一種說法是響應(yīng)式設(shè)計(jì)正在降低移動(dòng)用戶體驗(yàn)。
2.節(jié)省響應(yīng)式網(wǎng)站設(shè)計(jì)開發(fā)的成本
與PC,iPad和手機(jī)網(wǎng)站的開發(fā)相比,響應(yīng)式設(shè)計(jì)更有利于節(jié)省設(shè)計(jì)和開發(fā)成本。
在設(shè)計(jì)方面,它只需要為基于PC,iPad和移動(dòng)設(shè)備的響應(yīng)式Web界面設(shè)計(jì)兩組設(shè)計(jì)渲染。從前端開發(fā)的角度來看,只需要開發(fā)3種不同的CSS樣式。從后期維護(hù)的角度來看,不需要維護(hù)PC界面,iPad界面和移動(dòng)界面。
3、SEO友好
它允許您通過單個(gè)URL地址收集所有社交共享鏈接(如果您是網(wǎng)站所有者)。您可以為創(chuàng)建更好,更友好的網(wǎng)站做出積極貢獻(xiàn)。
從另一個(gè)角度來看,響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是SEO友好的。Google還建議優(yōu)先考慮響應(yīng)式設(shè)計(jì),因?yàn)闊o論您選擇哪種頁(yè)面版本,百度都可以輕松處理相同的HTML和內(nèi)容。
響應(yīng)式網(wǎng)站設(shè)計(jì)的缺點(diǎn)
1.舊版IE瀏覽器兼容性差
如果您的網(wǎng)站用戶大多使用舊版IE,則不建議您進(jìn)行響應(yīng)式設(shè)計(jì)。對(duì)于舊版IE瀏覽器(IE6,IE7,IE8)來說,這是一個(gè)致命的問題。
2.減慢裝載速度
加載某些響應(yīng)式網(wǎng)站需要更長(zhǎng)時(shí)間。這不是什么大問題,因?yàn)闀?huì)加載一些不必要的HTML / CSS。例如,響應(yīng)式網(wǎng)站上的圖像只是在視覺上按比例縮小,而不是為了最快的加載時(shí)間而重新調(diào)整大小。
3.開發(fā)耗時(shí)
對(duì)響應(yīng)式網(wǎng)站來說,這是一項(xiàng)耗時(shí)的任務(wù)。如果您打算將現(xiàn)有網(wǎng)站轉(zhuǎn)換為響應(yīng)式網(wǎng)站,可能需要更多時(shí)間。如果你想要一個(gè)新的響應(yīng)式網(wǎng)站,最好從一開始就進(jìn)行設(shè)計(jì)。這意味著從通過Mockplus等原型制作工具創(chuàng)建原型到HTML / CSS開發(fā)。
4.對(duì)布局的影響
響應(yīng)式網(wǎng)站設(shè)計(jì)的液體布局很難讓設(shè)計(jì)師很好地控制設(shè)計(jì)風(fēng)格。設(shè)計(jì)人員正試圖分別為移動(dòng)和桌面布局顯示線框和設(shè)計(jì)原型。只有在這兩種布局得到改進(jìn)之后,才能真正實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)策略。
上面列出的響應(yīng)式網(wǎng)站設(shè)計(jì)的優(yōu)缺點(diǎn)應(yīng)該是您做出正確選擇的明確區(qū)別。
注:部分文章屬于轉(zhuǎn)載,如有侵權(quán)請(qǐng)聯(lián)系13927286473進(jìn)行刪除。