SlideShare une entreprise Scribd logo
1  sur  46
Télécharger pour lire hors ligne
Responsive Web Design
ve Development Yaklaşımı




Sevil Yılmaz | Emrah Erkeç - 12 Mart 2013
Fluid | Responsive | Adaptive
Web Search Interest: responsive design. Worldwide, May 2010 - Mar 2013.   Google Trends
Responsive Web Design ve Development Yaklaşımı
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.
§  Sürdürülebilirlik
    1- İçerik güncelleme
    2- Yeni özellik ekleme


§  Arama motoru optimizasyonu (SEO)

§  Çözünürlük bağımlılığı
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
Responsive Web Design ve Development Yaklaşımı
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?
Responsive Web Design ve Development Yaklaşımı
Ara Noktaları Belirleyin
6 Majör Ara Nokta
Majör
           İlk hedef portre modundaki “<480px" akıllı telefonlar
 < 480     olmalı.

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


           Daha yüksek çözünürlükler için >768px seçilmeli.
 > 768
           Olsa İyi Olur
 < 320     Düşük çözünürlüklü cihazlar için <320px stilleri
           eklenmeli.


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


 > 1024    Daha geniş ekranlar için >1024px koşulunu kullanın.
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 Markup
<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>	
  


     SRCSET Markup
<img	
  src="fallback.jpg"	
  alt=""	
  srcset="small.jpg	
  640w	
  1x,	
  small-­‐hd.jpg	
  640w	
  2x,	
  
med.jpg	
  1x,	
  med-­‐hd.jpg	
  2x	
  ">	
  
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
Responsive Web Design ve Development Yaklaşımı
Ö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
§  How to Approach a Responsive Design

§  Mobile First

§  Responsive Web Design
§  Responsive Web Design: Opportunities and Challenges

§  Why Responsive Web Design Has To Win Out

§  10 Basic Tips About Responsive Design
Responsive Web Design
“Her bedene uyar”
Teşekkürler

Contenu connexe

Similaire à Responsive Web Design ve Development Yaklaşımı

Xsteel cizimi
Xsteel cizimiXsteel cizimi
Xsteel cizimisersld85
 
MDSap SAP Forum Ankara 2015 Sunum
MDSap SAP Forum Ankara 2015 SunumMDSap SAP Forum Ankara 2015 Sunum
MDSap SAP Forum Ankara 2015 SunumUygur Köse
 
WordPress ve Multisite Wordpress İle Büyük Ölçekli Çözümler
WordPress ve Multisite Wordpress İle Büyük Ölçekli ÇözümlerWordPress ve Multisite Wordpress İle Büyük Ölçekli Çözümler
WordPress ve Multisite Wordpress İle Büyük Ölçekli ÇözümlerSalih Özdemir
 
Xsteel tasarimi
Xsteel tasarimiXsteel tasarimi
Xsteel tasarimisersld85
 
Veri Merkezinizi Dönüştürün
Veri Merkezinizi DönüştürünVeri Merkezinizi Dönüştürün
Veri Merkezinizi DönüştürünMustafa
 
Web Sitesi Yapım Aşamaları // Sanalkurs 9. Bilişim Seminerleri // Siraceddin EL
Web Sitesi Yapım Aşamaları // Sanalkurs 9. Bilişim Seminerleri // Siraceddin ELWeb Sitesi Yapım Aşamaları // Sanalkurs 9. Bilişim Seminerleri // Siraceddin EL
Web Sitesi Yapım Aşamaları // Sanalkurs 9. Bilişim Seminerleri // Siraceddin ELSiraceddin El
 
Css odev-sitesi
Css odev-sitesiCss odev-sitesi
Css odev-sitesisersld30
 
Joomla kursu-kayseri
Joomla kursu-kayseriJoomla kursu-kayseri
Joomla kursu-kayserisersld62
 
Xsteel egitim-cd-si
Xsteel egitim-cd-siXsteel egitim-cd-si
Xsteel egitim-cd-sisersld85
 
E-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone Meetups
E-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone MeetupsE-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone Meetups
E-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone MeetupsTevfik Mert Azizoglu
 
Xsteel en-iyi-egitimi
Xsteel en-iyi-egitimiXsteel en-iyi-egitimi
Xsteel en-iyi-egitimisersld85
 
Xsteel egitimi-adana
Xsteel egitimi-adanaXsteel egitimi-adana
Xsteel egitimi-adanasersld85
 
