Aynı web sayfasının tarayıcı genişliğine bağlı olarak iki veya daha fazla el yapımı mizanpajın en iyi sürümünü sunduğu duyarlı tasarım ('uyarlanabilir' tasarım olarak da bilinir) çoğu web sitesi için en güçlü seçenektir. Nedenini görmek için, web tasarımcıları için mevcut tüm seçeneklere bakmanıza yardımcı olur:
Sabit düzenler
İçerik genişliğinin tarayıcı genişliğinden bağımsız olarak aynı olduğu sabit bir sayfa genişliği, aygıtlar arasında eşit bir görünüm ve his sunar ve daha esnek tasarımlardan daha az kodlama, düşünme ve bakım gerektirebilir.
Bazıları, sabit genişlikli düzenlerin, insanların tüm tarayıcılarda piksel mükemmelliğini ve tekdüze görünüşlerini istedikleri geçmiş bir dönemin kalıntıları olduğunu düşünüyor. Hardboiled Web Design'ın yazarı Andy Clarke, bu düşünce biçiminin öldüğünü düşünüyor:
"Geçmişte, yetenekleri ne olursa olsun, tüm tarayıcılarda aynı görünen ve çalışan bir web sitesi oluşturmak için mücadele etmek standart bir uygulamadı. Bunu yapmak, ödün vermek ve tüm tarayıcılar tarafından desteklenmeyen teknolojileri kullanmaktan kaçınmak anlamına geliyordu.
Bu sert mi?
Kendinizi kandırmayın, tatlı yanaklar. Zanaatımızı geliştirmenin veya daha iyi bir web oluşturmanın yolu bu değil. Bu tür eski moda düşünce bizi geri tutar. Bizi doğru olanı bildiğimiz şeyi yapmamak için mazeret yapmaya zorlar. Web'in mevcut muhafızları olarak yapabileceğimiz en kötü şey, her şeyin mümkün olanı sınırlamasına izin vermektir. "
- Andy Clarke, Hardboiled Web Tasarım, p6 [PDF Edition'a buradan ulaşabilirsiniz ]
Bazıları sabit düzenleri tembelliğin yüksekliği olarak görürken, sabit genişlikli tasarımlar hala çok akıllı tasarım ekipleri tarafından akışkan veya uyarlanabilir düzenler üzerinden seçilmektedir. Örneğin Apple, şu anda iMac'lere iPad ve iPhone'larda olduğu gibi aynı düzeni sunuyor. Neden kitlesel mobil web tarama getirmek sorumlu web sitesi mobil cihazlar için optimize değil?
Çünkü ihtiyacı olduğunu düşünmüyor.
Web sitesini küçük ekranlara uyarlamak yerine, bu ekranlardaki geniş web sitelerini rahatça işlemek için donanım ve yazılım geliştirdi. Apple, 'mobil cihazlar için optimize edilmiş' bir deneyimin en iyi tarayıcı penceresinde değil, yerel bir uygulamada sunulduğunu düşünüyor. Bu nedenle, mobil cihazlar için optimize edilmiş bir Web mağazası sunmak yerine Apple Store uygulamasını sunuyor . Bu yüzden yayıncıları özel web siteleri üzerinden dergi uygulamaları sunmaya teşvik ediyor. Apple'ın mevcut web tasarım felsefesi açık: hepsini yönetecek bir düzen iyi çalışıyor. Diğer her şey için bunun için bir uygulama var.
Sadece bu nedenle, bazıları sabit düzenlerin her zamanki gibi geçerli olduğunu iddia eder; mobil tarayıcı yazılımının gelişmesini beklerken akıcı ve uyarlanabilir düzenlerin sadece boşlukları durdurduğunu ve HTML ve JavaScript'in geliştiricileri gelişmemiş uygulama mağazalarından evrimleşmesini ve cezbetmesini söylüyorlardı.
Benim düşünceme göre, bir mobil cihazda herhangi bir süre boyunca Web'de yolunuzu sıkıştırın-sürükleyin-kaydırın, iPhone'da bile çok eğlenceli değil. En iyi Web deneyiminin, kullandığınız cihaza bakılmaksızın, web sitelerini okuma, yayınlama ve web siteleriyle bir angarya yerine bir zevk haline getiren bir deneyim olduğuna inanıyorsanız, her bir kişiye özel içerik sunma konusunda bir noktada anlaşmanız gerekir. ziyaretçi dikkate değer.
Sıvı düzenleri
Sayfanın genişliğinin ekranı doldurmak için aktığı (genellikle dayatılan maksimum genişliğe kadar) akışkan düzenler, içeriği görünüm penceresine daha uygun bir genişlikte sunarak farklı platformlarda daha iyi bir deneyim vaat eder.
Pratikte, sıvı düzenleri, bu çipte Cameron Moll tarafından belirtildiği gibi çözdüklerinden daha fazla soruna neden olur:
"... akıcı tasarımlar, bilgisayarların ofisleri kağıtsız hale getirmesiyle aynı şekilde her yerleşim sorununu çözer.
- Cameron Moll, "Tüm siteler akıcı olmalı mı?", Eylül 2006
Sıvı bir düzen benimsediğinizde, tasarımınızın kontrolünden vazgeçersiniz ve metnin yeniden sarılacağını, görüntülerin yeniden akacağını, satır uzunluklarının öngörülemeyen bir şekilde değişeceğini, metin, resim ve gezinme öğelerinin küçük genişliklerde birlikte ezilebileceğini ve sütunların atlayıp yüzebileceğini kabul edersiniz sadece seni kandırmak için.
Sıvı düzen, bazılarının söyleyebileceği gibi, tembel bir seçenektir. Uyarlanabilir web tasarımına av tüfeği yaklaşımıdır. Üç veya dört dikkatle düşünülen sabit genişlikli tasarımlarla kişiye özel bir deneyim sunmak yerine, büyük ve küçük ekranlarda çalışabileceği ve umarım tam olarak dikkate almadığınız tüm boşlukları tıkayabileceği umuduyla öngörülemez bir deneyim sunuyorsunuz. arasında.
Bu sıvı düzenlerini işe yaramaz hale getirmez. Onları çalıştırmanın yolları var. 456 Berea St günlüğü, örneğin, daha büyük bir şey için sabit bir birini kullanan bundan sonra belli bir genişlik, bir akış düzenini yukarı benimser. Ve gerçekten küçük genişliklerde, kenar çubuğu küçük ekranlarda okumayı kolaylaştıran tek bir sütun kullanmak için düşer. Ancak bu artık akıcı bir düzen değil. Daha iyi bir şey. Bu bir olan duyarlı bir tasarım.
Duyarlı düzenler
Aynı web sayfasının ziyaretçinin tarayıcı genişliğine bağlı olarak iki veya daha fazla hazırlanmış düzenin bir sürümünü sunduğu 'duyarlı' veya 'uyarlanabilir' bir düzen, bir web sitesinin en iyi görünmesini amaçlayan aşamalı geliştirmenin önemli bir parçasıdır her ziyaretçi için olabilir.
Adaptive Web Design'ın yazarı Aaron Gustafson'un sözleriyle uyarlanabilir bir düzeni benimsemeyi seçmek 'mükemmel müşteri hizmeti'dir . Sitelerimizi iyi tasarlarsak, ziyaretçilere bunlardan yaygara yaptığımızı fark etmeden mükemmel hazırlanmış bir deneyim sunulması gerektiğini söylüyor:
"Web tasarımcıları ve geliştiricileri olarak, işimizde o özenli, mütevazi garson kadar iyi olmak için çaba göstermeliyiz, ancak bu basit bir görev değil. birkaç veya daha az, sitemize geldiklerinde belirli bir kullanıcının ihtiyaçlarını bilmenin bir yolu yoktur. Bunun yerine, bu ihtiyaçları karşılamak için yükselmeliyiz. Eğer gerçekten iyiysek, müşterilerimiz olduğumuzu bile fark etmeden yapabiliriz. Neyse ki, ilerici geliştirmenin kullanıcı ve içerik odaklı yaklaşımıyla (zarif bozulmanın en yeni tarayıcı yaklaşımının aksine), bu kolayca elde edilebilir. "
- Aaron Gustafson, Uyarlanabilir Web Tasarımı, s12 [PDF baskısına buradan ulaşabilirsiniz ]
Web tasarımcıları olarak işimizin ziyaretçilerimize uyum sağlamak ve onları Apple'ın bize inandığı gibi bize adapte olmaya zorlamamak, Web tasarımında oldukça yeni bir gelişmedir. Benim düşünceme göre, bir tür rönesans: kirazın yıllar süren baskı tasarımından iyi alışkanlıkları seçmeyi bitirdik. Şimdi, yazdırılan sayfada önceden tanımlanmış bir alanda çalışarak dayatılan prangaları atmalıyız.
Tarayıcıya sabit bir tuval gibi davrandığımızda, artık tanımlanmış bir tuvalin bulunmadığını kabul ediyoruz ve bu, ziyaretçi istatistiklerinizde görmeye başladığınız büyük ekran boyutlarından daha açık hale geliyor. . Her yeni cihaza hedeflenecek benzersiz bir 'sayfa boyutu' olarak davranmak (ve daha sonra yeni bir cihaz çıktığında birlikleri toparlamak zorunda kalmak) yerine, geleceğe yönelik daha fazla kurallar uygulayabiliriz.
Belirli telefonlar ve tabletleri düşünmek yerine 'büyük', 'orta' ve 'küçük' bantlar açısından düşünebiliriz, daha sonra bu bantlarda en iyi görünmeleri için siteler tasarlayabiliriz. Hangi yeni cihaz çıkarsa çıksın, bir veya daha fazla banda sığacaklar ve - iki bant arasındaki sınırda olsalar bile - deneyim üzerinde sabit veya akışkan kullandığımızdan daha fazla kontrole sahibiz Yerleşim.
Gelen Duyarlı Web Tasarımı, Ethan Marcotte kollarına bu çağrıyı sunmaktadır:
"Bırakmalıyız.
Her biri belirli bir cihaza veya tarayıcıya göre uyarlanmış bağlantısız tasarımlar oluşturmak yerine, bunları aynı deneyime sahip özellikler olarak ele almalıyız. Başka bir deyişle, yalnızca daha esnek değil, aynı zamanda onları oluşturan medyaya uyum sağlayabilen siteler de oluşturabiliriz.
Kısacası, duyarlı web tasarımı uygulamamız gerekiyor
. Tasarımcılar olarak ihtiyaç duyduğumuz kontrolü teslim etmeden web'in doğasında var olan esnekliği benimseyebiliriz. Tüm bunlar standart tabanlı teknolojileri çalışmalarımıza yerleştirerek ve çevrimiçi tasarıma yönelik felsefemizde küçük bir değişiklik yaparak. "
- Ethan Marcotte, Duyarlı Web Tasarımı, p8 [PDF baskısını buradan edinebilirsiniz ]
Peki hangi bantları kullanıyorsunuz? Ethan Marcotte, Duyarlı Web Tasarımında aşağıdaki üçünü önerir . (Ne yaptıklarını öğrenmek ve uyarıları anlamak için kitabı kapmak isteyebilirsiniz . )
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
Joni Korpi'nin Daha Az Çerçevesi de dahil olmak üzere uyarlanabilir web siteleri oluşturmaya yardımcı olmak için tasarlanmış bir dizi CSS çerçevesi de vardır .
Rasgele kesme noktaları kullanmak yerine, sitenizin tasarımının bantları dikte etmesine izin vermek belki de daha iyidir. Tarayıcınızın ekran genişliğini azaltın ve tasarımınız bozulduğunda bu genişlik “kesme noktalarınızdan” biri olmalıdır. Tasarımınız tüm genişliklerde iyi görünene kadar CSS ortam sorgularıyla genişliği azaltmaya ve kesme noktaları eklemeye devam edin. Bu şekilde, tasarımınız sadece güvercin deliği yapmaya çalıştığınız birkaç ekran boyutu yerine tüm cihazlarda iyi görünecektir. Chrome kullanıyorsanız Geliştirici Araçları'nı (Görünüm> Geliştirici> Geliştirici Araçları) açmak ve tarayıcı genişliğinizi azaltmak, kesme noktalarınızın nerede olması gerektiğini bulmak için kullanabileceğiniz sağ üst köşedeki geçerli genişlik hakkında size yardımcı bir okuma sağlar.
Göz önünde bulundurulması gereken bir başka popüler yaklaşım , çekirdek stil sayfanızın en küçük cihazların stillerini ele aldığı Mobil İlk duyarlı tasarımdır ve medya sorguları, tersi yönde değil, daha büyük ekran genişlikleri ile ilgilidir. Bu, özellikle çok sayıda CSS arka plan görüntüsü kullanıyorsanız mobil cihazlarda daha hızlı performansa neden olabilir. (Kesme noktalarını aynı şekilde inşa edersiniz - sadece tarayıcı genişliğinizle minimumda başlayın ve yukarı doğru çalışın. Ve ellerinizi alabildiğiniz kadar çok gerçek cihazı test etmeyi unutmayın - Açık Cihazı ziyaret etmeyi düşünün Lab .)
Kısacası, iyi yapıldığında, uyarlanabilir tasarım hem web tasarımcısı hem de ortak bahçe web kullanıcısı olarak görülmek ve deneyimlemek için bir zevktir. Japon firma Bilgi Mimarları sitesini ele alalım, örneğin:
İPhone'da
İPad'de
İMac'te
Aaron Gustafson'un tahmin ettiği gibi, aynı sayfada tasarımları görene kadar yiyecek ve içecek sağladığınızı bile bilmiyorsunuz.
Deneyim her durumda daha hoş olamazdı; içeriği okumaya başlamak, sayfada neden garip göründüğünü merak etmek için zaman harcamak veya gezinmeden önce gezinme öğelerini görmek için yakınlaştırmak zorunda değilsiniz, çünkü birisi bu sorunları zaten çözmüştür. sen. Ve o duyarlı tasarım hemen hemen her zaman diğer seçenekleri koz nedeni budur.