Günümüzde, web siteniz çok çeşitli cihazlar tarafından ziyaret edilecek: büyük monitörlü masaüstü bilgisayarlar, orta boyutlu dizüstü bilgisayarlar, tabletler, akıllı telefonlar ve daha fazlası.
En iyi kullanıcı deneyimini elde etmek için ön uç mühendis , siteniz bu çeşitli cihazlara (yani çeşitli ekran çözünürlüklerine ve boyutlarına) göre düzenini ayarlamalıdır. Süreci tepki vermek kullanıcının cihazının biçimine (tahmin ettiniz) duyarlı web tasarımı (RWD).
Çalışmak için neden zaman ayırmaya değer duyarlı web tasarımı Örnekler ve odak noktanızı DWT'ye kaydırmak mı istiyorsunuz? Örneğin bazı web tasarımcıları, bunun yerine tüm tarayıcılarda istikrarlı bir kullanıcı deneyimi sağlamak için hayatlarının işi yapar ve genellikle günlerini sonunda Internet Explorer'daki küçük sorunları ele alarak geçirirler.
Bu aptalca bir yaklaşım.Bazı web tasarımcıları günlerini Internet Explorer ile ilgili küçük sorunları ele almak için harcarlar ve mobil kullanıcılarını ikinci el ziyaretçiler olarak bırakırlar. Bu aptalca bir yaklaşım.
Mashable, 2013'ü duyarlı web tasarımı yılı olarak adlandırdı . Neden? Trafiklerinin% 30'undan fazlası mobil cihazlardan geliyor. Yıl sonuna kadar bu sayının% 50'ye ulaşacağını öngörüyorlar. Genel olarak web genelinde, 2013'te web trafiğinin% 17,4'ü akıllı telefonlardan geldi . Aynı zamanda, örneğin Internet Explorer kullanımı, hepsinin yalnızca% 12'sini oluşturuyor tarayıcı geçen yıl bu zamana göre yaklaşık% 4 azaldı (göre W3Okullar ). Küresel akıllı telefon popülasyonu yerine belirli bir tarayıcı için optimize ediyorsanız, ağaçlar için ormanı kaçırıyorsunuz demektir. Ve bazı durumlarda bu, başarı ile başarısızlık arasındaki fark anlamına gelebilir; duyarlı tasarım, dönüşüm oranları , SEO , hemen çıkma oranları , ve dahası.
DWT hakkında genel olarak vurgulanan şey, bunun yalnızca web sayfalarınızın görünümünü ayarlamakla ilgili olmamasıdır; bunun yerine, sitenizi farklı cihazlarda kullanım için mantıksal olarak uyarlamaya odaklanmalısınız. Örneğin: fareyi kullanmak, dokunmatik ekran gibi aynı kullanıcı deneyimini sağlamaz. Katılmıyor musun Duyarlı mobil ve masaüstü düzenleriniz bu farklılıkları yansıtmalıdır.
Aynı zamanda, görüntülenebileceği onlarca farklı ekran boyutunun her biri için sitenizi tamamen yeniden yazmak istemezsiniz; böyle bir yaklaşım kesinlikle mümkün değildir. Bunun yerine çözüm, kullanıcının ekran boyutuna uyum sağlamak için aynı HTML kodunu kullanan esnek duyarlı tasarım öğeleri uygulamaktır.
Teknik bir bakış açısından, çözüm şu duyarlı tasarım eğitiminde yatmaktadır: CSS medya sorguları , sözde öğeler , belirli bir çözünürlüğe dinamik olarak ayarlamak için esnek ızgara düzenleri ve diğer araçlar.
Medya türleri ilk olarak HTML4 ve CSS2.1 , ekran ve baskı için ayrı CSS yerleştirilmesine olanak tanıdı. Bu şekilde, bir sayfanın bilgisayar ekranı için çıktıya göre ayrı stiller ayarlamak mümkün oldu.
@media screen { * { background: silver } }
veya
max-width
İçinde CSS3 , sayfa genişliğine bağlı olarak stilleri tanımlayabilirsiniz. Sayfa genişliği, kullanıcının cihazının boyutuyla ilişkili olduğundan, bu özellik böylece farklı cihazlar için farklı düzenler tanımlamanıza olanak tanır. Not: medya sorguları aşağıdakiler tarafından desteklenmektedir: tüm büyük tarayıcılar .
Bu tanım, temel özelliklerin ayarlanmasıyla mümkündür:
device-width,
orientation,
color ve
@media screen and (min-width: 480px) { div { float: left; background: red; } ....... } . Diğer tanımlar da mümkündür; ancak bu durumda, dikkat edilmesi gereken en önemli şeyler minimum çözünürlük (genişlik) ve yön ayarlarıdır (yatay ve dikey).
Aşağıdaki duyarlı CSS örneği, sayfa genişliğine göre belirli bir CSS dosyasını başlatma prosedürünü gösterir. Örneğin, 480px mevcut cihazın ekranının maksimum çözünürlüğü ise, main_1.css'de tanımlanan stiller uygulanacaktır.
initial-scale
Aynı CSS stil sayfası içinde farklı stilleri de tanımlayabiliriz, böylece bunlar yalnızca belirli kısıtlamalar karşılandığında kullanılabilir. Örneğin, duyarlı CSS'mizin bu kısmı yalnızca mevcut cihaz 480 pikselin üzerinde bir genişliğe sahipse kullanılır:
user-scalable=false
Mobil tarayıcılar, kullanıcılara 'üstün' bir okuma deneyimi sağlamak için 'akıllı yakınlaştırma' kullanır. Temel olarak, sayfa boyutunu orantılı olarak küçültmek için akıllı yakınlaştırma kullanılır. Bu, iki şekilde kendini gösterebilir: (1) kullanıcı tarafından başlatılan yakınlaştırma (örneğin, mevcut web sitesini yakınlaştırmak için bir iPhone ekranına iki kez dokunma) ve (2) başlangıçta bir web sayfasının yakınlaştırılmış bir sürümünü yük.
Akıllı yakınlaştırmanın hedeflenebileceği herhangi bir sorunu çözmek için yalnızca duyarlı ortam sorgularını kullanabileceğimizi göz önünde bulundurarak, yakınlaştırmayı devre dışı bırakmak ve sayfa içeriğinizin her zaman tarayıcıyı doldurmasını sağlamak genellikle arzu edilir (veya hatta gereklidir):
display: none;
:before Ayarlayarak 1'e kadar, ilk sayfa yakınlaştırma seviyesini (yani, sayfa yüklendiğinde yakınlaştırma miktarını) kontrol ediyoruz. Web sayfanızı duyarlı olacak şekilde tasarladıysanız, akıcı, dinamik düzeniniz akıllı telefon ekranını herhangi bir ilk yakınlaştırma gerektirmeden akıllı bir şekilde doldurmalıdır.
Ayrıca
:after ile yakınlaştırmayı tamamen devre dışı bırakabiliriz.
Üç farklı duyarlı sayfa düzeni sağlamak istediğinizi varsayalım: biri masaüstü bilgisayarlar, biri tabletler (veya dizüstü bilgisayarlar) ve diğeri akıllı telefonlar için. Sınırlarınız olarak hangi sayfa boyutlarını hedeflemelisiniz (ör. 480 piksel)?
Ne yazık ki, sayfa genişliklerinin hedeflenmesi için tanımlanmış bir standart yoktur, ancak aşağıdaki örnek duyarlı değerler genellikle kullanılır:
Bununla birlikte, bir dizi farklı genişlik tanımı mevcuttur. Örneğin, 320 ve Üzeri beş varsayılan CSS3 Ortam Sorgusu artışına sahiptir: 480, 600, 768, 992 ve 1382px. Bu duyarlı web geliştirme eğitiminde verilen örnekle birlikte, en az on başka yaklaşımı sıralayabilirim.
Bu makul artış setlerinden herhangi biriyle çoğu cihazı hedefleyebilirsiniz. Pratikte, genellikle yukarıda belirtilen tüm sayfa genişliği örneklerini ayrı ayrı ele almaya gerek yoktur - yedi farklı çözünürlük muhtemelen aşırıdır. Deneyimlerime göre, 320px, 768px ve 1200px en sık kullanılanlardır; bu üç değer sırasıyla akıllı telefonları, tabletleri / dizüstü bilgisayarları ve masaüstü bilgisayarları hedeflemek için yeterli olmalıdır.
Önceki örnekteki duyarlı medya sorgularınızın üzerine inşa ederek, kullanıcının cihazının boyutuna bağlı olarak belirli bilgileri programlı bir şekilde göstermek veya gizlemek isteyebilirsiniz. Neyse ki, bu da aşağıdaki eğitimde belirtildiği gibi saf CSS ile gerçekleştirilebilir.
Yeni başlayanlar için, neredeyse her zaman yeterli alanın olmadığı bir akıllı telefon düzeni için ekrandaki öğelerin sayısını azaltmak söz konusu olduğunda bazı öğeleri (
:first-line) gizlemek harika bir çözüm olabilir.
Sözde öğeler, bir HTML öğesinin belirli bölümlerine belirli stilleri uygulamak veya belirli bir öğe alt kümesini seçmek için kullanılır. Örneğin
a:visited sözde eleman, stilleri yalnızca ilk satırda belirli bir seçici olarak tanımlamanıza izin verir (örneğin,
a tüm
.username:after { content:'Insert your user name'; } @media screen and (max-width: 1024px) { .username:before { content:'User name'; } } @media screen and (max-width: 480px) { .username:before { content:''; } } ların ilk satırına uygulanır). Benzer şekilde
:before sözde eleman, daha önce kullanıcı tarafından ziyaret edilen bağlantılar ile tüm
:after lerde stilleri tanımlamanıza izin verir. Açıkçası, bunlar kullanışlı olabilir.
İşte masaüstü, tablet ve akıllı telefon için birer tane olmak üzere bir oturum açma düğmesi için üç farklı düzen oluşturduğumuz basit bir duyarlı tasarım örneği. Akıllı telefonda tek bir simge olurken, tablette 'Kullanıcı adı' ile aynı simgeye sahip oluruz. Son olarak, masaüstü için kısa bir talimat mesajı da ekleyeceğiz ('Kullanıcı adınızı girin').
@media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }
Yalnızca
img { max-width: 100% } ve
Psuedo öğelerinin büyüsü hakkında daha fazla bilgi için Chris Coyier, yazma CSS Hileleri hakkında.
Bu eğiticide, duyarlı web tasarımı için bazı yapı taşlarını (yani, medya sorguları ve sözde öğeler) oluşturduk ve her birinin bazı örneklerini ortaya koyduk. Buradan nereye gidiyoruz?
Atmanız gereken ilk adım, web sayfanızın tüm öğelerini çeşitli ekran boyutlarında düzenlemektir.
Yukarıda sunulan düzenin masaüstü sürümüne bir göz atın. Bu durumda, soldaki içerik (yeşil dikdörtgen) bir tür ana menü işlevi görebilir. Ancak daha düşük çözünürlüğe sahip cihazlar kullanımdayken (örneğin, bir tablet veya akıllı telefon), bu ana menünün tam genişlikte görüntülenmesi mantıklı olabilir. Medya sorgularıyla bu davranışı aşağıdaki gibi uygulayabilirsiniz:
|_+_|
Ne yazık ki, bu temel yaklaşım, ön ucunuz karmaşık bir şekilde büyüdükçe genellikle yetersizdir. Bir sitenin içerik organizasyonu genellikle mobil ve masaüstü sürümleri arasında önemli ölçüde farklılık gösterdiğinden, kullanıcı deneyimi sonunda yalnızca duyarlı CSS'nin değil, aynı zamanda HTML ve JavaScript'in kullanımına da bağlıdır.
Farklı cihazlar için duyarlı düzenleri belirlerken birkaç temel unsur önemlidir. İçerik için yeterli alana sahip olduğumuz masaüstü sürümlerinin aksine, akıllı telefon geliştirme daha zorlu. Her zamankinden daha fazla, belirli içerikleri gruplamak ve tek tek parçaların önemini hiyerarşik olarak tanımlamak gerekiyor.Bir akıllı telefon için, belirli içerikleri gruplamak ve ayrı parçaların önemini hiyerarşik olarak tanımlamak her zamankinden daha önemlidir.
İçeriğinizin çeşitli kullanımları da önemlidir. Örneğin, kullanıcınız bir fareye sahip olduğunda, daha fazla bilgi almak için imleci belirli öğelerin üzerine getirebilir, böylece siz (web geliştiricisi olarak) bu şekilde toplanacak bazı bilgileri bırakabilirsiniz — ancak bu, kullanıcınız bir akıllı telefonda olduğunda.
Ek olarak, sitenizde akıllı telefonlarda tipik bir parmaktan daha küçük görüntülenen düğmeler bırakırsanız, sitenizin kullanımında ve hissinde belirsizlik yaratırsınız. Yukarıdaki resimde, standart web görünümünün (soldaki) bazı öğeleri daha küçük bir cihazda görüntülendiğinde tamamen kullanılamaz hale getirdiğine dikkat edin.
Bu tür davranışlar, kullanıcınızın bir hata yapma olasılığını da artıracak ve deneyimlerini yavaşlatacaktır. Pratikte bu, kendini azalan sayfa görüntülemeleri, daha az satış ve daha az genel etkileşim olarak gösterebilir.
Medya sorgularını kullanırken, yalnızca hedeflenenlerin değil, tüm sayfa öğelerinin davranışları akılda tutulmalıdır, özellikle değişken ızgaralar kullanılırken, bu durumda (sabit boyutların aksine) sayfa herhangi bir durumda tam olarak doldurulacaktır. an, içerik boyutunu orantılı olarak artırıp azaltıyor. Genişlikler yüzde olarak ayarlandığından, grafik öğeler (yani görüntüler) böyle akışkan bir düzen altında bozulabilir ve karıştırılabilir. Görüntüler için bir çözüm aşağıdaki gibidir:
Diğer unsurlar da benzer şekillerde ele alınmalıdır. Örneğin, DWT'deki simgeler için harika bir çözüm, IconFonts .
Tam tasarım uyarlama sürecini tartıştığımızda, genellikle optimum görüntüleme deneyimine bakarız (kullanıcının bakış açısından). Böyle bir tartışma, maksimum kolaylaştırılmış kullanımı, öğelerin önemini (görünür sayfa bölgelerine dayalı olarak), kolaylaştırılmış okumayı ve sezgisel gezinmeyi içermelidir. Bu kategoriler arasında en önemli bileşenlerden biri, içerik genişliği ayarı . Örneğin, akışkan ızgara sistemleri, tüm sayfanın yüzdeleri olarak göreli genişliklere dayanan ayar elemanlarına, yani elemanlara sahiptir. Bu şekilde, içindeki tüm unsurlar duyarlı web tasarımı sistem sayfanın boyutuna göre otomatik olarak ayarlanır.
Bu değişken ızgara sistemleri, burada tartıştığımız şeyle yakından ilişkili olsa da, bunlar gerçekten ayrıntılı olarak tartışmak için ek bir öğretici gerektiren tamamen ayrı bir varlıktır. Bu nedenle, bu tür davranışları destekleyen bazı temel çerçevelerden bahsedeceğim: Önyükleme , Anlamsız , ve Parantez .
Yakın zamana kadar, web sitesi optimizasyonu, farklı web tarayıcılarına dayalı olarak işlevselliğin özelleştirilmesi için özel olarak ayrılmış bir terimdi. Bugün karşı karşıya olduğumuz farklı tarayıcı standartlarıyla kaçınılmaz mücadelenin yanı sıra, bu terim artık duyarlı web tasarımıyla cihazlara ve ekran boyutlarına uyum sağlamayı da varsayıyor. Modern web üzerinde kesmek için, sitenizin yalnızca kim onu izliyorum ama Nasıl .