20Tem 2012

Web tasarımda yeni trend: Responsive Design

1 MAKALELER 0

Bir süredir hayatımızın bir parçası haline gelen akıllı telefonlar ve tabletler, web tasarım dünyasını da etkilemeye devam ediyor. Website sahipleri mobil cihaz uyumluluğuna her geçen gün eskisinden daha fazla önem verdikçe, web geliştiricileri de bu konuda çeşitli teknikler ortaya çıkarmaya başladı. Aslında yaklaşık 2 yıllık bir geçmişi olsa da ülkemizde birkaç aydır bu kodlama tekniğini sıkça görür ve duyar oldum: Responsive Design; adı üzerinde Uyumlu Tasarım.

Daha önce mobil cihaz uyumlu web siteleri için hiç de pratik olmayan yöntemlerle web çözümleri geliştiriyorduk. Neyse ki web geliştiricileri için çok daha pratik çözümler ortaya çıkmaya başladı. Responsive Design, website sahipleri için bir trend; web tasarımcılar içinse yeni sayılabilecek bir kodlama tekniği. Kısacası, bu teknik ile bir web sitesinin farklı ekran çözünürlüklerinde otomatik olarak farklı görünmesi sağlanıyor. Böylece iPad, iPhone gibi farklı ekran çözünürlüklerine sahip tüm mobil cihazlar için ayrı Html kodlamaları yapmadan mobil uyumlu web siteleri geliştirebiliyoruz. Reponsive design şu sıralar o kadar yaygınlaştı ki bu teknikle kodlanan WordPress temalarına da sıkça rastlar oldum.

Uyumlu tasarımın ne demek olduğunu yazının en altındaki örneklerden daha iyi anlayabilirsiniz. En bilinen sitelerden bir tanesi CSS-Tricks. Siteye girip, tarayıcınızın genişliğini küçültmeye başladığınızda tasarımın otomatik olarak değiştiğini göreceksiniz.

Form CMS

Staff Anstorp

2011 dConstruct

Responsive Design tekniği ile nasıl kodlama yapılır?

Responsive Design’ı daha iyi anlatabilmem için daha fazla teknik detaydan bahsetmem gerekiyor. Çünkü Responsive Design oldukça ileri seviyede bir kodlama tekniği. Bu nedenle başlangıç seviyesindeki web tasarımcılar için başlangıçta zor gelebilir. Ama Html&CSS ile aranız iyiyse sizi bir basamak daha ileriye götürecek bir teknik bu. Çünkü bu teknik sayesinde Html5 ve CSS 3 ile fazlasıyla haşır neşir olacaksınız.

Responsive Design temelde, esnek grid yapıları kullanarak değişken layout’lar oluşturma prensibine dayanıyor. (Esnek gridleri sıfırdan oluşturmak istemeyenler, Responsive Design için uygun, hazır framework‘leri internetten bulabilirler. Twitter ve Github işbirliği ile geliştirilen Bootstrap bunlardan bir tanesi.) Tek bir CSS dosyasında, aynı class’lara farklı genişliklerde farklı değerler tanımlanarak geliştiriliyor. Örneğin; bir sitenin Html kodlamasını yaparken, aynı CSS class’larına 767px genişlikten küçük ekranlar için farklı, 767px – 979px arası ekranlar için farklı, 979px’den büyük ekranlar için farklı özellikler tanımlayabiliyorsunuz. Böylece site tasarımının iPhone, iPad, Netbook gibi farklı çözünürlüklü her cihaza özel olarak geliştirilmesi sağlanıyor.

Responsive Design’ın tüm tekniklerini ve detaylarını burada anlatmam mümkün değil. Tek istediğim, Responsive Design’ın kısaca ne olduğundan bahsedip, henüz haberdar olmayanların dikkatini çekmekti. Kendini bu teknikte geliştirmek isteyenler için internette fazlasıyla kaynak mevcut. Aşağıdaki linklerden başlayabilirsiniz.