Duyarlı Web Tasarımına Giriş: Sözde Öğeler, Medya Sorguları ve Daha Fazlası

Günümüzde web siteniz çok çeşitli cihazlar tarafından ziyaret edilecek: büyük monitörlü masaüstü bilgisayarlar, orta boy dizüstü bilgisayarlar, tabletler, akıllı telefonlar ve daha fazlası.

Bir ön uç mühendisi olarak en uygun kullanıcı deneyimini elde etmek için siteniz, düzenini bu çeşitli cihazlara (yani, çeşitli ekran çözünürlüklerine ve boyutlarına) göre ayarlamalıdır. Kullanıcının cihazının formuna yanıt verme işlemine (tahmin ettiniz) duyarlı web tasarımı (RWD) denir.

Duyarlı web tasarım örneklerini incelemek ve odağınızı RWD'ye kaydırmak neden zaman ayırmaya değer? Örneğin bazı web tasarımcıları, tüm tarayıcılarda istikrarlı bir kullanıcı deneyimi sağlamayı hayatlarının işi haline getirirler ve genellikle günlerce Internet Explorer'daki küçük sorunları çözmekle uğraşırlar.

Bu aptalca bir yaklaşımdır.

Mashable, 2013'ü duyarlı web tasarımı yılı olarak adlandırdı. Niye ya? Trafiklerinin %30'undan fazlası mobil cihazlardan geliyor. Bu sayının yıl sonuna kadar %50'ye ulaşabileceğini öngörüyorlar. Genel olarak web genelinde, web trafiğinin %17,4'ü 2013'te akıllı telefonlardan geldi. Aynı zamanda, örneğin, Internet Explorer kullanımı tüm tarayıcı trafiğinin yalnızca %12'sini oluşturuyor, geçen yıl bu zamana göre yaklaşık %4'lük bir düşüş (göre W3Schools'a). Küresel akıllı telefon popülasyonu yerine belirli bir tarayıcı için optimizasyon yapıyorsanız, ağaçlar için ormanı kaçırıyorsunuz. Ve bazı durumlarda bu, başarı ile başarısızlık arasındaki fark anlamına gelebilir; duyarlı tasarımın dönüşüm oranları, SEO, hemen çıkma oranları ve daha fazlası üzerinde etkileri vardır.

Duyarlı Web Tasarım Yaklaşımı

RWD hakkında genel olarak göz ardı edilen şey, bunun yalnızca web sayfalarınızın görünümünü ayarlamakla ilgili olmadığıdır; bunun yerine, sitenizi farklı cihazlarda kullanım için mantıksal olarak uyarlamaya odaklanılmalıdır. Örneğin: fareyi kullanmak, örneğin dokunmatik ekranla 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 göre ayarlamak için aynı HTML kodunu kullanan esnek duyarlı tasarım öğeleri uygulamaktır.

Teknik açıdan çözüm, bu duyarlı tasarım eğitiminde yatmaktadır: belirli bir çözünürlüğe dinamik olarak uyum sağlamak için CSS medya sorguları, sözde öğeler, esnek küme ızgara düzenleri ve diğer araçları kullanmak.

Duyarlı Tasarımda Medya Sorguları

Medya türleri ilk olarak HTML4 ve CSS2.1'de ortaya çıktı ve bu, ekran ve baskı için ayrı CSS'nin yerleştirilmesini sağladı. Bu şekilde, bir sayfanın bilgisayar ekranı için çıktısına göre ayrı stiller ayarlamak mümkün oldu.

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

veya

 @media screen { * { background: silver } }

CSS3'te sayfa genişliğine göre stiller tanımlayabilirsiniz. Sayfa genişliği, kullanıcının cihazının boyutuyla ilişkili olduğundan, bu özellik, farklı cihazlar için farklı düzenler tanımlamanıza olanak tanır. Not: medya sorguları tüm büyük tarayıcılar tarafından desteklenir.

Bu tanımlama, temel özelliklerin ayarlanmasıyla mümkündür: max-width , device-width , orientation ve color . Başka 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 (manzaraya karşı portre).

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, mevcut cihazın ekranının maksimum çözünürlüğü 480px ise, o zaman main_1.css içinde tanımlanan stiller uygulanacaktır.

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