Xsteel teknigi
Xsteel teknigiXsteel teknigi
Xsteel teknigisersld85
 
Web Performans Optimizasyon Prensipleri
Web  Performans Optimizasyon PrensipleriWeb  Performans Optimizasyon Prensipleri
Web Performans Optimizasyon PrensipleriMehmet Aykut Bulgu
 
Dspace Migration and Dspace Piwik Integration
Dspace Migration and Dspace Piwik IntegrationDspace Migration and Dspace Piwik Integration
Dspace Migration and Dspace Piwik IntegrationMesut Güngör
 
Solidworks odev-sitesi
Solidworks odev-sitesiSolidworks odev-sitesi
Solidworks odev-sitesisersld57
 
Solidworks odev-sitesi
Solidworks odev-sitesiSolidworks odev-sitesi
Solidworks odev-sitesisersld58
 

Similaire à Responsive Web Design ve Development Yaklaşımı (20)

Xsteel cizimi
Xsteel cizimiXsteel cizimi
Xsteel cizimi
 
MDSap SAP Forum Ankara 2015 Sunum
MDSap SAP Forum Ankara 2015 SunumMDSap SAP Forum Ankara 2015 Sunum
MDSap SAP Forum Ankara 2015 Sunum
 
WordPress ve Multisite Wordpress İle Büyük Ölçekli Çözümler
WordPress ve Multisite Wordpress İle Büyük Ölçekli ÇözümlerWordPress ve Multisite Wordpress İle Büyük Ölçekli Çözümler
WordPress ve Multisite Wordpress İle Büyük Ölçekli Çözümler
 
Xsteel tasarimi
Xsteel tasarimiXsteel tasarimi
Xsteel tasarimi
 
Veri Merkezinizi Dönüştürün
Veri Merkezinizi DönüştürünVeri Merkezinizi Dönüştürün
Veri Merkezinizi Dönüştürün
 
Css 2013
Css 2013Css 2013
Css 2013
 
Web Sitesi Yapım Aşamaları // Sanalkurs 9. Bilişim Seminerleri // Siraceddin EL
Web Sitesi Yapım Aşamaları // Sanalkurs 9. Bilişim Seminerleri // Siraceddin ELWeb Sitesi Yapım Aşamaları // Sanalkurs 9. Bilişim Seminerleri // Siraceddin EL
Web Sitesi Yapım Aşamaları // Sanalkurs 9. Bilişim Seminerleri // Siraceddin EL
 
Css odev-sitesi
Css odev-sitesiCss odev-sitesi
Css odev-sitesi
 
Joomla kursu-kayseri
Joomla kursu-kayseriJoomla kursu-kayseri
Joomla kursu-kayseri
 
Xsteel egitim-cd-si
Xsteel egitim-cd-siXsteel egitim-cd-si
Xsteel egitim-cd-si
 
E-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone Meetups
E-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone MeetupsE-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone Meetups
E-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone Meetups
 
Xsteel en-iyi-egitimi
Xsteel en-iyi-egitimiXsteel en-iyi-egitimi
Xsteel en-iyi-egitimi
 
Xsteel egitimi-adana
Xsteel egitimi-adanaXsteel egitimi-adana
Xsteel egitimi-adana
 
Mobil Arayüz Geliştirme
Mobil Arayüz GeliştirmeMobil Arayüz Geliştirme
Mobil Arayüz Geliştirme
 
Xsteel teknigi
Xsteel teknigiXsteel teknigi
Xsteel teknigi
 
Web Performans Optimizasyon Prensipleri
Web  Performans Optimizasyon PrensipleriWeb  Performans Optimizasyon Prensipleri
Web Performans Optimizasyon Prensipleri
 
Dspace Migration and Dspace Piwik Integration
Dspace Migration and Dspace Piwik IntegrationDspace Migration and Dspace Piwik Integration
Dspace Migration and Dspace Piwik Integration
 
Daron Yöndem - ie8 Ebook Tr
Daron Yöndem - ie8 Ebook TrDaron Yöndem - ie8 Ebook Tr
Daron Yöndem - ie8 Ebook Tr
 
Solidworks odev-sitesi
Solidworks odev-sitesiSolidworks odev-sitesi
Solidworks odev-sitesi
 
Solidworks odev-sitesi
Solidworks odev-sitesiSolidworks odev-sitesi
Solidworks odev-sitesi
 

Responsive Web Design ve Development Yaklaşımı