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

Situs Multi-Perangkat Anda yang Pertama

Perhatian: Artikel ini sudah lama tidak diperbarui dan mungkin tidak sesuai lagi dengan keadaan sebenarnya. Sebaiknya periksa kursus gratis Desain Web Responsif di Udacity.

banyak perangkat menampilkan proyek akhir

Menciptakan pengalaman multi-perangkat tidaklah sesulit yang dibayangkan. Dalam panduan ini, kita akan membangun laman landas produk untuk Kursus Development Web Seluler CS256 yang berfungsi baik di berbagai tipe perangkat.

Membangun untuk beberapa perangkat dengan kemampuan yang berbeda, ukuran layar yang sangat berbeda dan metode interaksi terlihat sangat sulit, jika tidak mau dibilang mustahil untuk memulai.

Ini tidaklah sesulit membangun situs yang responsif sepenuhnya seperti yang Anda pikirkan, dan untuk menunjukkannya, panduan ini akan membawa Anda melalui langkah-langkah yang bisa Anda gunakan untuk memulai. Kami memecahnya menjadi dua langkah sederhana:

  1. Mendefinisikan arsitektur informasi (dikenal sebagai AI) dan struktur laman,
  2. Tambahkan elemen desain untuk membuatnya responsif dan terlihat bagus di semua perangkat.

Membuat struktur dan materi

Materi adalah aspek yang paling penting dari setiap situs. Jadi mari kita mendesain untuk materi dan tidak membiarkan desain mendikte materi. Dalam panduan ini, kita mengidentifikasi materi yang dibutuhkan terlebih dulu, membuat struktur laman berdasarkan materi ini, dan kemudian menampilkan laman tersebut dalam layout linear sederhana yang bekerja dengan baik pada tampilan sempit yang terlihat maupun lebar.

Membuat struktur laman

Kita telah mengidentifikasi yang dibutuhkan:

  1. Suatu area yang menjelaskan tujuan "CS256: Development web seluler " produk kami pada tingkat tinggi
  2. Formulir untuk mengumpulkan informasi dari pengguna yang tertarik dengan produk kami
  3. Penjelasan mendetail dan video
  4. Gambar produk beraksi
  5. Tabel data dengan informasi untuk mendukung klaim

TL;DR

  • Mengetahui materi yang Anda butuhkan.
  • Membuat sketsa Arsitektur Informasi (AI) untuk tampilan sempit dan lebar yang terlihat.
  • Membuat tampilan kerangka laman dengan materi namun tanpa penataan gaya.

Kami juga datang dengan konsep garis besar arsitektur informasi dan layout untuk tampilan yang terlihat sempit dan lebar.

AI Bidang Sempit Tampilan yang Terlihat
AI Tampilan Sempit yang terlihat
AI Bidang Lebar Tampilan yang Terlihat
AI Tampilan Lebar yang terlihat

Ini bisa dikonversi dengan mudah menjadi bagian garis besar dari laman kerangka yang akan kita gunakan untuk seluruh proyek ini.

<!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>

Cobalah

Menambahkan materi ke laman

Struktur dasar dari situs sudah selesai. Kita tahu bagian yang kita butuhkan, materi yang akan ditampilkan di bagian tersebut, dan di mana menempatkannya dalam arsitektur informasi secara keseluruhan. Sekarang kita bisa mulai membangun situs.

Membuat judul dan formulir

Judul dan formulir notifikasi permintaan adalah komponen penting dari laman kita. Ini harus langsung ditampilkan ke pengguna.

Dalam judul, tambahkan teks sederhana untuk menjelaskan tujuan:

<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>

Cobalah

Kita juga harus mengisi formulir. Ini adalah formulir sederhana yang mengumpulkan nama, alamat email, dan nomor ponsel pengguna.

Semua formulir harus memiliki label dan Placeholder agar memudahkan pengguna untuk melihat elemen dengan jelas, memahami apa yang seharusnya masuk ke sana, dan juga membantu alat aksesibilitas memahami struktur formulir. Atribut name tidak hanya mengirimkan nilai formulir ke server, namun juga digunakan untuk memberikan petunjuk penting bagi browser tentang cara mengisi formulir secara otomatis untuk pengguna.

Kami akan menambahkan tipe semantik agar pengguna bisa memasukkan materi pada perangkat seluler dengan cepat dan sederhana. Misalnya, saat memasukkan nomor telepon, pengguna sebaiknya hanya melihat tombol nomor telepon.

