Responsive HTML5

ResponsiveGünümüzde profesyonel tasarımlar artık WWW (World Wide Web) erişimine sahip tüm cihazlara uygun olarak hazırlanmakta. Bu liste ne yazık ki akıllı telefonlar ve tabletler ile bitmiyor. Her geçen gün farklı ekran boyutlarına sahip yeni cihazlar çıkmaya devam ediyor.

Bu makalemizde taşınabilir cihazlara uyumlu HTML5 taslağı oluşturacağız.

ÖRNEĞİ GÖRÜNTÜLE

Responsive

Responsive‘i Türkçeleştirecek olursak hassas veya duyarlı kelimelerini kullanırdık. Bir tasarımın, küçük veya büyük ekran boyutlarına sahip cihazlarda da düzgün görünmesi, cihazların ekran boyutuna uyum sağlaması onu hassas ve duyarlı kılmakta. Gelişen teknoloji de web geliştiricilerini responsive tasarımlar üretmeye teşvik etmekte.

Neden HTML5?

HTML5 ile web sayfalarının iskeleti basitleştirildi. Birçok kod tarihin tozlu sayfalarına kaldırılırken yenilikler de beraberinde geldi. Bu örneğimizde HTML5’in aşağıdaki elemanlarını kullanacağız.

  1. <header>
  2. <nav>
  3. <article>
  4. <footer>

Tasarım

Artık tasarımımızı oluşturmaya başlayabiliriz. Sitemizi üstten aşağıya doğru hazırlayalım.

Taslak

İskelet

Sayfamızın genel yapısını oluşturmakla başlayalım.

<!DOCTYPE html>
<html>
<head>
<title>Adobewordpress.com ~ Responsive HTML5</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
Sayfa içeriği buraya gelecek.
</body>
</html>

CSS dosyamıza da body tanımlamamızı yapalım. Beraberinde Google Fonts üzerinden Carrois Gothic isimli yazı tipini de çekelim.

