Mobil Ekranlara Giriş için Duyarlı Web Düzenleri, İpuçları ve Örnekler
Tasarımcılar şimdi eskisinden daha zorluyor. Yalnızca sabit aygıtlar için değil aynı zamanda tablet ve akıllı telefonlar gibi mobil aygıtlar için de tasarım yapmak zorunda değiliz ve burada birçok farklı ekran boyutundan ve çözünürlüğünden bahsettiğimizden, omuz atmak için çok büyük bir görev. Bunun ışığında, duyarlı web tasarımı en iyi çözüm olabilir. Basit bir mobil şablondan daha fazlasını sunar; bunun yerine, tüm site düzeniniz olası herhangi bir ekran çözünürlüğüne uyacak kadar esnek olacak şekilde tasarlanmıştır.
Böyle bir akışkan tasarım şeması ile belirgin faydalar ve sakıncalar vardır. Duyarlı web tasarımının mobil cihazlara geçişini nasıl daha yumuşak bir hale getirebileceği konusundaki örnekleri aşağıda bulabilirsiniz..
Duyarlı Tasarım Nasıl Çalışır?
Kelimesini kullandığımda “duyarlı” web tasarımı açısından tüm düzenin kullanıcının ekran çözünürlüğüne göre yanıt verdiği anlamına gelir. Bu senaryoyu hayal edin: bir tablette bir web sitesi okuduğunuzda, bir nedenden dolayı başka bir cihaza geçtiniz. Tarayıcı penceresi şimdi yeniden boyutlandırıldı. Duyarlı bir web tasarım düzeninde şemalar ve incelikle bozulan ve kendini yeniden yaratan bir düzen yer alacak. Kullanılabilirlik açısından bakıldığında bu harika bir teknik..
Duyarlı tasarım, tarayıcı veya cihaz ekranı boyutundan bağımsız olarak homojen bir deneyim oluşturmakla ilgilidir. Dinamik imgeler içeren noktayı göstermek için 'A List Apart' dan mükemmel bir örnek buldum. Genişlik, çoğu iç konteyner elemanlarının tümü için yüzdeleri kullanarak CSS'ye ayarlanır. Daha büyük web siteleri ayrıca desteklenmediğinde JavaScript gibi dinamik içerikleri kaldırmaya da iyi yanıt verir..
Neden Mobil İçin Tasarım??
Artık hareket halindeyken web'de gezinmek için değil, daha fazla kullanıcının mobil hale geldiği de belli oldu. Tablet PC'ler, kullanıcılar sınıfta çevrimiçi olduklarında bağlam içinde değişmeye başladılar. Mobil cihazlar için tasarım yapmak, modern web standartlarında kesinlikle bir gerekliliktir. Tek sorun, geliştirme yönteminizi seçmek ve kitlenizi uygun şekilde hedeflemektir.
Belirli ekran çözünürlükleri için kodlamaya başladığınızda, uğraşacak çok fazla stil sayfasıyla karşılaşırsınız. CSS3'teki medya sorguları, hem dikey hem de yatay görünüm için iPhone'a özgü düzenler oluşturmak için kullanılabilir. Piksel yoğunluğunu önceden ayarlayabildiğiniz için, mobil cihazlar için herhangi bir HTML şablonunu yenilemek kolaydır..
(Resim Kaynağı: bradfrostweb)
Ancak, duyarlı tasarım için bir düzen kodladığınızda, mobil yönler varsayılan olarak halledilir. Hem masaüstü hem de mobil kullanıcılara benzer bir deneyim sunulacak ve harici CSS özellikleri hakkında endişelenmenize gerek kalmayacak. Yapmanız gereken tek araştırma, mümkün olan en küçük ekran görüntüsünü planlamak. Google Analytics trafik verileri bu konuda çok yardımcı olabilir.
Web sitenizi, her tarayıcıyı çalıştıran her cihazda% 100 çalışma şansına sahip olmayacaksınız. Ancak ekranın ortalama genişliğine bağlı olarak çoğunluğu hedefleyebilirsiniz. Daha eski iPhone modelleri, inanılmaz olmayan 320 × 480 ekran çözünürlüğü kullanıyor. Minimum 240px genişlikte çekim yapabilirim, eğer sığabilecek olsaydınız daha da küçük olurdum.
Varsayılan Yakınlaştırmayı Kaldırma
Bir akıllı telefonu kullanarak Web’de gezinmek için herhangi bir zaman geçirdiyseniz, web sitelerinin ekranda tam olarak görüntülenmek üzere nasıl ölçeklendiğini fark edeceksiniz. Bu, web sitelerinin çoğunun mobil bir emsali olmadığından kullanıcının rahatlığı için, bu nedenle tam düzen en güvenli bahis..
Ancak, duyarlı bir mobil tasarım oluşturduğunuzda, otomatik yakınlaştırma, düzen öğelerinizi gerçekten bozabilir. Özellikle, resimler ve gezinme içeriği, düzeninizde küçük veya çok büyük görünebilir. Çoğu Android ve iPhone cihazında bunu sıfırlayan belge başlığına ekleyebileceğiniz özel bir meta etiketi vardır..
Bu bilinen görüntüleme çerçevesi meta etiketi içerik içinde bazı özel değişkenler oluşturan Apple, özellikle iOS'taki web sitelerine yönelik olmasına rağmen, dikkat etmeniz gereken birkaç meta etiketle ilgili bir dokümantasyon sayfasına sahiptir. İlk ölçekli web sitenizi% 100 yakınlaştırmayı varsayılan olarak ayarladığı için bu değer önemlidir.
İçin son değer kullanıcı ölçeklenebilir Bu yakınlaştırma işlevini tamamen kaldırır, böylece kullanıcı düzeni yeniden boyutlandıramaz. Bu, tasarımı tam cihaz genişliğine bağlı olarak bir boyuta kilitler. Yakınlaştırma işlevini devre dışı bıraksanız bile, herhangi bir cihazda dikeyden manzaraya geçerken iyi yanıt veren bir tasarımın hala uyum sağlayacağını unutmayın! Ancak duyarlı bir tasarımı kilitlemek ve genel ölçeklendirme seçeneklerini kaldırmak mantıklıdır.
Dinamik Görüntü Ölçeklendirme
Görüntüler hemen hemen her web sitesinin bir diğer önemli yönüdür. Mobil kullanıcılar video akışı yapmak istemiyor olabilir, ancak fotoğraflar tamamen farklı bir hikaye. Bunlar aynı zamanda kutu modelinden çıkan mizanpajlar söz konusu olduğunda en büyük suçlulardır..
img maksimum genişlik:% 100;
CSS için standart kural, tüm resimlere bir max-width özelliği uygulamaktır. Her zaman% 100 olarak ayarlanacakları için, hiçbir zaman çarpılmaları görmezsiniz. Kullanıcı, tarayıcı penceresini resminizin kaldırabileceğinden daha küçük hale getirdiğinde, otomatik olarak küçültülmüş% 100 genişliğe yeniden ayarlanır. Sorun şu ki, Internet Explorer bu özelliği anlayamıyor, bu nedenle kullanarak IE’ye özgü bir stil sayfasını bir araya getirmeniz gerekecek. genişlik:% 100;.
JavaScript veya jQuery eklentileri kullanıyorsanız esnek görüntüler de mümkündür. Dışarıda inanılmaz derecede duyarlı görüntü içeriği oluşturmak için zaman harcayan gerçekten akıllı geliştiriciler var. Bu iş parçacığı IE6 / 7 hatalarını çözmek için tuhaf ama kullanışlı bir yaklaşım sunan Yığın Taşması'ndaki pek çok şeyden sadece biri.
Ben şahsen doğal CSS resim yeniden boyutlandırma yapışmasını tavsiye ederim. Web siteniz JavaScript etkinleştirilmiş bir mobil tarayıcıda çalışıyorsa, büyük olasılıkla CSS'yi de destekleyebilir. Gerçekten daha derine inmek istiyorsan, bu 24 yoldan makalesi Adaptive Designs için Görüntüler…
Tasarımlara Dokunmak
Web geliştiricileri, mobil kullanıcıların artık BlackBerrys gibi tuş takımı telefonlarda olmadığını unutabilirler. Günümüzde akıllı telefonların çoğu, fare ve klavye kurulumlarından farklı bir senaryo oluşturan dokunmatik ekran arayüzleri kullanıyor.
Bu nedenle, mobil öğelerdeki alternatif çözümleri göz önünde bulundurmanız gerekir. Açılır menüler, sağ tarafta tek bir menü olarak görüntülendiğinde daha iyi çalışabilir. Çoğu kullanıcı sağ taraftaki bağlantılara soldan daha kolay dokunabilir, ancak her iki sütun da alanı azaltmak için çalışır. Kenar boşluğu girintilerini kullanarak, herhangi bir jQuery kodu gerektirmeden bağlantı hiyerarşisini tanımlamak kolaydır.
Bu gezinti bağlantılarının boyutunu artırmak da iyi bir uygulamadır. Mobil kullanıcılar, masaüstlerinde ve hatta dizüstü bilgisayarlarda sunulan büyük ekranların lüksüne sahip değildir. Metni her ne pahasına olursa olsun büyük, ön kısımda, basılabilir ve okunabilir durumda tutmanız gerekir. Kullanıcı dikey ve yatay görünüm arasında geçiş yaparsa, yeniden boyutlandırmak isteyebilirsiniz - mobil web’de gezinirken oldukça yaygın bir yineleme.
Özel CSS Düzenleri
Genel olarak, düzeninizi uyarlamak ve içeriğinizin doğal bozulmasına izin vermek en iyisidir. Bir kenar çubuğunuz ve içerik alanınız varsa, bunları genişlik yüzdeleri veya ems, tarayıcı penceresiyle yeniden boyutlandırılacak herhangi bir şeye ayarlamanız gerekir. Eğer uygularsan Min genişlikte bu sonuçta mizanpajın bir kısmını kıracak; yani, kenar çubuğu içeriğiniz sayfa içeriğinin üzerinde görüntüleniyor.
(Resim Kaynağı: Pepperson)
Bunun genel tasarımı nasıl etkilediğini düşündüğünüzde, dış stil sayfaları geliştirmek çok daha kolaydır. Ancak, mizanpajınızın oluşturması için çok küçük olan ekran çözünürlükleriyle karşılaşmanız olasıdır. Bu, sayfanın bölümlerini kaldırmak için özel CSS özellikleri eklemek veya içeriği tamamen yeniden biçimlendirmek için mükemmel bir senaryodur.
Ekstra İçeriği Aç / Kapat
Büyük içerik bloğu örnekleri arasında web formları, dinamik menüler, görüntü kaydırıcılar ve diğer benzer fikirler bulunur. Mizanpaj küçüldükçe bu öğeleri tamamen kaldırmak yerine, neden sadece “minimize” içerik div? Düzenlemeleri yapmak için CSS veya JavaScript kullanabilirsiniz, ancak sonuçta bir geçiş düğmesi oluşturmak için büyük olasılıkla bazı JS kodlarına ihtiyacınız olacaktır..
Bu alternatif, ana sayfanızı dinamik ve zengin web medyası dolu tutmak için idealdir. Açılan gezinme işleminizi tamamen kaldırmak veya sayfa yapısını yeniden düzenlemek yerine, bir içerik div'in içine gizleyebilirsiniz. Kullanıcı bağlantılarınızı görüntülemek isterse menüyü açmak / kapatmak için bir geçiş düğmesine dokunun..
Bu format basit, sezgisel ve dokunmatik ekranlı aygıtlarla çalışmak kolaydır. Divin içine açılır menülerin her birini yan yana bir sütun formatında yerleştirebilirsiniz. Pencere daha da küçükleştikçe doğal olarak birbirlerinin altına düşer ve sayfa yüksekliğini arttırır. Ancak tüm menüyü daraltma seçeneği kolayca erişilebilir ve sadece bir dokunuş ötede. Bu geçiş div, dinamik fotoğraf yeniden boyutlandırma ile birlikte görüntü kaydırıcılar için mükemmel.
Medya Sorgularını Kullanma
Bir mobil ekran 2 veya 3 sütun düzeninizi bozarsa, birbiri üzerine yığılmış içerik alanlarının her biri ile sonuçlanırsınız. Tüm site kanıyor gibi görünüyor ve ayırt edici blok alanları olmadan çok kafa karıştırıcı ortaya çıkabiliyor. Daha iyi bir fikir, her bir sütuna, yalnızca mobil cihazlar için, harici bir stil sayfası kullanarak bir alt kenarlık eklemektir. mobile.css.
Bu yeni stillerle içeriğiniz bölünebilir bölümlere ayrılmıştır. Yukarıdaki medya özelliği, eski iPhone cihazlarını yatay görünümde hedeflemek için özel olarak tasarlanmıştır. Ancak, ekranlar 480 pikselden daha küçük olan cihazlar için de geçerli olacaktır. Bunu avantajınız için kullanın, böylece yerleşimin hangi noktada olacağını belirleyebilirsiniz. “kırılır”.
Aygıtın yönünü tespit etmek için kullanabileceğiniz birkaç seçenek var. CSS ortamındaki bu harika rehber size birkaç fikir verebilir. Ek olarak, yeni mobil proje 320 ve üstü mobil CSS için bir kazan plakası sunuyor @media stilleri. Bunlar doğrudan aynı mobile.css dosyasına eklenebilir ve birçok farklı cihaz için kurallar uygulayabilir.
/ * Akıllı telefonlar (dikey ve yatay) ----------- * / @media sadece ekran ve (minimum cihaz genişliği: 320 piksel) ve (maksimum cihaz genişliği: 480 piksel) / * Stiller * / / * Akıllı telefonlar (manzara) ----------- * / @media sadece ekran ve (en az genişlik: 321 piksel) / * Stiller * / / * Akıllı telefonlar (portre) ---- ------- * / @media sadece ekran ve (maksimum genişlik: 320px) / * Stiller * / / * iPad'ler (dikey ve yatay) ----------- * / @ yalnızca ortam ekranı ve (minimum aygıt genişliği: 768 piksel) ve (maksimum aygıt genişliği: 1024 piksel) / * Stiller * /
(Kaynak: Hardboiled CSS3 Media Queries)
Yararlı Araçlar
- Skeleton - Duyarlı Mobil Tasarım için Güzel Kazan
- Uyumlu olandan tamamen duyarlı olana geçiş
Vitrin: Güzel Duyarlı Tasarımlar
Bu ipuçlarının ve tasarım tekniklerinin sizi yalnızca mobil ekranlar için değil, web gezintili herhangi bir yaygın cihaz için heyecan verici, duyarlı düzenler oluşturmaya doğru ilerletmesini umuyorum. Yaratıcı meyve sularının akmasını sağlamak için, duyarlı mobil web tasarımları hakkında küçük bir vitrin hazırladım. Bazı daha eşsiz özelliklere göz attığınızdan ve tartışma alanındaki tasarım veya konu hakkındaki düşüncelerinizi paylaştığınızdan emin olun..
ayı asmak
Macdonald Otelleri
CSS-Tricks
Mutlu Cog
Teixido
CSS Sihirbazı
Bilgi Mimarları
SANAT = ÇALIŞMA
Hardboiled Web Tasarımı
Sony ABD
Gelecek Dostu
Düşünmeyi Durdurmayız
Otantik İşler
Colbow Tasarım
320 ve üstü
Çatal CMS
Mutlu bit
Elektrik hamuru
Foster Props
Plexical
Preeti Pastaları
Diğer tehlikeler
Diş Hekimliği Bilgi Merkezi
ribot - arayüz tasarımı
Merhaba Fisher
Sosyal Pazarlamacı Zirvesi
William Csete
Yünlü Robot
Meltmedia
Bizi izlemeye devam edin!
Yarının gönderisinde bazılarını görücüye çıkaracağız ücretsiz duyarlı WordPress temaları kullanmak için indirebilirsiniz. Bunun için ayar yaptığınızdan emin olun..
