Uzmanın duyarlı web tasarımı kılavuzu

İçerik

• Duyarlı görüntüler
• Verim
• Koşullu ve yavaş yükleme
• Duyarlı tipografi
• JavaScript'te medya sorguları
• Aşamalı geliştirme
• Yerleşim
• CSS ızgara düzeni
• En sonunda

Duyarlı web tasarımı kulağa inanılmaz derecede basit geliyor. Düzen için esnek ızgaraları seçin, esnek ortam kullanın (görüntüler, video, iç çerçeveler) ve herhangi bir görüntü alanında içeriği en iyi şekilde düzenlemek için bu ölçümleri güncellemek için ortam sorguları uygulayın. Pratikte bunun gerçekten o kadar kolay olmadığını öğrendik. Her proje sırasında ortaya çıkan ufak tefek sorunlar kafamızı kaşıymamıza ve hatta bazen masalarımızda tırnak çukurları açmamıza neden oluyor.

Responsive Design Weekly haber bülteninin küratörlüğünü yapmaya başladığımdan beri, web topluluğunun birçok üyesiyle konuşacak ve onların deneyimlerini duyacak kadar şanslıydım. Topluluğun tam olarak ne öğrenmek istediğini öğrenmek istedim, bu yüzden okuyuculara bir anket gönderdim. İşte en iyi sonuçlar:

1. Duyarlı görüntüler
2. Performansı iyileştirmek
3. Duyarlı tipografi
4. JavaScript'te medya sorguları
5. Aşamalı Geliştirme
6. Yerleşim

Bu konuları aklımda tutarak, endüstri liderlerimizden bazılarının düşüncelerini soran bir dizi podcast yayınladım. Yanıtlarında bir nokta oybirliğiyle alındı: Heyecan verici ve gelişmiş teknikler hakkında endişelenmeye başlamadan hemen önce temelleri öğrenmeye odaklanın. İşleri temellere geri götürerek, cihaz veya kullanıcının bağlamı izin verdiğinde özellikleri katmanlayarak herkes için sağlam bir arayüz oluşturabiliyoruz.

"Öyleyse ... bu gelişmiş teknikler ne olacak?" Diye sorduğunuzu duydum. Sanırım Stephen Hay bunu en iyi şu sözleriyle özetledi: "Nihai DWT tekniği, herhangi bir gelişmiş DWT tekniği kullanmadan başlamaktır. Yapılandırılmış içerikle başlayın ve yolunuzu oluşturun. Yalnızca tasarım bozulduğunda ve içerik onu dikte ettiğinde bir kesme noktası ekleyin ve ... işte bu kadar. "

Bu makalede, bu gelişmiş teknikleri geliştirmek için temel bilgilerle başlayacağım ve duruma göre karmaşıklık katmanları ekleyeceğim. Başlayalım.

Duyarlı görüntüler

Akışkan ortam, ilk kez Ethan Marcotte tarafından tanımlandığında DWT'nin önemli bir parçasıydı. genişlik:% 100; , maksimum genişlik:% 100; bugün hala çalışıyor, ancak duyarlı görüntü ortamı çok daha karmaşık hale geldi. Artan sayıda ekran boyutu, piksel yoğunluğu ve destekleyen cihazlarla daha fazla kontrol istiyoruz.

Duyarlı Görüntüler Topluluk Grubu (RICG) tarafından üç ana konu tanımlanmıştır:

1. Tel üzerinden gönderdiğimiz görüntünün kilobayt boyutu
2. Yüksek DPI'lı cihazlara gönderdiğimiz görüntünün fiziksel boyutu
3. Görüntü alanının belirli boyutu için resim yönü şeklinde kırpılır

Indiegogo'nun yardımıyla Yoav Weiss, Blink uygulaması üzerindeki çalışmaların çoğunu gerçekleştirdi - Google'ın WebKit çatalı ve siz bunu okuduğunuzda Chrome ve Firefox'ta gönderilecektir. Safari 8, srcset'i gönderecektir, ancak boyutlar özelliği yalnızca gecelik yapılarda mevcuttur ve resim> henüz uygulanmamıştır.

Web geliştirme sürecimize yeni bir şeyin gelmesiyle başlamak zor olabilir. Şimdi bir örneği adım adım inceleyelim.

img! - Tüm resim desteklemeyen tarayıcılar için yedek resmi bildirin -> src = "at-350.webp"! - Tüm resim boyutlarını srcset olarak bildirin. Her görüntünün genişliğini tarayıcıya bildirmek için w tanımlayıcısını kullanarak görüntü genişliğini ekleyin .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Boyutlar tarayıcıya site düzenimiz hakkında bilgi verir. Burada 64ems ve daha büyük herhangi bir görüntü alanı için, görüntü alanının% 70'ini kaplayacak bir görüntü kullanın -> boyutlar = "(min-genişlik: 64em) 70vw,! - Görüntü alanı bu değilse büyükse, 37,5ems ve daha büyük herhangi bir görüntü alanı için, görüntü alanının% 95'ini kaplayan bir görüntü kullanın -> (min-genişlik: 37,5em) 95vw,! - ve görüntü alanı bundan daha küçükse, o zaman kullanın görünüm alanının% 100'ünü kaplayan bir görüntü -> 100vw "! - her zaman alt metni vardır .--> alt =" Bir at "/>

Performans açısından, boyutlar özelliğinde min-width veya max-width kullanmanız önemli değildir, ancak kaynak sıralaması önemlidir. Tarayıcı her zaman ilk eşleşen boyutu kullanır.

Ayrıca, boyutlar özelliğini tasarımımıza göre doğrudan tanımlanacak şekilde kodladığımızı da unutmayın. Bu, sorunların ilerlemesine neden olabilir. Örneğin, sitenizi yeniden tasarlarsanız, tüm resim> veya resim> leri yeniden gözden geçirmeniz ve boyutları yeniden tanımlamanız gerekir. Bir CMS kullanıyorsanız, bu, oluşturma sürecinizin bir parçası olarak aşılabilir.

WordPress'in zaten yardımcı olacak bir eklentisi var. WP standart görüntü çeşitlerinde srcset'i tanımlar ve boyutları merkezi bir konumda bildirmenize olanak tanır. Sayfa veritabanından oluşturulduğunda, img> üzerindeki tüm bahisleri değiştirir ve bunları resim işaretlemesiyle değiştirir.

Temel

• Gerçekten bir resim eklemeniz gerekip gerekmediğini düşünün. Görüntünün temel içeriği mi yoksa dekoratif mi? Daha az görüntü, daha hızlı yükleme süresi anlamına gelir
• ImageOptim kullanarak eklemeniz gereken görüntüleri optimize edin
• Sunucunuzdaki veya .htaccess dosyanızdaki resimleriniz için süre sonu başlıklarını ayarlayın ("Performans" altındaki ayrıntılara bakın)
• PictureFill, resimler için çoklu dolgu desteği sağlar

ileri

• JQuery’nin Lazy Load eklentisini kullanarak resimlerinizi tembel olarak yükleyin
• Özellik algılama için HTMLImageElement.Sizes ve HTMLPictureElement kullanın.
• Github'da bulunan gelişmiş PictureFill WP eklentisi, özel görüntü genişlikleri ve boyutları değerleri tanımlamanıza olanak tanır.

Verim

Sayfalarımızda algılanan en hızlı performansı elde etmek için, sunucudan gelen ilk yanıtta sayfamızın üst kısmını oluşturmak için gereken tüm HTML ve CSS'ye ihtiyacımız var. Bu sihirli sayı 14kb'dir ve ilk gidiş-dönüş süresindeki (RTT) maksimum tıkanıklık penceresi boyutuna dayanır.

Guardian'ın ön uç teknik lideri Patrick Hamann ve ekibi, ön uç ve arka uç tekniklerinin bir karışımını kullanarak 1000 ms engelini aşmayı başardılar. Guardian’ın yaklaşımı, gerekli içeriğin (makalenin) kullanıcıya olabildiğince çabuk ve 14kb sihirli sayı dahilinde teslim edilmesini sağlamaktır.

Süreci inceleyelim:

