Tata Letak Mobile-First Fleksibel dengan CSS3

() translation by (you can also view the original English article)

Beberapa ahli memproyeksikan perangkat mobile untuk menjadi media dominan untuk penjelajahan web dalam waktu lima tahun, menyalip penjelajahan di komputer desktop. Terlepas dari seberapa akurat proyeksi ini, jelas bahwa memformat situs web untuk penayangan ramah mobile harus menjadi pokok desain dan pengembangan web. Tentu saja, ada banyak cara untuk mencapai ini. Namun, CSS3 menyediakan toolset yang cukup kaya untuk pemformatan ramah mobile, mengandalkan kemampuan browser klien sebagai pengganti template back-end.

Langkah 1. Berpikir Maju

Ada beberapa masalah yang harus dipikirkan sebelum terjun langsung ke penataan tata letak.

Penjelajahan Web Mobile

Pertama, apa yang harus diingat ketika mendesain untuk browser mobile? Nah, ini ada beberapa hal...

Batasi permintaan HTTP: transfer data melalui 3G bisa sangat berat. Ini termasuk membatasi gambar jika memungkinkan (dari CSS, misalnya).
Ukuran layar yang bervariasi: Perangkat mobile cenderung melayang-layang di sekitar lebar layar 320-480 piksel tetapi dapat sangat bervariasi tergantung pada perangkatnya. Jadi, menentukan lebar dalam CSS umumnya merupakan ide yang buruk untuk hal-hal seperti paragraf dan DIV.
Optimalkan untuk subset: Ada RIBUAN perangkat mobile, browser, OS, dll. Cobalah untuk memfokuskan pengujian Anda pada apa yang Anda anggap paling penting. Bagi saya, ini termasuk iPhone, iPad, Blackberry, dan Android. Daftar ini juga harus menyertakan Windows Mobile tetapi saya tidak memiliki akses ke perangkat Windows Mobile.
Hover harus mati: Oke, itu sedikit dramatis. Namun, layar sentuh tidak cenderung mendukung hover. Jadi, ketika membuat menu, jangan menyembunyikan hal-hal di belakang event hover. Hover hanya boleh digunakan untuk meningkatkan beberapa efek (seperti perubahan warna) bukan memberikan konten penting (seperti menu drop-down).

"Titik keseluruhannya adalah untuk mengetahui lebih dulu tentang bagaimana tampilan situs Anda di berbagai browser sebelum melihatnya."

Dukungan Browser (di Desktop)

Kedua, pertahankan dukungan browser. Pepatah "gajah dalam ruangan" adalah IE, tentu saja. Berita bagus! Ternyata, situs web tidak perlu terlihat persis sama di setiap browser. Selama tidak mengganggu konten situs web, umumnya browser yang tidak mampu memproses CSS3 akan tetap memberikan pengalaman yang lebih dapat diterima. Titik keseluruhannya adalah untuk mengetahui terlebih dahulu apakah situs Anda akan terlihat mirip di berbagai browser sebelum melihatnya.

Langkah 2. HTML

Body

"Jaga agar markup tetap sederhana dan bersih."

Kita tidak hanya ingin menghasilkan HTML yang valid, kita juga ingin menyederhanakannya sebanyak mungkin. Meskipun selalu merupakan ide yang baik untuk menjaga agar HTML tetap ramping dan bebas dari DIV-DIV yang tidak perlu, itu bahkan lebih penting sekarang dengan peningkatan penelusuran web mobile. Juga, banyak efek yang diperlukan 7 tag DIV bersarang sekarang dapat direproduksi dengan sedikit CSS3.

Karena ini bukan tutorial HTML5, saya akan tetap dengan XHTML strict. Dengan itu, banyak markup di sini dapat dibuat lebih bersih menggunakan beberapa elemen HTML5. Jadi, inilah beberapa HTML untuk tata letak yang khas. Kita punya halaman yang berisi header, footer, area konten, dan sidebar.

