Duyarlı Bir Web Sitesi Oluşturmak İçin Kolay Bir Kılavuz

Görüntülemek için kullandığınız cihazdan bağımsız olarak kaç tane modern web sitesinin bu kadar mükemmel "uyduğunu" her zaman merak ettiniz mi? Duyarlı bir web sayfasını kodlamak, günümüzde birçok yeni web sitesinde yaygın olarak kullanılan yaygın bir uygulamadır. Duyarlı web sayfaları, web sitesini görüntülemek için kullanılan cihazın ekranına uyacak şekilde kendilerini yeniden boyutlandırarak akıllıca bir numara gerçekleştirir. Bu, bir iPhone veya masaüstü bilgisayarda ve aradaki her şeyde harika göründükleri anlamına gelir.

Bu "duyarlılık" o kadar kusursuz bir şekilde gerçekleşir ki, gerçekten fark etmemiş olabilirsiniz. Harika bir duyarlı web tasarımı, optimum tarama deneyiminin korunmasını sağlarken cihazdan cihaza sorunsuz bir şekilde akmalıdır. Duyarlı web siteleri, 'olması güzel' bir özellik olmaktan, artık herhangi bir web sitesi için oldukça zorunlu olan bir şeye dönüştü. Neden? Niye? Oldukça basit, çünkü artık internette gezinmek için mobil cihazları kullanan insan sayısı son yıllarda arttı ve mobil cihazlara (ve dolayısıyla daha küçük ekranlara) yönelik bu eğilim yavaşlama belirtisi göstermiyor.

