Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Ilk Çoklu Cihaz Siteniz

Çoklu cihaz deneyimleri olusturmak sanildigi kadar zor degildir. Bu kilavuzu izleyerek CS256 Mobil Web Gelistirme kursumuz için farkli cihaz türlerinin tümünde iyi sekilde çalisan bir örnek ürün açilis sayfasi olusturacagiz.

son projeyi gösteren birçok cihaz

Farkli yeteneklere, oldukça farkli ekran boyutlarina ve etkilesim yöntemlerine sahip birden çok cihaz için olusturma, baslangiçta imkansiz gibi görünmese de göz korkutucu gelebilir.

Tamamiyla duyarli siteler olusturmak düsündügünüz kadar zor degildir ve size göstermek için bu kilavuzda, baslarken kullanabileceginiz adimlar ayrintili bir sekilde açiklanmaktadir. Bunu iki basit adima ayirdik:

  1. Sayfanin bilgi mimarisini (genellikle IA olarak bilinir) ve yapisini tanimlama, 2. Sayfanin duyarli olmasi ve tüm cihazlarda iyi görünmesi için tasarim ögeleri ekleme.

Içeriginizi ve Yapinizi Olusturma

Içerik, bir sitenin en önemli ögesidir. O zaman, içerige göre tasarim yapip tasarimin içerige hükmetmesine izin vermeyelim. Bu kilavuzda, öncelikle ihtiyacimiz olan içerigi tanimlayacagiz, bu içerige dayali bir sayfa yapisi olusturacagiz ve daha sonra, sayfayi, dar ve genis görüntü alanlarinda düzgün çalisan basit bir dogrusal yerlesimde sunacagiz.

Sayfa yapisini olusturma

Asagidakilere ihtiyacimiz oldugunu belirledik:

  1. Yüksek bir düzeyde ürünümüz olan CS256: Mobil web gelistirme kursunu açiklayan bir alan
  2. Ürünümüzle ilgilenen kullanicilardan bilgi toplamak için bir form
  3. Ayrintili bir açiklama ve video
  4. Ürününün eylem halindeyken resimleri
  5. Iddialari destekleyen bilgilerin bulundugu bir veri tablosu