<body>
  <div class='pg'>
    <div class='head'>
      <h1><a href='#'>My Blog</a></h1>
    </div>
    
    <div class='pg-main'>
      
      <div class='entries'>
        <h2><a href='#'>An Entry About Something</a></h2>
        <p class='preview'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem elit, suscipit tempus pretium eget, varius ut erat. Donec lobortis est sit amet felis pellentesque vel egestas sapien iaculis. Maecenas eget quam nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
        <p>Mauris nunc metus, pellentesque eget porta ut, facilisis ut metus. Etiam dignissim egestas semper. Aliquam tincidunt tortor non mi ultricies quis interdum quam scelerisque. Aenean risus libero, aliquam vel rhoncus sed, elementum eu leo. Pellentesque vitae ante urna, ut rhoncus sapien. In iaculis tristique lobortis. Nulla feugiat elit at odio dictum dignissim. Fusce tristique lacus nec justo porttitor egestas. Etiam vitae arcu risus, at interdum lacus. Ut dignissim, dui eu imperdiet accumsan, dui mauris hendrerit leo, vel fringilla mi ipsum vitae orci. Nulla libero quam, euismod eget rutrum sed, ullamcorper vitae felis. Mauris aliquam dignissim interdum. Sed sagittis blandit urna, sit amet pellentesque lorem egestas sed. Nam adipiscing, lorem non ornare volutpat, turpis ante sagittis elit, ac hendrerit arcu nunc ut est. Vivamus at arcu felis, eget porta odio.</p>
        <hr/>
        
        <h2><a href='#'>An Entry About Something Else</a></h2>
        <p class='preview'>Maecenas vitae metus ac est lobortis tincidunt laoreet et enim. Maecenas purus magna, condimentum at mattis vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque enim faucibus ac. Etiam suscipit fringilla mi, et tempor mauris convallis sit amet. Phasellus eros dolor, tempus at pulvinar ac, mollis sed eros. Morbi viverra pellentesque tellus, et tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus eget eget felis. Donec ut malesuada lorem. </p>
        <p>Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sit amet erat. Nullam cursus ornare placerat. Sed accumsan malesuada iaculis. Proin suscipit ultrices mattis. Sed semper facilisis est in luctus. Etiam et quam a ligula laoreet iaculis vel quis leo. Etiam et purus a quam vehicula feugiat. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac a tortor.</p>
        <hr/>
        
        <h2><a href='#'>A Third Entry</a></h2>
        <p class='preview'>Maecenas vitae metus ac est lobortis tincidunt laoreet et enim. Maecenas purus magna, condimentum at mattis vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque enim faucibus ac. Etiam suscipit fringilla mi, et tempor mauris convallis sit amet. Phasellus eros dolor, tempus at pulvinar ac, mollis sed eros. Morbi viverra pellentesque tellus, et tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus eget eget felis. Donec ut malesuada lorem. </p>
        <p>Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sit amet erat. Nullam cursus ornare placerat. Sed accumsan malesuada iaculis. Proin suscipit ultrices mattis. Sed semper facilisis est in luctus. Etiam et quam a ligula laoreet iaculis vel quis leo. Etiam et purus a quam vehicula feugiat. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac a tortor.</p>
      </div>
      
      <div class='sidebar'>
        <h2 class='not-there'>Blog Menu</h2>
        <h3 class='subscribe'>Subscribe</h3>
        <ul class='subscribe'>
          <li><a href='#'>RSS</a></li>
        </ul>
        <h3>Social</h3>
        <ul>
          <li><a href='#'>Facebook</a></li>
          <li><a href='#'>Twitter</a></li>
        </ul>
        <h3>Categories</h3>
        <ul>
          <li><a href='#'>Something</a></li>
          <li><a href='#'>Nothing</a></li>
          <li><a href='#'>All Things</a></li>
          <li><a href='#'>No Things</a></li>
        </ul>
        <h3>Archives</h3>
        <ul>
          <li><a href='#'>June 2010</a></li>
          <li><a href='#'>May 2010</a></li>
          <li><a href='#'>April 2010</a></li>
          <li><a href='#'>March 2010</a></li>
        </ul>
      </div>
    </div>
    
    <div class='foot'>
      <p>© No one in particular 2010</p>
    </div>
    
  </div>
</body>

Seperti yang Anda lihat, ini adalah tata letak blog yang cukup sederhana dan khas dengan beberapa artikel dan beberapa opsi menu di sidebar.

Metadata Viewport

Dalam elemen head kita, kita akan menempatkan semua potongan khas seperti stylesheet, content type, title, dll. Namun, ada satu bagian tambahan yang akan kita sertakan untuk memperhalus browser mobile.

1	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Ini adalah tag metadata kecil, disarankan oleh Apple, untuk membantu iPhone me-render halaman. Ini pada dasarnya otomatis mencocokkan halaman ke viewport dan mencegah pembesaran. Beberapa browser mobile lain mendukung ini juga, termasuk browser asli Blackberry. Dalam pengujian saya, menjaga tag ini tidak membahayakan penjelajahan desktop apa pun. Jadi, letakkan saja di head dan lupakan.

Berpikir Tentang Tata Letak

Tutorial khusus ini akan fokus untuk mengambil HTML dan menatanya ke dalam dua tata letak. Satu tata letak akan ditargetkan pada penjelajahan mobile dan satu lagi di penjelajahan desktop. Dalam praktiknya, mungkin akan berguna untuk memecah tata letak semacam itu menjadi beberapa "target" yang berbeda. Namun, demi kesederhanaan ini, tutorial ini hanya akan fokus pada kedua itu saja.

Langkah 3. Penataan Mobile

Penolakan

Tujuan dari tutorial ini bukan untuk berbicara tentang tipografi yang kaya atau desain grafis yang brilian. Jadi, presentasi di sini dijaga agar sangat sederhana. Yang penting adalah proses berpikir yang mendorong stylesheet.

Pendekatan

Dorongan utama dari semua ini adalah berpikir tentang merancang tata letak mobile terlebih dahulu. Alasannya adalah bahwa kemungkinan apa pun yang Anda buat untuk perangkat mobile juga akan berfungsi pada desktop. Kemudian, bukannya berakhir dengan tata letak mobile yang sama dan tata letak desktop yang brilian, Anda akan mulai dengan tata letak mobile yang brilian dan meningkatkannya itu untuk desktop. Ini juga akan memastikan bahwa situs web Anda tidak kehilangan audiensnya karena dunia menjadi mobile.

Inspirasi

Pendekatan ini diilhami oleh Luke Wroblewski yang berbicara di An Event Apart di Boston tahun ini. Presentasinya berpusat di sekitar berpikir "Mobile First".

Sementara tutorial ini tidak menangkap presentasinya dalam bentuk keseluruhan, satu bagian dari itu lebih banyak mengena daripada yang lain (untuk saya). Tren saat ini adalah desain untuk bekerja pada versi desktop situs web terlebih dahulu, kemudian merampingkan dan menyesuaikan situs web mobile jika ada waktu. Sebagai gantinya, kita harus mulai merancang untuk dunia mobile terlebih dahulu, kemudian ubah desain itu sesuai keinginan untuk desktop. Yang rasional pada dasarnya adalah salah satu peningkatan progresif... jika desain itu berguna pada ponsel, itu juga akan bekerja di desktop. Yang sebaliknya, biasanya tidak benar.

Beberapa CSS

Jadi, mari berpikir tentang penelusuran mobile sebentar. Layar gulir panjang sulit untuk ditangani. Jadi, mari kita ambil item daftar menu blog dan membuatnya lebih mudah untuk ditangani.

