Sabit Genişlikli Bir Web Sitesini Mobil Dostu Hale Getirmek

Son Güncelleme 22 Mayıs 2020

Mobil Dostu Bina. Bir grafik tasarımcı ve web geliştiricisi olarak en büyük endişemin CSS işlevimi Internet Explorer'da yapmak olduğu bir zaman vardı. IE sadece arkada bir acı değil, şimdi çok sayıda ekran boyutu ve işletim sistemi hakkında endişelenmemiz gerekiyor.

Mobilin masaüstü taramayı geride bıraktığı bir zaman olacak. Mobil günlük hayatımızda çok önemli hale geldiğinden, web tasarımcılarının anında sonuçlara ihtiyaç duyduğu zamanlar vardır. Statik bir web sitesini mobil uyumlu bir WordPress temasına dönüştürmek için vakti olmayan tasarımcılardan veya programcılardan biriyseniz, sizin için umut var arkadaşım. Tüm içeriğinizi mobil cihazlarda görüntülemeye gelince, bunu biraz CSS ve HTML optimizasyonu ile başarabilirsiniz.

http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png

comScore'a göre, küresel olarak, mobil cihazlar çevrimiçi olarak harcanan dakikaların yarısından fazlasını oluşturuyor

Mobil uyumlu veya duyarlı web siteleri, web sitenizin genişliğini izleyicinin cihazına uyacak şekilde otomatik olarak yapılandırma yeteneğine sahiptir. Yatay kaydırma çubukları, duyarlı tasarımda hayırdır. Mevcut web sitenizi bir mobil cihazda görüntülüyorsanız ve telefonunuzun veya tabletinizin altında bir kaydırma çubuğu görüyorsanız, büyük olasılıkla web siteniz (veya sitenizin öğeleri) mobil uyumlu değildir. Bu yatay kaydırma çubukları, kullanıcının deneyimini mahveder ve büyük olasılıkla geri düğmesini tıklar. İnsanlar cihazlarında dikey olarak kaydırmaya o kadar alışkındır ki, kullanıcılar içeriği görüntülemek için dikey ve yatay kaydırma yapmak zorunda kaldıklarında rahatsız olurlar ve siteden ayrılırlar.

Bu noktadan itibaren her şey dahil, tasarım web sitelerinde her şey için CSS sınıfları ve kimlikleri var ve ben her şeyi kastediyorum.

Başlık ve menü div'lerinden alt bilgideki <p> ​​etiketlerine. Tüm bunların boyutunu ekran genişliğine göre ayarlamak isteyeceksiniz. Öğe CSS aracılığıyla hedeflenebildiğinde taşıma, boyutlandırma ve ölçekleme çok daha kolaydır.

CSS Medya Sorgularının kullanımı düşündüğünüzden daha kolaydır.

Medya sorguları ilk kez dikkatimi çektiğinde, bunun bir CSS biçimi değil, bir programlama dilinin parçası olduğunu düşündüm. Gerçekten ne olduğunu öğrendiğimde bir rahatlama duygusuyla üstesinden geldim ve o zamandan beri TÜM web projelerimde kullanıyorum.

Medya Sorguları temel olarak CSS kurallarıdır. Ekranınız bu genişlikteyse, bu CSS'yi yalnızca bu öğelere uygulayın. Aşağıya bir göz atın.

Bu nedenle, yukarıdaki kod basitçe, kullanıcının ekranı 100 piksel ile 699 piksel arasındaysa, gövdenin arka plan rengini mavi olarak değiştirin diyor. Bu, sitenizdeki her div ve aralığı etiketlemenin çok önemli hale geldiği yerdir. Bu öğeleri farklı ekran genişlikleri için işlemek, uygun etiketleme ile daha kolay hale gelir.

Css-tricks.com, hızlı bir referans olarak bizim için birçok mobil genişliği listeler.

CSS Kod Örneği

/* ---- HTC One ---- */
/* Portre ve Manzara */

@medya ekranı

ve (cihaz genişliği: 360 piksel)

ve (cihaz yüksekliği: 640 piksel)