<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>

Cobalah

Membuat bagian Video dan Informasi

Bagian Video dan Informasi materi berisi sedikit lebih mendalam. Bagian ini memiliki daftar berbutir dari fitur produk kita dan juga berisi Placeholder video yang menunjukkan bahwa produk kita bekerja dengan baik untuk pengguna.

<div id="section1">
  <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.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>
  <br>
</div>

Cobalah

Video sering digunakan untuk menjelaskan materi dengan cara yang lebih interaktif dan sering digunakan untuk menunjukkan demonstrasi produk atau konsep.

Dengan mengikuti praktik terbaik, Anda bisa dengan mudah mengintegrasikan video ke situs Anda:

  • Tambahkan atribut controls untuk mempermudah pengguna memutar video.
  • Tambahkan gambar poster untuk memberi pengguna pratinjau materi.
  • Tambahkan beberapa elemen <source> berdasarkan format video yang didukung.
  • Tambahkan teks fall-back untuk membolehkan pengguna mengunduh video jika mereka tidak bisa memutarnya di jendela.
<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>

Cobalah

Membuat Bagian Gambar

Situs tanpa gambar bisa sedikit membosankan. Ada dua tipe gambar:

  • Gambar Materi — gambar yang berjajar dalam dokumen dan digunakan untuk menyampaikan informasi tambahan tentang materi.
  • Gambar Stylistic — gambar yang digunakan agar situs terlihat lebih bagus; sering kali ini adalah gambar latar belakang, pola dan gradien. Kita akan membahasnya di bagian berikutnya.

Bagian Gambar di laman kita adalah kumpulan gambar materi.

Gambar Materi sangat penting untuk menyampaikan makna laman. Pikirkan mereka seperti gambar yang digunakan dalam artikel koran. Gambar yang kita gunakan adalah gambar dari tutorial proyek: Chris Wilson, Peter Lubbers dan Sean Bennet.

<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>

Cobalah

Gambar diatur dalam skala 100% dari lebar layar. Ini bekerja dengan baik pada perangkat dengan tampilan yang terlihat sempit, tapi kurang bagus pada perangkat dengan tampilan yang terlihat lebar (seperti desktop). Kita akan menanganinya di bagian desain responsif.

Banyak orang tidak memiliki kemampuan untuk melihat gambar dan sering kali menggunakan teknologi bantu seperti pembaca layar yang akan melakukan parse data pada laman dan menyampaikannya ke pengguna secara lisan. Anda harus memastikan bahwa semua gambar materi Anda memiliki tag alt deskriptif sehingga pembaca layar bisa menyampaikannya ke pengguna.

Ketika menambahkan tag alt pastikan bahwa Anda menjaga teks alt seringkas mungkin untuk sepenuhnya menjelaskan gambar. Misalnya, dalam demo kita hanya memformat atribut menjadi "Name: Role", ini menyajikan informasi yang cukup kepada pengguna untuk memahami bahwa bagian ini adalah tentang penulis dan apa tugas mereka.

Menambahkan Bagian Data Ditabulasi

Bagian terakhir adalah tabel sederhana yang digunakan untuk menampilkan statistik produk tertentu tentang suatu produk.

Tabel sebaiknya hanya digunakan untuk data tabular, misalnya, matriks informasi.

<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>

Cobalah

Kebanyakan situs membutuhkan footer untuk menampilkan materi seperti Persyaratan dan Ketentuan, penolakan, dan materi lain yang tidak dimaksudkan untuk berada di navigasi utama atau di area materi utama suatu laman.

Di situs kita, kita akan membuat footer Placeholder sederhana.

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

Cobalah

Rangkuman

Kita telah membuat garis besar dari situs dan telah mengidentifikasi semua elemen struktur utama. Kita juga telah memastikan bahwa kita memiliki semua materi relevan yang siap digunakan untuk memenuhi kebutuhan bisnis.

Anda akan melihat bahwa laman terlihat jelek saat ini; ini disengaja. Materi adalah aspek yang paling penting dari setiap situs dan kita harus memastikan bahwa kita memiliki arsitektur informasi dan kepadatan yang solid serta baik. Panduan ini memberi kita dasar yang sangat baik untuk membangun. Kita akan menata gaya materi kita di panduan berikutnya.

Menjadikannya responsif

