İçerik
- Bilinmeyen için tasarlıyoruz
- Tasarıma pragmatik bir yaklaşım
- Düzenden bağımsız hale gelme
- Aşamalı kodlama
- Mark-up'a dalış
Görünüşe göre bu günlerde herkes duyarlı web tasarımından bahsediyor ve bunun iyi bir nedeni var; Her biri farklı yeteneklere ve özelliklere sahip olan web özellikli cihazların sayısı artmaya devam ettikçe, sabit genişlikte web siteleri oluşturmak artık mantıklı değil.
Gerçek şu ki, asla olmadı. Yine de şimdiye kadar, ekran çözünürlüğü, bant genişliği veya giriş yöntemi gibi bir dizi varsayımda bulunan deneyimleri tasarlamak en iyi uygulama olarak görülüyordu. Daha önce 960 piksel genişliğinde bir web sitesi tasarladıysanız, bunu yalnızca bir arkadaşınızın küçük ekranlı netbook'unda görüntülemek için (ve evet, burada acı verici bir deneyimden yazıyorum), bunun neden özellikle akıllıca bir yaklaşım olmadığını anlayacaksınız. Şimdi, karışıma dahil edilen akıllı telefonlar ve tabletlerle, geleneksel yöntemlerimizin artık amaca uygun olmadığı açıktır.
Neyse ki, CSS medya sorgularının ortaya çıkışı ve web'in kendi başına bir araç olduğuna dair artan kabul, platformun gerçek doğasını benimsemeye başladığımız ve evrenselliğinin bir zayıflık değil bir güç olduğunu kabul ettiğimiz anlamına geliyor.
Önümüzdeki beş gün boyunca, bu gerçeği kabul eden bir teknikte size rehberlik edeceğim: duyarlı web tasarımı. Ethan Marcotte tarafından geliştirilen bu, karşılaştıkları herhangi bir ortama zarif bir şekilde uyum sağlayan siteler oluşturmamıza yardımcı olmak için akışkan düzenleri, esnek görüntüleri ve medya sorgularını birleştirir.
Size basit bir medya galerisinin nasıl oluşturulacağını göstererek bu yaklaşımı göstereceğim. Örneklerimde, Amerika Birleşik Devletleri'nde yakın zamanda yaptığım bir yolculuğu belgelemek için küçük bir web sitesi oluşturacağım, ancak kodu ve tasarımı kendi ihtiyaçlarınıza göre özelleştirmekten çekinmeyin.
Bilinmeyen için tasarlıyoruz
Bu öğreticinin çoğu, duyarlı tasarımın geliştirme yönü etrafında toplanacaktır. Ancak herhangi bir koda girmeden önce, sonsuz düzene sahip olabilecek bir web sitesini nasıl tasarlayabileceğimizi düşünelim.
Şimdi, arayüz tasarlayabildiğim için şanslıyım ve onları gerçek kılan ön uç kodunu geliştirin. Bu elbette benzersiz bir beceri değil - eğer kendiniz için çalışırsanız, o zaman muhtemelen aynısınızdır. Ancak, akışkan tasarımlar oluştururken içeriğin nasıl uyarlanıp yeniden akıtılabileceğini anlamak kesinlikle avantajlıdır.
Ayrıca rolümün daha uzmanlaştığı daha büyük bir ekibin parçası olarak çalışıyorum. Böyle bir ortamda, görsel tasarımcı yalnızca tel çerçevelerin çekici, ilgi çekici (imzalı, mükemmel pikselli) kompozisyonlara dönüştürülmesine odaklanabilir. Ayrıca, geliştiricilerin ayrı olarak konumlandırılması, bu düzenleri uygun ve verimli biçimlendirme ve CSS'ye çevirmeleri alışılmadık bir durum değildir.
Ancak, bu tür doğrusal ve ayrılmış iş akışları, tasarımların farklı ortamlara nasıl uyum sağlayacağını değerlendirmeye başladığımızda hızla bozuluyor. Her yeni araç veya teknoloji kadar, daha işbirliğine dayalı ve çevik çalışma yöntemlerini de düşünmeliyiz. Duyarlı web siteleri tasarlarken karşılaşılan en zorlu sorunların çoğu, yalnızca konuşma, deneme ve yineleme yoluyla çözülebilir.
Tasarıma pragmatik bir yaklaşım
Bu, tasarımcıların herhangi bir aygıtın sınırları dışında bir tasarımın nasıl çalışabileceğini düşünmeleri için alan olmadığı anlamına gelmez.
Clearleft'te, görsel tasarımı masaüstü perspektifinden başlatıyoruz. Kapsamlı bir tasarım dili ve görsel estetiği tanımlayarak başlıyoruz, genellikle ilk keşifleri temel bir içerik parçasına dayandırıyoruz. Örneğin, bir yemek sitesi tasarlıyorsak, bir yemek tarifi sayfasıyla başlayacağız; bir haber sitesi için, bir hikaye sayfası.
Bu sadece sitedeki önemli bir sayfa değil, aynı zamanda tipografik bir palet oluşturmamıza yetecek kadar yapılandırılmış içeriğe de sahip olabilir. Ayrıca, bu aşamada aklımızın bir köşesinde olsa bile, düzenin nasıl uyum sağlayabileceğini de düşüneceğiz.
Bir tasarımı stres testi yapmanın yararlı bir yolu, böyle bir sayfayı alıp daha dar (~ 320 piksel genişliğinde) bir ekrana uyarlamaktır. Bu genişlikte çalışması için tasarımın bazı yönlerinin yeniden düşünülmesi gerektiğini muhtemelen keşfedeceksiniz. İşte bazı örnekler:
- Tipografi: Büyük başlıklar, daha geniş düzenlerde iyi çalışabilir, ancak daha küçük ekranlarda çok fazla dikey alan kaplayabilir ve bu nedenle ek kaydırma gerektirebilir. Çizgi uzunlukları değiştikçe, çizgi yüksekliklerini ve diğer tipografik işlemleri de göz önünde bulundurmalısınız.
- Bağlantılar: Tasarımınız dokunmatik ekranlı cihazlarda nasıl çalışacak? Henüz bunları tespit etmek için kolay bir yolumuz olmasa da (bu, tasarımımızın tüm yönlerinde dokunmayı dikkate almamız gerektiği anlamına gelir), daha dar bir ekran için tasarım yapmak bize bağlantılar ve diğer etkileşimli öğeler için hedef alanlar hakkında düşünme fırsatı verebilir. . İOS yönergeleri, bunların en az 44 piksel / kare kare olmasını önermektedir, bu da amaçlanması için iyi bir rakamdır.
- Navigasyon: Bu, muhtemelen herhangi bir duyarlı tasarımın en garip bileşeni olacaktır, özellikle sitenizde çok sayıda bölüm ve derin bir hiyerarşi varsa. Brad Frost, şu anda düşünülmekte olan navigasyonla ilgili bazı farklı yaklaşımların bir özetini yazdı.
- Gereksiz içerik: Bazı içerik gerekli değil mi? Diğer içeriğin yalnızca belirli senaryolarda gösterilmesi mi gerekiyor? İçeriğin kullanıcının kullandığı cihaza göre gizlenmesini savunmuyorum, ancak koşullu yükleme gibi teknikler (bu hafta ileride inceleyeceğiz), yalnızca gerektiğinde tamamlayıcı içerik yükleyen daha küçük sayfalar sunmamıza yardımcı olabilir.
İki zıt düzen tasarlamak, olası sorunları erkenden ortadan kaldırırken bir tasarımın uyum sağlayacağı fikrini güçlendirir. Bu, işin ikiye katlanması gibi görünse de, her sayfayı mükemmel piksel hassasiyetinde tasarlamadığımızı unutmayın. Bunun yerine, ölçeklenebilir bir tasarım dili oluşturmaya odaklanıyoruz - bunu kodda uygulamaya başladığımızda gelişecek ve tek tek modüller ve bileşenlere dayanan bir dil.
Düzenden bağımsız hale gelme
Şaşırtıcı olmayan bir şekilde, web'i tarihsel olarak baskı gibi ele alan bir endüstri için, sabit genişlikli düzenler ürettiğimiz birçok çıktıya nüfuz etti. Uyarlanabilir bir ortam için tasarım yapmaya başladığımızda, ortamın akışkan yapısını kabul ederken sorunları çözmemize ve fikirleri iletmemize olanak tanıyan yeni yaklaşımlar düşünülüyor. İşte favorilerimden birkaçı:
- Sayfa açıklama diyagramları: Tel çerçeveler genellikle yerleşim ima edebilir (ve dolayısıyla belirli bir cihaz türünü varsayabilir), sayfa açıklama diyagramları bu varsayımı kaldırır ve bunun yerine belgede öncelik açısından düzenlenmiş ayrı bileşenleri açıklar.
- Stil döşemeleri: Tasarım fikirlerini müşterilerimizle paylaşırken, kendimizi "web sitelerinin resimlerini" sunarken bulabiliriz. Dikkatli olmazsak, müşteriler haklı olarak bir tasarımın diğer cihazlarda da nasıl görüneceğini gösteren konseptleri görmek isteyeceklerdir. Bu, bizi birden çok cihaz için birden çok sayfa üretme gibi sürdürülemez bir duruma zorlayabilir. Samantha Warren bu sorunu düşündü ve stil karoları buldu. Bunlar, bir ruh hali panosu (ancak daha az belirsiz) ile tam olarak gerçekleştirilmiş kompozisyonlar (ancak daha az kesin) arasında bir yerde bulunur ve tipografi, düğme stilleri ve masthead işlemlerini iletmemize yardımcı olur. Ayrıca müşterilerimizle daha olgun bir tartışma düzeyini teşvik ediyorlar.
- Tasarım oyununu harekete geçirin: Bu alıştırma, işbirliğine dayalı tasarım atölyeleri sırasında gerçekten işe yarayabilir. Bu alıştırmada, herkes Post-it'e yazıyor, belirli bir sayfada görünebilecek unsurları not ediyor. Bunlar daha sonra, sanki bir cep telefonunda doğrusallaştırılmış gibi görünüyorlarmış gibi, önem sırasına göre duvara yapıştırılır. Ortaya çıkan tartışma bazı şaşırtıcı sonuçlar doğurabilir. Örneğin, gezinmenin sayfadaki en önemli bileşen olmadığını fark edebilirsiniz. Bu, sayfanın üst kısmındaki bir atlama bağlantısının altbilgideki navigasyona bağlandığı tasarıma kadar gidebilir.
Halihazırda kullanmakta olduğumuz araçlar için hala yer var, ancak geniş anlamda bir web sitesi tasarlarken, düzenin artık bilinmediğini aklımızda tutmalıyız.
Aşamalı kodlama
Neyse ki, üzerinde çalıştığımız örnekteki görsel tasarım konusunda endişelenmemize gerek yok çünkü bizim için çok iş yapıldı! Bunun yerine, tasarımımızı tamamen duyarlı bir web sitesine kodlamaya konsantre olabiliriz.
Başlamadan önce bir şey daha. Çalıştığımız ortamın temel ilkesini hatırlamak önemlidir: evrensellik. Bu, yalnızca günümüzün web özellikli cihazları için geliştirme değil, aynı zamanda dünün ve yarınınkilerle de uyumluluğun sağlanması anlamına gelir. John Allsopp, The Next 6 Milyar adlı yazısında bu ilkenin neden önemli olduğunu açıkladı:
"Bu sonraki altı milyar, iktidara ve ağlara erişimin kesintili olabileceği kırsal Hindistan, Afrika ve Çin'deki çocuklar. On yıllık Wintel kutusundaki Sumatra'da biri. Düzinelerce farklı dil ile yüzlerce farklı dil konuşan insanlar. Yazma sistemleri, ailelerinde okuyup yazabilen ilk kişilerdir. Dünyadaki insanların yüzde 20'si okuma yazma bilmeyenler. Yine de.’
Mesleğimizde benimsenen farklı modalara (daha iyi bir kelime istemek için) bakarak web anlayışımızın izini sürebiliriz: web standartları, erişilebilirlik, göze çarpmayan JavaScript… hepsi aynı temanın varyantlarıdır: aşamalı geliştirme. Aynı şey duyarlı web tasarımı için de geçerlidir. İnşa etmek gerçekten duyarlı web sitesi, yalnızca geriye dönük uyumlu değil, aynı zamanda geleceğe uygun bir site oluşturmaktır.
Mark-up'a dalış
Tamam, bu kadar önsöz yeter, bir metin düzenleyici açmanın zamanı geldi.Tasarımcımız bize masaüstü odaklı bir tasarım sağladı ve bunun daha dar bir görünümde nasıl görünebileceğine dair örnekler sunacak kadar nazik davrandı.
Bunları ayrı ayrı kodlamak cazip gelebilir, ancak farklı bir yaklaşım önereceğim. Tasarımı oluşturan ayrı bileşenleri - veya desenleri - tek bir sayfaya yerleştirerek bir desen portföyü oluşturabiliriz. Bu, herhangi bir sayfa düzeninin sınırları dışında bileşenler geliştirmemize olanak tanır ve bize daha sonra herhangi bir regresyon testi için başvuracağımız bir şey verir. İlk işaretlemeyi birkaç farklı cihazda inceleyelim:
İşaretlenmiş desen portföyümüzü görüntüleyin
Öyleyse lanetleneceğim - zaten duyarlı bir web sitemiz var! İçeriğimiz, ister şık bir yeni iPad veya atılmış bir özellikli telefon olsun, her cihazın sınırlarına uyarlanıyor. Lynx gibi bir salt metin tarayıcıda bile çalışır.
Evrenselliğin altında yatan ilkeler sayesinde web, varsayılan olarak duyarlı. Bu harika, ancak bundan sonra koda yaptığımız her şeyin bu yerel uyarlanabilirliği tehlikeye atabileceği anlamına da geliyor.
Yarın: Dikkatli bir şekilde hareket edeceğiz ve duyarlı tasarımın ilk yönünü uygulamaya başlayacağız: tipografi ve değişken ızgaralar.
