Bütün cihazlarda çalışan bir web tasarımı , açıldığı her cihazın (telefon, tablet, bilgisayar) kendi boyutuna ve özelliklerine göre yapılandırılır, sonunda site misafiriniz sitenizin en iyi ve en güncel sürümüne ulaşabilmesini garanti eder. Piyasada ki cihazlar artık yüksek özelliklere ve çözünürlüğü olduğu için güzel bir deneyim oluşturmak için tüm cihazlardan çalışan bir web sitesi oluşmanın önemi çok büyük.
Yeni bir proje yapacak olan bir web tasarımcıysanız, büyük ihtimal sabit ve sonuncu bir nizam tasarım yapmak yerine göreceli boyut ve orantılarda düşünmeye adapte olmanız gerekecektir. Tüm detayları ile her cihazda çalışan bir web sitesi oluşturma için yazımızın devamını okumaya devam edin.
Bütün cihazlarda çalışan bir web sitesi nasıl yapılır ?
- Tel kafes tasarımlarla başlayın
- Kesme noktalarınızı tanımlayın
- İlk olarak küçük cihazlar için tasarlayın
- Akışkan bir ızgara oluşturun
- Tüm cihazlarada çalışması için görüntüleri optimize edin
- Tüm cihazlarada çalışması için tipografiyi optimize edin
1. Tel kafes tasarımlarla başlayın
Tüm cihazlarda çalışan bir web sitesi hazırlamak için ilk olarak ne şekilde yerleşim olacağını planlayarak başlar. Başlarken her zaman ilk yerleşim için tel çerçevelerden daha iyi kullanacağınız bir araç yoktur. Tel kafes yapılacak tasarımın şematik bir taslağıdır ve düzgün bir şekilde yapılandırmak için en iyi yöntemdir.
Tel çerçeveleme yaparken dikkat edilmesi gereken uyarılar!
Tel çerçevelerini cilasız tutun
Çabuk ve kolay, tel kafeslerinin temel özelliğidir.Yapacağınız tasarımın ilk aşamasında kullanıcılarınız için hangi çözümlerinin doğru sonucu görmeniz gerekir. Tel çerçevelerin harika olması için çok zaman harcamayın. Düzeninizi oluşturun , işlevsel ve bilgi mimarinize fokuslanarak hedef kitleniz ve paydaşlarınızı doğrulamak için zaman harcayın.
Bütün cihazlar için tel kafesler oluşturun
Bilgisayar , tablet ve telefon kullanıcıların internette sörf yapmak için kullandığı cihaz türleridir. Tel çerçeveleri hazırlarken tasarımınızın cihazlar arasında iyi gözüktüğünü veya gözükmediğini görmek için üç gruba da hitap etmeye çalışın.
2. Kesme noktalarınızı tanımlayın
Kesme noktaları, tüm cihazların olmazsa olmazıdır ve web sitesini. hazırlarken çok önemli bir adım haline getirir. Kesme noktaları yapacağınız tasarımın ayarlandığı piksel değerleridir. Sitenize gelecek ziyaretçiler böylelikle en iyi sürümü görebilirler.
Kesme noktaları CSS medya sorguları genişlik (min-genişlik ve max-genişlik) ve yükseklik(min-yükseklik ve max-yükseklik) tarafından tanımlanır. Belirli medya özniteliklerinin uyguladığı kuralları oluşturarak, içeriği oluşturan cihaza veya tarayıcı türüne göre stiller üzerinde oynama olanak sunar.
Tasarımızı seçerken dikkate almanız gereken bir kaç öneri vardır:
- Kesme noktalarınızı olabildiğince az sayıda korumaya çalışın.Tasarımcılar kesme noktalarına tam uyacak şekilde bir ayarlama yapması gerekmekte, Cihaz esnekliği için en fazla 3 kesme noktası için çaba göstermelisiniz.
- Kesme noktalarını belirlerken ilk kriter her zaman tasarladığınız içerik olmalıdır. Düzenin nasıl ayarlanacağını belirlemelidir.
Farklı cihazlar için tasarımı özelleştirin
Ekrandan ekrana fark olduğu için bilgisayar ile telefon arasında farklılıklara dikkat edin. Küçük ekranlar için hamburger menülerini tercih edin. Ekranınızda daha fazla gayrimenkul tasarrufu yapmanıza yardımıcı olur. Bu özelliği kullanırken kullanıcıların görmesi gereken içeriği gizlemediğinizden emin olun.
3.İlk olarak küçük cihazlar için tasarlayın
İlk olarak sayfa düzeni oluşturmana başlarken çoğu tasarımcı mobil öncelikli yola koyulur.Tasarımı ilk olarak küçük ekran boyutuna sığacak biçimde tasarlar. En küçük kesme noktasında çalışan bir yapı oluşturun ve sonrasında büyük pencereler için ayarlama yapın.
İlk olarak bir düşünme yöntemi uygulayın
Tasarımcılar mobil bir deneyim için çalışırken, kullanıcılara sunacakaları içeriği hangi sırayla sunmak istediklerini planlamak zorundalar. Mobil ekran boyutu için içerik envanteri , içeriği değerlendirmek ve kullanıcıların gereksinimlerine göre sıralamak için büyük bir motivasyon kaynağıdır. Bu sıralama küçük ekranlarda dikkat dağıtabilecek gereksiz öğelerden ayırmaya yardımcı olur.
Cihazların fiziksel özelliklerini göz önünde bulundurun
Mobil cihazlara tasarım yaptığınızda sadece o ekrana tasarım yapmazsınız.Genelde mobil cihazlarda dokunmatik ekran için tasarım yapıyorsunuz. İçeriği ve etkileşimi öğeler , dokunmatik ve rahat etkileşim için optimize edilmeli.Kontrolleri tarif etmek ve tasarımı cihazın kullanıcısına göre değiştirmek için oryantasyon ve en boy oranı gibi medya sorgularını kullanmak mümkündür.
Yaptığınız tasarımları cihazlarda test edin
Yaptığınız tasarımlar monitörlerde harika görünebilir ama diğer cihazlarda aynı etkileşime girmeyebilir. Kullanıcıların web sitenizde bitirmek istediği bazı görevleri gibi bir kaç temel etkileşim senaryosu tanımlayın ve bunu çeşitli cihazlarda kendiniz uygulamaya çalışın.
4.Akışkan bir ızgara oluşturun
Izgara Doğru kullanıldığında UI öğelerinin çeşitli ekran boyularında üst üste geldiği zamanlarda kaçınmanıza yardımcı olur. Bunun için tamamiyle yanıt veren sağlam bir düzen ile oluşabilir.
Izgara, tanımladığınız kesme noktalarına özel düzen oluştuma izni verir.Bunula birlikte tasarım ve içerik her görünüm alanına mükemmel şekilde olur. Izgara sütun ve satır sayılarının yanı sıra bunların boyut ve aralığı üzerinde oynamak site ziyaretçileri için daha iyi bir düzen oluşturabilir.
Sütunlar ve satırların boyutu ,farklı ızgara türleri kullanılarak tanımlanabilir.
- Sabit(piksel): Izgarayı oluşturmak için sütunlardan ve satırlandan birinin boyutunu belli sayıda ekran pikseline ayarlamanız gerekir. Sütunlar veya satırlardan birinin veya tümünün tüm cihazlarda sabit bir boyutta kalacağı anlamına gelir.
- Akışkan(yüzdeler ve kesirler): Akışkan ızgaralar çeşitli cihazlarda tutarlı bir görüntü ve his sağlayarak, ekran boyutlarına göre otomatik olarak ayarlanır.
5.Tüm cihazlarada çalışması için görüntüleri optimize edin
Görüntü kalitesi , tasarımın anlaşılabilir olmasını büyük ölçüde etkiler. Kaliteli ve düzgün boyutlu resimlere sahip bir web sayfası site ziyaretçileri için olumlu bir etki bırakması daha olasıdır.
Görsellerinizin farklı ekranlar için en yüksek kaliteyi ve doğru en boy oranını korumasını sağlamak önemlidir.
Resimleri uygun şekilde boyutlandırın
- CCC: CSS genişliği ve maksimum genişlik özelliği, farklı ekrandaki görüntülerin çözünürlüklerinine uyarlanmasına yardımcı olabilir. Genişlik, görüntünün sabit genişliğini, Maksimum genişlik, görüntünün en boy oranını ve orantılarını tanımlar.
Mümkün olduğunda SVG dosyalarını kullanın
JPG ve PNG görüntülerin belirli çözünürlükleri vardır. ancak SVG görüntülerin çözünürlükten bağımsızdır. Çünkü kaliteden ödün vermeden boyut olarak ölçeklenmesini sağlayan bir vektör biçimidir.
SVG’ler çözünürlük ne olursa olsun aynı kaliteyi korur ve optimizasyona ihtiyaç duymaz.Vektör grafikleri kullanırken SVG dosyalarını kullanmayı deneyebilirsiniz.
6.Tüm cihazlarada çalışması için tipografiyi optimize edin
Görüntüler ve metinler iyi bir web deneyimi için oldukça önemlidir. Kaliteli bir okunabilirlik iyi kullanıcı deneyimi sunar.
İyi ölçeklenmiş yazı tipi seçin
Tasarımınız için doğru yazı tipini seçerken hem büyük hem küçük ekranlar için uygun olduğunu kontrol ediniz.Farklı ekranda kaliteli olmaz ise siteye gelecek kullanıcılar için olumsuz bir deneyim sunacaktır. Web ile uyumlu yazı tiplerini örnek vermek gerekirse Helvetica ve Roboto gibi web siteleri için en iyi tiplerinden bazılarını Ankara Web tasarım olarak öneririz. Farklı ekranlar içinde optimize edilmesi gerekebilir.
Yazı tipi boyutlarına değişken birimler tanımlayın
Yazı tipini doğru seçmenin yanı sıra ekranı yeniden boyutlandırırken metinlerinizin düzgün olarak şekillemesi çok önemlidir. Mobil kullanıcıların çoğunluğu metinlerini okurken yakınlaştırmayı tercih eder.