.sidebar ul{
  border-left:solid 1px #ccc;
  padding:0 0 0 5px;
}
.sidebar ul li{
  display:inline;
  padding:0 5px 0 0px;
  border-right:solid 1px #ccc;
}

Itu seharusnya memberi kita menu yang bagus, tampak bersih dengan beberapa pemisah berbentuk pipa. Anda akan melihat bahwa saya tidak memilih untuk memindahkan menu dari bagian bawah layar. Menu di bagian bawah dapat berguna dalam penelusuran mobile. Jika Anda berpikir tentang bergulir melalui halaman web, ketika Anda sampai ke bawah Anda harus gulir semua jalan kembali ke atas untuk pergi ke tempat lain. Bergantung pada perangkatnya, menggulir bisa agak membebani. Ada pro dan kontra terhadap metode ini tetapi dalam kasus ini, saya pikir itu bekerja dengan baik.

Namun, saya ingin memindahkan RSS ke banner atas, jadi mari kita lakukan juga.

h3.subscribe{
  display:none;
}
.sidebar ul.subscribe{
  position:absolute;
  top:25px;
  right:10px;
  border:none;
  color:#fff;
}
.sidebar ul.subscribe li{
  border:none;
}

Selain dari itu, sisanya cukup banyak hanya perubahan ukuran font dari elemen heading dan pewarnaan tautan. Untuk keperluan tutorial ini, saya menyertakan CSS-reset di bagian atas lembar hanya untuk kesederhanaan. Lembar CSS lengkap dapat ditemukan di kode sumber untuk tutorial ini.

Seperti yang Anda lihat, tidak ada yang benar-benar istimewa tentang penataan mobile saat mendekati desain dari sudut mobile-first. Alih-alih berpikir, "apa yang harus saya inginkan ini terlihat di layar saya," Anda berpikir "bagaimana saya bisa menggunakan penataan untuk membuat ini paling berguna pada perangkat mobile."

Langkah 4. Penataan Desktop

Media Query

Jika Anda tidak dapat menebaknya, semua ini akan berakhir didorong oleh media query CSS3. Jika Anda tidak akrab, media query adalah cara stylesheet untuk membalik deklarasi dan mematikan berdasarkan berbagai kondisi. Salah satu kondisi tersebut, dan topik lembaran ini, adalah dimensi layar.

Sekali lagi, CSS lengkap dapat ditemukan di sumber yang dilampirkan pada tutorial ini tetapi mari kita periksa ini sejenak:

1	.pg{
2	width:800px;
3	margin:0 auto;
4	}

Dalam hal ini, kita tidak benar-benar menginginkan lebar halaman 800px kecuali kita yakin jendela browser pengguna setidaknya 800px lebar. Jika tidak, kita akan berakhir dengan salah satu scrollbar horizontal yang mengganggu itu.

Jadi, kita akan membungkus deklarasi itu (bersama dengan beberapa yang lain) di dalam media query.

@media all and (min-width:800px){
  .pg{
    width:800px;
    margin:0 auto;
  }
}

Itu cukup mudah dibaca, kan? "all" mengacu pada "gunakan gaya ini untuk semua jenis media." Ada hal lain yang bisa masuk ke sini, seperti "print" untuk printer tetapi tidak ada banyak dukungan yang konsisten. Bagaimanapun, "all" akan bekerja dengan baik untuk ini.

"Menimpa" Gaya Sebelumnya

Kita akan meletakkan banyak hal lainnya di dalam media query ini juga, tetapi hal yang penting untuk diingat adalah pada dasarnya menimpa gaya sebelumnya dan menambahkan beberapa yang baru untuk mencapai tata letak baru. Ini akan memungkinkan browser yang tidak mendukung media query untuk hanya mundur ke gaya yang asli. Meskipun mereka dioptimalkan untuk mobile, tidak ada yang salah dengan menampilkan tata letak pada browser desktop yang kurang mampu.

Sebagai contoh, kita akan memindahkan sidebar dari bawah dan membuat daftar seperti daftar lagi.

@media all and (min-width:800px){
  .sidebar ul{
    border:none;
    padding:0;
  }
  .sidebar ul li{
    display:block;
    padding:0;
    border:none;
  }
  h3.subscribe{
    display:block;
  }
  .sidebar ul.subscribe{
    position:static;
    top:auto;
    right:auto;
    border:inherit;
    color:inherit;
  }
  .sidebar ul.subscribe li{
    border:inherit;
  }
}

Itu akan menempatkan sidebar ke kiri (dikombinasikan dengan beberapa float lain yang ditemukan di stylesheet) dan meletakkan subscribe kembali di tempatnya untuk orang yang menjelajahi situs dalam lebar minimal 800px.

Jadi, jika Anda membuka sumber di browser dan mengubah ukurannya secara horizontal, Anda akan dapat menonton perubahan tata letak antara format desktop dan format ramah mobile

Anda mungkin bertanya pada diri sendiri, mengapa 800px? Apakah ada sesuatu yang ajaib tentang lebar 800px? Tidak. Bahkan, saya berpendapat bahwa itu terlalu luas. Dengan diperkenalkannya "snap" di Windows 7, saya berpendapat bahwa 600px harus menjadi target lebar baru untuk situs web desktop. Dengan begitu, browser dapat "dikunci" ke kanan atau ke kiri pada layar 1280px dan tetap mempertahankan tata letaknya. Namun, ini benar-benar bukan sebuah masalah. Ketahuilah bahwa 800px bukanlah sesuatu yang istimewa.

Dukungan Browser

Penting: Situs web akan ditata sebagai versi mobile di IE8 dan di bawahnya. Apakah ini baik? Saya pikir begitu. Juga, saya telah melakukan ini sebelumnya dan sejauh ini belum ada yang menangkap saya. Plus, dukungan media query dijanjikan di IE9.

Langkah 5. Metode Alternatif

Ini bukan satu-satunya cara untuk mencapai ini. Namun, tujuan dari tutorial ini adalah untuk menunjukkan penggunaan yang sangat praktis untuk media query dan menyajikan beberapa ide tata letak mobile berdasarkan CSS saja.

Yang mengatakan, inilah beberapa cara lain untuk menyusun tata letak mobile...

Sajikan berbagai template: Jika Anda memiliki akses ke template untuk situs tersebut, sistem tema biasanya dapat diletakkan di tempat di mana browser yang meminta dideteksi, maka template HTML yang berbeda disajikan berdasarkan pada jenis browser (mobile atau tidak). Ini biasanya disertai dengan sekumpulan CSS terpisah.
Subdomain: m., Mobile., Dan .mobi cenderung menjadi standar di sini, di mana situs web yang sepenuhnya berbeda disajikan. Yang mengatakan, itu biasanya sama dengan "menyajikan berbagai template" untuk menghindari duplikasi konten.
Tata letak fluid: Satu juga dapat membuat tata letak mereka benar-benar fluid sehingga tidak peduli berapa ukuran jendela browser, konten menyesuaikan dirinya sendiri. Bahkan, stylesheet "mobile" dalam tutorial ini adalah tata letak mobile. Yang menyenangkan tentang penggunaan media query adalah Anda dapat mengurangi background-image dan menghasilkan lebih sedikit permintaan HTTP.

Ada kemungkinan beberapa metode lain menangani penelusuran web mobile tetapi sering kali itu akan menjadi semacam gabungan dengan lainnya. Namun, apakah itu tata letak fluid dengan titik "tendangan" tertentu berdasarkan media query atau pengalihan subdomain yang melayani berbagai template, yang penting adalah mulai merencanakan tata letak mobile lebih awal, sehingga situs web Anda tidak menjadi semakin kurang bermanfaat selama 5 tahun ke depan.