一、RWD響應(yīng)式設(shè)計(jì)的由來什麼是 RWD 響應(yīng)式設(shè)計(jì) ? 為何網(wǎng)站需要 RWD 功能 ?響應(yīng)式網(wǎng)站設(shè)計(jì) RWD 是 Responsive web design 的縮寫,最早之前是在2010年由美國著名的網(wǎng)頁設(shè)計(jì)師Ethan Marcotte所提出的網(wǎng)頁設(shè)計(jì)技術(shù)(見:http:///article/responsive-web-design),為了因應(yīng)科技發(fā)展快速,有越來越多不同大小的螢?zāi)怀霈F(xiàn)而導(dǎo)致網(wǎng)站顯示問題的解決方案,可以說是 RWD 技術(shù) 的先驅(qū)。 在RWD這個(gè)技術(shù)概念被提出之前,網(wǎng)站開發(fā)者在設(shè)計(jì)網(wǎng)頁時(shí)的內(nèi)部元素排版都是按照桌上型電腦的螢?zāi)淮笮∪ピO(shè)計(jì)的,像是文字的 padding (內(nèi)距)、 Margin (外距),圖片尺寸等都是固定的,包含每一個(gè)元素區(qū)塊只需要設(shè)定適應(yīng)市面上主流螢?zāi)坏拇笮【秃茫诋?dāng)時(shí)網(wǎng)站的建構(gòu)相當(dāng)容易,並不需要考慮太多顯示上的問題。 直到2007年1月, Apple 發(fā)表了最新型的手機(jī) – iPhone 第一代,開啟了全世界風(fēng)行智慧型手機(jī)的潮流,透過智慧型手機(jī)隨時(shí)隨地?zé)o線上網(wǎng)的方式開始影響到人們的生活習(xí)慣,”網(wǎng)路”漸漸的變成可以取代電視廣告、報(bào)章雜誌、傳單等傳統(tǒng)的一種更重要的行銷方式,但這時(shí)大部分的網(wǎng)站在透過智慧型手機(jī)瀏覽時(shí),依然存在相當(dāng)大的問題。 如前言所提到的,網(wǎng)頁內(nèi)的區(qū)塊( Section )元素都是在設(shè)計(jì)時(shí)都是一樣大小的,因此在智慧型手機(jī)的螢?zāi)恢?,網(wǎng)站內(nèi)容的排版不是雜亂無比,就是只能瀏覽到部分的內(nèi)容,就算網(wǎng)站的內(nèi)容完整呈現(xiàn)在智慧型手機(jī)螢?zāi)恢?,但卻只是以手機(jī)螢?zāi)坏缺壤目s小所有網(wǎng)站元素,當(dāng)使用者要點(diǎn)選 MENU (網(wǎng)站選單)跳轉(zhuǎn)到其他頁面時(shí),必須透過手勢放大螢?zāi)?/b>中選項(xiàng)的區(qū)塊,才能夠點(diǎn)按到連結(jié),當(dāng)想瀏覽網(wǎng)站的其它區(qū)塊時(shí)又必須縮小螢?zāi)伙@示範(fàn)圍,這樣的操作方式對於瀏覽網(wǎng)站是非常不便利的。 而當(dāng)網(wǎng)站開發(fā)者對於這樣的問題還在嘗試解決方法時(shí),智慧型手機(jī)開發(fā)商為了要帶給比其他廠商更好的行動(dòng)上網(wǎng)體驗(yàn),率先提供了簡單的解決方式,就是透過智慧型手機(jī)中的操作設(shè)定,當(dāng)使用者點(diǎn)選搜尋框或文字方框時(shí),會(huì)自動(dòng)放大該區(qū)塊讓使用者能更清楚的看到內(nèi)容,而點(diǎn)擊文字連結(jié)也會(huì)有放大區(qū)域檢視所有連結(jié),以供使用者挑選想要點(diǎn)選的文字項(xiàng)目,這樣的做法在當(dāng)時(shí)也算是解決了網(wǎng)頁內(nèi)容太小無法點(diǎn)選或總是點(diǎn)選錯(cuò)誤選項(xiàng)的問題,但對於使用者而言,還是多了一個(gè)必須設(shè)定或點(diǎn)選的步驟,在網(wǎng)頁操作的流暢度上來講依然不足。 人類之所以為萬物之靈,就是會(huì)不斷的追求進(jìn)步,網(wǎng)站設(shè)計(jì)師們當(dāng)然不滿足於只侷限在這樣治標(biāo)不治本的功能,於是開始了網(wǎng)站 “雙版本時(shí)代“,也就是為網(wǎng)站分別建立電腦版網(wǎng)站( Computer Website )以及手機(jī)版網(wǎng)站( Mobile Website ),透過程式語言對網(wǎng)站進(jìn)行調(diào)整,使內(nèi)容元素可以在智慧型手機(jī)螢?zāi)恢姓_顯示,而對於像按鈕、連結(jié)文字、圖片等也可以各別為了使用者操作便利而自行定義,刪去不必要的內(nèi)容,強(qiáng)調(diào)客戶會(huì)比較想了解的公司業(yè)務(wù)或產(chǎn)品的相關(guān)服務(wù),並且在排版上採用直式的作法,免去其他不必要的特效(比如當(dāng)游標(biāo)移到連結(jié)文字時(shí)會(huì)更改顏色)等,都變成了手機(jī)版網(wǎng)站的重點(diǎn)。雙版本的方式,大大的改善使用者瀏覽網(wǎng)站的意願(yuàn),同樣的內(nèi)容不同的排版方式,就掌握了另一群以行動(dòng)上網(wǎng)為主的客群商機(jī)。 但凡事有利就有弊,隨著時(shí)間的推移,漸漸的雙網(wǎng)站版本的弊端也漸漸地浮上檯面,以下列出較常見的問題: 1.因?yàn)槭莾蓚€(gè)網(wǎng)站必須建立兩個(gè)不同的網(wǎng)址,可能網(wǎng)域( Domain Name )相同,只有子網(wǎng)域( SubDomain )不同,對於使用者而言判別上常常都會(huì)有所誤導(dǎo),在電腦版開啟手機(jī)版網(wǎng)站時(shí)會(huì)有內(nèi)容排版無法正確顯示的問題。 2.手機(jī)版網(wǎng)站為了要能適應(yīng)螢?zāi)淮笮?/b>,在設(shè)計(jì)上並不能完全套用電腦版內(nèi)容就好,必須合理安排網(wǎng)站內(nèi)部頁面的連結(jié)路徑,如果說我今天在電腦版上點(diǎn)選”商品介紹”這個(gè)選項(xiàng),會(huì)跳轉(zhuǎn)到所有商品列表,而如果要在手機(jī)版中進(jìn)入同樣的商品介紹頁面,必須要先找到商品分類,才能進(jìn)入商品列表,對於使用者來說對於同樣的網(wǎng)站內(nèi)容卻有不同的操作方式,容易造成混淆。 3.要建立兩個(gè)網(wǎng)站,如果是請網(wǎng)站設(shè)計(jì)公司設(shè)計(jì)會(huì)有必須付出更多經(jīng)費(fèi)成本的問題,而如果是要自行架站,所花費(fèi)的時(shí)間也是使用RWD網(wǎng)頁設(shè)計(jì)的兩倍,更何況手機(jī)版網(wǎng)站的架構(gòu)又是另一種概念,並不是照搬套用電腦版網(wǎng)站就好。 4.當(dāng)電腦版網(wǎng)站的內(nèi)容有更新,比如新商品上架,修改價(jià)格等,手機(jī)版也要同步的做更新,等於說同一件事必須要花費(fèi)兩倍的精神去完成,對於後續(xù)的網(wǎng)站維護(hù)拉高了時(shí)間成本。 雖然有上述的種種缺點(diǎn),但手機(jī)版網(wǎng)頁依然是當(dāng)時(shí)的網(wǎng)站開發(fā)人員最”熟悉”的方法,畢竟RWD的概念才剛剛被提出,尚未成熟到可以被自由運(yùn)用的地步,在新技術(shù)的方法還停留在書面文字間時(shí),雙網(wǎng)站的解決方案就先湊合者用吧! 可惜的是好景不常,智慧型手機(jī)雖然攜帶便利,可是螢?zāi)划吘惯€是太小,對於使用者來說無論是閱讀文字或觀賞影片對於眼睛的傷害是有深遠(yuǎn)的影響,而當(dāng)市場有需求時(shí),就代表商機(jī)的來臨,於是智慧型手機(jī)的廠商們出於保護(hù)人類視力的社會(huì)責(zé)任,開發(fā)出了螢?zāi)桓蟾逦?,而且又能隨身攜帶的”平板電腦”,而且還標(biāo)榜著”追劇神器”、”遊戲終結(jié)者”等各式各樣的廣告詞,於是平板電腦再次掀起了一波搶購熱潮,對於移動(dòng)設(shè)備的使用,人們有更好的選擇。 但對於網(wǎng)站開發(fā)者而言,這無疑是一個(gè)不太妙的消息,為了搶佔(zhàn)行動(dòng)上網(wǎng)的商機(jī),已經(jīng)要多維護(hù)管理一個(gè)手機(jī)版網(wǎng)站了,現(xiàn)在又多了一個(gè)平板電腦,難道又要多建立一個(gè)平板電腦網(wǎng)站?這是一個(gè)搞死人的節(jié)奏??!無數(shù)網(wǎng)站開發(fā)人員在心中吶喊著,但不管如何這是市場的趨勢,總是要想辦法解決,於是曾經(jīng)被遺忘在角落的 RWD響應(yīng)式設(shè)計(jì) 再次獲得了重視。 二、什麼是 RWD 響應(yīng)式設(shè)計(jì)?RWD就是運(yùn)用 HTML5 、 CSS3 等程式語言的運(yùn)用,讓網(wǎng)站能夠自適應(yīng)不同設(shè)備的螢?zāi)淮笮。尸F(xiàn)出正常的網(wǎng)站內(nèi)容,就好像水裝在不一樣的容器中,就會(huì)變成不一樣的形狀的概念。而其原理就是透過語法給予指令,定義所有網(wǎng)站內(nèi)容元素在不同的螢?zāi)唤馕龆认?,?yīng)該呈現(xiàn)的排版及樣式。 而如果要更加深入解說 RWD,必須要提到 Viewport (視埠,可視區(qū)域)這個(gè)名詞,因?yàn)榫W(wǎng)站的設(shè)置內(nèi)容對於智慧型手機(jī)或平板的內(nèi)容來說太大,而RWD運(yùn)用Viewport在移動(dòng)設(shè)備端的瀏覽器中建立一個(gè)虛擬的可視區(qū)域,透過定義Viewport的數(shù)值,告訴瀏覽器應(yīng)該在當(dāng)前使用的瀏覽設(shè)備大小給予網(wǎng)站內(nèi)容怎樣的比例,以完成網(wǎng)站資料自動(dòng)適應(yīng)螢?zāi)淮笮〉哪康摹?/div>
另外一個(gè) RWD 的運(yùn)作原理就是使用CSS3的 Media Queries , 以@m(xù)edia這個(gè)屬性定義當(dāng)螢?zāi)唤馕龆?寬度)大於或小於所設(shè)定的數(shù)值時(shí),所被定義的網(wǎng)站元素物件所呈現(xiàn)的背景顏色、文字大小、不顯示該物件等等規(guī)則,這個(gè)屬性也就是 RWD 網(wǎng)頁設(shè)計(jì)最核心的思想,讓網(wǎng)站能夠遵循指令根據(jù)顯示螢?zāi)坏拇笮∽詣?dòng)調(diào)整內(nèi)容。 結(jié)論:看完RWD的由來以及使用 RWD 網(wǎng)頁設(shè)計(jì)的原因,一定相當(dāng)清楚使用 RWD 架設(shè)網(wǎng)站的重要性,如果想要開始使用 RWD 網(wǎng)站設(shè)計(jì)讓您的網(wǎng)站不再錯(cuò)失廣大的行動(dòng)上網(wǎng)用戶客群,可以與我們聯(lián)絡(luò),透過專業(yè)的 RWD 響應(yīng)式網(wǎng)站設(shè)計(jì),讓您的網(wǎng)路行銷之路暢通無阻,增加網(wǎng)站點(diǎn)閱率及流量,提高成交的機(jī)會(huì)!
|
|