1. Kullanıcı, bir haberin Google bağlantısını tıklar
2. Makale için veri tabanına tek bir engelleme talebi gönderilir. İlgili hikaye veya yorum istenmez
3. HTML, Kritik CSS içerecek şekilde yüklenir
4. kafasında>
5. Bir "hardalı kes" işlemi gerçekleştirilir ve kullanıcının cihaz özelliklerine dayalı herhangi bir koşullu öğe yüklenir
6. Makalenin kendisiyle ilgili veya makaleyi destekleyen her türlü içerik (ilgili makale resimleri, makale yorumları vb.) Yerine yüklenir

Kritik oluşturma yolunu bu şekilde optimize etmek, kafanın> 222 satır uzunluğunda olduğu anlamına gelir. Ancak, kullanıcının görmeye geldiği kritik içerik, gzip ile sıkıştırıldığında yine de 14 kb'lik ilk yük içinde gelir. 1000 ms oluşturma engelini aşmaya yardımcı olan bu süreçtir.

Koşullu ve yavaş yükleme

Koşullu yükleme, cihaz özelliklerine bağlı olarak kullanıcı deneyimini iyileştirir. Modernizr gibi araçlar bu özellikleri test etmenize izin verir, ancak bir tarayıcı destek sunduğunu söylediği için bunun her zaman tam destek anlamına gelmediğini unutmayın.

Bir teknik, kullanıcı bu özelliği kullanma niyetini gösterene kadar bir şey yüklemeyi bekletmektir. Bu şartlı kabul edilecektir. Kullanıcı simgelerin üzerine gelene veya simgelere dokunana kadar sosyal simgelerdeki yüklemeyi bekletebilir veya kullanıcının büyük olasılıkla özel bir haritalama uygulamasına bağlanmayı tercih edeceği daha küçük görünüm alanlarına bir iframe Google Haritası yüklemekten kaçınabilirsiniz. Diğer bir yaklaşım da "Hardalı kesmektir" - bununla ilgili ayrıntılar için yukarıdaki kutuya bakın.

Tembel yükleme, her zaman sayfaya yüklemeyi düşündüğünüz bir şey olarak tanımlanır - makalenin bir parçası olan resimler, yorumlar veya diğer ilgili makaleler - ancak kullanıcının içeriği tüketmeye başlaması için orada olması gerekmeyen.

Temel

• Dosyalar için gzip'i etkinleştirin ve tüm statik içerik için sona erme üstbilgilerini ayarlayın (netm.ag/expire-260)
• Lazy Load jQuery eklentisini kullanın. Bu, görüntü alanına yaklaşırken veya belirli bir süre sonra görüntüleri yükler

ileri

• Fastly veya CloudFlare'yi kurun. İçerik dağıtım ağları (CDN'ler), statik içeriğinizi kullanıcılara kendi sunucunuzdan daha hızlı sunar ve bazı ücretsiz katmanlara sahiptir.
• Paralel http istekleri gibi http2 özelliklerinden yararlanmak için http2 özellikli tarayıcılar için SPDY'yi etkinleştirin
• Sosyal Sayım, sosyal simgelerinizin koşullu olarak yüklenmesine olanak tanır
• Static Maps API'yi kullanmak, resimler için Etkileşimli Google haritalarını değiştirmenize olanak tanır. Brad Frost’un netm.ag/static-260 adresindeki örneğine bakın
• Ajax Dahil Etme Modeli, önceden veri, sonradan veri veya veri değiştirme özelliğinden içerik snippet'lerini yükler

Duyarlı tipografi

Tipografi, içeriğinizi sindirmeyi kolaylaştırmakla ilgilidir. Duyarlı tipografi, çok çeşitli cihazlar ve görünüm alanlarında okunabilirliği sağlamak için bunu genişletir. Jordan Moore, tipin ödün vermek istemediği bir şey olduğunu kabul ediyor. İhtiyacınız varsa bir veya iki resim bırakın, ancak harika bir yazı yazdığınızdan emin olun.

Stephen Hay, her tarayıcı veya cihaz üreticisi belirli bir çözünürlük veya cihaz için makul ölçüde okunabilir bir varsayılan belirlediği için HTML yazı tipi boyutunu yüzde 100'e ayarlamayı öneriyor (okuyun: olduğu gibi bırakın). Çoğu masaüstü tarayıcısı için bu 16 pikseldir.

