Duyarlı Web Tasarımı için Yeni Başlayan Kılavuz (Örnek Kod & Amp; Düzen Örneği)
Mobil cihazlardan artan internet erişimi ile, yalnızca bilgisayar ekranında iyi görünen statik bir web sitesi tasarımına sahip olmak yeterli değildir.
Ücretsiz demoyu deneyin
Bahsetmemek gerekirse, bir tasarım yaparken farklı ekran boyutlarından farklı olan tabletleri, 2’si 1 arada dizüstü bilgisayarları ve akıllı telefon modellerini de dikkate almalısınız. Bu yüzden içeriğinizi bir sütuna tokatlayın ve kesmemesi için durdurun. Duyarlı bir web tasarımı ile web sitenizin mobil, tablet, dizüstü bilgisayar ve masaüstü ekranında en iyisi göründüğünden emin olabilirsiniz. Ve kullanıcı deneyiminin arttırılması, daha yüksek dönüşüm ve iş büyümesi anlamına gelir.
Bu kılavuz, tanımlar, Step -by -adım yönergeleri, örnekler ve daha fazlası dahil olmak üzere duyarlı web sitesi tasarımı hakkında bilmeniz gereken her şeyi size verecektir.
Duyarlı web tasarımı için video kılavuzumuza bakın: Duyarlı bir web tasarımı nedir? Duyarlı tasarım, web içeriğinizi çeşitli cihazlardan çeşitli ekran boyutlarına ve pencerelere uyum sağlayan bir web tasarım yaklaşımıdır. Örneğin, içeriğiniz masaüstü ekranda farklı sütunlara ayrılabilir, çünkü tasarımı karşılayacak kadar geniştir. İçeriğinizi mobil cihazdaki birkaç sütuna ayırırsanız, kullanıcıların okuması ve etkileşime girmesi zor olacaktır.
Duyarlı tasarım, bazı ayrı içerik düzenlerinizin ve tasarımlarınızın ekran boyutuna bağlı olarak farklı cihazlara teslim edilmesini sağlar. Web sitenizin bilgisayar ekranında iyi görünmesi yeterli değildir. Tabletler, 2’si 1 arada dizüstü bilgisayarlar ve akıllı telefonlar denklemin bir parçasıdır … ve bu kılavuz, duyarlı web tasarım tweet’leri için duyarlı tasarım tıklamaları hakkında bilmeniz gereken her şeyi içerir. Duyarlı tasarım ve uyarlanabilir tasarım arasındaki uyarlanabilir tasarım farkı Bu tasarım duyarlı uyarlama oluşturma bir sayfa versiyonundan. Tersine, uyarlanabilir tasarım aynı sayfadan tamamen farklı olan birkaç versiyon sağlar. Duyarlı ve uyarlanabilir tasarım
Her ikisi de Webmaster’ın sitelerinin görünümünü farklı ekranlarda kontrol etmesine yardımcı olan önemli web tasarımı trendleridir, ancak yaklaşım farklıdır. Duyarlı bir tasarımla, kullanıcılar cihazdan bağımsız olarak aynı temel dosyaya tarayıcıları aracılığıyla erişecek, ancak CSS kodu düzeni kontrol edecek ve ekran boyutuna göre farklı hale getirecektir. Uyarlanabilir bir tasarımla, ekran boyutunu kontrol eden, ardından cihaz için tasarlanmış şablona erişen bir komut dosyası vardır. Web tasarımı, geliştirme veya bloglama konusunda yeniyseniz, duyarlı tasarım neden önemlidir, duyarlı tasarımın neden önemli olduğunu merak ediyor olabilirsiniz.
Cevap basit. Artık bir cihaz için tasarlanacak kadar değil. Hücresel web trafiği masaüstünü aştı ve şimdi%51’den fazla sayan web sitesi trafiğinin çoğunluğu.
Hücresel pazar payı, tablet, masaüstü
Cevap basit. Artık bir cihaz için tasarlanacak kadar değil. Hücresel web trafiği masaüstünü aştı ve şimdi%51’den fazla sayan web sitesi trafiğinin çoğunluğu.
Hücresel pazar payı, tablet, masaüstü
Potansiyel ziyaretçilerinizin yarısından fazlası interneti keşfetmek için mobil cihazlar kullandığında, yalnızca masaüstü için tasarlanmış sayfaları sunamazsınız. Okumak ve kullanmak zor olacak ve kötü kullanıcı deneyimlerine neden olacak. Ama hepsi bu değil. Mobil cihazlardaki kullanıcılar da arama motoru ziyaretlerinin çoğunluğudur. Ardından mobil trafik
Son olarak, son birkaç yılda, Cellular en önemli reklam kanallarından biri haline geldi. Post -Pandemi Pazarı’nda bile, hücresel reklam harcamaları% 4.8 artarak 91.52 milyar dolara yükseldi. Sosyal medyada reklam vermeyi veya SEO YouTube gibi organik bir yaklaşım kullanmayı seçin, trafiğinizin çoğu hücresel kullanıcılardan gelecektir. Yön sayfanız hücresel ve kullanımı kolay için optimize edilmezse, ROI’yi pazarlama çabalarınızdan en üst düzeye çıkaramazsınız. Kötü dönüşüm oranları, boşuna reklam ve reklam harcamaları üretecektir.
Son olarak, son birkaç yılda, Cellular en önemli reklam kanallarından biri haline geldi. Post -Pandemi Pazarı’nda bile, hücresel reklam harcamaları% 4.8 artarak 91.52 milyar dolara yükseldi. Sosyal medyada reklam vermeyi veya SEO YouTube gibi organik bir yaklaşım kullanmayı seçin, trafiğinizin çoğu hücresel kullanıcılardan gelecektir. Yön sayfanız hücresel ve kullanımı kolay için optimize edilmezse, ROI’yi pazarlama çabalarınızdan en üst düzeye çıkaramazsınız. Kötü dönüşüm oranları, boşuna reklam ve reklam harcamaları üretecektir.
WordPress sitesi duyarlı mı? WordPress sitesinin duyarlı olup olmadığı veya WP sitenizin temasına bağlı olup olmadığı. WordPress teması, statik bir web sitesi için şablona eşdeğerdir ve içeriğinizin tasarımını ve düzenini kontrol eder. Varsayılan WordPress temasını kullanırsanız, Yirmi Yirmi gibi, tasarım duyarlıdır, ancak bu bir sütunun tasarımı olduğundan, farklı bir ekranda gördüğünüzde fark etmeyebilirsiniz. Başka bir WordPress teması kullanıyorsanız, görünüşünü farklı bir cihazda veya bir Chrome geliştiricisi kullanarak karşılaştırarak duyarlı olup olmadığını test edebilirsiniz.
Duyarlı Web Tasarım Yapı Taşı Bu bölümde, farklı bir duyarlı web sitesinin ve yapı taşlarının tasarımının temelini tartışacağız. CSS ve HTML Duyarlı Temel Tasarım, içeriği kontrol eden iki dil olan HTML ve CSS’nin bir kombinasyonudur. ve herhangi bir web sitesinde tarayıcıdaki sayfaların düzeni.
HTML vs CSS (görüntü kaynağı: codingdojo.com)
HTML esas olarak web sayfalarının yapısını, öğelerini ve içeriğini kontrol eder. Örneğin, web sitesine resim eklemek için şu şekilde html kodu kullanmalısınız:
Duyarlı Web Tasarım Yapı Taşı Bu bölümde, farklı bir duyarlı web sitesinin ve yapı taşlarının tasarımının temelini tartışacağız. CSS ve HTML Duyarlı Temel Tasarım, içeriği kontrol eden iki dil olan HTML ve CSS’nin bir kombinasyonudur. ve herhangi bir web sitesinde tarayıcıdaki sayfaların düzeni.
HTML vs CSS (görüntü kaynağı: codingdojo.com)
HTML esas olarak web sayfalarının yapısını, öğelerini ve içeriğini kontrol eder. Örneğin, web sitesine resim eklemek için şu şekilde html kodu kullanmalısınız:
“class” veya “ayarlayabilirsiniz. ID “Daha sonra CSS kodu ile hedefleyebileceğiniz şey.
HTML’nizde yükseklik ve geniş gibi ana özellikleri de kontrol edebilirsiniz, ancak bu artık en iyi uygulama olarak kabul edilmez. Bunun yerine, CSS, HTML ile sayfaya eklediğiniz öğelerin tasarımını ve düzenini düzenlemek için kullanılır. CSS kodu, HTML belgesinin bölümüne veya ayrı bir stil sayfası dosyası olarak girilebilir. Örneğin, tüm HTML görüntülerini şunun gibi öğelerde düzenleyebiliriz: img {genişlik:%100; } Veya önümüzdeki bir nokta ekleyerek belirli sınıfları “tam genişlik-img” hedefleyebiliriz. .full-width-img {genişlik:%100; } Yükseklik, geniş ve renk dışında tasarımı da kontrol edebilirsiniz. Bunun gibi CSS kullanmak, medya sorgusu adı verilen bir teknikle birleştirdiğinizde tasarımı nasıl duyarlı hale getirirsiniz.
HTML’nizde yükseklik ve geniş gibi ana özellikleri de kontrol edebilirsiniz, ancak bu artık en iyi uygulama olarak kabul edilmez. Bunun yerine, CSS, HTML ile sayfaya eklediğiniz öğelerin tasarımını ve düzenini düzenlemek için kullanılır. CSS kodu, HTML belgesinin bölümüne veya ayrı bir stil sayfası dosyası olarak girilebilir. Örneğin, tüm HTML görüntülerini şunun gibi öğelerde düzenleyebiliriz: img {genişlik:%100; } Veya önümüzdeki bir nokta ekleyerek belirli sınıfları “tam genişlik-img” hedefleyebiliriz. .full-width-img {genişlik:%100; } Yükseklik, geniş ve renk dışında tasarımı da kontrol edebilirsiniz. Bunun gibi CSS kullanmak, medya sorgusu adı verilen bir teknikle birleştirdiğinizde tasarımı nasıl duyarlı hale getirirsiniz.
Medya Medya Soruları Media, CSS3’ün, içeriği ekran boyutu veya çözünürlük gibi çeşitli faktörlere uyum sağlayacak şekilde oluşturmanızı sağlayan temel parçasıdır.
Masaüstü, tabletler, akıllı telefonlar için medya sorguları, bazı programlama dillerindeki “If” maddelerine benzer şekilde çalışır, temel olarak ekran görünümünün uygun kodu yürütmeden önce geniş veya çok geniş olup olmadığını kontrol eder. @Media ekran ve (min-width: 780px) {.full-width-img {margin: otomatik; Genişlik:%90; } Ekran genişliği en az 780 piksel ise, “tam genişlik-img” sınıf görüntüsü ekranın% 90’ını işgal eder ve otomatik olarak aynı genişlik marjıyla ortalanır.
Sıvı düzeni, düzgün bir düzendir, modern duyarlı bir tasarımın önemli bir parçasıdır. Geçmişte, her HTML öğesi için 600 piksel gibi statik bir değer belirleyeceksiniz. Pürüzsüz düzen, görünüm portu genişliğinin yüzdesi gibi dinamik değere bağlıdır.
Sıvı düzeni örnekleri
Masaüstü, tabletler, akıllı telefonlar için medya sorguları, bazı programlama dillerindeki “If” maddelerine benzer şekilde çalışır, temel olarak ekran görünümünün uygun kodu yürütmeden önce geniş veya çok geniş olup olmadığını kontrol eder. @Media ekran ve (min-width: 780px) {.full-width-img {margin: otomatik; Genişlik:%90; } Ekran genişliği en az 780 piksel ise, “tam genişlik-img” sınıf görüntüsü ekranın% 90’ını işgal eder ve otomatik olarak aynı genişlik marjıyla ortalanır.
Sıvı düzeni, düzgün bir düzendir, modern duyarlı bir tasarımın önemli bir parçasıdır. Geçmişte, her HTML öğesi için 600 piksel gibi statik bir değer belirleyeceksiniz. Pürüzsüz düzen, görünüm portu genişliğinin yüzdesi gibi dinamik değere bağlıdır.
Sıvı düzeni örnekleri
Bu yaklaşım, ekran boyutuna göre farklı rezervuar öğelerinin boyutunu dinamik olarak ekleyecek veya azaltacaktır. FlexBox Düzeni Düzen düzgün bir yüzdeye dayanırken, birçok tasarımcı ve web geliştiricisi bunun oldukça dinamik veya esnek olmadığını düşünüyor. Flexbox, kapsayıcıdaki içeriğin boyutu bilinmemekle bile, birkaç öğeyi koymak için daha verimli bir yol olarak tasarlanmış bir CSS modülüdür. Esnek konteyner, kullanılabilir boş alanı doldurmak için öğeleri genişletir veya taşmayı önlemek için azaltır. Bu esnek kapsayıcı, sıradan HTML öğeleriyle düzenleyemeyeceğiniz Justify içeriği gibi bir dizi benzersiz özelliğe sahiptir.
Esnek kutu kabı
Bu karmaşık bir konudur, bu nedenle tasarımınızda kullanmak istiyorsanız, CSS Flexbox Hile Kılavuzu’nu okumalısınız.Duyarlı görüntülerin yinelemesinin en temel duyarlı görüntüsü, genişliği veya yüksekliği kontrol etmek için dinamik bir birim kullanarak pürüzsüz bir düzen ile aynı kavramı takip eder.Daha önce tartıştığımız CSS kodu örnekleri bunu tamamladı: IMG {genişlik:%100;} Birim %, görünüm alanının genişliğine veya yüksekliğine yaklaşır ve görüntünün ekranla orantılı kalmasını sağlar.Bu yaklaşımla ilgili sorun, her kullanıcının bir cep telefonuna bile tam boyutlu bir görüntü indirmesi gerektiğidir.Farklı cihazlar için gözden düşmüş farklı bir sürüm sunmak için, aralarından fazla görüntü boyutunu belirlemek için IMG etiketinizde SRCSET HTML özniteliğini kullanmanız gerekir.
Esnek kutu kabı
Bu karmaşık bir konudur, bu nedenle tasarımınızda kullanmak istiyorsanız, CSS Flexbox Hile Kılavuzu’nu okumalısınız.Duyarlı görüntülerin yinelemesinin en temel duyarlı görüntüsü, genişliği veya yüksekliği kontrol etmek için dinamik bir birim kullanarak pürüzsüz bir düzen ile aynı kavramı takip eder.Daha önce tartıştığımız CSS kodu örnekleri bunu tamamladı: IMG {genişlik:%100;} Birim %, görünüm alanının genişliğine veya yüksekliğine yaklaşır ve görüntünün ekranla orantılı kalmasını sağlar.Bu yaklaşımla ilgili sorun, her kullanıcının bir cep telefonuna bile tam boyutlu bir görüntü indirmesi gerektiğidir.Farklı cihazlar için gözden düşmüş farklı bir sürüm sunmak için, aralarından fazla görüntü boyutunu belirlemek için IMG etiketinizde SRCSET HTML özniteliğini kullanmanız gerekir.
WordPress, bu işlevi, yayınlarda veya sayfalarda bulunan görüntüler için otomatik olarak kullanır. Hız Web siteniz için duyarlı tasarım oluşturmaya çalıştığınızda, yükleme hızı en önemli öncelik olmalıdır. 2 saniye içinde yüklenen sayfanın ortalama%9 oranı,%38 oranının üretilmesi 5 saniye sürer. Duyarlılığa yaklaşımınız, sayfanızın ilk çaresini olması gerekenden daha fazla engellememeli veya geciktirmemelidir. Sayfanızı daha hızlı yapmanın birkaç yolu vardır. Görüntünüzü optimize etmek, önbellekleme, minififler uygulamak, daha verimli bir CSS düzeni kullanarak, oluşturmayı engelleyen JS’den kaçınmak ve önemli oluşturma yolunuzu arttırmak dikkate almanız gereken iyi bir fikirdir. Hücresel sayfanıza Google AMP’yi uygulamayı da deneyebilirsiniz, ancak Google AMP vaka çalışmamızda hücresel beklentilerimiz%59 düştü. Ortak Duyarlı Kesme Medya Sorguları ile çalışmak için, “geçici duyarlı nokta” veya ekran boyutunun ekran boyutuna karar vermeniz gerekir. Breakpoint, yeni CSS stilini uygulamak için bir medya sorgusu kullandığınız ekranın genişliğidir. Bültenlere kaydolun
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Şimdi abone olun
Genel ekran boyutu
Hücresel: 360 x 640
Hücresel: 375 x 667
Hücresel: 360 x 720
Genel ekran boyutu
Hücresel: 360 x 640
Hücresel: 375 x 667
Hücresel: 360 x 720
iPhone X: 375×812
Pixel 2: 411 x 731
Tablet: 768 x 1024
Dizüstü bilgisayar: 1366×768
Dizüstü bilgisayar veya masaüstü Yüksek Çözünürlük: 1920 x 1080
Temel olarak bir sütun ve daha küçük yazı tipi boyutuyla hücresel öncelik veren bir tasarım yaklaşımı seçerseniz, tasarımı belirli bir model için optimize etmek istemediğiniz haliyle hücresel bir durma noktası eklemenize gerek yoktur.)
Böylece, biri tabletler için, diğeri dizüstü bilgisayarlar ve masaüstü bilgisayarlar için sadece iki geçici durdurma noktasına sahip temel duyarlı tasarımlar oluşturabilirsiniz. Bootstrap Bootstrap Duyarlı Breakpoint ilk ve en popüler duyarlı çerçevelerden biri olarak Bootstrap, statik web tasarımına saldırılara yol açar ve hücresel endüstriyel standartlar olarak öncelik veren tasarımın ayarlanmasına yardımcı olur. Sonuç olarak, bugün birçok tasarımcı hala bootstrap ekran geniş kesme noktasını takip ediyor.
Breakpoint Requestife Bootstrap
Peyzaj cep telefonlarını (576 piksel), tabletleri (768 piksel), dizüstü bilgisayarları (992 piksel) ve ekstra büyük masaüstü ekranlarını (1200 piksel) hedeflemek için medya sorguları kullanıyorlar. Web sitenizi nasıl duyarlı hale getirirsiniz Şimdi yapı taşlarına alıştıktan sonra, web sitenizi duyarlı oluşturmanın zamanı geldi.
Medya sorgularınızın aralığını ayarlayın (BreakPoint Duyarlı) Medya sorgularınızın aralığını tasarımınızın benzersiz ihtiyaçlarına göre ayarlayın. Örneğin, tasarımımız için Bootstrap standardını takip etmek istiyorsak, aşağıdaki medya sorgularını kullanacağız:
Portre Mobile için 576px
Tabletler için 768px
Dizüstü bilgisayarlar için 992 piksel
Dizüstü bilgisayarlar için 992 piksel
Büyük cihazlar için 1200 piksel
Düzen öğesinin bir yüzdeye sahip boyutu veya CSS kutusunun düzenini önce ve en önemli adım, medya sorgusuna veya ekranın durdurma noktasına bağlı olarak farklı düzen öğeleri için farklı bir boyut hazırlamaktır. Sahip olduğunuz düzen kaplarının sayısı tasarıma bağlı olacaktır, ancak çoğu web sitesi aşağıda listelenen öğelere odaklanır: ambalaj veya kapsayıcı
Başlık
Doldurmak
Yan bıçaklar
dipnot
Genel düzen
Hücresel öncelik veren bir yaklaşım kullanarak, bunun gibi ana düzen öğelerini düzenleyebilirsiniz (cep telefonları için temel stil için medya sorguları olmadan): #Wrapper {genişlik:%95; Marj: 0 otomatik; } #header {genişlik:%100; } #Content {genişlik:%100; } #IDebar {genişlik:%100; } #footer {genişlik:%100; } // küçük cihazlar (peyzaj telefonları, 576px ve üstü) @edia (min-width: 576px) {// orta cihazlar (tabletler, 768px ve üstü) @media (min-width: 768px) {#wrapper {genişlik: 90 %; Marj: 0 otomatik; } #Content {genişlik:%70; Şamandıra: sol; } #IDebar {genişlik:%30; Sağa çık; } // büyük cihazlar (masaüstü bilgisayarlar, 992px ve üstü) @media (min-width: 992px) {…}} // ekstra büyük cihazlar (büyük masaüstleri, 1200px ve üstü) @media (min-width: 1200px) { #Wrapper {genişlik:%90; Marj: 0 otomatik; }} Yüzde bazlı yaklaşımda, “şamandıra” öznitelik denetimleri hangi ekran tarafının öğeleri sol veya sağ görüntüleyeceği. Temel bilgilerin ötesine geçmek ve en son duyarlı tasarımı yapmak istiyorsanız, FlexBox CSS düzenini ve kutu boyutu ve esnek gibi özelliklerini tanımanız gerekir. Duyarlı görüntüleri uygulayın, daha önce tartıştığımız gibi, görüntülerinizin hasar görmediğinden emin olmak için bir yol yalnızca tüm görüntüler için dinamik değerler kullanın.
Müşteri siteniz için çok hızlı, güvenli ve dost canlısı bir geliştirici olan barındırmaya mı ihtiyacınız var? Kinsta, WordPress geliştiricileri dikkate alınarak ve birçok güçlü araç ve gösterge tabloları sağlayarak inşa edildi. Bkz. Planimg {genişlik:%100; } Ancak bu, web sitenize eriştiklerinde hücresel ziyaretçilerinize verilen yükü azaltmayacaktır. Sayfanıza resim eklerken her zaman fotoğraflarınızdan farklı boyutlarda SRCSET eklediğinizden emin olun. Bunu manuel olarak yapmak çok zaman alıcı olabilir, ancak WordPress gibi CMS ile medya dosyalarını yüklediğinizde otomatik olarak oluşur. Web siteniz için duyarlı tipografi Duyarlı web tasarımının ana odağı, düzen bloklarının, öğelerin ve medyanın yanıt verebilirliğidir. Metin genellikle bir yansıma olarak değerlendirilir. Ancak gerçekten duyarlı bir tasarım için, yazı tipi boyutunu ekran boyutuna uyacak şekilde doğru şekilde ayarlamanız gerekir. Bunu yapmanın en kolay yolu, 22 px gibi yazı tipi boyutu için statik bir değer ayarlamak ve her medya sorgusunda ayarlamaktır.
Yazı Tipi Boyutu Vs Dağılım Noktalarının Boyutları
Her birini ayırmak için bir virgül kullanarak birkaç metin öğesini aynı anda hedefleyebilirsiniz. @Media (min-width: 992px) {gövde, p, a, h4 {yazı tipi boyutu: 14px; }} İlk duyarlı test, sitenizin Google mobil dostu testlerle mobil uyumlu olup olmadığını test etmek istersiniz. Web sitenizin URL’sini girin ve sonuçları almak için “URL Test” düğmesini tıklayın.
Google Hücresel Testi
Sitenizi almak için gerekirse endişelenmeyin. Bu, sayfanızı yükleme hızını yansıtmaz. Bu makalede açıklanan adımları izlerseniz, hücresel dostu bir web siteniz olmalıdır. Ardından, Chrome geliştiricileri gibi araçlarla sitenizi birkaç ekran boyutunda test etmek istersiniz. Windows bilgisayarında Ctrl + Shift + i’ye veya ilgili cihaz ekranını açmak için Mac’te Command + Option + I tuşuna basın. Buradan, tasarım duyarlılığınızı test etmek için seçtiğiniz hücresel cihazı veya tableti seçebilirsiniz. Duyarlı ve hücresel düzeni Chrome’da test edin
Düzen öğesinin bir yüzdeye sahip boyutu veya CSS kutusunun düzenini önce ve en önemli adım, medya sorgusuna veya ekranın durdurma noktasına bağlı olarak farklı düzen öğeleri için farklı bir boyut hazırlamaktır. Sahip olduğunuz düzen kaplarının sayısı tasarıma bağlı olacaktır, ancak çoğu web sitesi aşağıda listelenen öğelere odaklanır: ambalaj veya kapsayıcı
Başlık
Doldurmak
Yan bıçaklar
dipnot
Genel düzen
Hücresel öncelik veren bir yaklaşım kullanarak, bunun gibi ana düzen öğelerini düzenleyebilirsiniz (cep telefonları için temel stil için medya sorguları olmadan): #Wrapper {genişlik:%95; Marj: 0 otomatik; } #header {genişlik:%100; } #Content {genişlik:%100; } #IDebar {genişlik:%100; } #footer {genişlik:%100; } // küçük cihazlar (peyzaj telefonları, 576px ve üstü) @edia (min-width: 576px) {// orta cihazlar (tabletler, 768px ve üstü) @media (min-width: 768px) {#wrapper {genişlik: 90 %; Marj: 0 otomatik; } #Content {genişlik:%70; Şamandıra: sol; } #IDebar {genişlik:%30; Sağa çık; } // büyük cihazlar (masaüstü bilgisayarlar, 992px ve üstü) @media (min-width: 992px) {…}} // ekstra büyük cihazlar (büyük masaüstleri, 1200px ve üstü) @media (min-width: 1200px) { #Wrapper {genişlik:%90; Marj: 0 otomatik; }} Yüzde bazlı yaklaşımda, “şamandıra” öznitelik denetimleri hangi ekran tarafının öğeleri sol veya sağ görüntüleyeceği. Temel bilgilerin ötesine geçmek ve en son duyarlı tasarımı yapmak istiyorsanız, FlexBox CSS düzenini ve kutu boyutu ve esnek gibi özelliklerini tanımanız gerekir. Duyarlı görüntüleri uygulayın, daha önce tartıştığımız gibi, görüntülerinizin hasar görmediğinden emin olmak için bir yol yalnızca tüm görüntüler için dinamik değerler kullanın.
Müşteri siteniz için çok hızlı, güvenli ve dost canlısı bir geliştirici olan barındırmaya mı ihtiyacınız var? Kinsta, WordPress geliştiricileri dikkate alınarak ve birçok güçlü araç ve gösterge tabloları sağlayarak inşa edildi. Bkz. Planimg {genişlik:%100; } Ancak bu, web sitenize eriştiklerinde hücresel ziyaretçilerinize verilen yükü azaltmayacaktır. Sayfanıza resim eklerken her zaman fotoğraflarınızdan farklı boyutlarda SRCSET eklediğinizden emin olun. Bunu manuel olarak yapmak çok zaman alıcı olabilir, ancak WordPress gibi CMS ile medya dosyalarını yüklediğinizde otomatik olarak oluşur. Web siteniz için duyarlı tipografi Duyarlı web tasarımının ana odağı, düzen bloklarının, öğelerin ve medyanın yanıt verebilirliğidir. Metin genellikle bir yansıma olarak değerlendirilir. Ancak gerçekten duyarlı bir tasarım için, yazı tipi boyutunu ekran boyutuna uyacak şekilde doğru şekilde ayarlamanız gerekir. Bunu yapmanın en kolay yolu, 22 px gibi yazı tipi boyutu için statik bir değer ayarlamak ve her medya sorgusunda ayarlamaktır.
Yazı Tipi Boyutu Vs Dağılım Noktalarının Boyutları
Her birini ayırmak için bir virgül kullanarak birkaç metin öğesini aynı anda hedefleyebilirsiniz. @Media (min-width: 992px) {gövde, p, a, h4 {yazı tipi boyutu: 14px; }} İlk duyarlı test, sitenizin Google mobil dostu testlerle mobil uyumlu olup olmadığını test etmek istersiniz. Web sitenizin URL’sini girin ve sonuçları almak için “URL Test” düğmesini tıklayın.
Google Hücresel Testi
Sitenizi almak için gerekirse endişelenmeyin. Bu, sayfanızı yükleme hızını yansıtmaz. Bu makalede açıklanan adımları izlerseniz, hücresel dostu bir web siteniz olmalıdır. Ardından, Chrome geliştiricileri gibi araçlarla sitenizi birkaç ekran boyutunda test etmek istersiniz. Windows bilgisayarında Ctrl + Shift + i’ye veya ilgili cihaz ekranını açmak için Mac’te Command + Option + I tuşuna basın. Buradan, tasarım duyarlılığınızı test etmek için seçtiğiniz hücresel cihazı veya tableti seçebilirsiniz. Duyarlı ve hücresel düzeni Chrome’da test edin
Bu süreçte bulunurken cevaplamak istediğiniz bazı sorular var.
Düzen, doğru sayıda sütuna ayarlanıyor mu?
İçerik, farklı ekranlardaki düzen öğelerinde ve kaplarda iyi eşleşiyor mu?
Her ekrana göre yazı tipi boyutu mu?
Düzen, doğru sayıda sütuna ayarlanıyor mu?
İçerik, farklı ekranlardaki düzen öğelerinde ve kaplarda iyi eşleşiyor mu?
Her ekrana göre yazı tipi boyutu mu?
CSS birimleri ve CSS duyarlı tasarım değerleri mutlak ve göreceli ölçüm birimlerine sahiptir. Mutlak uzunluk birimlerinin örnekleri CM veya PX’dir. Göreli birim veya dinamik değer, ekranın boyutuna ve çözünürlüğüne veya kök öğe yazı tipinin boyutuna bağlıdır. PX VS EM VS REM ve Duyarlı Tasarım için Ünite Görünüm Portu
PX – Bir Pixel
PX – Bir Pixel
EM – Eleman yazı tipinin boyutuna göre göreli birimler.
Eleman yazı tipinin boyutuna dayalı olarak göreli birimler.
Eleman yazı tipinin boyutuna dayalı olarak göreli birimler.
VH, VW – Viewport’un yüksekliğinin veya genişliğinin %.
% – Ana öğenin yüzdesi.
Yeni tasarımcılar veya web geliştiricileri hala metin için piksel kullanmaları gerekebilir, çünkü pikseller CSS’deki en düz uzunluk birimleridir. Ancak maksimum görüntünün ve diğer öğelerin genişliğini ve genişliğini ayarlarken, % kullanmak en iyi çözümdür. Bu yaklaşım, bileşenin her bir cihazın ekran boyutuna göre ayarlanmasını sağlayacaktır. Aşağıdaki duyarlı tasarım örnekleri, çeşitli endüstrilerden duyarlı web tasarımlarının bazı örneklerini tartışacağız – ve doğru ve yanlış yaptıklarından öğreneceğiz. 1. Çevrimiçi Gazete: Mobil, Tabletler ve Dizüstü Bilgisayarlarda New York Timsnyt
Masaüstünde, NYT’nin düzeni size görseller ve farklı sıralar ve sütunlarla dolu geleneksel gazeteleri hatırlatıyor. Her haber kategorisi için ayrı bir sütun veya satır var gibi görünüyor. Cep telefonunda, bu bir sütunun standardına uygundur ve aynı zamanda menüyü kullanımı kolaylaştırmak için koordinat biçiminde ayarlar. 2. Blog: Sanat Dezavantajı
Mobil, tabletler ve dizüstü bilgisayarlarda sanat tutarları
Chris Guillebeau’nun “Uygunsuzluk Sanatı” blogu on yıldan fazla bir süredir güçlü. Tasarım en sofistike değil, ancak iki sütunu ve ana içerik düzenini mobil cihazdaki bir sütunun tasarımına uyarlamak ve uyarlamak. 3. E-Niaga: Amazon
Cep telefonlarında, tabletlerde ve dizüstü bilgisayarlarda Amazon
Amazon, bir nedenden dolayı E-Niaga’da küresel bir liderdir, kullanıcı arayüzleri tüm cihazlarda çok pürüzsüzdür. Tablet düzeni yalnızca birkaç beyaz boşluğu ortadan kaldırır ve daha küçük bir pakete daha fazla içerik koymak için sunulabilen simgeyi ekler. Hücresel düzenleri, ana verandalarından bağlantı simgesinin farklı bir kısmı yerine, yakın zamanda satın alma geçmişi gibi önemli şeylere odaklanarak bir sütuna getirdi. 4. Video Sitesi: YouTubeDoutube, YouTube ana sayfası tasarımından cep telefonlarında, tabletlerde ve çekirdek dizüstü bilgisayarlarda, her kullanıcı için ilgili esnek bir video ızgarasıdır. Tablette, her satırdaki sütun sayısı üçe düşer. Hücresel olarak, bu bir sütunun tasarımına indirgenir. Mobil sürüm ayrıca ana menüyü ekranın altına taşıyor ve akıllı telefon kullanıcılarının başparmağına daha yakın. Bu basit adım navigasyonu ve UX’i arttırır. 5. Çevrimiçi Dergi: Kablolu
Cep telefonlarına, tabletlere ve dizüstü bilgisayarlara bağlı
% – Ana öğenin yüzdesi.
Yeni tasarımcılar veya web geliştiricileri hala metin için piksel kullanmaları gerekebilir, çünkü pikseller CSS’deki en düz uzunluk birimleridir. Ancak maksimum görüntünün ve diğer öğelerin genişliğini ve genişliğini ayarlarken, % kullanmak en iyi çözümdür. Bu yaklaşım, bileşenin her bir cihazın ekran boyutuna göre ayarlanmasını sağlayacaktır. Aşağıdaki duyarlı tasarım örnekleri, çeşitli endüstrilerden duyarlı web tasarımlarının bazı örneklerini tartışacağız – ve doğru ve yanlış yaptıklarından öğreneceğiz. 1. Çevrimiçi Gazete: Mobil, Tabletler ve Dizüstü Bilgisayarlarda New York Timsnyt
Masaüstünde, NYT’nin düzeni size görseller ve farklı sıralar ve sütunlarla dolu geleneksel gazeteleri hatırlatıyor. Her haber kategorisi için ayrı bir sütun veya satır var gibi görünüyor. Cep telefonunda, bu bir sütunun standardına uygundur ve aynı zamanda menüyü kullanımı kolaylaştırmak için koordinat biçiminde ayarlar. 2. Blog: Sanat Dezavantajı
Mobil, tabletler ve dizüstü bilgisayarlarda sanat tutarları
Chris Guillebeau’nun “Uygunsuzluk Sanatı” blogu on yıldan fazla bir süredir güçlü. Tasarım en sofistike değil, ancak iki sütunu ve ana içerik düzenini mobil cihazdaki bir sütunun tasarımına uyarlamak ve uyarlamak. 3. E-Niaga: Amazon
Cep telefonlarında, tabletlerde ve dizüstü bilgisayarlarda Amazon
Amazon, bir nedenden dolayı E-Niaga’da küresel bir liderdir, kullanıcı arayüzleri tüm cihazlarda çok pürüzsüzdür. Tablet düzeni yalnızca birkaç beyaz boşluğu ortadan kaldırır ve daha küçük bir pakete daha fazla içerik koymak için sunulabilen simgeyi ekler. Hücresel düzenleri, ana verandalarından bağlantı simgesinin farklı bir kısmı yerine, yakın zamanda satın alma geçmişi gibi önemli şeylere odaklanarak bir sütuna getirdi. 4. Video Sitesi: YouTubeDoutube, YouTube ana sayfası tasarımından cep telefonlarında, tabletlerde ve çekirdek dizüstü bilgisayarlarda, her kullanıcı için ilgili esnek bir video ızgarasıdır. Tablette, her satırdaki sütun sayısı üçe düşer. Hücresel olarak, bu bir sütunun tasarımına indirgenir. Mobil sürüm ayrıca ana menüyü ekranın altına taşıyor ve akıllı telefon kullanıcılarının başparmağına daha yakın. Bu basit adım navigasyonu ve UX’i arttırır. 5. Çevrimiçi Dergi: Kablolu
Cep telefonlarına, tabletlere ve dizüstü bilgisayarlara bağlı
