Responsive Tasarım
Farklı ekran büyüklüklerine, akışkan bir şekilde uyum sağlayabilen tasarım yaklaşımına responsive deniyor.
“Responsive tasarım sadece web için değildir, teknoloji dünyasında her tür platform için kullanılması gereken bir mimaridir.”
Neden responsive tasarıma ihtiyaç duyulur?
Geliştirdiğiniz bir yazılımın birden çok platformda/ekranda çalışmasını hedefliyorsanız, responsive tasarıma ihtiyacınız vardır. Bu sayede her platform için ayrı ayrı efor harcamak zorunda kalmazsınız. Bu konu UX (Kullanıcı deneyimi) açısından da oldukça önemlidir. Responsive tasarım uygulamanızın arama motorlarında da üst sıralarda çıkmasını sağlar. Gelin aşağıdaki resimle olayı anlamaya çalışalım.
Yukarıdaki resimi çok seviyorum. “İçerik su gibidir, neyin içerisine koyarsanız o şekle bürünür.” Bu biraz tasarım pazarlama stratejisi ile ilgili olsa da, responsive tasarıma da gayet uymaktadır. Responsive tasarım; tasarımınız veya ürününüz neyin içerisinde olursa olsun (mobile, desktop, tablet), onun şekline en uygun şekilde yerleşmesidir.
Responsive mimariyi tek URL ile, tek içerik ile, tek kod ile, CSS3 Media Queries kullanarak faklı platformlara uygulama geliştirmek olarak da adlandırabiliriz.
Basılı medya her zaman için tutarlılığı koruyabilmek ve dizgiye hükmedebilmek için gazete tasarımlarında grid (ızgara) yapısı kullanır. Bu dizgi yaklaşımı web dünyasında da en iyi yöntemlerden biri olarak görülmekte ve yazılım dünyasında kazandığı dinamiklikle, responsive olarak adlandırılmaktadır.
Izgaralarla (Grid) Responsive Tasarım
“Responsive tasarımda kimi zaman grid yapısı, kimi zaman minimum maximum ölçeklemeler, kimi zaman da farklı yaklaşımlar kullanılabiliyor. Ama biz burada grid yapısına değineceğiz. Ki grid yapısının şu anda dünyada en iyi pratikler arasında olduğunu bilmenizi isteriz.”
Grid (Izgara) nedir?
Grid ızgara anlamına gelmektedir. Önyüz tasarımcılar için arayüzün iskeletidir. Kullanıcıya görünmeyen, sanal hizalama çizgileridir. Tüm öğelerin (modüllerin) sayfa üzerinde grid çizgileri baz alınarak yatay veya dikey olarak dağıtılmasıdır. Değişen ekran büyüklüklerine göre de, grid üzerinde kapladığı alanın belirlenen grid sayısınca arttırılıp/azaltılmasıdır. Gerektiğinde de öğenin gizlenmesidir.
Aşağıdaki resimde örnek bir grid yapısı görebilirsiniz. Grid deseni son kullanıcıya sayfada görünmez, ama yazılımcı önyüz geliştirmesini bu kutucuklara göre yapar. İlgili bileşen (component) için genişlik girmenize gerek kalmaz. Tüm genişlik ve yükseklikleri önceden belirlediğiniz grid ile yönetebilmenizi sağlar.
Aşağıda detaylı, örnek bir wireframing (taslak) dizgi çalışması görüyorsunuz. Yapılan çalışmada zeminde grid baz alınarak, öğelerin dağıtımı sağlanmıştır.
Bir sayfa nasıl responsive yapılır?
Responsive yaklaşım yazılım dilleri üstü bir desendir. Herşeyden önce sözel olarak bilgi mimarisini oluşturmalısınız. Sonrasında ilgili nesneleri tasarlayıp, ekrana grid çizgileri üzerinde dağıtmalısınız.
Typography
Tipografi denilince akla fontlar gelmeli. Bu makaledeki farklı font büyüklükleri, renk aralıklarına bakarak tipografiden neyi kastettiğimizi tam olarak görebilirsiniz. Responsive tasarımda, sayfanızın farklı ekran büyüklüklerinde okunabilir olması çok önemli.
Mobil cihazlarda satır başına 60–75 karakter sayısına sadık kalınmalı. Kullanıcının yazıları okuması açısından önemli bir sınırlamadır.
Resim Büyüklükleri
Resimlerin büyüklüğü de ekran büyüklüklerine göre değişmeli. Sayfanızın yüklenme süresi de, kullanıcı için oldukça önemli. Bu yüzden tasarımcı, resim büyüklüklerini de, farklı ekran büyüklüklerine göre ayarlamalı.
Bir masaüstü sayfasının tam çözünürlük için 1200 piksel genişliğinde bir görüntüye ihtiyacı olabilirken, o sayfanın mobil sürümü yalnızca 400 piksel genişliğinde o görüntüye ihtiyaç duyabilir.
Responsive Yaşam Döngüsü
Peki her defasında hangi aşamalara dikkat etmelisiniz? Başka bir deyişle Responsive yaşam döngüsü nasıl olmalıdır?
Bunun için sayfanın tasarımına başlarken aşağıdaki BPMN (Süreç çizimi) adımlarını kullanabilirsiniz.
UX Researcher ve Interaction Designer, UX dünyasındaki mesleki tanımlamalardır.
- Ux Researcher: Bilgi mimarisini sözel olarak oluşturan kişi.
- Interaction Designer: Sözel verinin estetik kaygısı gözetmeden dizgisel olarak görselleştirilmesini sağlamakla yükümlü kişidir.
- Mobile First: Tasarıma başlarken mobile uygulamaya yönelik bir uygulama yapacaksanız, bu bakış açısı ile başlamalısınız. Ancak uygulamanız responsive olacaksa her halükarda bununla başlamak en iyisi.
- Mockup: Wireframing’lerin görselleştirilmesidir. Burada estetik kaygısı gözetilir.
- Prototip: Uygulamanın kodlama öncesinde, mockuplar kullanılarak gerçek bir uygulama gibi çalışmasıdır.
CSS ile Responsive Kodlama
Web’de responsive tasarım için CSS özelliği olan display:flex veya display:grid kullanabilirsiniz. Ben display:grid kullanmanızı öneriyorum. Sebebiyse grid’de sayfa yüklenmeden önce kriterlerin konulmasından dolayı.
Flex ve Grid farkı nedir?
Tek sütunlu veya tek satırlı bir sıralama yapacaksanız flex kullanabilirsiniz. Hem sütun, hem de satırlı konumlandırma yapacaksanız o zaman grid kullanmanız daha mantıklı. Yani grid aynı anda dikeyde de, yatayda da objeleri en doğru yere konumlandırma olanağı sunar. Grid için kare bulmaca örneğini kafanızda canlandırabilirsiniz.
Flex bir boyutludur, ama Grid iki boyutludur.
Flex’le yaptıklarınızı Grid ile de rahatlıkla yapabilirsiniz.
Flex: Öğeleri tek bir satırda veya tek bir sütunda düzenlemek için en iyisidir.
Grid: Öğeleri birden çok satır ve sütunda düzenlemek için en iyisidir.
Grid mantığı ile html, css kullanılarak yapılmış detaylı örnekleri aşağıdaki linkten inceleyebilirsiniz.
- Aşağıdaki site tüm ihtimalleri ile en güzel haliyle grid yapısını anlatıyor.
2. Aşağıdaki site farklı sitelerin örneklerini göstererek, grid mantığını kullanarak neler yapabileceğiniz konusunda hayal gücünüze katkıda bulunuyor.
Class bazlı hazır grid kütüphaneleri
CSS kullanmak istemiyorsanız aşağıdaki hazır kütüphaneleri kullanabilirsiniz. Tek yapmanız gereken html tagleri içerisinde ilgili class’lara isimlendirmeleri yapmak. Sayfa kendiliğinden mobile, tablet veya desktop gibi ekranlara uyumlu olacaktır.
Flexbox Grid tavsiyemdir. Ayrıca UI kütüphanesi olarak da Semantic-UI kullanabilirsiniz.
Kaynak:
Not: Bu makale responsive tasarıma teorik yaklaşmıştır. Pratiklerle ilgili de farklı linkler eklenmiştir. Bu makale ara sıra güncellenir. Bilgiler kaynak gösterilmeden kullanılamaz.
