web-design-2

Responsive web sitesi tasarımı

Responsive tasarım: Duyarlı web tasarımı, web sayfalarının çeşitli cihazlarda ve pencere veya ekran boyutlarında iyi görüntülenmesini sağlayan web tasarımına bir yaklaşımdır. Hazırladığım web sitesi bilgisayar, tablet ve telefon uyumludur.

• Flex yapısı kullanıldı.

• Ekranın max genişliği 980px'in altına düşünce tablet uyumluluğu,

• max genişlik 600px'in altına düşünce telefon uyumluluğunu yakalayacaktır.

• İçerikteki yazılar latincedir. Amacım responsive web sitesi yapmak olduğu için yazılara özenmedim.

• iconlar fontawesome.com'dan alınmıştır.

• Site başta banner sonra 3 section ve son olarak footer bölümü olmak üzere toplam 5 bölümden oluşmaktadır.

• Bu bölümlerin hepsi bir wrapper'ın içinde bulunmaktadır.

1.bölüm

• Bu bölümde header, menu, h2, p ve butonumuz bulunmaktadır.
• Tablet ve bilgisayarlarda header(title yazan kısım) görünürken telefonlarda menü ile birbirlerine karışmaması için görünmemektedir.
• 1.Bölümün bilgisayar görüntüsü;

• 1 bölümün tablet görüntüsü;

• 1 bölümün telefon görüntüsü;

2.bölüm

• Bu bölümde h2, p tagı, kutular divi ve kutular divinin içinde 3 tane kutu bulunmaktadır.

• Her kutunun içinde 1 resim 1 h3 başlık ve p tagı bulunmaktadır.

• 2.Bölümün bilgisayar görüntüsü;

• 2.Bölümün tablet görüntüsü;

• 2.Bölümün telefon görüntüsü;

3.bölüm

• Bu section 2. bölümle neredeyse aynı mantıktır. "kisiler" adlı divin içinde 4 adet "kisi" adında div bulunmakta ve divlerin içi yazı ve resimle doldurulmaktadır.

• Her bir "kisi" divinin tabletlerde ikişerli, telefonlarda tekli olarak yukarıdan aşağıya hizalanması için flex-wrap yapısı wrap yapılmıştır.

• 3.Bölümün bilgisayar görüntüsü;

• 3.Bölümün tablet görüntüsü;

• 3.Bölümün telefon görüntüsü;

4. bölüm

• 2 text, 1 textarea ve 1 butondan oluşmaktadır.

• Mobil görünümünde hepsi alt alta hizalanacak ve ekranın %80 ini kaplayacaktır.

• 4.Bölümün bilgisayar görüntüsü;

• 4.Bölümün tablet görüntüsü;

• 4.Bölümün telefon görüntüsü;

5.bölüm(footer)

• Bölüm 4 başlık ve her başlığın altında 4'er link olmak üzere 16 linkten ve 3 icondan oluşmaktadır.

• Normalde sitelerde önceki yazılar veya kullanıcının dikkatini çekebilecek sayfaların linkleri verilir.

• Tablet görünümünde ikişer başlık yan yana görünürken telefon görünümünde tekli olarak başlıklar, linkler ve iconlar yukarıdan aşağıya hizalanır.

• 5.Bölümün bilgisayar görüntüsü;

• 5.Bölümün tablet görüntüsü;

• 5.Bölümün telefon görüntüsü;