Web sitenizi tasarlarken, ekran boyutu ve şekli ne olursa olsun her cihazda harika göründüğünden emin olmak önemlidir. Duyarlı web siteleri bilgisayarlar, telefonlar, tabletler, TV'ler, giyilebilir cihazlar ve hatta araba ekranları gibi her türlü modern cihazda iyi görünecek şekilde tasarlanmıştır. Bir web sitesini duyarlı hale getirmek için, belirli koşullara bağlı olarak öğelerini otomatik olarak yeniden boyutlandırmak için CSS ve HTML kodunuzu değiştirmeniz gerekir. Bu wikiHow makalesi sana, temel duyarlı web tasarımını nasıl planlayıp uygulayacağını öğretir.
adımlar
Yöntem 1/3: Duyarlı Tasarım Planlama
Adım 1. Kitlenizin web sitenizi nasıl kullandığını öğrenin
Bu günlerde, internette gezinen insanların çoğu bunu cep telefonlarından ve tabletlerden yapıyor. Bir sitenin duyarlı olması için, nerede görüntüleniyor olursa olsun düzgün görüntülendiğinden emin olmalısınız. Zaman ve para önemliyse, kullanıcılarınız arasında en popüler olan cihaz türlerine (bu bilgi mevcutsa) ve sitenizi nasıl kullandıklarına odaklanın. Analitik yazılımınızı veya başka bir araştırma biçimini kullanarak şunları öğrenin:
- Cep telefonu/tablet/bilgisayar markalarına ve ekran/çözünürlük boyutlarına özellikle dikkat ederek web sitesini görüntülemek için en sık ne tür cihazları kullandıkları.
- Kullanıcılarınız arasında en popüler olan tarayıcılar. Küresel istatistikler söz konusu olduğunda, Google Chrome dünya çapında en popüler web tarayıcısıdır, ancak Safari ikinci sıradadır.
- Ziyaretçilerinizin web sitenizi nasıl kullandıkları, örneğin onu görüntülemek için ne kadar zaman harcadıkları, nerede görüntüledikleri ve hangi içeriğin en popüler olduğu gibi. Bu, hangi tür içeriğin dahil edilmesinin önemli olduğunu ve hangilerinin atlanabileceğini belirlemenize yardımcı olabilir.
Adım 2. Farklı cihazlar için farklı düzenler tasarlayın
Bir kullanıcının cihazını ve yeteneklerini (Java, Flash vb. destekleyip desteklemediğini) tespit etmek ve buna göre sitenizin belirli bir sürümünü görüntülemek için CSS ve JavaScript kombinasyonunu kullanabilirsiniz. CSS Medya Sorguları, özellikle cihazın boyutunu/çözünürlüğünü belirlemek için kullanışlıdır.
Adım 3. Farklı etkileşim türlerini hesaba katın
Ziyaretçiniz bir fare, klavye, dokunmatik ekran ve hatta görme engelli kişiler için bir ekran okuyucu kullanarak web sitenizle etkileşime giriyor olabilir. Bunu göz önünde bulundurarak web siteniz fare tıklamalarına, klavye tuşlarına (Tab, Enter, Return vb.) ve ekran parmak dokunuşlarına yanıt vermelidir.
Fareyle üzerine gelme efektleri, fare dışında hiçbir şeyle çalışmaz. Bu efektleri kullanmak yerine, daha önce fareyle üzerine gelindiğinde görüntülenenleri görüntülemek için ziyaretçinin bir düğmeyi veya simgeyi tıklatmasını zorunlu kılabilirsiniz
Adım 4. Bir İçerik Yönetim Sistemi (CMS) kullanmayı düşünün
Site tasarımınızın duyarlı olmasını sağlamanın kolay bir yolu, önceden oluşturulmuş duyarlı bir temaya sahip bir CMS kullanmaktır. Joomla, Drupal veya Wordpress gibi bir CMS kullanmak, duyarlı öğeleri kendiniz kodlamak zorunda kalmadan web sitenizin tüm cihazlarda harika görünmesini sağlamanıza olanak tanır. Hizmetinizde hangi CMS araçlarının mevcut olduğunu görmek için web barındırma sağlayıcınıza danışın.
Adım 5. Web sitenizi test etmek için çevrimiçi araçları kullanın
Duyarlı web tasarımının popülaritesi arttığına göre, web sitenizi test etmek için kullanabileceğiniz çeşitli ücretsiz araçlar var. Web sitenizi zaten kodladıysanız, çeşitli koşullarda nasıl göründüğünü test etmek için bu araçları kullanın, böylece yanıt verme hızını nerede iyileştirmeniz gerektiğini bilirsiniz:
- Google'dan Mobil Uyumluluk Testi: Sitenizin bilgisayar ekranlarında olduğu gibi mobil cihazlarda da çalışıp çalışmadığını bilmenizi sağlar.
- resizeMyBrowser: Sitenizi farklı çözünürlüklerde görüntülemenizi sağlar.
- Sorumlu: Sitenizi farklı cihaz ekranlarında farklı düzenlerde (yan veya sağ taraf yukarı) görüntüler.
Yöntem 2/3: Sayfa Düzenini Duyarlı Yapma
Adım 1. Ücretsiz, duyarlı bir stil sayfası çerçevesi düşünün
Çerçeve, siteniz için bir iskelet olarak kullanabileceğiniz önceden yazılmış bir HTML, CSS ve/veya JavaScript kümesidir. Çerçevelerin tümü tüm tarayıcılarla çalışacak şekilde test edilmiş ve optimize edilmiştir, bu nedenle tek yapmanız gereken içeriğinizi eklemek, medya ve renk tercihlerinizi eklemek ve sitenizi yayınlamaktır. Bazı popüler çerçeveler şunlardır:
- Önyükleme
- iskelet
- temel
Adım 2. Görünümü bir meta etiketle ayarlayın
Bir çerçeve kullanmıyorsanız, duyarlı bir web sitesini kodlamanın en önemli yönü ile başlamak isteyeceksiniz: Görünüm Alanı. Görünüm alanı, web sitesinin kullanıcı tarafından görülebilen kısmıdır. Ekran boyutundan bağımsız olarak sitenizin düzgün görüntülenmesini sağlamanın anahtarı, META etiketindeki görüntü alanı boyutunu ölçeklendirmektir. Bunu yapmak için sitedeki her sayfanın en üstüne bu etiketi ekleyin:
Adım 3. Görünüm alanına göre metin boyutunu belirleyin
Görünüm alanınız ayarlandıktan sonra, sayfanızdaki metin ekrana sığacak şekilde ölçeklenir. Ancak, boyutları görünüm alanına göre belirtilmemişse, yazı tipleri çok büyük veya çok küçük görüntülenebilir. Bunu, yazı tipi boyutunu vw birimiyle görünümün belirli bir yüzdesi olarak tanımlayarak yapabilirsiniz. Bu örnek, boyutu ne olursa olsun, H1 başlıklarının görünümün genişliğinin %10'unda görüntülenmesini söyler:
wikiHow
Adım 4. Farklı ekran boyutları için farklı stiller göstermek için medya sorgularını kullanın
Medya sorguları, ekran boyutuna bağlı olarak belirli CSS öğelerinin görüntülenip görüntülenmeyeceğini seçmenize olanak tanır. Medya sorgunuzun özelliklerini CSS dosyanızda belirtebilirsiniz. Bu örnekte, kullanıcının ekran boyutu 480 piksel veya daha büyükse gövdenin arka plan rengi kırmızıya dönecektir:
wikiHow
@medya ekranı ve (min-width: 480px) { body { background-color: aqua; } }
Yöntem 3/3: Görüntüleri Duyarlı Yapma
Adım 1. Görüntüleri ölçeklendirmek için CSS genişlik özelliğini kullanın
Resmin genişliğini belirli bir piksel miktarına (ör. 500 piksel) ayarlamak yerine, görüntünün üst öğesinin genişliğine bakması ve buna göre ayarlaması için bir yüzde (ör. %100) kullanın. Bir görüntünün genişliğini %100'e ayarlamak, görüntüyü, izleyicinin ekranının boyutuna bağlı olarak yukarı ve aşağı ölçeklemeye zorlar. Bunu satır içi yapmak için:
Adım 2. Resmin gerçek boyutunun ölçeklenmesini sınırlamak için max-width özelliğini kullanın
Bir görüntüyü %100'e ölçeklemek için önceki adımda genişlik özelliğini kullanırsanız, boyut ne olursa olsun görüntü, kabının %100'üne sığacak şekilde büyür veya küçülür. Bu, görüntü daha küçükse, orijinal boyutundan daha büyük ölçekleneceği ve daha düşük kalitede görüneceği anlamına gelir. Bunun olmasını önlemek için görüntünün maksimum ölçekleme boyutunu %100'e (gerçek boyutu) ayarlamak için maksimum genişlik seçeneğini kullanın. İşte nasıl:
Adım 3. Farklı görüntüleri farklı ekran boyutlarında görüntülemek için HTML resim öğesini kullanın
Farklı boyuttaki ekranlarda görüntülenecek özel boyutlu görüntüler oluşturmak istiyorsanız, HTML kodunuzda hangi fotoğrafların görüntüleneceğini belirleyebilirsiniz. Farklı boyutlu görüntüler oluşturun ve ardından 600px ve 1500px genişliğindeki ekranlarda hangi görüntünün kullanılacağını belirtmek için bu kodu örnek olarak kullanın:
