一個(gè)網(wǎng)頁中的圖片，通常由一組具有不同大小的圖片組成。例如我在個(gè)人網(wǎng)站首頁上方的大圖，就是由一組6張不同分辨率和大小的圖片組成的，確保不同設(shè)備可以匹配上相應(yīng)的圖片。圖像的格式和大小通常會(huì)使團(tuán)隊(duì)中的設(shè)計(jì)師和開發(fā)人員產(chǎn)生分歧。PNG或者JPG都可以，圖標(biāo)字體和SVG在網(wǎng)頁上也能很好的使用。這就是說，沒有正確的答案：用什么比什么更重要，這取決于可用的內(nèi)容和資源本身。但最重要的是，每個(gè)人都能就格式的使用達(dá)成共識，并堅(jiān)持下去。此外，您可能還希望深入了解一套通用的圖片尺寸系統(tǒng)，用于不同的項(xiàng)目。
但是對于現(xiàn)代響應(yīng)式網(wǎng)站設(shè)計(jì)來說，這僅僅是個(gè)開始。目前你至少需要兩組圖片材料來完成，一組是為普通PPI屏幕而設(shè)計(jì)的，另一組是為高PPI視網(wǎng)膜屏幕而設(shè)計(jì)的。更加完整的響應(yīng)網(wǎng)頁，對圖集和素材要求更高，細(xì)分更多，更具針對性。在項(xiàng)目的后期要盡量避免使用響應(yīng)式圖片格式進(jìn)行篩選。至少，您必須對不同像素密度的屏幕進(jìn)行基本區(qū)分。認(rèn)真閱讀有關(guān)srcset的文章，或使用諸如Picturefill之類的工具來確保瀏覽器之間的支持。假如你覺得整個(gè)計(jì)劃已經(jīng)超出了你的能力，不妨從小的方面著手。漸進(jìn)式地調(diào)整圖片元素的srcset屬性是個(gè)很好的開始，在此過程中，您將逐漸看到頁面的響應(yīng)越來越可靠。

四是從基本要素出發(fā)，采用模塊化設(shè)計(jì)。
BradFrost的AtomicWebDesign和JonathanSnook的SMACSS深刻地影響了響應(yīng)式網(wǎng)頁設(shè)計(jì)過程。這兩種框架都依賴于小型、可重用的基本組件，以實(shí)現(xiàn)強(qiáng)大的網(wǎng)絡(luò)架構(gòu)。
因此，在對于鄭州網(wǎng)站建設(shè)公司向開發(fā)者移交時(shí)，我將優(yōu)先關(guān)注小型、可復(fù)用的組件，因?yàn)樗鼈兛梢詾椴煌脚_的不同設(shè)備提供相同的用戶體驗(yàn)和視覺效果。這樣的一致性更容易被開發(fā)團(tuán)隊(duì)消化吸收。另外，小組件在頁面間的復(fù)用能力也很強(qiáng)，因此，如果您設(shè)計(jì)出了一套有效的方案，那么您就還有用武之地。假設(shè)您正在設(shè)計(jì)一個(gè)注冊頁面，其中包含大標(biāo)題、HD圖片和表單。因?yàn)閃eb頁面是響應(yīng)式的，所有這些元素的大小都隨設(shè)備和屏幕的變化而變化。然后，在項(xiàng)目研發(fā)的早期，就應(yīng)該與開發(fā)團(tuán)隊(duì)一起深入研究，最終確定頁面所涉及到的細(xì)節(jié)。應(yīng)該是個(gè)什么樣的樣子？采用何種驗(yàn)證機(jī)制？在輸入窗體時(shí)，如何配合觸摸屏和傳統(tǒng)鍵鼠。
讓開發(fā)者對視覺和體驗(yàn)設(shè)計(jì)做出反饋。
一些設(shè)計(jì)者沒有讓開發(fā)人員參與，也沒有在產(chǎn)品設(shè)計(jì)會(huì)議、可用性設(shè)計(jì)以及其它交流環(huán)節(jié)提供反饋。這樣的自由與封閉是錯(cuò)誤的。眾所周知，在產(chǎn)品、體驗(yàn)和設(shè)計(jì)等領(lǐng)域，有經(jīng)驗(yàn)的開發(fā)者同樣擁有極其豐富的知識。使他們參與到這些環(huán)節(jié)中，可以使產(chǎn)品更成熟。在技術(shù)上，前端和設(shè)計(jì)者的交集更大。
隨著越來越多的設(shè)計(jì)師開始自己編寫代碼，開發(fā)人員也逐漸習(xí)慣于快速生成原型，繪制框圖，并且私下也會(huì)對美學(xué)和設(shè)計(jì)類的知識產(chǎn)生反感?？焖倬W(wǎng)頁設(shè)計(jì)的出現(xiàn)，使兩個(gè)職業(yè)之間的重疊越來越多，加劇了這種趨勢。盡管對于鄭州網(wǎng)站建設(shè)開發(fā)者們并沒有看到設(shè)計(jì)師這個(gè)頭銜，但他們卻常常能夠用令人驚嘆的設(shè)計(jì)語言來發(fā)人深省。