Responsive mobil web sitelerin küçük püf noktaları

Bu resim ironegg.com adresinden alınmıştır.
Bu resim ironegg.com adresinden alınmıştır.

Normal web sitesine geri dön

Backto website

Bazı web sitelerinde kullanılan Iframeler nedeniyle bunu mutlaka koymalıyız. Öyle ki bağlanılan başka bir web sitesi eğer mobil uyumlu değilse ve responsive yapıdan kurtulamıyorsak web sitesinin işlevini tamamen yitirmiş oluyoruz. Ayrıca güncelleştirmeler çoğu zaman her haliyle test edilmez veya buglar keşfedilebilir. Bu nedenle bir takım sayfalarda sorun yaşandığında geçiçi çözüm yolu olarak kullanılabilir. Bunu da Cookie ile sağlayabiliriz.

Menülerin animasyonu pozisyonlara göre konumlanmalı

İnsanlar aslında teknik insanlardan ziyade buttonun aslında <button> olduğunu bilmezler. Kullanıcı için button’un anlamı başka bir hissiyat taşır. Tıklandığında fiziksel bir takım etkileşim yaşar ve buna göre pozisyon almasını ister.

true-mobile-experince

Üst bölümde olan menülere tıklandığında menünün animasyonu yandan değil üstten gelmelidir. Çünkü bizler bugüne kadar bu tür evrimsel süreçten geçtik ve bir anda bıraktığımız şeyler aşağıya düştüler. Hatta zamanınız varsa button gerçekten button gibi davranarak menün altından animasyon ile çıkmalı.

Yan menüler ancak aşağıdaki gibi kullanmalı. (Yan menü butonu varsa)

SideMenü
SideMenu

Mobil uyumlu <table>

Table mobil uyum süreci için her zaman sıkıntılıdır.  Çünkü table gösterimler mobil için tasarlanmamışlardır. Bu durumun en kötü tarafıysa şu anda maalesef alternatif gösteriş şeklimizin olmayışı (En azından bilindik yok). Bu durumun nedeni table gösterimin gerek iş dünyasında gerekse karşılaştırmalı ifadelerde uzunca bir süredir kullanılıyor olması olarak düşünüyorum. Bu nedenle bu probleme çözüm bulmalıyız.

Düşündüğümüz ve kullanılan çözüm önerileri;

Mobil telefonlarda en fazla 3 adet kolon gösterilmelidir.
Google’ın bulduğu çözüm de 3’lü olmasını öneriyor. Ayrıca Google son kolonu kaydırır bir şekilde kullanıyor. İnsanlar şu anda kayan bir deneyime alışkın değiller ve menüyü kaydırmak psikolojik olarak insanlara zor geliyor. Bu nedenle önerimiz tam olarak son iki veya son kolonu açılır menü ile kullanıcıya sunmak yani şöyle bir şey;

Filament Responsive Table
Filament Responsive Table

LIVE DEMO

 

 

“Responsive mobil web sitelerin küçük püf noktaları” üzerine 5 yorum

  1. Oh my goodness! an incredible article dude. Thanks Nevertheless I am experiencing issue with ur rss . Don’t know why Unable to subscribe to it. Is there anybody getting equivalent rss downside? Anyone who knows kindly respond. Thnkx

  2. Responsive table için şu tekniği incelemenizi öneririm.
    http://codepen.io/alico/pen/bpLgOL

    Çok pratik çözümler sunumamızı kolaylaştıryor front-end’ini aldığım bir iş aşağıdaki table örneklerinin dönüşümünü paylaşmak isterim.

    http://alico.me/atolye/project/lazika/page/siparis-adres.php
    http://alico.me/atolye/project/lazika/page/user-paralika.php
    http://alico.me/atolye/project/lazika/page/user-siparisler.php

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir