pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

Web設(shè)計(jì)的未來(lái):網(wǎng)頁(yè)響應(yīng)式設(shè)計(jì)路在何方?

作者Tom Ewer認(rèn)為在多數(shù)情況下,網(wǎng)頁(yè)并非需要響應(yīng)式設(shè)計(jì)。雖然移動(dòng)設(shè)備將成為未來(lái)上網(wǎng)的主要渠道,但并不是所有網(wǎng)站都應(yīng)該使用像是設(shè)計(jì),也許分類進(jìn)行選擇。在文中列舉5點(diǎn)證明響應(yīng)式設(shè)計(jì)的弊端或是差強(qiáng)人意的方面,并形容其有一個(gè)“免費(fèi)通行證”,總是避過批評(píng)和建議。

Web設(shè)計(jì)的未來(lái):網(wǎng)頁(yè)響應(yīng)式設(shè)計(jì)路在何方? 三聯(lián)教程

Facebook設(shè)計(jì)總監(jiān)KateAronowitz:“我們開發(fā)產(chǎn)品首先考慮移動(dòng)端,其次是桌面端。”

Adobe CTO Kevin Lynch:“移動(dòng)設(shè)計(jì)轉(zhuǎn)型甚至超過PC革命。”

2014年,通過移動(dòng)設(shè)備上網(wǎng)的人數(shù)將超過PC端。在未來(lái),設(shè)計(jì)移動(dòng)設(shè)備將成為Web開發(fā)人員的首要任務(wù)。

響應(yīng)式設(shè)計(jì)似乎被看做成未來(lái)的設(shè)計(jì)方向,但我不贊同。今天,我要解釋為什么我認(rèn)為響應(yīng)式設(shè)計(jì)并不是Web設(shè)計(jì)的最佳解決方案。

什么是響應(yīng)式設(shè)計(jì)?

維基百科對(duì)響應(yīng)式設(shè)計(jì)是這么介紹的:

響應(yīng)式Web設(shè)計(jì)是網(wǎng)站制作使用的一個(gè)疊層樣式表( CSS3media queries),結(jié)合流體網(wǎng)格適應(yīng)各種布局,還可靈活使用圖像。用戶可跨越不同設(shè)備和瀏覽器的限制,訪問相同內(nèi)容,布局也利于閱讀和瀏覽,只需細(xì)微的調(diào)整、平移或滾動(dòng)。

網(wǎng)站設(shè)計(jì)將根據(jù)設(shè)備特定的分辨率或是屏幕尺寸進(jìn)行調(diào)整。按上述定義來(lái)看,響應(yīng)式設(shè)計(jì)看來(lái)很有發(fā)展前途。

在某些情況下,我也是響應(yīng)式設(shè)計(jì)的擁護(hù)者。比如,一個(gè)桌面Web應(yīng)用無(wú)法有效地呈現(xiàn)在移動(dòng)設(shè)備屏幕上時(shí),響應(yīng)式設(shè)計(jì)就起到了作用。谷歌地圖就是一個(gè)很好的例子:

桌面顯示

手機(jī)顯示

如果網(wǎng)站內(nèi)容很大程度上是依賴圖片,響應(yīng)式設(shè)計(jì)絕對(duì)是一個(gè)很好的解決方案。但是,當(dāng)內(nèi)容是大多數(shù)文本的網(wǎng)站或是博客,我相信響應(yīng)式設(shè)計(jì)是在浪費(fèi)時(shí)間。

我要解釋為什么我認(rèn)為在很多情況下響應(yīng)式設(shè)計(jì)是不值得的。

1. 違背用戶期望

可用性101(usability 101)第一條規(guī)則就是滿足最終用戶期待,混淆最終用戶是Web設(shè)計(jì)中最大的敗筆。然而,這正是響應(yīng)式設(shè)計(jì)所做的。

