Responsive Web Design ve Development Yaklaşımı

Sevil Yılmaz | Emrah Erkeç - 12 Mart 2013

Fluid | Responsive | Adaptive

Google Trends Web Search Interest: responsive design. Worldwide, May 2010 - Mar 2013.

Responsive Web Design Nedir? “Responsive web design (RWD) çok çeşitli cihazlar üzerinde ideal bir görüntüleme deneyimi (minimum yeniden boyutlandırma, gezinme ve kaydırmayla kolay okuma ve dolaşma) sunacak siteler hazırlanmasını amaçlayan bir web tasarım yaklaşımıdır.” - Wikipedia

Neden Kullanmalıyız?

Because, Google says so.

§  Arama motoru optimizasyonu (SEO)

§  Sürdürülebilirlik

§  Çözünürlük bağımlılığı

1- İçerik güncelleme

2- Yeni özellik ekleme

www.bostonglobe.com

Ethan Marcotte’un Kutsal Üçlüsü Ateş, Su, Tahta

§  Esnek, grid tabanlı sayfa düzeni

§  Esnek, görsel ve ortam dosyaları

§  Media queries

Responsive Sayfa Düzenleri

§  Akışkan sayfa düzeni

§  Adaptive sayfa düzeni

§  Responsive sayfa düzeni

Adaptive Design

Progressive Enhancement

Nasıl Yapılır? Nelere Dikkat Edilmeli?

Sayfa Düzenini Basit Tutun

Kullanın:

§  HTML5 doctype & guidelines §  Normalize stylesheet §  Basit ve anlamsal bir ana sayfa düzeni §  Kritik elementler için basit teknikler

(Navigasyon, menü gibi)

Uzak Durun:

§  Karmaşık div’ler §  Inline stiller §  Gereksiz absolute ya da float pozisyonlama §  Tekrar eden ya da tamamen gerekli olmayan

Media Query’leri Kullanın

Belirlenen ekran genişliğinde istenilen stillerin yüklenmesini sağlar. <link  rel="stylesheet"  href="style.css"  media="(min-­‐width:481px)">    <style>      @import  url(Cny.css)  (min-­‐width:300px);      @import  url(small.css)  (min-­‐width:600px);      @import  url(big.css)  (min-­‐width:900px);  </style>    @media  screen  and  (max-­‐width:  300px)  {      /*  Tiny  styles  */  }  

Hedef Ölçüler Nasıl Belirlenir?

Ara Noktaları Belirleyin 6 Majör Ara Nokta

< 480

< 768

> 768

< 320

768-1024

> 1024

Majör İlk hedef portre modundaki “<480px" akıllı telefonlar olmalı.

Daha büyük akıllı telefonlar ve iPad’ler için <768px koşulu kullanılmalı.

Daha yüksek çözünürlükler için >768px seçilmeli.

Düşük çözünürlüklü cihazlar için <320px stilleri eklenmeli.

Tablet ve iPad manzara modu için >768px and <1024px koşulunu tetikleyin.

Daha geniş ekranlar için >1024px koşulunu kullanın.

Olsa İyi Olur

Sayfa Düzenini Esnek Yapın

Esnek sayfa düzeni tüm çözünürlükler için en iyi yöntemdir.

Grid Sistemleri §  960 Grid System – 960.gs §  Gridset – gridsetapp.com §  Columnal – columnal.com §  Golden GS – goldengridsystem.com §  1140 CSS Grid – cssgrid.net

Görsellerinizi Esnek Yapın

www.responsiveimages.org

<picture>      <source  media="(min-­‐width:  40em)"  srcset="big.jpg  1x,  big-­‐hd.jpg  2x">      <source  srcset="small.jpg  1x,  small-­‐hd.jpg  2x">      <img  src="fallback.jpg"  alt="">  </picture>  

Picture Markup

<img  src="fallback.jpg"  alt=""  srcset="small.jpg  640w  1x,  small-­‐hd.jpg  640w  2x,  med.jpg  1x,  med-­‐hd.jpg  2x  ">  

SRCSET Markup

Göreceli %100 genişlik img  {  max-­‐width:  100%;  }  

Neredeyse Her Şeyi Göreceli Yapın

Ana font-size = 16px olursa; §  width: 46.25em -> 46.25x16 = 740px §  border-width: 0.063em -> 0.063x16 = 1px §  font-size: 1.125em -> 1.125x16 = 18px §  padding: .0325em -> 0.325.25x16 = 5px

Mobilde Doğrusallaştırın

Önemli Olmayan İçerikleri Gizleyin

Tasarımlarınızın bazı kısımları mobilde görünmeyecek.

@media  screen  and  (max-­‐width:  300px)  {      .not-­‐mobile  {  display:  none;  }  }  

Viewport Meta Etiketini Kontrol Edin

<meta name=“viewport” content=“width=device-width”>

Responsive Tasarımın Aleyhindeki Durumlar

§  Mobil kullanıcılar konuya özgü içeriği görmek ister

§  Tüm siteyi mobil tarayıcıya taşımak performansı düşürür

Daha Fazlası İçin

§  Responsive Web Design: Opportunities and Challenges

§  Why Responsive Web Design Has To Win Out

§  10 Basic Tips About Responsive Design

§  How to Approach a Responsive Design

§  Mobile First

§  Responsive Web Design

Responsive Web Design “Her bedene uyar” Teşekkürler