Web bisa diakses pada berbagai perangkat, dari ponsel berlayar-kecil hingga televisi berlayar-sangat besar. Setiap perangkat menghadirkan keunggulan yang unik dan juga kekurangan. Sebagai developer web, Anda diharapkan untuk mendukung semua jenis perangkat.

Kita membangun sebuah situs yang bekerja di berbagai ukuran layar dan jenis perangkat. Kami sudah membuat Arsitektur Informasi laman dan menciptakan struktur dasar. Pada bagian ini, kita akan mengambil struktur dasar kita dengan materi dan mengubahnya menjadi sebuah laman indah yang responsif untuk sebagian besar ukuran layar.

Mengikuti prinsip-prinsip development web Mobile First, kita memulai dengan tampilan sempit yang terlihat — mirip dengan telepon seluler — dan membangun untuk pengalaman tersebut terlebih dahulu. Kemudian kita menskalakan ke kelas perangkat yang lebih besar. Kita bisa melakukannya dengan membuat tampilan lebih luas yang terlihat dan membuat pemanggilan penilaian tentang apakah desain dan layout terlihat benar.

Sebelumnya kita telah membuat beberapa desain tingkat tinggi yang berbeda untuk menunjukkan bagaimana materi harus ditampilkan. Sekarang kita harus membuat laman agar menyesuaikan dengan layout yang berbeda. Kita melakukan ini dengan memutuskan lokasi penempatan breakpoint — titik tempat layout dan gaya mengubah — berdasarkan pada apakah materi cocok dengan ukuran layar.

TL;DR

  • Selalu menggunakan tampilan yang terlihat.
  • Selalu awali dengan bidang sempit tampilan yang terlihat terlebih dahulu dan kemudian diperbesar.
  • Tentukan breakpoint ketika harus menyesuaikan materi.
  • Buatlah visi tingkat-tinggi dari layout Anda di seluruh breakpoint utama.

Menambahkan tampilan yang terlihat

Bahkan untuk laman dasar, Anda harus selalu menyertakan tag meta viewport. Tampilan yang terlihat adalah komponen terpenting yang dibutuhkan untuk membangun pengalaman multi-perangkat. Tanpa itu, situs Anda tidak akan bekerja dengan baik pada perangkat seluler.

Tampilan yang terlihat menyatakan kepada browser bahwa laman perlu diskalakan agar pas dengan layar. Ada banyak konfigurasi berbeda yang bisa Anda tetapkan bagi tampilan yang terlihat untuk mengontrol tampilan laman. Sebagai defaultnya, kami menyarankan:

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

Cobalah

Tampilan yang terlihat ada di kepala dokumen dan hanya perlu dideklarasikan sekali.

Menerapkan gaya sederhana

Produk dan perusahaan kita telah memiliki panduan merek dan font yang sangat spesifik yang tersedia dalam panduan gaya.

Panduan gaya

Panduan gaya adalah cara untuk mendapatkan pemahaman tingkat tinggi dari representasi visual laman dan membantu Anda memastikan bahwa Anda konsisten di seluruh desain.

Warna

#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38

Menambahkan gambar stylistic

Situs yang didesain

Dalam panduan sebelumnya, kita menambahkan gambar yang disebut "materi gambar". Ini adalah gambar yang penting bagi narasi produk kita. Gambar stylistic adalah gambar yang tidak diperlukan sebagai bagian dari materi inti namun menambahkan hiasan visual atau membantu memancing perhatian pengguna ke bagian materi tertentu.

Contoh yang bagus dari ini adalah gambar judul untuk 'paro atas' materi. Hal ini sering digunakan untuk menarik pengguna agar membaca lebih banyak tentang suatu produk.

Mereka sangat mudah untuk disertakan. Dalam kasus kita, itu akan menjadi latar belakang untuk header dan kita akan menerapkannya melalui beberapa CSS sederhana.

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

Kita memilih gambar latar sederhana yang memudar sehingga tidak mengambil fokus dari materi dan kita menyetelnya untuk cover seluruh elemen; dengan demikian, materi akan selalu merentang sembari mempertahankan aspek rasio yang tepat.

Mengatur breakpoint pertama Anda

Desain mulai terlihat jelek di sekitar lebar 600px. Dalam kasus kita, panjang baris akan di atas 10 kata (panjang pembacaan optimal) dan di situlah kita ingin mengubahnya.

