İlginizi Çekebilir
  1. Ana Sayfa
  2. Nasıl Yapılır?

Responsive VS Adaptive

Responsive VS Adaptive
responsive tasarım nedir
+ - 0

Responsive Tasarım Nedir?

Responsive tasarım, farklı ekranlar için muhteşem imkanlar sunuyor. Eskiden masaüstü veya mobil için içeriğe göre ortalama bir ekran ölçüsü belirlerdik. Ekranlar arttıkça, içerikler çeşitlendikçe ve rekabet koşulları değiştikçe bu anlamda çok şey konuşulmaya söylenmeye başlandı. Birçoğumuzun bildiği, birçoğumuzun sadece duyduğu, bazılarının ise hiç duyup görmediği renponsive tasarım prensiplerini anlamak için, iyi bir başlangıç olduğunu düşünerek basit anlatımlı 9 başlık altında paylaşmaya karar verdik.

Responsive mi Adaptive mi?

Aynı şey gibi dursa da aslında değil. İki yaklaşım da birbirini tamamlar. Yanlış veya doğru diyemeyiz. İçerik neyi gerektiriyorsa ona göre karar verilir.

Responsivevsadaptive

Akış / Flow

Ekran boyutları küçüldükçe, içerik daha da dikey olmaya başladı. Scroll etmeye zaten alıştık, bu böyle uzun bir süre daha gidecek gibi.

Responsivevsadaptive

Ekrana göre yüzde hesapları / Relative units

Masaüstü, mobil ekran veya ikisi arasındaki birimlere göre çalışırken pixel’ler değişkendir ve işi zorlaştırır. Bu yüzden daha esnek birimlerle yani yüzdelerle çalışıyoruz. %50 dediğimizde bizim için her zaman aynı şeyi ifade eder, %50 her zaman ekranın yarısı veya belli bir birimin yarısını her zaman aynı oranda almak gerektiğini söyler.

Responsivevsadaptive

Kırılım noktaları / Breakpoints

Tasarımda yatay veya dikey guide çizgilere sadık kalıyoruz ve bu çizgiler bizim içeriğimizin buralardan kırılacağını ve bir alt satıra kayacağını anlatıyor bize. Masaüstündeki 3 kolon, mobilde tek kolona düşebiliyor bu şekilde. Birçok CSS özelliği bir kırılım noktasından diğerine olan değere göre yazılıyor. Bu guide’lar içeriğe göre şekil alıyor yine tabi. Eğer bir cümle kırılıyorsa oraya bir breakpoint vermek gerekiyor gibi. İş de tam burada nerede breakpoint verdiğimizde neyle sonuçlanıyor, onu doğru hesaplamaktan geçiyor açıkçası.

Responsivevsadaptive

Maksimum ve minimum değerler

Telefonda ekrana tam oturduğunda müthiş sonuç veren bazı içerikler, siz o telefonu televizyona bağladığınızda geniş ekrandayken öyle görünmez ya, işte orada öyle gelişigüzel görünmesin diye maksimum bir değer atıyoruz. Örneğin ona şöyle bir değer veriyoruz “genişliğin 100% olsun ve maksimum 1000px’e kadar genişle” gibi.

Responsivevsadaptive

Gruplu objeler / Nested objects

Ayrı ayrı hareket etmeleri işimizi zorlaştırdığından nesneleri grupluyoruz ve bu şekilde hareket ettiriyoruz. Piksel’ler burada işimizi kolaylaştırıyor. Logo ve butonlar gibi büyüyüp küçülmesini istemediğiniz objeler için piksel bazlı değer vermek ve gruplamak ise daha doğru.

Responsivevsadaptive

Tasarımı mobile göre mi masaüstüne göre mi yapalım? / Mobile or desktop first?

Genellikle kafa karıştıran ama aslında sonucu çok da etkilemeyen responsive yapılmasını anlamlı kılan sorulardır bunlar. Teknik olarak bir fark yoktur aslında. İsterseniz küçük ekrandan tasarlamaya başlayın isterseniz büyükten. Evet sonuçta tasarım mobilden başlarsanız bazı limitleri öngörebilir, bu limitleri koyarak ilerleyebilirsiniz.

Responsivevsadaptive

Webfont mu, sistem fontu mu?

Tabi ki webfont kullanın! Sayfaların hızlı yüklenmesini ve fontlarınızın keskin ve parlak görünmesini istiyorsanız artık bir süredir webfont diye bir şey var, bunu da bilmekte fayda var.

Responsivevsadaptive

Bitmap mi vektör mü?

İkonunuz öyle detaylı, oyuncaklı, efektliyse bitmap, değilse vektör kullanın. Bitmap için, jpg, png, veya gif formatları, vektör olanlar içinse, SVG veya font-ikon tercih etseniz iyi olur. İmajları her zaman optimize ederek online edin, ikonları da. Bu arada vektörler küçük de olsa bazı tarayıcılar desteklemiyor. Yuvarlak hatlı bir ikonsa hele iyice çok yer kaplayacağından bitmap’ten daha büyük olabilir. Optimizasyon işi önemli bu yüzden küçük detayları atlamayın, boyut konusunu es geçmeyin.

Responsivevsadaptive

Okuduğunuz yazıya vesile olan orjinal metin ve görseller şu linkten alınmıştır.

Yazar Hakkında

Bu Yazıyı Yorumla