@import url(http://fonts.googleapis.com/css?family=Carrois+Gothic+SC);

body {
margin: 0;
color: #d2d2d2;
font: 1.3em/1.6 'Carrois Gothic SC',sans-serif;
}

Bu kodlarını kullanarak .html dosyamızı oluşturalım. Ayrıca yukarıda gördüğünüz gibi style.css isimli bir dosyayı HTML sayfamıza bağlattık. HTML dosyasının yanına style.css isimli CSS dosyamızı da oluşturalım.

Aşağıdaki HTML kodlarının hepsi <body> içerisine, CSS kodları da style.css içine yerleştirilecek.

Çerçeveleyici : Wrapper

Web sayfamızı en dıştan body çerçevelemekte. Body’nin içerisinde de oluşturacağımız wrapper bu işlemi yapacak.

HTML Kodları

<div class="wrapper"></div>

Şimdi wrapper için tasarımımızı atayalım. Sadece ortalama boyut belirtiyoruz. Ayrıca margin:auto kullanarak sayfanın ortasında durmasını sağlıyoruz.

CSS Kodları

.wrapper {
margin: auto;
width: 90%;
}

Header

Şimdi sitemizin üst kısmını kapsayan header elemanımızı hazırlayacağız. Özel bir içerik eklemiyoruz, sadece logo için ayrı bir span tanımlıyoruz.

HTML Kodları

<div class="wrapper">
<header>
<span class="logo">sayfa açiklamasi</span>
</header>
</div>

CSS Kodları
Üst kısmı biraz yuvarlamak için border-radius kullandık.

header{
background: #2a2a2a;
text-align: center;
border-radius:10px 10px 0 0;
}

.logo{width:100%; height:100px; line-height:100px; text-align:center;}

Nav

Üst kısımdaki yatay menümüzü oluşturalım.

Bu da ilginizi çekebilir  CSS3 ile Animasyonlu Resim Geçişi

HTML Kodları

<div class="wrapper">
<header>
<span class="logo">sayfa açiklamasi</span>
<nav>
<ul>
<li>anasayfa</li>
<li>dersler</li>
<li>makaleler</li>
<li>portfolio</li>
<li>kontak</li>
</nav>
</header>
</div>

CSS Kodları

Navigasyon için list-style:none ile baştaki işaretleyicileri kaldırıyoruz. Ayrıca ul ve li tanımlamalarımızı da yapıyoruz.

nav {width:100%; background-color:#454545;}

nav ul{list-style:none; display: inline-block;}

nav ul li{
display: inline-block;
text-decoration: none;
padding: 0 .75em;
border-right: 1px solid;
font-size: .8em;
line-height: 1rem;
}

nav ul li:last-child {border-right: none;}

Content

Yanyana bulunan sidebar ve içerik alanlarını content classı atanmış bir div içine yerleştirelim ve taşmaları önlemek için overflow kullanalım. Aynı zamanda header alanındaki taşmaları da engelleyeceğiz.

HTML Kodları

<div class="wrapper">
<header>
<span class="logo">sayfa açiklamasi</span>
<nav>
<ul>
<li>anasayfa</li>
<li>dersler</li>
<li>makaleler</li>
<li>portfolio</li>
<li>kontak</li>
</nav>
</header>
<div class="content"></div>
</div>

CSS Kodları

.logo,
.content,
header{
overflow: hidden;
}

İçerik alanları

Şimdi sırada icerik ve sidebar olarak isimlendirilen alanları eklemek var. Bu iki alanı da kolon kelimesiyle classlayarak ikisine özgün bir tasarım oluşturacağız.

HTML Kodları

<div class="wrapper">
<header>
<span class="logo">sayfa açiklamasi</span>
<nav>
<ul>
<li>anasayfa</li>
<li>dersler</li>
<li>makaleler</li>
<li>portfolio</li>
<li>kontak</li>
</nav>
</header>
<div class="content">
<div class="icerik kolon">
<article>yazilar</article>
</div>
<div class="sidebar kolon">
sidebar
</div>
</div>
<footer>
footer
</footer>
</div>

CSS Kodları

.kolon {
height: 240px;
}

.icerik {
background: #5f5f5f;
}

.sidebar {
display: none;
background: #787878;
}

Footer

Footer için ise headera yakın bir tasarım oluşturacağız.

HTML Kodları

<div class="wrapper">
<header>
<span class="logo">sayfa açiklamasi</span>
<nav>
<ul>
<li>anasayfa</li>
<li>dersler</li>
<li>makaleler</li>
<li>portfolio</li>
<li>kontak</li>
</nav>
</header>
<div class="content">
<div class="icerik kolon">
<article>yazilar</article>
</div>
<div class="sidebar kolon">
sidebar
</div>
</div>
<footer>
footer
</footer>
</div>

CSS Kodları

footer,
.kolon {padding:2%;}

Mobil cihazlar

Cep telefonları için en küçük genişliği 481 piksel olan, ve sol tarafta bulunan içeriğin boyutlandırmasını yapan bir CSS kodu ekleyelim.

@media only screen and (min-width: 481px) {
.kolon {padding:2%;
float: right;
}
.icerik {
width: 97.872340425532%;
}
}

Tablet, masaüstü ve türevi cihazlar için CSS tanımlayalım.

@media only screen and (min-width: 769px) {
.logo {
float: left;
}
nav {
float: right;
}
.icerik {

width: 72.595744680851%;
}
.sidebar {
display: block;
width: 19.404255319149%;
}
}

@media only screen and (min-width: 1024px) {
.wrapper {
width: 980px;
}
}

Kapanış

Unutmayın ki bu örnek sadece temel anlamda hazırlanmıştır. Gelişen HTML ve CSS mobil cihazlara uyumlu tasarımlar oluşturmamızı kolaylaştırmakta.

Yukarıdaki taslağın örneğinde, alanların üzerine gelindiğinde küçük renk geçişleri yapılmasını sağlayan bir adet CSS kodu daha kullanmıştık. Eğer ilginizi çekerse;

.logo:hover,
nav:hover,
.icerik:hover,
.sidebar:hover,
footer:hover{
position:relative;
background-color:#aa484a;
color:white;
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}


  • Mississippi

    Vatanay bey çalışma şeklinizi artık çözdüm. Adobewordpress de yaptığınız güncellemeleri aynı anda ders olarak yazıyorsunuz. Mesela son yarım saattir CSS kodlarıyla oynadınız, sitenin sağı solu kayar gibi oldu =) Yani asıl amaç siteyi geliştirmek, eh o arada ziyaretçilerede paylaşayım yaptıklarımı diyorsunuz =) Yanlış mıyım

    • İyi yakalamışsınız 🙂

  • Developer

    Gerçekten çok yararlı bir yazı tasarım konusunda sizden öğrenecek çok şeyim var.
    Teşekkür Ederim

  • Mürsel

    Çok yararlı oldu kendi adıma. Yaklaşık bir haftadır responsive design ile ilgili bulduğum tek yararlı Türkçe kaynak. İyi çalışmalar.