Öte yandan Moore, belirli içerik öğeleri için minimum yazı tipi boyutunu ayarlamak için REM birimini ve HTML yazı tipi boyutunu kullanır. Örneğin, bir makalenin yazının her zaman 14px olmasını istiyorsanız, bunu HTML öğesinde temel yazı tipi boyutu olarak ayarlayın ve .byline {font-size: 1rem;} olarak ayarlayın. Gövdeyi ölçeklendirirken: yazı tipi boyutu: görüntü alanına uyması için .by-line stilini etkilemezsiniz.

İyi bir okuma satırı uzunluğu da önemlidir - 45 ila 65 karakteri hedefleyin. İçeriğinizi kontrol etmek için kullanabileceğiniz bir yer imi var. Tasarımınızla birden çok dili destekliyorsanız, satır uzunluğu da değişebilir. Moore, oradaki sorunları gidermek için: lang (de) makale {max-width: 30em} kullanılmasını önerir.

Dikey ritmi korumak için, satır yüksekliğinizle aynı şekilde içerik blokları, ul>, ol>, blok alıntı>, tablo>, blok alıntı> vb. İle kenar boşluğunu ayarlayın. Görüntülerin tanıtılmasıyla ritim kesintiye uğrarsa, Baseline.js veya BaselineAlign.js ekleyerek bunu düzeltebilirsiniz.

Temel

• Yazı tipinizi yüzde 100 gövdeye dayandırın
• Göreli em birimlerinde çalışın
• Tasarımınızda dikey ritmi korumak için kenar boşluklarınızı satır yüksekliğinize ayarlayın

ileri

• Enhance.js veya ertelenmiş yazı tipi yüklemesiyle yazı tipi yükleme performansını iyileştirin
• Anlamsal başlıklar için Sass @includes kullanın.
• Genellikle, h2 biçimlendirmesi gerektiren bir kenar çubuğu widget'ında h5 stilini kullanmamız gerekir. Boyutu kontrol etmek ve aşağıdaki kodla anlamsal kalmak için Bearded’in Tipografik Karışımlarını kullanın:

.sidebar h2 {@include heading-5}

JavaScript'te medya sorguları

Medya sorguları aracılığıyla çeşitli görünüm alanlarındaki düzeni kontrol edebildiğimizden beri, bunu JavaScript'imizi çalıştırmaya bağlamanın bir yolunu arıyoruz. JavaScript'i belirli görünüm genişlikleri, yükseklikleri ve yönlerinde çalıştırmanın birkaç yolu vardır ve bazı akıllı insanlar Enquire.js ve Simple State Manager gibi bazı kullanımı kolay yerel JS eklentileri yazmıştır. Hatta bunu matchMedia kullanarak kendiniz de oluşturabilirsiniz. Ancak, medya sorgularınızı CSS ve JavaScript'inizde çoğaltmanız gereken bir sorun var.

Aaron Gustafson'ın düzgün bir numarası var, bu da CSS'nizdeki ve JS'nizdeki medya sorgularınızı yönetmeniz ve eşleştirmeniz gerekmediği anlamına geliyor. Fikir aslen Jeremy Keith'den geldi ve bu örnekte Gustafson onu tam bir uygulamaya götürdü.

GetActiveMQ (netm.ag/media-260) kullanarak, gövde öğesinin sonuna div # getActiveMQ-watcher'ı enjekte edin ve gizleyin. Daha sonra CSS kümesinde # getActiveMQ-watcher {font-family: break-0;} ilk medya sorgusuna, font-family: break-1; ikinciye, yazı tipi ailesi: break-2; üçüncü ve benzeri.

Komut dosyası, görünüm alanının boyutunun değişip değişmediğini kontrol etmek için watchResize () (netm.ag/resize-260) kullanır ve ardından aktif font ailesini geri okur. Artık bunu, görünüm alanı izin verdiğinde, bir dl'ye sekmeli bir arayüz eklemek, bir ışık kutusunun davranışını değiştirmek veya bir veri tablosunun düzenini güncellemek gibi JS geliştirmelerini bağlamak için kullanabilirsiniz. Netm.ag/active-260 adresindeki getActiveMQ Codepen'e göz atın.

Temel

• Farklı görünümler için JavaScript'i unutun. Kullanıcılara, tüm görünüm alanlarında erişebilecekleri şekilde içerik ve web sitesi işlevleri sağlayın. Asla JavaScript'e ihtiyacımız olmamalı

