Ekran Çözünürlüklerini Takip Etmeyi Durdur
Web dünyasında çok heyecanlı bir zamanda yaşıyoruz. Teknoloji ve standartlar, belki de her zamankinden daha hızlı ve daha heyecan verici bir hızda ilerliyor. İşler değiştikçe, alışkanlıklarımız da var ve bence daha büyük değişikliklerin göründüğünden daha büyük değişikliklerin görüldüğü, cihazlarımızın şu anda çalışmakta olduğu çözünürlük değişikliğidir.
Çözünürlük ölçmek için komik bir şeydir; Fiziksel boyut değişikliği değil, bir netlik değişimi. Görüntüyü daha parlak, daha zengin ya da daha zengin bir renk haline getirmiyor, ama onları daha yoğun hale getiriyor. Aynı zamanda insanların kendileri için gördükleri değeri nadiren anladığı bir şeydir.
Tabii ki, yüksek çözünürlüklü ekranların tadını çıkardığımızda takılıyoruz. Ve hepimiz web sitemizin (ve müşterilerimizin web sitelerinin) bu ekranları spor eden cihazlarda harika görünmesini istiyoruz. Birçok web tasarımcısı, bu hedefe doğru giden her yeni çözünürlük için görüntüler oluşturarak bu hedefe doğru yarışıyor. Ya da, bu makalede “ekran çözünürlüklerini kovalamak” olarak adlandırdığımdan.
SVG'ye giriş
Birçoğumuz SVG'lerin (Ölçeklenebilir Vektör Grafikleri) ne olduğunu biliyoruz. W3C HTML5 web sitesinde, “3D, Grafikler ve Efektler” altında gördük. SVG, görüntüleri kod ile görüntüleyen standart bir HTML5 teknolojisidir. Ya da başka birşey.
En azından, insanlara SVG grafikleri sorduğumda aldığım genel cevap bu. İnsanların ilgisini çeken bir şey değil, çünkü değeri tam olarak anlaşılmadı.
“Ekran çözünürlüklerini kovalamaktan” nasıl kaçınacağınızı göstermek istiyorum ve sadece SVG standardı bunu yapmamıza yardımcı olabilir.
Retina grafikleri durumu
“Retina grafikleri” dediğimde, geleneksel ekranlardan daha yüksek bir ekran çözünürlüğüne sahip olan ve 72ppi'nin üzerinde (inç başına piksel) bir çözünürlük sağlayan tüm cihazlara başvuruyorum.
Apple, daha önce gördüğümüz başka hiçbir şeye benzemeyen, fantastik yeni, yüksek çözünürlüklü ekrana sahip bir cihaz olan iPhone 4 ile 72ppi bariyerini ünlü bir şekilde ezdi. Web'e göz atmak için kullandığınız zamanlar hariç… web'de çöp görünüyordu.
Web 72ppi optimize edilmiş görüntülere sahipti. Bunu yazarken, iPhone 4'ün piyasaya sürülmesinden iki yıl sonra hala web'in çoğu hala çalışıyor.
Şimdi, Retina kalitesinde grafiklere sahip her türlü cihazımız var. Bu, yavaş yavaş tüm Apple ürün yelpazesinde, iPod Touch, iPad ve hatta en yeni MacBook Pro'ya kadar uzanıyor. Akıllı telefonlar, yüksek çözünürlüklü ekranlar ile her yere yayılıyor, öyle ki, bir “standart” çözünürlük ekranı bu aşamada neredeyse eski bir şapka hissediyor.
Hala çözünürlük bağımlı
Web tasarım topluluğu, koşullu olarak yüklenen @ 2x görüntüleri (yalnızca yüksek çözünürlüklü cihazlarda yüklenen orijinal muadillerinin iki katı olacak şekilde oluşturulan görüntüler) ile bulanık görüntüler sorununu aştığında, web çoğu kez tekrar iyi görünüyordu. . Bazı tasarımcılar, web sitelerini “çözünürlükten bağımsız” olarak bile tanıttı.
Elbette, sitelerini, "iki ekran çözünürlüğü için optimize edilmiş" şeklinde reklam vermeleri gerekiyordu.
Cihazlar daha iyi olmaya devam edecek, kararlar daha iyi olmaya devam edecek ve web, artan sayıda faktöre sahip olmaya devam edecek. 3x kaçınılmaz gelecek hakkında ne? 4x hakkında ne dersin? Standart “1x” in gereksiz hale gelmesi ne olur? 3x'i “3x” yapan ve “@ 2.5x” i olmayan nedir?
Gerçekten dağınık.
Dahası, bu tarz bir teknik pek yaygın değil. Retina Ekranı ile daha önce bahsedilen MacBook Pro'da internete göz atıyorum ve web'in çoğu iPhone 4'ten beri her zaman olduğu gibi üzücüdür: bulanık. Tüm web tasarımlarınızı yeniden oluşturmak, özellikle tüm web tasarım dünyası uzun zamandır bitmapler ile tasarlandığında, zorlu bir sondaj görevidir.
Makasız web
Bugün bile, @ 2x resimlerimizle, yine web sayfalarında tekrar çirkinleşmeden yakınlaştırma yapamıyoruz. Metin, yakınlaştırmayı iyi bir şekilde yönetir, ancak karşılaştırmaya göre, görüntüler gelecekteki @ 4x ihracı için ağlar (kimsenin, RSS simgesinin üzerinde bir kişinin 4x'ye yakınlaştırmak istemeyeceği bir şey için uygun olmadığını düşünmesi gereken bir şey) .
Gerçekten çözünürlükten bağımsız olarak çıkmak
Sorun, bitmapped görüntülerle. Her zaman lüks olmadıklarını biliyoruz ve artık farklı değiliz. İhtiyacımız olan şey, web sitemizdeki vektör grafikleridir. Vektör grafikleri, her pikselin bir rengi temsil ettiği bir ızgara üzerine pişirmek yerine bir dizi talimatla hesaplanır. Gir, SVG.
Tek beden herkese uyar
SVG grafikleri vektör grafikleri olduğundan (bu nedenle “Ölçeklenebilir Vektör Grafikleri” adı), dünün, bugünün ve hatta yarının ekran çözünürlüklerinde harika görüneceklerdir. Ek olarak, vektör grafiğinin formüle edici yapısı nedeniyle, herhangi bir cihaza zum yapabilir ve görüntüler harika görünecektir.
Daha hızlı yükleme süreleri
Bir web tasarımcısına 2000 pikselde 2000 piksel resim yapmak, saçma sapan bir şey yapmaz. Yüklenmesi çok uzun sürecek, bazı mobil cihazları dizlerine getirecek ve 4000px x 4000px “@ 2x” versiyonu çılgınlık olacaktır. Ve kararlar daha iyi ve daha iyi olsun, sadece sürdürülemez. SVG ile, bir vektör formatı olduğundan, resmin 20px veya 2000px olup olmaması fark etmez; yükleme süresi tam olarak aynı olacaktır. Yükleme sürelerinde fark yaratan tek şey, her bir görüntü dosyasının karmaşıklığıdır.
Bugün kullanabilirsiniz
SVG yönetim kurulu tarafından desteklenmeyebilir, ancak Modernizr özelliği tespit edebilir. SVG ve SVG olmayan bir sürümü sunarak, SVG'nin tüm avantajlarından yararlanarak, 1x PNG ile eski tarayıcıları geride bırakabilirsiniz. Bu kadar basit:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }SVG sınırlamaları
Herhangi bir vektör tabanlı görüntüden SVG grafik oluşturmak zor değil. Adobe Illustrator ve Inkscape gibi birçok pro uygulama, doğal olarak SVG'ye dışa aktarılabilir. Bununla birlikte, web için SVG'leri bilmeniz gereken birkaç şey vardır.
Herhangi bir çeşit bitmap görüntü içeremezler.
Elbette, bunları Illustrator veya InkScape gibi SVG yazma uygulamalarına ekleyebilir ve çalışmanızı SVG olarak kaydedebilirsiniz, ancak bunların önemli olduğu yerleri oluşturmayacaktır: web tarayıcınız. Uygun olduğunda SVG'nin üstüne bir bitmap yüklemek için CSS sihirbazı gerekli olacaktır.
Komplike ise sonsuza kadar yük alabilir
Karmaşık bir SVG yaparsanız, 2000px x 2000px boyutundaki görüntüden farklı olarak yükleme süreleriyle çarpılırsınız. Örneğin SVG formatında karmaşık bir resim çizmek istemezsiniz.
Basit tutmalıyım
Illustrator ve Inkscape gibi uygulamalar web tarayıcınızın işleyebileceğinden çok daha fazlasını yapabilir. Web SVG yaratıcısı uygulamaları değil, tam illüstrasyon uygulamaları. Aslında, bu tür uygulamaların sunduğu işlevselliğin% 90'ının web'de görüntüleyenlere sunulmayacağını varsayabiliriz. Vektör yazılımına aşina iseniz, sevdiğiniz etkilerin yaratılması için alternatif yollar öğrenmeniz gerekir.
Dili öğrenmeye çalışın
SVG kodu, HTML okuduğunuzda yapabileceğiniz gibi “aklınızda görebileceğiniz” bir şey değildir. Birbirine karşı eşlenmiş bir dizi talimat, elemente göre eleman, katman katmanı. Ne yazık ki, bugün itibariyle, Adobe Illustrator'ın sunmadığı bazı sonuçlar olduğu için muhtemelen zaman zaman oraya dalmak zorunda kalacaksınız.
Örneğin, Illustrator'daki resimlerde çizdiğiniz bir kanvas var; ayarlanmış bir yükseklik ile ayarlanmış bir genişlik. Bu harika, ancak tarayıcıda bu ayrıntıları kontrol etmek istiyorsanız, SVG'nin kendisinden uzaklaştırılmak üzere bu tür bilgilere ihtiyacınız var (not: Bazı tarayıcılar, bildirilen SVG boyutlarından bağımsız olarak CSS'nizi yorumlayacaktır, ancak hepsi değil). Özellikle zor değil, ama baş ağrısı olabilir. Dilleri tanımak için biraz zaman ayırmaya değer, böylece SVG'leri daha da fazla manipüle edebilirsiniz.
Vahşi SVG
logolar
Logolar genellikle bir vektör formatında olmalıdır, bu yüzden SVG'yi web sitenizin tasarımlarına getirmenin harika bir yoludur. Yukarıdaki işaretlemeyi kullanarak, ilk SVG öğelerinizi çevrimiçi olarak almanız için gereken her şeye sahip olursunuz.
Simgeler
Simgeler SVG için mükemmel bir adaydır. Öyle ki, SVG grafiklerini kullanarak tam bir simge seti oluşturdum. SVG'nin ölçeklenebilir yapısı, simgelerin geniş bir site tasarım yelpazesini kapsayacak şekilde her boyutta kullanılabileceği anlamına gelir.
Animasyonlar
Animasyonlar ayrıca SVG grafik kullanımı için harika bir durum oluşturur. Animasyonlar genellikle sabit bir genişliğe ve yüksekliğe bağlı olduğu için, SVG animasyonların yanıt vermesine yardımcı olma yolunda ilerliyor. Flash kullanılan vektör grafik öğeleri, artık HTML5 animasyonları da yapabilir.
Arka plan resimleri
Arka plan görüntüleri, web geliştiricileri için her zaman zor bir nokta olmuştur; Yukarıda bahsettiğim gibi potansiyel yükleme süreleri çılgın olabilir. SVG arka plan görüntüleri istediğiniz kadar büyük olabilir; Gerçekten karmaşık olmadıkları için hala hızlı yükleme süreleri vardır.
Sonuç
Sonuç olarak, çözünürlük bağımsızlığı web tasarımcıları ve geliştiricileri için çabalamak için harika bir hedeftir. Hatta tasarım zevklerinin site görüntülerinden önce güncelliğini yitireceği anlamına da geliyor. Onlara gözlerinizle yaklaşmak önemli olsa da, SVG grafiklerinin sizi toplam çözünürlük bağımsızlığının geleceğine nasıl daha fazla taşıyabileceğini görmek oldukça açıktır.
Bir iPad 3 gibi yüksek çözünürlüklü bir cihazda SVG etkin bir site yüklediğinizde ve yakınlaştırdığınızda, satılacaksınız.
Umarım bu makale, web tasarım ve geliştirmesinde bağımsız düşünceyi özendirmeye yönelir ve umarım bazılarınızın SVG'nin bir sonraki siteniz için nasıl çalışabileceğini düşünmesini teşvik etmiştir.
Bir süredir SVG havuzunda bulundum ve şunu söylemeliyim ki, su hiç bu kadar güzel olmamıştı.
Bir SVG dönüştürücüsünüz mü yoksa retina ekranları için ölçeklendirilmiş bitmap'ler sunuyor musunuz? Vektörler web grafiğinin geleceği mi? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, vektör görüntü Shutterstock üzerinden.