TL;DR

  • Öncelikle ihtiyaciniz olan içerigi tanimlayin.
  • Dar ve genis görüntü alanlari için Bilgi Mimarisi`ni (IA) tasarlayin.
  • Stil olmadan, içerikle birlikte sayfanin bir iskelet görünümünü olusturun.

Ayrica, hem dar hem de genis görüntü alanlari için kaba bir bilgi mimarisi ve yerlesim de olusturduk.

Dar Görüntü Alani IA Genis Görüntü Alani IA

Bu, projenin geri kalaninda kullanacagimiz iskelet sayfanin kaba bölümlerine kolayca dönüstürülebilir.

<!doctype html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>CS256: Mobile Web development - structure</title>
  </head>
  <body>   
    <div id="headline">
      <header>
        <h1></h1>
        <p></p>
      </header>
      <div id="blurb">
        <p></p>
        <ul>
          <li>
        </ul>
      </div>
      <form method="post" id="register"> 
      </form>
    </div>
    <div id="section1">
      <h2></h2>
      <p></p>
      <ul>
        <li>
      </ul>
      <video></video>
    </div>
    <div id="section2">
      <h2></h2>
      <p></p>
      <div id="images">
        <img>
      </div>
    </div>
    <div id="section3">
      <h2></h2>
      <p></p>
    </div>
    <footer>
      <p></p>
    </footer>
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-52746336-1');ga('send','pageview');
  var isCompleted = {};
  function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
      isCompleted[sampleName] = true;
    }
  }
</script>
  </body>
</html>

Sayfaya içerik ekleme

Sitenin temel yapisi tamamlandi. Ihtiyacimiz olan bölümleri, bu bölümlerde görüntülenecek içerigi ve genel bilgi mimarisi içinde bunu nereye yerlestirecegimizi biliyoruz. Artik sitemizi olusturmaya baslayabiliriz.

Baslik ve formu olusturma

Baslik ve istek bildirim formu, sayfamizin önemli bilesenleridir. Bunlarin kullaniciya hemen sunulmasi gerekir.

Basliga, kursu açiklamak için basit bir metin ekleyin:

<div id="headline">
  <div class="container">
    <header>
      <h1>Mobile Web Development</h1>
      <p>Building Mobile Web Experiences</p>
    </header>
    <div id="blurb">
      <p>So you've heard mobile is kind of a big deal, and you're not
      sure how to transform your traditional desktop-focused web apps
      into fast, effective multi-device experiences.</p>
      <p>This course is designed to teach web developers what
      they need to know to create great cross-device web
      experiences.</p>
      <p>This course will focus on building mobile-first web apps,
      which will work across multiple platforms including:</p>
      <ul>
        <li>Android,</li>
        <li>iOS,</li>
        <li>and others.</li>
      </ul>
    </div>
    <form method="post" id="register">
    </form>
  </div>
</div>

Formu da doldurmamiz gerekiyor. Bu, kullanicilarin adlarini, telefon numaralarini ve onlari geri aramak için uygun olduklari zaman bilgisini toplayan basit bir form olacak.

Kullanicilarin ögelere kolayca odaklanmalarini, içinde ne olmasi gerektigini anlamalarini kolaylastirmak ve ayrica, erisilebilirlik araçlarinin formun yapisini anlamasina yardimci olmak için tüm formlarin etiketleri ve yer tutuculari olmalidir. Ad özelligi yalnizca form degerini sunucuya göndermekle kalmaz, ayni zamanda tarayiciya, formu kullanici adina otomatik olarak nasil dolduracagiyla ilgili önemli ipuçlari da verir.

Kullanicilarin bir mobil cihazda içerigi hizli ve basit bir sekilde girebilmelerini saglamak için anlamsal türler ekleyecegiz. Örnegin, bir telefon numarasi girerken kullanicinin yalnizca bir tus takimi görmesi gerekir.

<form method="post" id="register">
   <h2>Register for the launch</h2>
   <label for="name">Name</label>
   <input type="text" name="name" id="name" 
      placeholder="Thomas A Anderson" required>
   <label for="email">Email address</label>
   <input type="email" name="email" id="email" 
      placeholder="neo@example.com" required>
   <label for="tel">Telephone</label>
   <input type="tel" name="tel" id="tel" 
      placeholder="(555) 555 5555" required>
   <input type="submit" value="Sign up">
</form>

Video ve Bilgi bölümünü olusturma

Içerigin Video ve Bilgi bölümü biraz daha derinlige sahiptir. Ürünlerimizin özelliklerinin madde imli bir listesini ve ayrica, bir kullaniciyi ürünümüzü kullanirken gösteren bir video yer tutucusunu içerir.

<div id="section1">
  <div class="container">
    <h2>What will I learn?</h2>
    <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
    <p>You'll understand what it takes to:</p>
    <ul>
      <li>build great web experiences on mobile devices</li>
      <li>use the tools you need to test performance</li>
      <li>apply your knowledge to your own projects in the future</li>
    </ul>
    <video controls poster="udacity.png">
      <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
      <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
      <p>Sorry your browser doesn't support video. 
         <a href="udacity.mov">Download the video</a>.
      </p>
    </video>
    <br>
  </div>
</div>

Videolar genellikle içerigi daha etkilesimli bir sekilde açiklamak ve siklikla bir ürünün veya kavramin tanitim gösterisini göstermek için kullanilir.

En iyi uygulamalari izleyerek videoyu sitenize kolayca entegre edebilirsiniz:

  • Kullanicilarin videoyu oynatmalarini kolaylastirmak için bir controls özelligi ekleyin.
  • Kullanicilara içerigin bir önizlemesini saglamak için bir poster resmi ekleyin.
  • Desteklenen video biçimlerine göre birden çok <source> ögesi ekleyin.
  • Kullanicilarin videoyu pencerede oynatamamalari durumunda indirebilmelerini saglamak için yedek metin ekleyin.
<video controls poster="udacity.png">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
  <source src="udacity.mov" type="video/mov"></source>
  <p>Sorry your browser doesn't support video. 
     <a href="udacity.mov">Download the video</a>.
  </p>
</video>

Resimler Bölümünü Olusturma

Resim bulunmayan siteler biraz sikici olabilir. Iki tür resim vardir:

  • Içerik resimleri: Dokümanla ayni dogrultuda olan ve içerikle ilgili fazladan bilgileri aktarmak için kullanilan resimler.
  • Biçimsel resimler: Sitenin daha iyi görünmesi için kullanilan resimler; bunlar genellikle arka plan resimleri, kaliplar ve renk geçisleri seklindedir. Bu konuyu sonraki makale baslikli makalede ele alacagiz.

Sayfamizdaki Resimler bölümü, içerik resimlerinden olusan bir koleksiyondur.

Içerik resimleri, sayfanin anlamini aktarma açisindan önemlidir. Bunlari, gazete makalelerinde kullanilan resimler gibi düsünebilirsiniz. Kullandigimiz resimler, projenin egitmenleri olan Chris Wilson, Peter Lubbers ve Sean Bennet'in resimleridir.

<div id="section2">
  <h2>Who will teach me?</h2>
  <p>The world's leading mobile web developers.</p>

  <div id="images">
    <img src="chriswilson.png" alt="Chris Wilson: Course Instructor">
    <img src="peterlubbers.png" alt="Peter Lubbers: Course Instructor">
    <img src="seanbennett.png" alt="Sean Bennet: Course Developer">
  </div>

  <br>
</div>

Resimler, ekran genisliginin %100 ölçegine ayarlanmistir. Bu, dar görüntü alani olan cihazlarda iyi bir sekilde çalisir, ancak genis görüntü alanina sahip cihazlarda (masaüstü bilgisayarlar gibi) çok iyi görünmez. Bunu, duyarli tasarim bölümünde ele alacagiz.

Birçok kisi, resimleri görüntüleyemez ve genellikle, sayfadaki verileri ayristiran ve bunu kullaniciya sözlü olarak aktaran ekran okuyucu gibi bir yardimci teknoloji kullanir. Tüm içerik resimlerinizde, ekran okuyucunun resmi kullaniciya açiklayabilmesi için bir tanimlayici alt etiketinin bulundugundan emin olun.

alt etiketlerini eklerken, resmi tam olarak açiklamak için alt metnini mümkün oldugunca kisa tuttugunuzdan emin olun. Örnegin, demomuzda özelligi Ad: Rol olacak sekilde biçimlendiriyoruz. Bu, kullanicinin bu bölümün yazarlar ve yazarlarin isleriyle ilgili oldugunu anlamasi için yeterli bilgi sunmaktadir.

Tablolastirilmis Veri Bölümünü Ekleme

Son bölüm, ürünle ilgili belirli ürün verilerini göstermek için kullanilan basit bir tablodur.

Tablolar yalnizca bilgi matrisleri gibi tablo seklindeki veriler için kullanilmalidir.

<div id="section3">
  <h2>Mobile. Why should I care?</h2>
  <p>It is huge.  Everywhere.</p>
  <table>
    <caption>
      <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
    </caption>
    <thead>
       <tr>
         <th>Country</th>
         <th>Desktop share</th>
         <th>Tablet share</th>
         <th>Mobile share</th>
       </tr>
    </thead>
    <colgroup>
       <col span="1">
       <col span="1">
       <col span="1">
       <col span="1">
    </colgroup>
    <tbody>
     <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
        <td>32%</td>
        <td>1%</td>
        <td>67%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
        <td>69%</td>
        <td>13%</td>
        <td>18%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
        <td>69%</td>
        <td>9%</td>
        <td>22%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
        <td>86%</td>
        <td>4%</td>
        <td>10%</td>
      </tr>
    </tbody>
  </table>
  <br>
</div>

Altbilgi Ekleme

Çogu sitenin Sartlar ve Kosullar, sorumlulugun reddi beyanlari gibi içerigi ve sayfanin ana gezinme veya ana içerik alaninda bulunmamasi gereken baska içerikleri görüntülemek için bir altbilgiye ihtiyaci vardir.

Bizim sitemizde, yalnizca Sartlar ve Kosullar'a, bir Iletisim sayfasina ve sosyal medya profillerimize baglanti verecegiz.

<footer>
  <div class="container">
    <p>We always need a footer.</p>
  </div>
</footer>

Özet

Sitenin ana hatlarini olusturduk ve ana yapisal ögelerin tümünü tanimladik. Ayrica, ilgili tüm içerigin is gereksinimlerimizi karsilamak üzere hazir ve yerinde oldugundan emin olduk.

Sayfanin su anda kötü göründügünü fark etmissinizdir; bunu bilinçli olarak böyle yaptik. Içerik, bir sitenin en önemli ögesidir ve saglam bir bilgi mimarisine ve yogunluga sahip oldugumuzdan emin olmamiz gerekiyordu. Bu kilavuz, bize dayanabilecegimiz harika bir temel verdi. Sonraki kilavuzda içerigimizi biçimlendirecegiz.

Duyarli Olmasini Saglayin

Web'e, küçük ekranli telefonlardan genis ekranli televizyonlara kadar çok çesitli cihazlardan erisilebilir. Her bir cihaz kendi benzersiz avantajlarina, ayni zamanda kisitlamalarina sahiptir. Bir web gelistiricisi olarak tüm cihazlari desteklemeniz beklenir.

Birden çok ekran boyutunda ve cihaz türünde çalisacak bir site olusturuyoruz. Önceki makale baslikli makalede, sayfanin Bilgi Mimarisi'ni isledik ve bir temel yapi olusturduk. Bu kilavuzda, içerikle temel yapimizi alip çok sayida ekran boyutuna duyarli güzel bir sayfaya dönüstürecegiz.

Önce Mobil Cihazlar web gelistirme ilkelerini izleyerek bir cep telefonuna benzeyen, dar bir görüntü alaniyla basliyoruz ve önce bu deneyimi olusturuyoruz. Daha sonra, deneyimi daha genis cihaz siniflarina ölçekliyoruz. Bunu, görüntü alanimizi genisleterek ve tasarim ile yerlesimin düzgün görünüp görünmedigine karar vererek yapabiliriz.

Daha önce, içerigimizin nasil görünmesi gerektigine dair farkli, üst düzey birkaç tasarim olusturmustuk. Simdi sayfamizin bu farkli yerlesimlere uyarlanmasini saglamamiz gerekiyor. Bunu, içerigi ekran boyutuna sigdirma yöntemimize göre kesme noktalarimizi nereye yerlestirecegimize karar vererek yapiyoruz. Kesme noktalari, yerlesim ve stil degisikliginin gerçeklestigi noktalardir.

TL;DR

  • Her zaman bir görüntü alani kullanin.
  • Her zaman önce dar bir görüntü alaniyla baslayip daha sonra bunu genisletin.
  • Içerigi uyarlamaniz gerektiginde bunu kesme noktalariniza dayandirin.
  • Ana kesme noktalarinizdan yerlesiminizin bir üst düzey görüntüsünü olusturun.

Bir görüntü alani ekle

Temel bir sayfa için bile her zaman bir görüntü alani meta etiketi kullanmaniz gerekir. Görüntü alani, birden çok cihaz deneyimi olusturmak için ihtiyaciniz olan en önemli bilesendir. Bu olmadan, siteniz bir mobil cihazda düzgün çalismaz.

Görüntü alani, tarayiciya sayfanin ekrana sigmasi için ölçeklenmesi gerektigini bildirir. Görüntü alaninizin sayfanin görüntüsünü kontrol etmesi için belirtebileceginiz birçok farkli yapilandirma vardir. Varsayilan olarak sunlari öneririz:

<meta name="viewport" content="width=device-width, initial-scale=1">

Görüntü alani, dokümanin basinda yer alir ve yalnizca bir kez açiklanmasi gerekir.

Basit stil uygula

Ürünümüzün ve sirketimizin bir stil kilavuzunda saglanmis çok özel marka bilinci olusturma ve yazi tipi yönergeleri zaten vardir.

Stil kilavuzu

Stil kilavuzu, sayfanin görsel gösterimini bir üst düzeyde anlamanin yararli bir yoludur ve tasarim genelinde tutarli oldugunuzdan emin olmaniza yardimci olur.

Renkler
#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38

Biçimsel resimler eklemek

Önceki kilavuzda, "içerik resimleri" adli resimleri ekledik. Bunlar, ürünümüzün anlatilmasi açisindan önemli resimlerdi. Biçimsel resimler, temel içerigin parçasi olarak ihtiyaç duyulmayan, ancak görsel gösteris ekleyen veya kullanicinin dikkatini belirli bir içerik parçasina yönlendirmeye yardimci olan resimlerdir.

Buna iyi bir örnek, "ekranin üst kismi"ndaki içerik için bir manset resmi kullanilmasi olabilir. Genellikle, kullaniciyi ürünle ilgili daha fazla bilgi okumaya ikna etmek için kullanilir.

Tasarlanmis site

Eklenmeleri çok basit olabilir. Bizim örnegimizde, bu basligin arka plani olacaktir ve bazi basit CSS'ler araciligiyla uygulanacaktir.

#headline {
  padding: 0.8em;
  color: white;
  font-family: Roboto, sans-serif;
  background-image: url(backgroundimage.jpg);
  background-size: cover;
}

Dikkati içerikten uzaklastirmamasi için bulaniklastirilmis, basit bir arka plan resmi seçtik ve bunu tüm ögeyi kaplayacak sekilde ayarladik; böylece, dogru en boy oranini korurken her zaman uzatilir.


İlk kesme noktamizi ayarlayın

Tasarim, yaklasik 600 piksel genisliginde kötü görünmeye basliyor. Bizim örnegimizde, satirin uzunlugu 10 kelimenin üzerine çikiyor (en uygun okuma uzunlugu) ve bu noktada, bunu degistirmek istiyoruz.

600 piksel, ilk kesme noktamizi olusturmak için iyi bir yer gibi görünüyor. Bu, ögeleri ekrana daha iyi sigmalari amaciyla yeniden konumlandirmamiz için gereken alani saglayacak. Bunu, Medya Sorgulari adli bir teknolojiyi kullanarak yapabiliriz.

@media (min-width: 600px) {

}

Daha genis bir ekranda daha fazla alan vardir, dolayisiyla içerigin nasil görüntülenebilecegi konusunda daha esnek olunabilir.

Ürün sayfamiz baglaminda görünüse göre sunlari yapmamiz gerekecek:

  • Tasarimin maksimum genisligini sinirlama.
  • Ögelerin dolgusunu degistirme ve metin boyutunu küçültme.
  • Formu, baslik içerigiyle hizali bir sekilde hareket etmesi için tasima.
  • Videonun içerik çevresinde hareket etmesini saglama.
  • Resimlerin boyutunu küçültme ve daha hos bir tabloda görünmelerini saglama.

Tasarimin maksimum genisligini sinirlama

Yalnizca iki ana yerlesimimizin olmasini seçtik: dar bir görüntü alani ve genis bir görüntü alani. Bu seçimimiz, olusturma sürecimizi büyük ölçüde basitlestirecek.

Ayrica, dar görüntü alaninda kenarliksiz bölümler olusturmaya ve bu bölümlerin, genis görüntü alaninda kenarliksiz kalmasina karar verdik. Bu, metin ve paragraflarin ultra genis ekranlarda tek, uzun bir satira uzamamasi için ekranin maksimum genisligini sinirlamamiz gerektigi anlamina gelir. Bu noktanin yaklasik 800 pikselde olmasini seçtik.

Bunu gerçeklestirmek için genisligi sinirlandirmamiz ve ögeleri ortalamamiz gerekir. Her bir ana bölümün çevresinde bir kapsayici olusturup bir margin: auto kodu uygulamaliyiz. Bu, ekranin büyümesine, ancak içerigin ortalanmis bir sekilde ve maksimum 800 piksel boyutta kalmasina olanak taniyacak.

Kapsayici, asagidaki biçimde basit bir div ögesi olacak:

<div class="container">
...
</div>
<div id="section1">
  <div class="container">
    <h2>What will I learn?</h2>
.container {
  margin: auto;
  max-width: 800px;
}

Dolguyu degistirme ve metin boyutunu küçültme

Dar görüntü alaninda, içerigi görüntülemek için çok fazla alanimiz olmadigindan tipografinin boyutu ve agirligi, ekrana sigmasi için çogunlukla önemli ölçüde küçültülür.

Daha genis bir görüntü alanimiz oldugunda kullanicinin daha genis bir ekranda, ancak ekrandan biraz daha uzakta bulunma olasiligini göz önünde bulundurmamiz gerekir. Içerigin okunabilirligini artirmak için tipografinin boyutunu ve agirligini artirabilir ve ayri alanlari daha da ayirmak için dolguyu degistirebiliriz.

Ürün sayfamizda, bölüm ögelerinin dolgusunu genisligin %5'inde kalacak sekilde ayarlayarak dolguyu artiracagiz. Ayrica, her bir bölümün basliklarinin boyutunu da artiracagiz.

#headline {
  padding: 20px 5%;
}

Ögeleri genis görüntü alanina uyarlama

Dar görüntü alanimiz, yigin seklinde dogrusal bir görüntüydü. Her bir ana bölüm ve içindeki içerik, yukaridan asagiya dogru görüntüleniyordu.

Genis görüntü alani, bize içerigi ilgili ekran için en uygun sekilde görüntülemek üzere kullanabilecegimiz fazladan alan verir. Ürün sayfamiz için bu, IA'miza göre asagidakileri yapabilecegimiz anlamina gelir:

  • Formu, baslik bilgileri çevresinde hareket ettirme.
  • Videoyu, önemli noktalarin sagina yerlestirme.
  • Resimleri döseme.
  • Tabloyu genisletme.

Form ögesini hareket ettirme

Dar görüntü alani, ögeleri ekrana rahatça yerlestirmek için çok daha az bir yatay alani kullanabilecegimiz anlamina gelir.

Yatay ekran alanini daha etkili kullanmak için basligin dogrusal akisindan çikmamiz ve form ile listeyi yan yana olacaklari sekilde tasimamiz gerekir.

#headline #blurb {
  float: left; 
  font-weight: 200;
  width: 50%;
  font-size: 18px;
  box-sizing: border-box;
  padding-right: 10px;
}

#headline #register {
  float:right;
  padding: 20px;
  width: 50%;
  box-sizing: border-box;
  font-weight: 300;
}

#headline br {
  clear: both;
}
#headline {
  padding: 20px 5%;
}

Video ögesini hareket ettirme

Dar görüntü alani arayüzündeki video, ekranin tam genisligini kaplayacak ve önemli özellikler listesinden sonre yerlestirilecek sekilde tasarlanmistir. Genis bir görüntü alaninda, video çok genisleyecek sekilde ölçeklenir ve özellik listemizin yanina yerlestirildiginde yanlis görünür.

Video ögesinin, dar görüntü alaninin dikey akisinin disina tasinmasi ve genis bir görüntü alaninda içerigin madde imli listesiyle yan yana görüntülenmesi gerekir.

#section1 ul {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-right: 1em;
}

#section1 video {
  width: 50%;
  float: right;
}

Resimleri Döseme

Dar görüntü alani arayüzündeki resimler (çogunlukla mobil cihazlar), ekranin tam genisligini kaplayacak ve dikey olarak yigilacak sekilde ayarlanir. Bu, genis görüntü alaninda iyi bir sekilde ölçeklenmez.

Resimlerin genis bir görüntü alaninda dogru görünmesini saglamak için kapsayici genisliginin %30'una ölçeklenirler ve (dar görüntü alanindaki gibi dikey yerlestirilmeleri yerine) yatay olarak yerlestirilirler. Ayrica, resimleri daha çekici hale getirmek için biraz sinir yariçapi ve kutu gölgesi de ekleyecegiz.

#section2 div img {
   width: 30%;
   margin: 1%;
   box-sizing: border-box;
   border-radius: 50% 50%;
   box-shadow: black 0px 0px 5px;
 }

Resimleri DPI'ya duyarli yapma

Resimleri kullanirken, görüntü alaninin boyutunu ve ekranin yogunlugunu dikkate alin.

Web baslangiçta 96 dpi degerindeki ekranlar için olusturulmustu. Mobil cihazlarin kullanilmaya baslanmasiyla ekranlarin piksel yogunlugunda büyük bir artis gördük; dizüstü bilgisayarlarin Retina sinifi ekranlarindan hiç söz etmiyoruz bile. Bunun gibi, 96 dpi degerine kodlanan resimler genellikle yüksek dpi degerine sahip bir cihazda berbat görünür.

Bunun için henüz yaygin bir sekilde benimsenmemis bir çözümümüz var. Bunu destekleyen tarayicilarda, yüksek yogunluga sahip bir ekranda yüksek yogunluga sahip bir resim görüntüleyebilirsiniz.

<img src="photo.png" srcset="photo@2x.png 2x">

Tablolar

Tablolarin, dar görüntü alani olan cihazlarda dogru bir sekilde görüntülenmesi çok zordur ve bunlara özel olarak dikkat edilmesi gerekir.

Dar bir görüntü alaninda tablonuzu iki satirdan olusturmanizi, bir satirdaki baslik ve hücrelerin sirasini degistirerek sütunlu görünümü elde etmenizi öneririz.

Sitemizde, yalnizca tablo içerigi için fazladan bir kesme noktasi olusturmamiz gerekiyordu. Önce bir mobil cihaz için olusturdugunuzda, uygulanan stilleri geri almak daha zor olacagindan, dar görüntü alani tablosu CSS'sini genis görüntü alani CSS'sinden ayirmamiz gerekir. Bu, bize net ve tutarli bir kesme saglar.

@media screen and (max-width: 600px) {
  table thead {
    display: none;
  }

  table td {
    display: block;
    position: relative;
    padding-left: 50%;
    padding-top: 13px;
    padding-bottom: 13px;
    text-align: left;
    background: #e9e9e9;
  }

  table td:before {
    content: attr(data-th) " :";
    display: inline-block;
    color: #000000;
    background: #e9e9e9;
    border-right: 2px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 33%;
    max-height: 100%;

    font-size: 16px;
    font-weight: 300;
    padding-left: 13px;
    padding-top: 13px;
  }
}

Özet

TEBRIKLER. Bunu okurken, çok sayida cihazda, biçim katsayisinda ve ekran boyutunda çalisan ilk basit ürün açilis sayfanizi olusturmus olacaksiniz.

Bu yönergeleri uygularsaniz iyi bir baslangiç yaparsiniz:

  1. Bir temel IA olusturun ve kodlamadan önce içeriginizi anlayin.
  2. Her zaman bir görüntü alani ayarlayin.
  3. Temel deneyiminizi önce mobil cihazlar yaklasimiyla olusturun.
  4. Mobil deneyiminizi olusturduktan sonra, görüntünün genisligini görüntü bozulmaya baslayana kadar artirin ve kesme noktanizi buraya ayarlayin.
  5. Bunu tekrarlamaya devam edin.