海淘科技：準備好了，這里來了高清網頁設計。蘋果是推動高新技術產業(yè)發(fā)展增加iPhone和iPad屏幕上的像素密度。從用戶的角度來看這是偉大的,但作為一個網頁設計師或開發(fā)者它實際上可能完全改變你建立網站的方式。

你準備好高清網頁設計嗎?你知道你的網站將會在新一代的高分辨率屏幕上嗎?你可以采取什么步驟來準備自己,你將需要什么技能在未來幾年?繼續(xù)讀下去你會發(fā)現(xiàn)。

當蘋果說,我們聽

我一直在使用mac OS 9天以來忠實,不只要一些舊定時器但長時間喝的飲料,完全沉迷于一切蘋果。我記得看到一個蘋果標志意味著產品是一個利基,局外人,只有社會的頑固的個人使用在一個公開的試圖違背主流,Windows-loving文化。“如果你隨機選擇一所房子,你就會發(fā)現(xiàn)至少有一個iPod,iPhone和iPad里面?！?/span>通過一個令人印象深刻的變換建立在致力于創(chuàng)造創(chuàng)新的下一代產品,小失敗者公司現(xiàn)在已經成為世界上最有價值的公司。可能沒有Mac在每個桌面在美國,但如果你隨機選擇一棟房子,你會發(fā)現(xiàn)至少有一個iPod,iPhone和iPad里面。

我不打算雄辯，讓你對我有所崇拜,我只是想證明在科技行業(yè)里，蘋果公司是一個有權勢的。沒有人再關心新特性的牛頓出來,但是當蘋果發(fā)布一個新的iOS設備,世界停止和耐心地聽在無限循環(huán)的向導告訴我們未來會是什么樣子。

蘋果公司押注高分辨率

直到最近,蘋果已經與我們對更好的屏幕分辨率。更大更好的高清電視的關注消費者和電子公司十年了。聰明的營銷與令人印象深刻的技術來創(chuàng)建一個永不滿足的渴望高清屏幕,有線電視節(jié)目和電影。在大多數(shù)情況下,這一趨勢已經遠離計算。當然,有巨大的,華麗的電影顯示但像素密度從未這樣需要一個主要的范式轉變。也就是說,直到最近。當iPhone 4在2010年中期下降了一個驚喜:“視網膜”顯示屏,它吹我們了翻舊的分辨率與驚人的每英寸326像素(相比之下,109 ppi)27“iMac。這是一個改變游戲規(guī)則。有很多猜測,擴展這種技術在一個負擔得起的利率幾乎不可能,但蘋果所做的事也加倍決議第三代iPad,而在264 ppi略低,但仍華麗。

為什么這完全改變了你如何做你的工作

誰會在乎iPad的像素密度?作為一個網頁設計師,你做什么,你是否知道它。問題是明顯的在這個網站上,以及任何其他你今天將訪問。去吧,抓住一個圖像從網絡和在Photoshop中打開它?，F(xiàn)在打開圖像大小對話框。看到什么有趣的東西嗎?網頁設計師總是有一個很好的小優(yōu)勢印刷設計師:我們可以用低分辨率的藝術品。為什么它是一種優(yōu)勢而不是劣勢?因為分辨率分層PSDs可以使您的機器變得很慢,圖片分辨率花費更多的錢,高分辨率的圖像花永遠負載在網絡上,這樣的例子不勝枚舉。不過,問題是明確上圖僅72 ppi在新的iPad 264 ppi !(這個觀點有點過于簡單化了,讀這篇文章獲取更多信息你是否查看圖片72 ppi。)

想想這意味著什么。蘋果已經在完整的iOS行視網膜顯示:觸控式iPod,iPhone和iPad。這意味著數(shù)以百萬計的人每天都瀏覽網頁高分辨率的屏幕上,不會正確顯示您的圖片。毫無疑問,這一趨勢只會變得更糟,因為其他設備制造商玩趕上和蘋果探索方法帶來更多的像素密度下一個明顯的地方:筆記本電腦市場。

你能做什么?

像素密度問題是一個有趣的問題。網絡代表了這么多不同的技術，在和諧相處，它可以是混亂的，如果其中一個技術領先，擾亂了平衡。我們見證了更高分辨率的屏幕的出現(xiàn)，但我們的內容只是為舊屏幕進行了優(yōu)化。進一步，考慮如何瘋狂的web開發(fā)者對網頁加載時間和低分辨率的圖像，現(xiàn)在想象一下慢下來你會得到一個像Pinterest的圖像重網站如果突然充滿了326ppi圖像!