以博客為例。最普遍的“標(biāo)準(zhǔn)”博客設(shè)計(jì),頁(yè)面最上方是標(biāo)題,下面分為兩欄,一欄是博客內(nèi)容,另一欄是其他內(nèi)容。數(shù)以百計(jì)的博客網(wǎng)站設(shè)計(jì)基本如此,因?yàn)檫@樣易于操作,而這就是人們所期望的。

如果你訪問一個(gè)響應(yīng)式設(shè)計(jì)開發(fā)的博客,傳統(tǒng)的側(cè)邊欄肯定會(huì)消失,有可能被移到頁(yè)面的頂部或是底部。但有一件事可以肯定,這并不是你所期望的。

以“Cats who code”為例。在桌面顯示,頂部是導(dǎo)航欄和工具欄,其中包括最新文章和snippets,在邊欄中還有搜索框:

采用響應(yīng)式設(shè)計(jì)技術(shù)在手機(jī)中顯示:

無(wú)論是導(dǎo)航欄,還是工具欄都消失了。經(jīng)過多次滾動(dòng)頁(yè)面,在頁(yè)面底部終于發(fā)現(xiàn)了原先的側(cè)邊欄,但導(dǎo)航欄依舊無(wú)跡可尋。

也許,會(huì)有響應(yīng)式設(shè)計(jì)的擁護(hù)者稱,這個(gè)網(wǎng)站只是一個(gè)失敗的簡(jiǎn)單示例。但是,你們不要忘記,這個(gè)網(wǎng)站剛剛被評(píng)為10個(gè)“優(yōu)秀”的響應(yīng)式Web設(shè)計(jì)網(wǎng)站。我認(rèn)為這是響應(yīng)式設(shè)計(jì)的典型例子。其實(shí),我很迫切能在手機(jī)上看到桌面版的布局。

2. 高成本、效率低

通常響應(yīng)式設(shè)計(jì)會(huì)比非響應(yīng)式設(shè)計(jì)耗時(shí)更長(zhǎng),成本更高。初始資金一般是捉襟見肘,如果還要額外支付一大筆資金用于響應(yīng)式設(shè)計(jì),會(huì)讓人非常痛苦。

有人認(rèn)為,響應(yīng)式設(shè)計(jì)的費(fèi)用比從零開發(fā)一個(gè)單獨(dú)的移動(dòng)網(wǎng)站更佳實(shí)惠,我同意這個(gè)說(shuō)法。但是你知道什么比響應(yīng)式設(shè)計(jì)更便宜嗎?那就是非響應(yīng)式設(shè)計(jì)。響應(yīng)式設(shè)計(jì)除了耗時(shí)較長(zhǎng),其開發(fā)也相對(duì)的復(fù)雜。

你認(rèn)為你的網(wǎng)站不使用響應(yīng)式設(shè)計(jì)就會(huì)完蛋,這是錯(cuò)誤的想法。試問自己,響應(yīng)式設(shè)計(jì)給你帶來(lái)的回報(bào)是什么?如果你認(rèn)為非響應(yīng)式設(shè)計(jì)的網(wǎng)站,就不能給移動(dòng)用戶提供服務(wù),這個(gè)想法也是錯(cuò)誤的。這就是我下面要講的內(nèi)容。

3. 非響應(yīng)設(shè)計(jì)工作原理

在Mac上訪問我的博客

到目前為止,網(wǎng)站運(yùn)營(yíng)正常。我的網(wǎng)站是基于Woo ThemesCanvas theme,開發(fā)時(shí)并沒有使用響應(yīng)式設(shè)計(jì)。

在iPhone上訪問我的博客:

在iPhone 4s視網(wǎng)膜屏幕上,非響應(yīng)式設(shè)計(jì)完全可以縱向顯示網(wǎng)站布局。

如果你覺得縱向文本區(qū)域顯示拘謹(jǐn),可橫向轉(zhuǎn)動(dòng)設(shè)備觀看,如下:

還可以通過雙擊屏幕,放大文本內(nèi)容。