ve (-webkit-device-piksel oranı: 3) {

/***** KODUNUZ BURADA*****/

}

Galaxy, HTC ve Apple telefonları için çok daha fazla medya sorgu kodu var. Ek olarak, Ipad, Galaxy ve Nexus tablet genişlikleri için genişlikler listelenmiştir. Tek yapmanız gereken bu kodu sitenizin CSS dosyasına girmek ve boş CSS parantezlerini kendi kodunuzla doldurmak! Tamamlandı!

Siteniz duyarlı, ancak yine de pek doğru gelmiyor

Sitenizdeki bazı öğelerin, ana menünüz gibi mobil cihazlarda oldukça fazla yer kapladığını fark etmeye başlayabilirsiniz. Duyarlı hale getirmek için, büyük olasılıkla menünüzdeki <li> etiketlerine bir "float: none" uygulamışsınızdır. Ama şimdi menü, sitenizin üst kısmında büyük bir gayrimenkul yığını alıyor. Ana menünüzü jQuery ve CSS medya sorguları içeren bir açılır menüye dönüştürmeniz gerekecek. Css-tricks.com ayrıca bunun nasıl yapılacağını da açıklar.

Hem masaüstü hem de mobil cihazlarda bulunabilecek bazı öğeleri önemsiz olarak da kabul edebilirsiniz. . CSS kullanarak onlardan kurtulabilirsiniz:

Bu site ayarlamaları, web sitelerini gerçekten uzun yapma eğilimindedir ve kullanıcıları çok fazla kaydırmaya zorlar. Burası, bağlantı metninin (görebilen kullanıcılar için) veya bağlantıları atla (ekran okuyucular için) arkadaşınız haline geldiği yerdir.

Bağlantı metni , kullanıcıların web sayfanızın belirli bir bölümüne kaydırmak zorunda kalmadan atlamalarını sağlayan tıklanabilir bir bağlantıdır. Mobil uyumlu siteler için kullanışlı bir yöntemdir. Aşağıdaki kod, bağlantı metni bağlantısına bir örnektir.

<a href=”#skip”>Ana İçeriğe atlamak için burayı tıklayın</a>

<a id=”skip”></a>Ana içerik burada başlar

Bağlantıları Atla , çoğunlukla ekran okuyucular için kullanılır ve engelli kullanıcıların menüde gezinme gibi tekrar eden web içeriğini atlamalarına veya atlamalarına ve doğrudan kendilerini ilgilendiren bilgilere erişmelerine olanak tanır.

Atlama bağlantılarının CSS kuralı "görüntüleme:yok" ise, ekran okuyucular bağlantı "erişilemez" hale gelir. Bu nedenle, bunun üstesinden gelmenin bir yolu, bağlantıları ekranın dışına konumlandırmaktır, bu şekilde ekran okuyucular bağlantılarınızı yine de tanıyabilir ve yeni mobil sitenizi atlamalarına izin verebilir.

Sabit genişlikli web sitenizi mobil uyumlu bir web sitesine dönüştürmenin hızlı ve kolay yolu budur. Ayrıca tüm resimlerinizi “genişlik: %100; yükseklik: otomatik.” Piksel olarak ayarlanmış bir genişliğe sahip tüm resimler, div'ler veya yayılmalar mobil cihazlarda yatay kaydırma çubuğuna oluşturulur, bu nedenle bunları medya sorgularını kullanan değişen cihazlar için yüzdelere veya farklı genişliklere ayarlamayı unutmayın.

Biraz zaman alıcı olabilir, ama inan bana, bir kez öğrendiğinde sonsuza kadar kullanacaksın. Bu yöntemi, şimdiye kadar yapacağınız her web sitesinde kullanacaksınız, çünkü en yeni WordPress veya Joomla duyarlı temaları ve şablonları bile, istediğiniz gibi görünmelerini sağlamak için biraz değişiklik gerektirir. Bu, özellikle mobil cihazlar için sürekli değişen pazar için geçerlidir.

-İzzak Hale, Kıdemli Grafik Tasarımcı