顯而易見(jiàn)，響應(yīng)式網(wǎng)站設(shè)計(jì)(RWD)這個(gè)術(shù)語(yǔ)在網(wǎng)站領(lǐng)域越來(lái)越流行。當(dāng)你在Twitter、臉書(shū)或微博等社交媒體上搜索#響應(yīng)式網(wǎng)站設(shè)計(jì)時(shí)，你會(huì)發(fā)現(xiàn)很多內(nèi)容優(yōu)質(zhì)、泛泛而談的文章，這是新概念逐漸成熟的現(xiàn)象。如今RWD無(wú)處不在，甚至在雜志界，它也有點(diǎn)名氣。我一個(gè)做雜志出版商的朋友最近參加了一個(gè)會(huì)議，會(huì)上很多新興雜志的著名編輯都提到了未來(lái)網(wǎng)站發(fā)展的趨勢(shì)，談到了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。編輯可能不是網(wǎng)站建設(shè)的專(zhuān)業(yè)人士，但他們都知道“響應(yīng)式網(wǎng)站設(shè)計(jì)”(RWD)。

響應(yīng)式設(shè)計(jì)正在蓬勃發(fā)展，人們創(chuàng)建網(wǎng)站的方式已經(jīng)改變。隨著RWD成為網(wǎng)頁(yè)設(shè)計(jì)的一部分，網(wǎng)頁(yè)設(shè)計(jì)師的工作方式必須改變。因此，我們需要為響應(yīng)式網(wǎng)站設(shè)計(jì)建立一些準(zhǔn)則。

不要停留在“軟應(yīng)對(duì)”上。當(dāng)用戶要求你測(cè)試一個(gè)響應(yīng)式網(wǎng)站時(shí)，你會(huì)怎么做？更改窗口大小，觀察布局如何變化。在這種情況下，大多數(shù)設(shè)計(jì)師或開(kāi)發(fā)者可能會(huì)使用手機(jī)或平板電腦訪問(wèn)、旋轉(zhuǎn)顯示方向，或者測(cè)試頁(yè)面加載速度。這是因?yàn)樗麄冋於荚谡{(diào)整瀏覽器，很容易形成這種想法。但用戶是另一種存在。當(dāng)你作為用戶訪問(wèn)時(shí)，你不會(huì)在意網(wǎng)站布局是否流暢。你只是希望能夠盡快找到你想要的信息。

所以在這里，我想告訴大家，響應(yīng)式網(wǎng)站設(shè)計(jì)不僅要注重版面的響應(yīng)性，還要注重網(wǎng)站內(nèi)容的選擇，不要僅僅停留在“軟響應(yīng)”上。“軟響應(yīng)”是指網(wǎng)站的線性縮放，以及在不同屏幕上的大小變化。軟應(yīng)對(duì)遠(yuǎn)遠(yuǎn)不夠。在設(shè)計(jì)網(wǎng)站時(shí)，我們需要有一個(gè)核心，圍繞這個(gè)核心，我們可以根據(jù)不同屏幕上的功能加載更多內(nèi)容。以栗子為例。如果網(wǎng)站需要為IE7做一個(gè)手機(jī)元素(如App宣傳頁(yè))，那么手機(jī)元素就是你需要重點(diǎn)關(guān)注的核心。最好是圍繞手機(jī)元素設(shè)計(jì)屏幕或者其他元素，根據(jù)不同的屏幕進(jìn)行合理布局。

不要投機(jī)取巧。響應(yīng)式設(shè)計(jì)非常復(fù)雜。我們都希望有一些技巧或者方法可以讓它變得簡(jiǎn)單一些，但是這個(gè)真的不存在，或者說(shuō)還沒(méi)有出現(xiàn)。大多數(shù)負(fù)責(zé)開(kāi)發(fā)響應(yīng)性的設(shè)計(jì)師仍然需要認(rèn)真負(fù)責(zé)，在交付新內(nèi)容或其他活動(dòng)時(shí)添加工作流。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)意味著設(shè)計(jì)風(fēng)格的改變。與在Photoshop中繪制整個(gè)頁(yè)面相比，使用SamanthaWarren的StyleTiles工具可以更清晰地表達(dá)視覺(jué)設(shè)計(jì)。通過(guò)設(shè)計(jì)一個(gè)視覺(jué)品牌和各種布局的網(wǎng)頁(yè)界面元素，你也可以根據(jù)布局直接改變?cè)O(shè)計(jì)來(lái)創(chuàng)建一個(gè)響應(yīng)式的網(wǎng)頁(yè)原型。

CSS預(yù)處理器對(duì)任何響應(yīng)式設(shè)計(jì)工作都有很大的幫助。簡(jiǎn)單來(lái)說(shuō)，預(yù)處理者可以降低網(wǎng)站建設(shè)的復(fù)雜度，減少CSS解釋過(guò)程中很多風(fēng)格的重復(fù)繼承。對(duì)于這個(gè)工具，我個(gè)人更喜歡SCSS。當(dāng)然少也是不錯(cuò)的選擇，它有更完善的文檔。

牢記響應(yīng)式設(shè)計(jì)的原則。網(wǎng)站應(yīng)該能夠訪問(wèn)并為任何可以訪問(wèn)互聯(lián)網(wǎng)的設(shè)備提供友好的體驗(yàn)，無(wú)論是固定設(shè)備還是移動(dòng)設(shè)備，無(wú)論屏幕是大是小。——蒂姆·伯納斯·李

HTML和CSS本身就是響應(yīng)式的。自HTML誕生以來(lái)，網(wǎng)站一直試圖變得更加靈活，以適應(yīng)所有可以訪問(wèn)互聯(lián)網(wǎng)的硬件設(shè)備。并不是以前設(shè)計(jì)師和開(kāi)發(fā)者傾向于固定的布局，現(xiàn)在變了。這是因?yàn)樵诰W(wǎng)站上強(qiáng)加固定的大小會(huì)限制它在不同設(shè)備上提供的用戶體驗(yàn)。

這就是響應(yīng)式網(wǎng)站設(shè)計(jì)所具備的，把用戶放在第一位。創(chuàng)建一個(gè)為用戶服務(wù)的網(wǎng)站，確保用戶在任何情況下都能方便地訪問(wèn)內(nèi)容。做一個(gè)能適應(yīng)小屏幕的網(wǎng)站只是一個(gè)開(kāi)始。

不要盲目設(shè)計(jì)網(wǎng)站，設(shè)計(jì)思路需要清晰。在日常生活中，我們都追求各種美，穿得漂亮，吃得環(huán)境美。可以說(shuō)，美是每個(gè)人都想要的。同樣，對(duì)于廣州網(wǎng)站建設(shè)公司來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)也需要美，美是設(shè)計(jì)藝術(shù)的靈魂，美與否體現(xiàn)了設(shè)計(jì)師藝術(shù)素養(yǎng)的高低。美國(guó)現(xiàn)代舞蹈家鄧肯說(shuō)，“舞蹈家的藝術(shù)在于從大自然中尋找最美的形式”。

網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)也應(yīng)該如此。所謂法就是法。如果你不知道藝術(shù)的形式法則和美的規(guī)律，在網(wǎng)站設(shè)計(jì)的過(guò)程中就會(huì)想當(dāng)然。即使你設(shè)計(jì)了一個(gè)理想的頁(yè)面，你也只是不自覺(jué)地使用了形式上的規(guī)則，不能有意義。有時(shí)候覺(jué)得自己很不足，找不到原因。這種盲目的設(shè)計(jì)總是走彎路，設(shè)計(jì)水平很難提高，所以設(shè)計(jì)思路需要清晰。怎么才能做到呢？

首先，為網(wǎng)站確定一個(gè)鮮明的主題，也就是網(wǎng)站的風(fēng)格。網(wǎng)站的主題其實(shí)是網(wǎng)站想要展現(xiàn)的一種價(jià)值理念，比如企業(yè)站的敬業(yè)與專(zhuān)業(yè)，娛樂(lè)站的俏皮與活潑，醫(yī)療站的溫馨與優(yōu)雅。

第二，給網(wǎng)站增加一些互動(dòng)元素。網(wǎng)站的用戶體驗(yàn)體現(xiàn)在網(wǎng)站的知名度上。除了網(wǎng)站本身的細(xì)節(jié)，人氣還在于網(wǎng)站本身要有意識(shí)的增加一些功能來(lái)提升人氣。如果用戶主動(dòng)參與，不僅可以縮短網(wǎng)友之間的距離，更重要的是留住用戶。

第三，網(wǎng)站訪問(wèn)速度最好符合用戶的心理要求。當(dāng)用戶進(jìn)入網(wǎng)站時(shí)，他們希望快速找到自己想要的東西。給用戶一個(gè)愉悅的心情，不要讓他們等得不耐煩。

第四，不要讓廣告頻繁出現(xiàn)在用戶面前。雖然廣告是大多數(shù)網(wǎng)站的收入來(lái)源，但它對(duì)一些中小型企業(yè)產(chǎn)生了負(fù)面影響。所以我們?cè)跇?gòu)思設(shè)計(jì)思路的時(shí)候要注意這一點(diǎn)。

第五，別忘了不同行業(yè)主題的定性分析。我們必須有一個(gè)明確的主題概念，才能針對(duì)不同類(lèi)型的網(wǎng)站確定主題風(fēng)格，選擇網(wǎng)站功能和布局細(xì)節(jié)。

所以在網(wǎng)站建設(shè)中，當(dāng)我們接到一個(gè)設(shè)計(jì)任務(wù)，面對(duì)各種亂七八糟的素材時(shí)，一定要用理性的邏輯思維，大膽組合各種素材，創(chuàng)造出清晰的形式感。單純的可以使頁(yè)面獲得完整有序的視覺(jué)效果，反之則會(huì)造成視覺(jué)傳達(dá)的障礙。