現(xiàn)在的移動(dòng)設(shè)備都可有效地顯示非響應(yīng)式Web設(shè)計(jì)網(wǎng)站。但也有例外,有些非結(jié)構(gòu)化設(shè)計(jì)網(wǎng)站在PC上顯示的并不盡人意。

很多時(shí)候,一個(gè)設(shè)計(jì)優(yōu)秀的桌面網(wǎng)站,可以在移動(dòng)設(shè)備上完美的呈現(xiàn)出原有布局。

4. 加載效益低

移動(dòng)設(shè)備通常是通過子寬帶連接互聯(lián)網(wǎng)(網(wǎng)速低),所以網(wǎng)站開發(fā)應(yīng)更精簡(jiǎn),以確保最佳的加載時(shí)間。

雖然這是一個(gè)合理的建議。但實(shí)際上,許多響應(yīng)式設(shè)計(jì)并沒有考慮加載的問題,許多設(shè)計(jì)師都習(xí)慣在頁(yè)面中隱藏?zé)o用元素。雖然這不是最好的做法,但卻是最常見的做法。

最佳(非響應(yīng)式)解決方案是使用延遲加載,這是加載密集元素的最終解決方案。這是一段圖像延遲加載代碼,可用于你的網(wǎng)站。

5. 折衷

響應(yīng)式設(shè)計(jì)可看作為是一種“折衷”,使用取決于設(shè)計(jì)師的主觀決定。就算網(wǎng)站使用該技術(shù),在移動(dòng)設(shè)備上也無(wú)法呈現(xiàn)出桌面布局的最佳效果。

由于移動(dòng)設(shè)備上布局的改變,會(huì)讓很多移動(dòng)用戶難以接受或適應(yīng),從而會(huì)流失用戶。

我認(rèn)為在移動(dòng)平臺(tái)上,“折衷”并不比非響應(yīng)式設(shè)計(jì)效果更佳,尤其這種方案需花費(fèi)更長(zhǎng)時(shí)間和成本。

結(jié)束語(yǔ)

我寫這篇文章的2個(gè)主要原因:

1. 我認(rèn)為,在許多情況下,響應(yīng)式設(shè)計(jì)完全不必要。

2. 在互聯(lián)網(wǎng)上,明顯缺乏反對(duì)響應(yīng)式設(shè)計(jì)的論據(jù)。

世上沒有十全十美的東西,但響應(yīng)式設(shè)計(jì)卻似乎得到一個(gè)“免費(fèi)通行證”,能抵擋大部分建設(shè)性的批評(píng)。

我不反對(duì)響應(yīng)式設(shè)計(jì)理論,但在很多簡(jiǎn)單的情況下并沒有使用的必要性。其實(shí)很多人都是跟風(fēng),所以才這么做。也許你應(yīng)該花一些時(shí)間考慮是否真的需要響應(yīng)式設(shè)計(jì),你的訪客是否真的可從中真正受益。

