Responsive Tasarım ve Projenin Tanıtımı

Merhabalar,

Web tasarım derslerinin son bölümü olan responsive tasarım konusundasınız. Bu bölümde responsive tasarımın ne anlama geldiğini ve nasıl responsive web sitesi tasarlayabileceğinizi öğreneceksiniz.

Responsive Tasarım

Responsive dilimizde uyumlu anlamına gelmektedir. Web tasarımında ise responsive'den kasıt farklı platformlara göre tasarımın uyum sağlamasıdır. Örneğin; responsive ile yapılmış bir web sitesi masaüstünde farklı görünürken mobil bir cihazda daha farklı görünecektir. Bu fark ayrımını daha ayrıntılı görebilmek için size hemen responsive web sitelerin sergilendiği bir adres vereyim: mediaqueri.es

Gördüğünüz üzere hazırlanan web siteleri farklı tarayıcı boyutlarına göre yeniden şekillenmektedir. İşte buna responsive tasarım diyoruz.

Responsive tasarım kafanızda genel itibariyle yer ettiyse şimdi size kısaca nasıl geliştirildiğinden söz edeyim:

2010 yılının mayıs ayında web tasarımcısı ve geliştiricisi Ethan Marcotte responsive web tasarımın adını koydu ve responsive web design kelimelerinin kısaltması olan RWD'yi kendi yazdığı bir makalede kullandı. 2011 yılında ise yine kendi yazdığı Responsive Web Design adlı kitapta bu tekniğin teoride ve pratikte nasıl kullanılacağını açıkladı. Bu tarihten itibaren responsive tasarım büyük bir patlama yaşadı ve 2012 yılında NET Dergisi tarafından yılın ikinci büyük trendi seçildi. Dünyanın en çok ziyaret edilen ilk 200 sitesi içerisinde yer alan Mashable ise 2013'ü responsive web tasarımın yılı olarak duyurdu.

Bugün birçok web tasarımcısı ve geliştiricisi responsive web tasarımı, mobil uygulamalara göre daha uygun maliyetli olması sebebiyle önermektedir ve tercih etmektedir. Örneğin; deneme.com'u cep telefonlarından ziyaret edebilmek için m.deneme.com adlı yeni bir mobil site oluşturmak gerekirken responsive tasarımda böyle bir zorunluluk yoktur. Artı olarak deneme.com için ayrı bir iOS ya da Android uygulaması yazılmasına gerek yoktur.

Responsive tasarım, standart tasarıma göre daha avantajlı gibi görünse de bazı dezavantajları vardır. Bunlardan en önemlisi standart tasarımlarda yapılabilen bazı tasarımların responsive tasarıma uyarlanamamasıdır. Ayrıca responsive sitelerin görünümleri standart tasarımlara göre daha basit ve sadedir.

Responsive tasarımda kullanılan en büyük teknik CSS3 ile birlikte gelen media queries tekniğidir. Şimdi bu tekniği kullanarak nasıl responsive web sitesi tasarlayabileceğimizi öğrenelim.

Projenin Tanıtımı

Çalıştığımız firma iş alıyor. Türk AntiVirüs firması web sitelerini beğenmediklerini söylüyorlar. Bizden basit ve sade bir site yapmamızı, ayrıca bu sitenin mobil cihazlar (akıllı telefonlar, tabletler vs.) ile uyumlu olmasını istiyorlar. Biz de "yaparıs... hallederis..." diyoruz ve işe başlıyoruz.

Tasarlayacağımız siteyi ise aşağıdaki bağlantıdan ziyaret edebilirsiniz. Tarayıcınızın boyutunu küçülttükçe tasarımın değiştiğini fark edeceksiniz. Ayrıca eğer kullanıyorsanız akıllı telefonunuzdan da sitenin nasıl göründüğünü inceleyebilirsiniz. Yatay ve dikey görünümlerde tasarımın değiştiğini görebilirsiniz.

Eğer hazırsanız ilk responsive sitemizi tasarlamaya başlayalım.

Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.

Birinci adımı tamamladınız. Bir sonraki bölümde projemizi oluşturacağız.