Aynı CSS stil sayfasında farklı stiller de tanımlayabiliriz, öyle ki bunlar yalnızca belirli kısıtlamalar yerine getirildiğinde kullanılır. Örneğin, duyarlı CSS'mizin bu kısmı yalnızca mevcut cihazın genişliği 480 pikselin üzerindeyse kullanılır:

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

“Akıllı Yakınlaştırma”

Mobil tarayıcılar, kullanıcılara 'üstün' bir okuma deneyimi sağlamak için "akıllı yakınlaştırma" denilen şeyi kullanır. Temel olarak, sayfa boyutunu orantılı olarak küçültmek için akıllı yakınlaştırma kullanılır. Bu, kendisini iki şekilde gösterebilir: (1) kullanıcı tarafından başlatılan yakınlaştırma (örneğin, geçerli web sitesini yakınlaştırmak için bir iPhone ekranına iki kez dokunmak) 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ı medya sorgularını kullanabileceğimiz göz önüne alındığında, yakınlaştırmayı devre dışı bırakmak ve sayfa içeriğinizin her zaman tarayıcıyı doldurmasını sağlamak genellikle istenir (hatta gerekli).

 <meta name="viewport" content="width=device-width, initial-scale=1" />

initial-scale 1'e ayarlayarak, ilk sayfa yakınlaştırma seviyesini (yani, sayfa yüklendiğinde yakınlaştırma miktarını) kontrol ederiz. 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 user-scalable=false ile yakınlaştırmayı tamamen devre dışı bırakabiliriz.

Sayfa Genişlikleri

Üç 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. Kesinti olarak hangi sayfa boyutlarını hedeflemelisiniz (ör. 480 piksel)?

Ne yazık ki, hedeflenecek sayfa genişlikleri için tanımlanmış bir standart yoktur, ancak aşağıdaki örnek duyarlı değerler sıklıkla kullanılır:

• 320 piksel
• 480 piksel
• 600 piksel
• 768 piksel
• 900 piksel
• 1024 piksel
• 1200 piksel

Bununla birlikte, bir dizi farklı genişlik tanımı mevcuttur. Örneğin, 320 ve Yukarı, beş varsayılan CSS3 Ortam Sorgusu artışına sahiptir: 480, 600, 768, 992 ve 1382 piksel. 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. Uygulamada, genellikle yukarıda belirtilen sayfa genişliği örneklerinin tümünü ayrı ayrı ele almaya gerek yoktur; yedi farklı çözünürlük muhtemelen fazla abartılıdır. Tecrübelerime göre, 320px, 768px ve 1200px en yaygın 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.

Psuedo-Elementler

Önceki örnekteki duyarlı medya sorgularınıza ek olarak, kullanıcının cihazının boyutuna bağlı olarak belirli bilgileri programlı olarak göstermek veya gizlemek de isteyebilirsiniz. Neyse ki, bu da aşağıdaki öğreticide özetlendiği gibi saf CSS ile gerçekleştirilebilir.

Yeni başlayanlar için, neredeyse her zaman yetersiz alanın olduğu bir akıllı telefon düzeni için ekrandaki öğelerin sayısını azaltmak söz konusu olduğunda bazı öğeleri ( display: none; ) gizlemek harika bir çözüm olabilir.

Ancak bunun ötesinde, örneğin :before ve :after gibi CSS sözde öğeleri (seçiciler) ile de yaratıcı olabilirsiniz. Not: Bir kez daha, sözde öğeler tüm büyük tarayıcılar tarafından desteklenir.

Sözde öğeler, bir HTML öğesinin belirli bölümlerine belirli stiller uygulamak veya belirli bir öğe alt kümesini seçmek için kullanılır. Örneğin, :first-line sözde öğesi, stilleri yalnızca belirli bir seçicinin ilk satırında tanımlamanıza izin verir (örneğin, p:first-line satır tüm p ilk satırına uygulanır). Benzer şekilde, a:visited sözde öğesi, kullanıcının daha önce ziyaret ettiği bağlantılara a tüm a'larda stiller tanımlamanıza izin verir. Açıkçası, bunlar işe yarayabilir.

İşte bir giriş düğmesi için masaüstü, tablet ve akıllı telefon için birer adet olmak üzere üç farklı düzen oluşturduğumuz basit bir duyarlı tasarım örneği. Akıllı telefonda yalnız bir simgemiz olacak, tablette ise "Kullanıcı adı" ile birlikte aynı simgeye sahip olacağız. Son olarak, masaüstü için kısa bir talimat mesajı da ekleyeceğiz (“Kullanıcı adınızı girin”).

 .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:""; } }