純HTML和CSS的網頁元素

好消息是,在某些方面我們已經準備多年,我們甚至不知道它。CSS3和HTML5的崛起真的推動減少圖像的數(shù)量的概念,我們使用的標記。

這些天大多數(shù)UI元素都呈現(xiàn)在瀏覽器中,這意味著他們很好地擴大你扔在任何屏幕上。

為了說明這一點,這是它是什么樣子當我放大基于映像下載buttonon iPhone 4。

現(xiàn)在,如果我看那個按鈕在相同的像素尺寸相同,但是使用CSS呈現(xiàn),我可以放大到零圖像退化。

那是一個美麗的東西不是嗎?道德是“無形象的長期趨勢已經得到了回報,為我們提供了更少的擔心比我們已經視網膜屏幕反擊,當我們使用梯度圖像,陰影,圓角和幾乎其他任何先進的樣式。重要的是要注意,呈現(xiàn)與HTML5畫布和JavaScript對象可以實現(xiàn)類似的可伸縮性。

SVG

SVG或可縮放矢量圖形,是另一個重要的步驟在路上解決獨立。這種技術已經存在多年,但最近才看到IE9終于跟風的跨瀏覽器支持。當我想到SVG Adobe Illustrator的我認為。這個程序主要是用來創(chuàng)建基于矢量的圖形與無限的可伸縮性。反過來,SVG web圖形帶來同樣的功能。幾乎任何你可以構建在插畫家和其他矢量編輯應用程序可以很容易地導出為一個SVG文件在網絡上和實現(xiàn)為一個可伸縮的對象。這里的優(yōu)勢在CSS起初看起來模糊,但當你處理復雜圖像變得清晰。很容易創(chuàng)建簡單的按鈕用CSS但是當涉及到建筑說,星巴克的標志,事情就開始變得混亂和復雜。

替代小時和小時的CSS篡改甚至數(shù)百行代碼為單個對象(假設它甚至可能與CSS),您可以導出一個向量版本的星巴克標志作為一個SVG和嵌入到web頁面中只有一兩分鐘!點擊這里查看現(xiàn)場的例子。一定要放大命令+和觀察圖像的尺度。想要了解更多關于如何實現(xiàn)站點中的SVG,看看這些偉大的資源:

分辨率獨立使用SVG

使用SVG靈活、可伸縮的和有趣的背景,我一部分玩SVG設計但是照片呢?這是不錯,但考慮到我們已經解決無形象的網頁設計與UI這么長時間,沒有那么多的曲線球和SVG進行更深層次的東西。真正的問題在于在網絡上照片。照片是光柵圖像,因此他們只是粉碎的夢想決議真正獨立的網頁設計。無論如何我們退出袋網頁設計技巧,我們不能繞過這個限制。就目前而言,這意味著不同的設備提供不同的圖像。這很糟糕,但你不想讓non-retina屏幕負載在這些巨大的圖片和你不想提供讓人郁悶的視網膜屏幕圖像,這是你唯一的解決方案。

這可以通過媒體查詢和device-pixel-ratio特性。作為一個例子,哈爾Gatewood主持向我們展示了我們如何目標第三代iPad:

HTML嵌入式圖像呢?

上面的方法都很好,但它只適用于CSS背景圖像。如果你想使用HTML嵌入圖像?進一步,這對視頻有劇烈的影響,所以你怎么能提供自定義視頻高ppi顯示器?不幸的是,使用純HTML沒有真正的答案。也許需要將變得如此巨大,以至于將來我們會看到這樣的東西,但是現(xiàn)在,你運氣不好。唯一的解決辦法是把一些更強大的JavaScript。Bdoran.co。英國有一個快速的例子如何檢測與JavaScript和PHP iPhone 4,你應該看看。這顯然給網頁設計師帶來了巨大的問題盡管那些試圖堅持HTML和CSS和其他不熟悉JavaScript和先進的網絡技術。突然,這組甚至不能呈現(xiàn)簡單的內容,優(yōu)化大多數(shù)設備上查看。

結論

沒關系如果你喜歡蘋果或絕對討厭他們代表的一切,事實是,如果你是一個網頁設計師,視網膜顯示屏的崛起將啟動這一趨勢將從根本上改變你建立網站的方式。在這個時間點上我們有一些課程的行動去探索:HTML5畫布,JavaScript,CSS3、SVG和媒體查詢組成你的武器來攻擊你的內容的問題被認為在264 ppi的向上。

希望在不久的將來,我們會看到更健壯的選項彈出不同的html的圖片和視頻服務正確的設備。