原文:managewp 編譯:CSDN

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測(cè)試外,其他素材未做測(cè)試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章給大家詳細(xì)介紹了HTML頁(yè)面跳轉(zhuǎn)及參數(shù)傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實(shí)現(xiàn)照片墻3D效果的示例代碼,可以實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片實(shí)現(xiàn)改變,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
這篇文章主要介紹了css 實(shí)現(xiàn)文字過長(zhǎng)自動(dòng)隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設(shè)置字體大小) 教程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
主站蜘蛛池模板: 2025福建平潭岛旅游攻略|蓝眼泪,景点,住宿攻略-趣平潭网 | 四探针电阻率测试仪-振实密度仪-粉末流动性测定仪-宁波瑞柯微智能 | 合金耐磨锤头_破碎机锤头_郑州市德勤建材有限公司 | 大倾角皮带机-皮带输送机-螺旋输送机-矿用皮带输送机价格厂家-河南坤威机械 | 折弯机-刨槽机-数控折弯机-数控刨槽机-数控折弯机厂家-深圳豐科机械有限公司 | 自清洗过滤器_全自动过滤器_全自动反冲洗过滤器_量子过滤器-滑漮滴 | 户外环保不锈钢垃圾桶_标识标牌制作_园林公园椅厂家_花箱定制-北京汇众环艺 | 风电变桨伺服驱动器-风电偏航变桨系统-深圳众城卓越科技有限公司 | 下水道疏通_管道疏通_马桶疏通_附近疏通电话- 立刻通 | 汽车水泵_汽车水泵厂家-瑞安市骏迪汽车配件有限公司 | 安徽千住锡膏_安徽阿尔法锡膏锡条_安徽唯特偶锡膏_卡夫特胶水-芜湖荣亮电子科技有限公司 | 流量卡中心-流量卡套餐查询系统_移动电信联通流量卡套餐大全 | 便携式XPDM露点仪-在线式防爆露点仪-增强型烟气分析仪-约克仪器 冰雕-冰雪世界-大型冰雕展制作公司-赛北冰雕官网 | 断桥铝破碎机_发动机破碎机_杂铝破碎机厂家价格-皓星机械 | 红立方品牌应急包/急救包加盟,小成本好项目代理_应急/消防/户外用品加盟_应急好项目加盟_新奇特项目招商 - 中红方宁(北京) 供应链有限公司 | 焊接减速机箱体,减速机箱体加工-淄博博山泽坤机械厂 | 宁波普瑞思邻苯二甲酸盐检测仪,ROHS2.0检测设备,ROHS2.0测试仪厂家 | 重庆网站建设,重庆网站设计,重庆网站制作,重庆seo,重庆做网站,重庆seo,重庆公众号运营,重庆小程序开发 | 物流之家新闻网-最新物流新闻|物流资讯|物流政策|物流网-匡匡奈斯物流科技 | 钢衬玻璃厂家,钢衬玻璃管道 -山东东兴扬防腐设备有限公司 | 伺服电机维修、驱动器维修「安川|三菱|松下」伺服维修公司-深圳华创益 | 工业淬火油烟净化器,北京油烟净化器厂家,热处理油烟净化器-北京众鑫百科 | 山东石英砂过滤器,除氟过滤器「价格低」-淄博胜达水处理 | 传动滚筒,改向滚筒-淄博建凯机械科技有限公司| 哈希余氯测定仪,分光光度计,ph在线监测仪,浊度测定仪,试剂-上海京灿精密机械有限公司 | 首页 - 军军小站|张军博客| 轴流风机-鼓风机-离心风机-散热风扇-罩极电机,生产厂家-首肯电子 | 煤机配件厂家_刮板机配件_链轮轴组_河南双志机械设备有限公司 | 烟气换热器_GGH烟气换热器_空气预热器_高温气气换热器-青岛康景辉 | 东莞注册公司-代办营业执照-东莞公司注册代理记账-极刻财税 | 钢板仓,大型钢板仓,钢板库,大型钢板库,粉煤灰钢板仓,螺旋钢板仓,螺旋卷板仓,骨料钢板仓 | 高考志愿规划师_高考规划师_高考培训师_高报师_升学规划师_高考志愿规划师培训认证机构「向阳生涯」 | 微型气象仪_气象传感器_防爆气象传感器-天合传感器大全 | 建筑消防设施检测系统检测箱-电梯**检测仪器箱-北京宇成伟业科技有限责任公司 | 电池高低温试验箱-气态冲击箱-双层电池防爆箱|简户百科 | 广州各区危化证办理_危险化学品经营许可证代办 | 三佳互联一站式网站建设服务|网站开发|网站设计|网站搭建服务商 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 芜湖厨房设备_芜湖商用厨具_芜湖厨具设备-芜湖鑫环厨具有限公司 控显科技 - 工控一体机、工业显示器、工业平板电脑源头厂家 | 浙江宝泉阀门有限公司 | 吉林污水处理公司,长春工业污水处理设备,净水设备-长春易洁环保科技有限公司 | POM塑料_PBT材料「进口」聚甲醛POM杜邦原料、加纤PBT塑料报价格找利隆塑料 |