Yalnızca :before ve :after sözde öğelerini kullanarak aşağıdakileri elde ederiz:

Sahte öğelerin büyüsü hakkında daha fazla bilgi için Chris Coyier'in CSS-Tricks hakkında iyi bir yazısı var.

Peki, Nereden Başlamalıyım?

Bu öğreticide, duyarlı web tasarımı için bazı yapı taşları (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ü versiyonuna 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:

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

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 nihayetinde yalnızca duyarlı CSS kullanımına değil, aynı zamanda HTML ve JavaScript 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 zorludur. Her zamankinden daha fazla, belirli içerikleri gruplamak ve bireysel parçaların önemini hiyerarşik olarak tanımlamak gerekiyor.

İçeriğinizin çeşitli kullanımları da önemlidir. Örneğin, kullanıcınızın bir faresi olduğunda, daha fazla bilgi almak için imleci belirli öğelerin üzerine ayarlayabilir, böylece (web geliştiricisi olarak) bazı bilgileri bu şekilde toplanacak şekilde bırakabilirsiniz; ancak bu, kullanıcınız bir akıllı telefondayken.

Ek olarak, sitenizde akıllı telefonlarda tipik bir parmaktan daha küçük hale gelen 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 (solda), daha küçük bir cihazda görüntülendiğinde bazı öğeleri tamamen kullanılamaz hale getirdiğine dikkat edin.

Bu tür davranışlar, kullanıcınızın hata yapma olasılığını artırarak deneyimlerini yavaşlatacaktır. Pratikte bu, azalan sayfa görüntülemeleri, daha az satış ve daha az genel katılım olarak kendini gösterebilir.

Diğer Duyarlı Tasarım Öğeleri

Medya sorgularını kullanırken, özellikle değişken ızgaralar kullanılırken, yalnızca hedeflenenlerin değil, tüm sayfa öğelerinin davranışı akılda tutulmalıdır, bu durumda (sabit boyutların aksine) sayfa herhangi bir durumda tam olarak doldurulacaktır. moment, orantılı olarak artan ve azalan içerik boyutu. Genişlikler yüzde olarak ayarlandığından, grafik öğeler (yani görüntüler) böyle akıcı bir düzende bozulabilir ve karışabilir. Görüntüler için bir çözüm aşağıdaki gibidir:

 img { max-width: 100% }

Diğer unsurlar da benzer şekilde ele alınmalıdır. Örneğin, RWD'deki simgeler için harika bir çözüm, IconFonts kullanmaktır.

Akışkan Izgaralı Sistemler Üzerine Birkaç Söz

Tam tasarım uyarlama sürecini tartıştığımızda, genellikle en uygun görüntüleme deneyimine (kullanıcının bakış açısından) bakarız. Böyle bir tartışma, maksimum kolaylaştırılmış kullanımı, öğe önemini (görünür sayfa bölgelerine göre), kolay okumayı ve sezgisel gezinmeyi içermelidir. Bu kategoriler arasında en önemli bileşenlerden biri içerik genişliği ayarıdır . Örneğin, akışkan ızgara sistemleri olarak adlandırılan sistemler, ayar öğelerine, yani genel sayfanın yüzdeleri olarak göreli genişliklere dayalı öğelere sahiptir. Bu sayede responsive web tasarım sistemindeki tüm unsurlar sayfanın boyutuna göre otomatik olarak ayarlanır.

Bu akışkan ızgara sistemleri, burada tartıştıklarımızla yakından ilişkili olsalar da, 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ı ana çerçevelerden bahsedeceğim: Bootstrap, Unsemantic ve Brackets.

Çözüm

Yakın zamana kadar, web sitesi optimizasyonu, yalnızca farklı web tarayıcılarına dayalı olarak işlevselliğin özelleştirilmesi için ayrılmış bir terimdi. Bugün karşılaştığımız farklı tarayıcı standartlarıyla kaçınılmaz mücadelenin yanı sıra, bu terim artık responsive web tasarımı ile cihazlara ve ekran boyutlarına uyum sağlamayı da üstleniyor. Modern web'de kesmek için sitenizin yalnızca onu kimin görüntülediğini değil, nasıl görüntülediğini de bilmesi gerekir.