9 Maddede Responsive Tasarım

Responsive Tasarım

Duymayanlar ve çok fikri olmayanlara neden responsive tasarım sorusuna cevap olabilecek, 9 maddede responsive tasarım prensipleri. Responsive tasarım, dijital tasarımda farklı ekranlar için muhteşem imkanlar sunuyor.


1. Uyumlu mu, uyarlanabilir mi? / Responsive vs. Adaptive

Aynı şey gibi dursa da aslında değildir. İki yaklaşım da birbirini tamamlar. Yanlış veya doğru diyemeyiz. İçerik neyi gerektiriyorsa ona göre karar verilir. Aşağıdaki gibi uyarlanabilir olan yani adaptive tasarım uygulamasının responsive’den farkı açıkca görülmektedir. Adaptive tasarım uygulamasında tasarım ekran ölçülerine göre uyarlanır, responsive’de ise tek bir ölçü çalışılır bu tüm ekranlara otomatik olarak uyarlanır. Hangisi daha iyidir yerine göre tartışılır, yine de Google responsive uygulamayı önerir.


9 Maddede Responsive Tasarım

 

2. Akış / Flow

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

 

9 Maddede Responsive Tasarım

 

3. 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 responsive tasarım için daha esnek birimlerle, yüzdelerle çalışılır. Birim olarak %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.

 

9 Maddede Responsive Tasarım

 

4. Kırılımlar / 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ı. Aslında responsive tasarımda olay çoğunlukla, kırılımları doğru uygulamakta, kullanıcıya doğru kullanıcı deneyimleri sunabilmekte.

 

9 Maddede Responsive Tasarım

 

 

5. 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 verme kuralı vardır responsive tasarımda. Örneğin şöyle dersin “sen genişliğini 100% tut ve maksimum 1000px’e kadar genişle, böylece televizyon ekranında da telefon arayüzünde de doğru düzgün görün”.

 

 

9 Maddede Responsive Tasarım

 

 

6. Gruplu objeler / Nested objects

Ayrı ayrı hareket etmeleri işimizi zorlaştırdığından nesneleri grupluyoruz ve bu şekilde hareket ettiriyoruz. Responsive tasarımda 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.

 

 

9 Maddede Responsive Tasarım

 

 

7. 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 ama responsive tasarım yapılmasını da 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.

 

9 Maddede Responsive Tasarım

 

 

 

8.Webfont mu, sistem fontu mu?

Responsive tasarımın dev kuralı webfont! Sayfaların hızlı yüklenmesini ve fontlarınızın keskin ve parlak görünmesini istiyorsanız webfont ne işe yarar bilmekte fayda var.

 

 

9 Maddede Responsive Tasarım

 

 

9. 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. Özellikle responsive tasarımda imajları 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.

 

 

9 Maddede Responsive Tasarım

 

 

* 9 maddede responsive tasarım yazısına vesile olan orjinal metin ve görseller şu linkten alınmıştır.

Leave a Reply

Copyright, Userpusher.