600 px tampaknya adalah tempat yang bagus untuk membuat breakpoint pertama kita karena akan memberi kita cakupan untuk memosisikan ulang elemen agar mereka sesuai dengan layar. Kita bisa melakukannya dengan menggunakan teknologi yang disebut Kueri Media.

@media (min-width: 600px) {

}

Ada lebih banyak ruang pada layar yang lebih besar sehingga ada lebih banyak fleksibilitas tentang bagaimana materi ditampilkan.

Dalam konteks laman produk, sepertinya kita harus:

  • Membatasi lebar maksimum desain.
  • Mengubah padding elemen dan memperkecil ukuran teks.
  • Memindahkan formulir agar mengambang sejajar dengan materi judul.
  • Membuat video mengambang di sekitar materi.
  • Memperkecil ukuran gambar dan menampilkannya di grid yang lebih bagus.

Membatasi lebar maksimum desain

Kita telah memilih untuk hanya memiliki dua layout utama: bidang sempit tampilan yang terlihat dan bidang lebar tampilan yang terlihat, yang sangat menyederhanakan proses pembangunan kita.

Kita juga telah memutuskan untuk membuat bagian full-bleed pada bidang sempit tampilan yang terlihat yang tetap full-bleed pada bidang lebar tampilan yang terlihat. Ini berarti kita harus membatasi lebar maksimum layar sehingga teks dan paragraf tidak merentang ke satu baris panjang pada layar ultra lebar. Kami telah menentukan titik ini sekitar 800px.

Untuk mencapai hal ini, kita harus membatasi lebar dan pusat elemen. Kita harus membuat kontainer di sekitar setiap bagian utama dan menerapkan margin: auto. Ini memungkinkan layar untuk membesar namun materi tetap berpusat di tengah dan berukuran maksimal 800px.

Kontainer akan menjadi div sederhana dalam formulir berikut:

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

Cobalah

Mengubah padding dan memperkecil ukuran teks

Pada bidang sempit tampilan yang terlihat, kita tidak memiliki banyak ruang untuk menampilkan materi sehingga ukuran dan berat tipografi sering secara drastis dikurangi agar sesuai layar.

Dengan bidang yang lebih besar dari tampilan yang terlihat, kita harus mempertimbangkan bahwa pengguna lebih sering menggunakan layar yang lebih besar namun melihatnya dari jarak lebih jauh. Untuk meningkatkan keterbacaan materi, kita bisa meningkatkan ukuran dan berat tipografi dan kita juga dapat mengubah padding agar area yang berbeda lebih menonjol.

Dalam laman produk, kita akan meningkatkan padding elemen bagian dengan menyetelnya agar tetap berukuran 5% dari lebar. Kita juga akan meningkatkan ukuran header untuk masing-masing bagian.

#headline {
  padding: 20px 5%;
}

Cobalah

Menyesuaikan elemen untuk bidang lebar tampilan yang terlihat

Bidang sempit tampilan yang terlihat adalah tampilan yang ditumpuk linear. Setiap bagian utama dan materi di dalamnya ditampilkan dengan urutan dari atas ke bawah.

Bidang lebar tampilan yang terlihat memberi kita ruang ekstra yang bisa digunakan untuk menampilkan materi secara optimal pada layar tersebut. Untuk laman produk, ini berarti bahwa menurut AI kita bisa:

  • Memindahkan formulir di sekitar informasi judul.
  • Menempatkan video di sebelah kanan poin kunci.
  • Petak gambar.
  • Me-luaskan tabel.

Mengambangkan elemen Formulir

Bidang sempit tampilan yang terlihat berarti bahwa kita memiliki jauh lebih sedikit ruang horizontal yang tersedia bagi kita untuk secara nyaman meletakkan elemen pada layar.

Agar penggunaan ruang layar horizontal lebih efektif, kita harus keluar dari aliran linear header dan memindahkan formulir serta daftar sehingga menjadi berdampingan.

#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;
}

Cobalah

Mengambangkan elemen Video

Video dalam antarmuka bidang sempit tampilan yang terlihat dirancang untuk bisa sepenuh lebar layar dan diposisikan setelah daftar fitur kunci. Pada bidang lebar tampilan yang terlihat, video akan diskalakan ke atas sehingga terlalu besar dan tampak salah ketika ditempatkan di sebelah daftar fitur.

