Web siteleri için uyarlanabilir düzen

İçindekiler:

Web siteleri için uyarlanabilir düzen
Web siteleri için uyarlanabilir düzen
Anonim

Mobil cihazlar ne kadar popüler olursa, çoğu sitede kaydırma o kadar rahatsız edici olur. Bu nedenle, 2012'den beri web yöneticileri, kaynakları düşük çözünürlüklü ekranlarda görüntülemeyi daha rahat hale getiren bir çözüm kullanıyor - uyarlanabilir düzen.

Modern trend

Uyarlanabilir düzen
Uyarlanabilir düzen

Bugün, Dünya'da yaklaşık beş milyar insan cep telefonu kullanıyor ve bunların üçte birinin akıllı telefonu var. Bu nedenle, mobil trafik web sitesi sahipleri için giderek daha önemli hale geliyor. Böyle bir ziyaretçi kaynağının ancak zamanla artması muhtemeldir. Arama motorları bu eğilime hızla yanıt verdi. Büyük şirketler "Yandex" ve Google, uyarlanabilir düzen ve tasarımın kullanılabilirliğini dikkate alarak siteleri arama sonuçlarında sıralamak için algoritmalarında önemli değişiklikler yaptı. Basitçe söylemek gerekirse, cep telefonları, akıllı telefonlar ve tabletler için optimize edilmiş web kaynakları, rakiplerine göre bazı avantajlara sahip olacak.

Duyarlı düzen tanımı

Uyarlanabilir düzen, bir web sayfası çerçevesi oluşturma yöntemidir.blokların konumunu, görüntülendiği cihazın ekran çözünürlüğüne göre otomatik olarak değiştirme. Yani bu yaklaşımla, çeşitli çözünürlükler için ayrı stiller oluşturulur. Bu efekt, özel CSS dosyaları yazılarak elde edilir.

uyarlanabilir çözünürlük düzeni
uyarlanabilir çözünürlük düzeni

Daha önce, sorun biraz farklı şekilde çözüldü. Geliştiriciler, sitenin ana versiyonunun düzenini ve tasarımını oluşturarak ve aynısını mobil için de yaparak çok daha fazla “vücut hareketi” yapmak zorunda kaldılar. Mevcut mobil platform ile İnternet projesinin görüntülendiği cihazın ekranına bağlı olarak sitenin uygun sürümü kullanıma sunuldu.

Bu yaklaşım kendisini pek çok yönden haklı çıkarmadı ve çoğu web yöneticisi asla bir mobil sürüm oluşturmaya başlamadı. Şimdi bu düzen, uyarlanabilir düzen ile değiştirildi. Bu teknolojiyi kullanarak bir site iskeleti oluşturarak, web yöneticisi tüm çabasını projenin tek bir versiyonunu oluşturmaya odaklar ve ziyaretçiler hem büyük bir bilgisayar ekranında hem de cep telefonu, akıllı telefon veya tablette aynı konfor seviyesinde görebilirler.

Duyarlı Düzenin Avantajları

Uyarlanabilir web sitesi düzeninin avantajları nelerdir? Avantajın, herhangi bir cihazdaki tüm sayfa bloklarının doğru görüntülenmesi olduğu daha önce belirtilmişti. Ayrıca, bir şablon oluşturmada bu yaklaşımın olumlu bir yönü, değişikliklerin uygulanma hızıdır. Bu ne anlama geliyor?

duyarlı düzen şablonu
duyarlı düzen şablonu

Sitenin iki platformu varsa, düzende yapılan değişikliklerinönce çalışan sürümde, ardından mobil sürümde uygulayın. Koddaki değişiklikler oldukça önemliyse, bu tür değişiklikleri yapma süreci uzun zaman alabilir. Uyarlanabilir düzen ile sitedeki çalışmalar tek dosyada gerçekleştirilir. Web sayfasının düzeninde yapılan değişiklikler hem üretim hem de mobil sürümlere eşit olarak yakında yansıtılacaktır.

Bu yaklaşımın dezavantajı, bazı web yöneticileri uygulamasının karmaşıklığı olarak adlandırıyor. Ancak CSS 3'ün ortaya çıkmasıyla birlikte, duyarlı bir düzen şablonu oluşturmak oldukça basit hale geldi. Deneyimsiz web yöneticileri bile sitelerini mobil uyumlu hale getirebilir.

Uyarlanabilir düzenin ilkeleri ve özellikleri

Web tasarımında duyarlı mizanpaj yönteminin altında yatan ilkeler nelerdir?

- Akışkan Düzeni Türünü Kullanma.

- "Kauçuk" resimler.

- Medya sorgularını kullanma (medya sorguları).

- Düzenin en başından itibaren mobil cihazlar hakkında düşünme ihtiyacı.

Bu şablon oluşturma yönteminin bu temel ilkelerinden, uyarlanabilir mizanpajın aşağıdaki özellikleri gelir:

1. Bir web sitesi tasarımının tasarlanması ve oluşturulması, tüm çözünürlüklerde çalışmayı dikkate alarak: mobilden geniş ekrana kadar.

2. CSS 3'te tanıtılan medya sorgulama teknolojisini kullanan basamaklı stil sayfalarıyla düzen

3. Görüntüleri daha küçük boyut ve çözünürlükte mobil cihazlara göndermek için hem istemci hem de sunucu tarafında programlama.

Hangi uyarlanabilir düzenin oluşturulduğunu dikkate alan önemli bir husus,popüler elektronik cihazların çözünürlük matrisi. Tasarım geliştirmeye yönelik bu yaklaşım, herhangi bir ekranda web'de gezinmeyi çok rahat hale getirecektir. Ama stillere hangilerini ekleyeceğinizi nereden biliyorsunuz?

Duyarlı düzen ile nereden başlamalı?

Çoğu web sitesi, akıllı telefonların ve tabletlerin ekranlarında gezinmek için pek uygun olmayan kaydırma çubukları görünecek şekilde yapılır ve birçok İnternet projesinin tasarımı ve düzeni basitçe "yüzer". Web tasarımı öğretmek için oluşturulan web siteleri, sitenizin sayfalarını düzenlemeye değer olduğu çeşitli cihazların çeşitli ekran çözünürlüklerini içerir.

uyarlanabilir düzen örnekleri
uyarlanabilir düzen örnekleri

Örneklerine oldukça sık rastlanan uyarlanabilir düzenin birçok avantajı vardır. Sayfa düzenine bu şekilde yaklaşırken nelere dikkat edilmelidir?

Bir şablon üzerinde çalışmaya başlarken, içerik ve düzen bloklarının farklı ekranlarda ne kadar iyi görüntülendiğini periyodik olarak test etmek önemlidir. Bunu yapmak için bazen tarayıcı penceresinin genişliğini değiştirmek yeterlidir. Stil dosyası medya sorgusunu alır ve önemli değişiklikler yaparak blokları yeniden konumlandırır. Duyarlı bir düzen şablonunu test etmek için iyi bir araç, farklı modellerdeki mobil cihazların ekranlarını taklit eden siteler olabilir. Bu tür hizmetler, tasarımın çeşitli mobil cihazların ekranlarında nasıl göründüğünü dikkatlice düşünmenize ve değerlendirmenize olanak tanır.

Bu kadar duyarlı bir düzenin teknolojisi o kadar basit olmasa da, ustalaşmak çok yakında meyve verecek.

Önerilen: