Uyarlanabilir tasarım (duyarlı tasarım)

İnternete tablet ve cep telefonlarından erişen kullanıcılar artıyor. Bu, zaten bildiğiniz gibi, sadece bilgisayarımızda güzel görünen iyi bir web sayfası tasarlamanın yeterli olmadığı anlamına gelir: aynı zamanda her mobil cihazda da görülmesi gerekir. Sorun? Farklı ekran boyutları ve çözünürlükleri. Bu nedenle tüm medyaya (ünlü duyarlı tasarım, olarak çevrildi uyarlanabilir tasarım).

İşte bu özelliklere sahip bir tasarım yaparken aklınızda bulundurmanız gereken bazı ipuçları. Çok dikkat!

Uyarlanabilir tasarım için ipuçları

1. Basit bir şablon yapınBasit derken mülayim demek istemiyorum. Hakkında konuşuyorum yapı Web sitenizin HTML'si: ne kadar net olursa o kadar iyidir. Bir bilgisayar ekranının üç dikey sütuna sığabileceğini unutmayın; bir cep telefonunun ekranına sadece bir tane sığacaksın. Bunu ve öğeleri nasıl yeniden konumlandıracağınızı düşünün.
2. Gereksiz her şeyi ortadan kaldırınJQuery efektlerinden, Flash animasyonlarından ve sayfanızın yüklenmesini yavaşlatan diğer kodlardan kaçının. Bu türden ne kadar az içeriğiniz varsa, web o kadar hızlı yüklenir.
3. Bir stil tanımlayın her "boyut" için cssGörüntülendiği aygıta bağlı olarak çalışan bir tiny.css, small.css ve big.css (örneğin) oluşturun. Örneğin:
   

   @import url (tiny.css) (min-genişlik: 300px);

   @import url (small.css) (min-genişlik: 600px);

   @import url (big.css) (min-genişlik: 900px);

4. En çok kullanılan çözünürlükler320 piksel / 480 piksel / 720 piksel / 768 piksel / 900 piksel / 1024 piksel
5. Şablonunuzu ESNEK hale getirinMümkün olduğunca sabit miktarlar yerine yüzdelerle çalışın. İşte bazı referans eşdeğerleri: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Tipografi Her zamankinden daha önemli Bazen cihazınızın ekranı o kadar küçük olabilir ki gördüğünüz tek şey metin olabilir. Bu nedenle sitemizdeki en iyi yazı tiplerini çok dikkatli seçmeliyiz, böylece boyut olarak küçüldüklerinde okunaklılıklarını kaybetmesinler. Ek olarak, daha nötr yazı tiplerini, web'e gerekli karakteri veren kişiliğe sahip diğerleriyle nasıl birleştireceğimizi bilmemiz gerekir. Bu nedenle ilk tavsiye, kullanacağınız yazı tiplerini seçmek için zaman ayırmanızdır.
7. Amerika Birleşik Devletleri yüksek kaliteli görüntülerAlan küçüldükçe, görüntüler ona eşlik edecektir. Küçültüldüğünde kalite kaybetmeyen ve ölçeklendiğinde aynı şekilde çalışanları seçin. Düşük kaliteli bir görsel, web sitenizin kötü görünmesine neden olur.
8. Görüntülerinin her zaman görüldüğünü tamİmg (genişlik: 100%;) kodunu css'nize ekleyerek fotoğraflarınızın kesilmesini önleyin. Bu şekilde aygıta görüntüye vermesi gereken yüksekliği yeniden hesaplamasını söylüyorsunuz, böylece genişliği yüzde yüz görülebiliyor.
9. Hepsi düşük aynı URLKök klasördeki aynı index.html dosyası tüm cihazlar için çalışacağından, www.mysite.com/mobile gibi alt etki alanlarını unutun (eğer uyarlamalı tasarımı doğru yaparsanız). Avantajı zaten biliyorsunuz: Ne kadar az alt alan adı olursa, sayfa yükleme o kadar hızlı olur.
10. Desteklerden yararlanın: Yaratıcı olun Bir web sitesine masaüstü bilgisayardan erişmek, iPad veya cep telefonundan erişmekle aynı şey değildir. İlki ile sakin ve rahat bir şekilde yol alacaksınız. İkincisi ile, boş saatlerde yapacaksınız ve sıkılır olmaz pencereyi kapatacaksınız. Kullanıcıyı eğlendirmek ve size ayıracakları birkaç dakika içinde onları eğlendirmek için bu koşullardan yararlanın. Belki eve döndüğünde sizi daha rahat bir şekilde ziyaret etmeye karar verir.
11. İlham almak Dijital yayınlarda bu tavsiyenin nedenini merak edeceksiniz. Çok kolay: dijital dergiler (iyi) destekten nasıl yararlanılacağını bilir ve tasarımları çok zekidir. Onlardan ilham alın ve ayrılması zor bir web sitesi yapın.

Daha fazla bilgi - Dijital dergiler

Kaynak - bölünmüş, 960.gs, sütunlu