Elemen video harus dipindahkan dari aliran vertikal bidang sempit tampilan yang terlihat dan sebaiknya ditampilkan berdampingan dengan daftar berbutir materi pada bidang lebar tampilan yang terlihat.

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

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

Cobalah

Petak gambar

Gambar di antarmuka tampilan sempit yang terlihat (kebanyakan perangkat seluler) diatur menjadi sepenuh lebar layar dan ditumpuk secara vertikal. Ini tidak diskalakan dengan benar pada bidang lebar tampilan yang terlihat.

Agar terlihat dengan benar pada bidang lebar tampilan yang terlihat, gambar diskalakan ke 30% dari lebar kontainer dan ditata secara horizontal (bukan vertikal di bidang sempit tampilan yang terlihat). Kita juga akan menambahkan beberapa radius batas dan kotak-bayangan agar gambar terlihat lebih menarik.

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

Cobalah

Membuat gambar responsif terhadap DPI

Ketika menggunakan gambar, pertimbangkan ukuran tampilan yang terlihat dan kepadatan tampilan.

Web dibuat untuk layar 96dpi. Dengan diperkenalkannya perangkat seluler, kita melihat peningkatan besar dalam kepadatan piksel layar, belum lagi tampilan kelas Retina pada laptop. Oleh karena itu, gambar yang dienkode ke 96dpi terlihat mengerikan pada perangkat dengan dpi-tinggi.

Kami memiliki solusi yang belum digunakan secara luas. Untuk browser yang mendukungnya, Anda bisa menampilkan gambar kepadatan tinggi pada layar kepadatan tinggi.

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

Tabel

Tabel sangat sulit ditampilkan dengan tepat pada perangkat yang memiliki bidang sempit tampilan yang terlihat dan memerlukan perhitungan khusus.

Kami menyarankan pada tampilan sempit agar Anda mentransformasi tabel Anda dengan mengubah setiap baris ke blok pasangan nilai-kunci (dengan kuncinya adalah apa yang sebelumnya menjadi judul kolom, dan nilainya tetap nilai sel). Untungnya, hal ini tidak terlalu sulit. Pertama, berikan keterangan setiap elemen td dengan judul yang sesuai sebagai atribut data. (Efeknya tidak akan terlihat sampai kita menambahkan beberapa CSS.)

<tbody>
 <tr>
    <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
    <td data-th="Desktop share">32%</td>
    <td data-th="Table share">1%</td>
    <td data-th="Mobile share">67%</td>
  </tr>
  <tr>
    <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
    <td data-th="Desktop share">69%</td>
    <td data-th="Table share">13%</td>
    <td data-th="Mobile share">18%</td>
  </tr>
  <tr>
    <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
    <td data-th="Desktop share">69%</td>
    <td data-th="Table share">9%</td>
    <td data-th="Mobile share">22%</td>
  </tr>
  <tr>
    <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
    <td data-th="Desktop share">86%</td>
    <td data-th="Table share">4%</td>
    <td data-th="Mobile share">10%</td>
  </tr>
</tbody>

Cobalah

Sekarang kita hanya perlu menambahkan CSS untuk menyembunyikan thead asli dan menunjukkan label data-th menggunakan elemen semu :before. Hal ini akan mengakibatkan pengalaman multi-perangkat seperti yang terlihat di video berikut ini.

Di situs, kita harus membuat breakpoint tambahan hanya untuk materi tabel. Ketika Anda membangun bagi perangkat seluler terlebih dahulu, lebih sulit untuk mengurungkan gaya yang sudah diterapkan, jadi kita harus membagi CSS tabel tampilan sempit yang terlihat dari css tampilan lebar yang terlihat. Ini memberi kita jeda yang jelas dan konsisten.

@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;
  }
}

Cobalah

Membungkus

Berhasil: Pada saat membaca ini, Anda sudah akan membuat laman landas produk sederhana Anda yang pertama yang bekerja di berbagai macam perangkat, faktor-bentuk, dan ukuran layar.

Jika mengikuti panduan ini, Anda akan memiliki langkah awal yang baik:

  1. Buat AI dasar dan pahami materi sebelum Anda membuat kode.
  2. Selalu menyetel tampilan yang terlihat.
  3. Buat pengalaman dasar Anda di sekitar pendekatan seluler-dahulu.
  4. Setelah Anda memiliki pengalaman seluler, tingkatkan lebar tampilan sampai terlihat tidak benar dan setel breakpoint di sana.
  5. Terus iterasi.