Aşağıdaki verilere bir göz atın (statcounter.com'un izniyle sağlanır). Açık farkla en yaygın ekran boyutlarının küçük olduğunu göreceksiniz (yani mobil ekranlar).

Tüm bu milyonlarca kullanıcının bu cihazlarda yanıt vermeyen web sitelerine bakmak zorunda kaldığını hayal edin. İlgili web sitelerindeki içeriği yeterince görebilmek için çok sayıda 'tuta ve yakınlaştırma' eylemi yapmayı gerektireceğinden, büyük ölçüde hüsrana uğrayacaklardır. Bu kullanıcıların, duyarlı bir eşdeğeri lehine bu web sitelerini terk etme ihtimalleri yüksektir.

Potansiyel müşterileri kaybetmek sizi duyarlı bir web sitesine sahip olmanın değeri konusunda ikna etmek için yeterli değilse, o zaman belki de arama sıralamalarını kaybetme düşüncesi olabilir. Google, mobil kullanıcılar için bir tür duyarlı veya uyarlanabilir tasarım sunmayan web sitelerini bir süredir cezalandırmıştır. Bu, web siteniz bir mobil cihazda iyi çalışmıyorsa, bir sıralama cezası almayı bekleyeceğiniz anlamına gelir. Cep telefonunda 'güzel çalışır' ne anlama gelir? Peki, içeriğin kullanıcı dostu bir şekilde görüntülenmesi gerekiyor. Bu, sıkıştırmadan ve yakınlaştırmadan okunabilmesi gerektiği anlamına gelir. Ayrıca hızlı bir şekilde yüklenmesi gerekir (WordPress Önbelleğe Alma'nın hız hedeflerinize nasıl yardımcı olabileceğiyle ilgilenirseniz, 'WordPress Önbelleğe Alma - Nasıl Çalışır ve Neden Kullanmalısınız? !')

Duyarlı Web Sayfaları ve Uyarlanabilir Web Sayfaları

On ya da yirmi yıl geriye gidersek, cep telefonları şimdiki kadar yaygın değildi. Kesinlik, web'de gezinmenize izin vererek iyi bir iş çıkaranlar gerçekten 2005'e kadar ulaşmaya başlamamıştı (inanılmaz görünse de iPhone 2007'ye kadar sahneye çıkmamıştı). Hücresel ağlar da fazla veri taşıyamıyordu, bu da mobil web taraması için sınırlı fırsat olduğu anlamına geliyordu. Bu, son on yılda hızla değişti ve web siteleri, artık kendimizi bulduğumuz yeni mobil odaklı dünyada müşterilerine daha iyi hizmet verebilmek için yetişmek için uğraşmaya başladı.

Web tasarımcılarının bir 'masaüstü' web sitesini bir mobil ekrana sığdırma ihtiyacını çözmek için çalıştıkları birkaç yol vardı. İlk günlerde, bir web sitesinin ana 'masaüstü' versiyonuyla birlikte çalışan bağımsız 'yalnızca mobil' web siteleri geliştirildi. Bunlar normalde oldukça kaba tasarımlardı ve sıklıkla daha büyük, masaüstü kardeşlerinin birçok özelliğini atlayan soyulmuş bir geri tarama deneyimi sunuyordu.

Bundan sonra, Adaptive Design sahneye çıktı. Bu, özel olarak tasarlanmış bir mobil web sitesi sunmanın yalnızca mobil sürümünü bir adım öteye taşıdı. Kullanıcı için daha çekici bir mobil tarama deneyimi sunan birden çok statik düzen oluşturulur. Web sitesini kullanan cihazın ekran boyutu yüklenir ve en uygun boyut sunulur. Tipik olarak, büyük bir masaüstünden bir cep telefonuna kadar değişen ekranları karşılamak için altı boyut oluşturulur. Bununla birlikte, uyarlanabilir tasarım bir şekilde sınırlayıcıdır ve inşa edilmiş olan set 6 kategorisine tam olarak girmeyen ekran boyutlarına hitap edemediği için kesinlikle geleceğe yönelik değildir. Ayrıca, bir web sitesinin 6 versiyonunun oluşturulması gerektiğinden, tasarım açısından kaynak yoğundur.

Uyarlanabilir tasarımlarla ilgili birincil dezavantajlar, Duyarlı Tasarım ile çözüldü. Duyarlı tasarımlar, ekran boyutuna dayalı önceden oluşturulmuş bir düzen sunmak yerine, nasıl oluşturulduklarını cihaza göre ayarlar. Bu, web sitesini görüntülemek için hangi cihaz (ve buna karşılık gelen ekran boyutu) kullanılırsa kullanılsın, iyi görünümlü ve kullanıcı dostu bir web sitesine sahip olmanız gerektiği anlamına gelir.

Duyarlı tasarım artık mobil web siteleri için endüstri standardı olarak kabul ediliyor. Aslında, Google'ın kendisi Duyarlı Web Tasarımını önermektedir. Bu eğitimde, yeni başlayanlar için duyarlı tasarıma ve bunun web sitenizin düzenine nasıl uygulanabileceğine bakacağız.

Duyarlı Web Siteleri Nasıl Çalışır?

Duyarlı web siteleri, bir web sitesinin düzenini ekran genişliğine göre değiştirmek için CSS Medya Sorguları denilen şeyi kullanır. CSS Medya Sorguları, temel bir CSS anlayışınız varsa, dağıtımı oldukça basit olan güçlü bir araçtır. Duyarlı bir web sitesi oluşturma sürecine dalmadan önce başlamanız gereken bir yer, birkaç canlı örneğe bakmaktır. Bunu yapmanın en iyi yolu bir masaüstü veya dizüstü bilgisayar ekranındadır. Chrome gibi bir tarayıcı açın ve popüler bir web sitesine gidin. Pressidium.com'da kendimizinkini denemek isteyebilirsiniz.

Tarayıcı penceresi boyutunu küçültün ve ardından tarayıcı penceresinin sağ kenarının üzerine gelerek pencereyi daraltarak kaydırmaya başlayın. Site küçüldükçe site düzeninin değiştiğini göreceksiniz. Olan şudur: Web sitesi önceden tanımlanmış bir boyuta ulaştığında (örneğin 1.000 piksel genişliğinde), tarayıcıya bu ekran genişliğiyle ilgili CSS stilini kullanmasını söyleyen bir CSS Medya Sorgusu tetiklenir. Web sitesi daha sonra incelikle akar veya bu yeni ekran boyutuna yanıt verir ve buna göre görüntülenir. Oldukça zeki!

Şimdi, neler olup bittiğine dair temel bir anlayışa sahibiz, hadi nitty cesurluğuna dalalım ve kendimize nasıl duyarlı bir web sayfası oluşturabileceğimizi görelim.

Duyarlı Web Sayfası Oluşturma

Bu eğitimde herhangi bir arka uç kodu kullanmayacağız, bu yüzden bunu denemek için bir sunucuya erişmeye gerek yok. Sadece masaüstünüzde bir klasör oluşturun ve çalışma dosyalarınızı buna ekleyin.

1. Adım: HTML

Yeni klasörünüzün içinde bir index.html dosyası oluşturun. Bu dosyayı favori metin/kod düzenleyicinizle açın ve ardından aşağıdaki kodu ekleyin:

 <!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div> <div> <h1>My website</h1> <div> <div class="post"> <h3 class="post-title">Post 1 title</h3> <p><b>post 1 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 2 title</h3> <p><b>post 2 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 3 title</h3> <p><b>post 3 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 4 title</h3> <p><b>post 4 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 5 title</h3> <p><b>post 5 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div> <div> <h3>Menu title</h3> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> </div> </div> </div> </body> </html>

2. Adım: Harici CSS

Harici bir style.css dosyası eklemeniz gerekecek. Bunu yapmak için style.css adında bir dosya oluşturun ve bunu index.html dosyanızla aynı klasöre yerleştirin. Ardından, aşağıdaki kodu ekleyin:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 900px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div#sidebar { width: 300px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

Bu noktada index.html dosyanızı internet tarayıcınız ile açarsanız (bu örnekte Chrome kullandık), sayfanızda görmeniz gereken şey şu şekildedir:

Şimdi tarayıcımızın geliştirici araçlarına bir göz atalım (yine bu örnek için Chrome kullanıyoruz). Chrome'u açın ve F12'ye basın ve sağ tarafta görüntülenecek şekilde ayarlayın.

Ayırıcı imleci hareket ettirerek pencere boyutunu değiştirin ve gerçek zamanlı olarak değişen ekran çözünürlüğünü izleyin.

3. Adım: CSS Göreli Birimler

Örneğimizde, 1396 piksel genişliğe sürüklerseniz, menülü sağ kenar çubuğunun artık sığmayacağı için ana içeriğin altına taşınacağını fark edeceksiniz.

Bunun nedeni, div#main üzerinde 900 piksel ve div#sidebar üzerinde 300 piksel sabit bir genişlik ayarlamış olmamızdır. Bu değerlerin biçimini değiştirelim ve bunun yerine yüzdeleri kullanalım. (Dolguların ve kenar boşluklarının da genişlik olarak sayıldığını, dolayısıyla bu değerlerin de bir yüzdeye dönüştürülmesi gerektiğini unutmayın.)

Bu düzenlemeleri yaptığınızda style.css şöyle görünmelidir:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

Artık daha duyarlı hale gelen bir sayfamız olduğu için bu artık heyecan verici hale geliyor!

İşler şekilleniyor olsa da, gönderiler alanı biraz daha CSS düzenlemesine ihtiyaç duyuyor. Genişlik ne kadar küçük olursa, posta kutuları o kadar "çirkin" olur. Bunu aşmak için, daha güzel ve daha duyarlı bir düzen elde etmek için CSS postasını düzenlememiz gerekiyor.

Görsel sorunların yalnızca ekran daraldığında meydana geldiğini fark edeceksiniz. Bu sorunu çözmek için, belirli bir noktadan sonra daha iyi görünen bir düzen oluşturan alternatif CSS'nin devreye girmesi için bazı CSS medya sorguları kullanmamız gerekecek.

Deneyeceğimiz ve yapacağımız şey, 'geniş ekran' 3 sütunlu yazı alanımızı daha dar bir ekrana daha iyi sığacak 2 sütunlu bir alana dönüştürmek. Bunu başarmak için CSS medya sorgularını kullanıyoruz.

4. Adım: CSS Medya Sorguları

'Geniş ekran' modumuz için şuna benzer bir CSS medya sorgusu sunacağız: bu @media screen and (min-width: 1396px) gibi. Bu sorgu, CSS stil sayfamızın en üstünde bulunur ve ekranımız minimum 1396 piksel genişliğindeyken çalıştırmak istediğimiz tüm CSS kümesini kapsar.

Artık bu kodun tamamını kopyalayabilir ve CSS stil sayfamızda çoğaltabiliriz (tek dosyada iki özdeş sürüme sahip olmanız için mevcut CSS'nin altına kopyalayıp yapıştırın). Şimdi, @media screen and (max-width: 1395px) okumak için ikinci CSS grubunun üstündeki CSS medya sorgusunu düzenleyin. Bu şimdi tarayıcımıza 1395 pikselden küçükse bu CSS'yi çalıştırması gerektiğini söylüyor. Şimdi bu yapıldıktan sonra, bu 'daha küçük' bölümde CSS'de ince ayar yapabiliriz, böylece daha küçük bir ekrana daha iyi sığması için web sayfamızın düzenini değiştirir. Bu örnekte ince ayar yapacağız ve orada div.post yüzdesini %31.1'den %45'e değiştirmeliyiz.

Şimdi şuna benzeyen bir CSS dosyanız olmalıdır:

 @media screen and (min-width: 1396px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; } } @media screen and (max-width: 1395px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 45%; float: left; padding: 2%; } }

Gönderi kutularının genişliği 1395 pikselden küçük ekranlar için farklı bir stile sahip olduğuna göre, şimdi bunun eyleme nasıl yansıdığını görelim:

Güzel!

Ölçeği küçültürken ve 760 piksel genişliği geçtikten sonra işlerin hala garipleştiğini fark edeceksiniz.

Bunu sıralamak için, 3 sütundan 2'ye gitmek için kullandığımız numarayı kullanabiliriz. Ancak bu sefer 760 piksellik bir 'kırılma noktası' kullanacağız ve CSS div.post %94 olarak değiştireceğiz. Bunu yaparsak, şöyle görünmesi gereken üç CSS medya sorgumuz olacak:

 @media screen and (min-width: 1396px) { } @media screen and (min-width: 761px) and (max-width: 1395px) { } @media screen and (max-width: 760px) { }

@media screen and (max-width: 760px) CSS, aşağıdaki gibi görünecek olan düzenlenmiş div.post içerecektir:

 div.post { width: 94%; float: left; padding: 2%; }

Her şey yolundayken, tarayıcınızın genişliğini 760 pikselin altına indirdiğinizde aşağıdakine benzer bir şey görmelisiniz:

Ve bu kadar! Artık daha büyük ekranlarda, tabletlerde ve cep telefonlarında çalışan duyarlı bir web sayfası oluşturduk!

Bu şablonu kullanmak, daha fazla oyun oynayın ve diğer CSS stilleriyle denemeler yapın. Bu örnekle oynayarak ve daha sonra güzel VE duyarlı web siteleri oluşturmak için kullanılabilecek çeşitli CSS kurallarını uygulayarak öğrenilecek çok şey var.

Pressidium ile web sitenizi barındırın

60 GÜN PARA GERİ GARANTİSİ

PLANLARIMIZI GÖRÜN

Çözüm

WordPress gibi bir CMS kullanıyorsanız, duyarlı bir web sayfasını güçlendirmek için temeldeki CSS ve medya sorgularını incelemenin neden gerekli olduğunu merak ediyor olabilirsiniz. Sonuçta, düzgün bir şekilde kodlanmış herhangi bir WordPress temasının zaten yerleşik bir duyarlı tasarıma sahip olması gerekir. Bu doğru olsa da, bir web sitesinin belirli tarayıcı genişliklerine dayalı olarak neden böyle davrandığını anlamak son derece yardımcı olabilir. Bazı nedenlerden dolayı, tema yazarı tarafından eklenen ilk duyarlı tasarımın da ihtiyacınız olduğu gibi çalışmadığı zamanlar olabilir. Belirli kırılma noktalarında hangi CSS'nin görüntüleneceğini değiştirmek için medya sorgularının nasıl uygulanacağını bilerek, devam etmekte ve ihtiyaç duyduğunuz görünüm ve işlevle sonuçlanan değişiklikleri uygulamakta özgürsünüz.

Ve eğer kendi WordPress temanızı oluşturmayı planlıyorsanız, medya sorgularının sağlam bir şekilde anlaşılması mutlak bir zorunluluktur! Umarız bu makale size günümüzün duyarlı web sitelerinin perde arkasında neler olduğuna dair bir fikir vermiştir. Mutlu duyarlı kodlama!