ileri

• Breakup'ı önceden tanımlanmış bir medya sorgu listesi olarak kullanarak ve getActiveMQ-watcher için yazı tipi aileleri listesinin oluşturulmasını otomatikleştirerek Gustafson'ın yöntemini genişletin

Aşamalı geliştirme

Aşamalı geliştirme ile ilgili yaygın bir yanılgı, insanların "Bu yeni özelliği kullanamam" diye düşünmeleridir, ama gerçekte tam tersidir. Aşamalı geliştirme, bir özelliği yalnızca bir tarayıcıda destekleniyorsa veya hiç desteklenmiyorsa sunabileceğiniz anlamına gelir ve zamanla insanlar yeni sürümler geldikçe daha iyi bir deneyim yaşarlar.

Herhangi bir web sitesinin temel işlevine bakarsanız, bunu HTML olarak sunabilir ve tüm işlemleri sunucu tarafının yapmasını sağlayabilirsiniz. Ödemeler, formlar, Beğeniler, paylaşım, e-postalar, kontrol panelleri - hepsi yapılabilir. Temel görev oluşturulduktan sonra harika teknolojileri bunun üzerine katmanlandırabiliriz, çünkü düşeni yakalamak için bir güvenlik ağımız var. Burada bahsettiğimiz gelişmiş yaklaşımların çoğu, aşamalı geliştirmeye dayanmaktadır.

Yerleşim

Esnek düzen söylemek basittir, ancak birçok farklı yaklaşıma sahiptir. : Nth-child () seçiciyi kullanarak daha az işaretli basit ızgara düzenleri oluşturun.

/ * ızgara için mobil birinci genişliği bildirin * / .grid-1-4 {float: left; genişlik:% 100; } / * Görüntü alanı en az 37,5em olduğunda ızgarayı öğe başına% 50 olarak ayarlayın * / @media (min-genişlik: 37,5em) {.grid-1-4 {genişlik:% 50; } / * İlk öğeden SONRA her ikinci elemandan bir kayan noktayı temizle. Bu, ızgaradaki 3., 5., 7., 9. ... 'yı hedefler. * / .Grid-1-4: n-tipi (2n + 1) {clear: left; }} @media (min-genişlik: 64em) {.grid-1-4 {genişlik:% 25; } / * Önceki temizle * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * İlk öğeden SONRA her 4 öğede bir kayan noktayı temizle. Bu, ızgaradaki 5'inci, 9'uncu ... 'yu hedefler. * / .Grid-1-4: n'inci tip (4n + 1) {clear: left; }}

Yerleşimleriniz için konumu kullanmaya ve yüzmeye el sallayın. Bugüne kadar bize iyi hizmet etmiş olsalar da, düzen için kullanımları gerekli bir hack oldu. Artık blokta tüm düzen sorunlarımızı gidermeye yardımcı olacak iki yeni çocuğumuz var: Flexbox ve Grids.

Flexbox, modüllerin her birindeki içerik parçalarının düzenini kontrol eden bağımsız modüller için mükemmeldir. Flexbox kullanılarak daha kolay elde edilebilecek sunmaya çalıştığımız düzenler var ve bu, duyarlı siteler için daha da doğrudur. Bununla ilgili daha fazla bilgi için CSS Tricks’in Flexbox veya Flexbox Polyfill kılavuzuna bakın.

CSS ızgara düzeni

Izgara, makro seviyeli düzen için daha fazladır. Izgara düzeni modülü, mizanpajınızı CSS'nizde tanımlamanın harika bir yolunu sunar. Şu anda taslak aşamasındayken, Rachel Andrew tarafından yazılan CSS Izgara düzeni hakkındaki bu makaleyi öneriyorum.

En sonunda

Bunlar, duyarlı uygulamanızı genişletmek için yalnızca birkaç ipucu. Herhangi bir yeni duyarlı çalışmaya yaklaşırken, bir adım geri atın ve temel bilgileri doğru aldığınızdan emin olun. İçeriğiniz, HTML ve katman iyileştirilmiş deneyimlerinizle başlayın ve tasarımlarınızı nereye götürebileceğiniz konusunda herhangi bir sınırlama olmayacak.

Bu makale ilk olarak gazetenin 260. sayısında yer almıştır. net dergi.