Membuat situs HTML5 menjadi versi seluler

Eric Bidelman

Pengantar

Pengembangan untuk web seluler adalah topik hangat saat ini. Tahun ini, untuk pertama kalinya, smartphone mengungguli penjualan PC. Makin banyak pengguna yang menggunakan perangkat seluler untuk menjelajahi web, yang berarti developer harus mengoptimalkan situs mereka untuk browser seluler.

Medan pertempuran "seluler" masih belum dipetakan oleh banyak developer. Banyak orang memiliki situs lama yang mengabaikan pengguna seluler sama sekali. Situs ini dirancang terutama untuk penjelajahan desktop dan tidak berfungsi dengan baik di browser seluler. Situs ini (html5rocks.com) tidak terkecuali. Saat peluncuran, kami tidak terlalu memperhatikan versi seluler situs.

Membuat html5rocks.com yang mobile-friendly

Sebagai latihan, saya pikir akan menarik untuk mengambil html5rocks (situs HTML5 yang sudah ada) dan menambahkannya dengan versi yang mobile-friendly. Saya terutama mementingkan jumlah pekerjaan minimum yang diperlukan untuk menargetkan smartphone. Tujuan latihan saya bukanlah untuk membuat situs seluler yang sepenuhnya baru dan mengelola dua codebase. Hal itu akan memakan waktu lama dan sangat membuang-buang waktu. Kita telah menentukan struktur (markup) situs. Kita memiliki tampilan dan nuansa (CSS). Fungsi intinya (JS) sudah ada. Intinya, banyak situs yang mengalami hal yang sama.

Artikel ini membahas cara kami membuat html5rocks versi seluler yang dioptimalkan untuk perangkat Android dan perangkat iOS. Cukup muat html5rocks.com di perangkat yang mendukung salah satu OS tersebut untuk melihat perbedaannya. Tidak ada pengalihan ke m.html5rocks.com atau hal konyol lainnya. Anda mendapatkan html5rocks apa adanya… dengan manfaat tambahan berupa tampilan yang bagus dan berfungsi dengan baik di perangkat seluler.

html5rocks.com di desktop (kiri) dan perangkat seluler (kanan)

Kueri media CSS

HTML4 dan CSS2 telah mendukung style sheet yang bergantung pada media selama beberapa waktu. Contoh:

<link rel="stylesheet" media="print" href="printer.css">

akan menargetkan perangkat cetak dan memberikan gaya visual tertentu untuk konten halaman saat dicetak. CSS3 mengembangkan ide jenis media satu langkah lebih jauh dan meningkatkan fungsinya dengan kueri media. Kueri media memperluas kegunaan jenis media dengan memungkinkan pelabelan stylesheet yang lebih akurat. Hal ini memungkinkan presentasi konten disesuaikan dengan rentang perangkat output tertentu tanpa harus mengubah konten itu sendiri. Tampaknya cocok untuk tata letak yang sudah ada dan perlu diubah.

Anda dapat menggunakan kueri media dalam atribut media pada stylesheet eksternal untuk menargetkan lebar layar, lebar perangkat, orientasi, dll. Untuk daftar lengkapnya, lihat spesifikasi kueri media W3C.

Menargetkan ukuran layar

Dalam contoh berikut, phone.css akan berlaku untuk perangkat yang dianggap "perangkat genggam" oleh browser atau perangkat dengan lebar layar <= 320 px.

 <link rel='stylesheet'
  media='handheld, only screen and (max-device-width: 320px)' href='phone.css'>

Menambahkan awalan kata kunci "only" ke kueri media akan menyebabkan browser yang tidak mematuhi CSS3 mengabaikan aturan tersebut.

Berikut ini akan menargetkan ukuran layar antara 641 px dan 800 px:

 <link rel='stylesheet'
  media='only screen and (min-width: 641px) and (max-width: 800px)' href='ipad.css'>

Kueri media juga dapat muncul dalam tag <style> inline. Berikut ini menargetkan jenis media all saat dalam orientasi potret:

 <style>
  @media only all and (orientation: portrait) { ... }
 </style>

media="handheld"

Kita perlu berhenti sejenak dan membahas media="handheld". Faktanya, Android dan iOS mengabaikan media="handheld". Klaimnya adalah bahwa pengguna akan melewatkan konten berkualitas tinggi yang disediakan oleh stylesheet yang menargetkan media="screen" dan developer cenderung tidak akan mempertahankan versi media="handheld" yang berkualitas lebih rendah. Jadi, sebagai bagian dari moto "web lengkap", sebagian besar browser smartphone modern mengabaikan lembar gaya perangkat seluler.

Akan ideal jika fitur ini digunakan untuk menargetkan perangkat seluler, tetapi berbagai browser telah menerapkannya dengan cara yang berbeda:

• Beberapa hanya membaca lembar gaya perangkat seluler.
• Beberapa hanya membaca lembar gaya perangkat genggam jika ada, tetapi secara default menggunakan lembar gaya layar jika tidak ada.
• Beberapa browser membaca lembar gaya perangkat seluler dan lembar gaya layar.
• Beberapa hanya membaca lembar gaya layar.

Opera Mini tidak mengabaikan media="handheld". Trik untuk membuat Windows Mobile mengenali media="handheld" adalah dengan menggunakan huruf kapital pada nilai atribut media untuk stylesheet layar:

 <!-- media="handheld" trick for Windows Mobile -->
 <link rel="stylesheet" href="screen.css" media="Screen">
 <link rel="stylesheet" href="mobile.css" media="handheld">

Cara html5rocks menggunakan kueri media

Kueri media banyak digunakan di seluruh html5rocks seluler. Mereka mengizinkan kami mengubah tata letak tanpa harus membuat perubahan signifikan pada markup template Django kami… sangat membantu! Selain itu, dukungannya di berbagai browser cukup baik.

Di <head> setiap halaman, Anda akan melihat stylesheet berikut:

 <link rel='stylesheet'
  media='all' href='/static/css/base.min.css' />
 <link rel='stylesheet'
  media='only screen and (max-width: 800px)' href='/static/css/mobile.min.css' />

base.css selalu menentukan tampilan dan nuansa utama html5rocks.com, tetapi sekarang kami menerapkan gaya baru (mobile.css) untuk lebar layar di bawah 800 piksel. Kueri medianya mencakup smartphone (~320 px) dan iPad (~768 px). Efeknya: kita mengganti gaya secara bertahap di base.css (hanya jika diperlukan) agar terlihat lebih baik di perangkat seluler.

Beberapa perubahan gaya yang diterapkan mobile.css:

• Mengurangi spasi kosong/padding tambahan di seluruh situs. Layar kecil berarti ruang sangat terbatas.
• Menghapus :hover negara bagian. Tooltip tidak akan pernah terlihat di perangkat sentuh.
• Menyesuaikan tata letak menjadi satu kolom. Hal ini akan dibahas lebih lanjut nanti.
• Menghapus box-shadow di sekitar div penampung utama situs. Bayangan kotak besar mengurangi performa halaman.
• Menggunakan model kotak fleksibel CSS box-ordinal-group untuk mengubah urutan setiap bagian di halaman beranda. Anda akan melihat bahwa "LEARN BY MAJOR HTML5 FEATURE GROUPS" muncul sebelum bagian "TUTORIALS" di halaman beranda, tetapi muncul setelahnya di versi seluler. Urutan ini lebih sesuai untuk perangkat seluler dan tidak memerlukan perubahan markup. CSS flexbox FTW!
• Menghapus opacity perubahan. Mengubah nilai alfa akan memengaruhi performa di perangkat seluler.

Tag meta seluler

WebKit Seluler mendukung beberapa fitur yang memberikan pengalaman penjelajahan yang lebih baik kepada pengguna di perangkat tertentu.

Setelan area pandang

Setelan meta pertama (dan yang paling sering Anda gunakan) adalah properti area pandang. Menyetel area pandang akan memberi tahu browser cara menyesuaikan konten dengan layar perangkat dan memberi tahu browser bahwa situs dioptimalkan untuk perangkat seluler. Contoh:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

memberi tahu browser untuk menyetel area pandang ke lebar perangkat dengan skala awal 1. Contoh ini juga memungkinkan zoom, sesuatu yang mungkin diinginkan untuk situs, tetapi tidak untuk aplikasi web. Kita dapat mencegah zoom dengan user-scalable=no atau membatasi penskalaan ke tingkat tertentu:

 <meta name=viewport
  content="width=device-width, initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0">

Catatan: width juga dapat menggunakan nilai piksel. Menetapkan width=320 akan memberikan hasil yang sama seperti width=device-width di iPhone dan beberapa smartphone lainnya. Perlu diingat bahwa tidak semua ponsel memiliki lebar yang sama, jadi sebaiknya tetap gunakan device-width dan biarkan browser menentukan sisanya.

Android memperluas tag meta viewport dengan mengizinkan developer menentukan resolusi layar yang digunakan untuk mengembangkan situs:

 <meta name="viewport" content="target-densitydpi=device-dpi">

Nilai yang mungkin untuk target-densitydpi adalah device-dpi, high-dpi, medium-dpi, low-dpi.

Jika Anda ingin mengubah halaman web untuk kepadatan layar yang berbeda, gunakan kueri media CSS -webkit-device-pixel-ratio dan/atau properti window.devicePixelRatio di JavaScript, lalu tetapkan properti meta target-densitydpi ke device-dpi. Tindakan ini akan menghentikan Android melakukan penskalaan di halaman web Anda dan memungkinkan Anda melakukan penyesuaian yang diperlukan untuk setiap kepadatan, melalui CSS dan JavaScript.

Lihat dokumentasi WebView Android untuk mengetahui informasi selengkapnya tentang penargetan resolusi perangkat.

Penjelajahan layar penuh

Ada dua nilai meta lain yang khusus untuk iOS. apple-mobile-web-app-capable dan apple-mobile-web-app-status-bar-style akan merender konten halaman dalam mode layar penuh seperti aplikasi dan membuat status bar menjadi transparan:

 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Untuk mengetahui informasi selengkapnya tentang semua opsi meta yang tersedia, lihat dokumentasi referensi Safari.

Ikon layar utama

Perangkat iOS dan Android juga menerima rel="apple-touch-icon" (iOS) dan rel="apple-touch-icon-precomposed" (Android) untuk link. Tindakan ini akan membuat ikon menarik seperti aplikasi di layar utama pengguna saat mereka mem-bookmark situs Anda:

 <link rel="apple-touch-icon"
      href="/static/images/identity/HTML5_Badge_64.png" />
 <link rel="apple-touch-icon-precomposed"
      href="/static/images/identity/HTML5_Badge_64.png" />

Cara html5rocks menggunakan tag meta seluler

Dengan menggabungkan semuanya, berikut adalah cuplikan dari bagian <head> html5rocks:

 <head>
  ...
   <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />

   <link rel="apple-touch-icon"
        href="/static/images/identity/HTML5_Badge_64.png" />
   <link rel="apple-touch-icon-precomposed"
        href="/static/images/identity/HTML5_Badge_64.png" />
  ...
 </head>

Tata letak vertikal

Di layar yang lebih kecil, men-scroll secara vertikal jauh lebih nyaman daripada secara horizontal. Menyimpan konten dalam tata letak vertikal satu kolom lebih disukai untuk perangkat seluler. Untuk html5rocks, kami menggunakan kueri media CSS3 untuk membuat tata letak tersebut. Sekali lagi, tanpa mengubah markup.

Tata letak vertikal satu kolom di seluruh situs.

Pengoptimalan seluler

Sebagian besar pengoptimalan yang kami lakukan adalah hal-hal yang seharusnya dilakukan sejak awal. Hal-hal seperti mengurangi jumlah permintaan jaringan, kompresi JS/CSS, gzipping (tersedia gratis di App Engine), dan meminimalkan manipulasi DOM. Teknik ini merupakan praktik terbaik umum, tetapi terkadang diabaikan saat situs diluncurkan dengan tergesa-gesa.

Sembunyikan otomatis kolom URL

Browser seluler tidak memiliki ruang layar yang sama dengan browser desktop. Lebih buruk lagi, di berbagai platform, terkadang Anda akan melihat kolom URL yang besar di bagian atas layar… bahkan setelah halaman selesai dimuat.

Salah satu cara mudah untuk mengatasinya adalah dengan men-scroll halaman menggunakan JavaScript. Meskipun hanya satu piksel, tindakan ini akan mengatasi masalah kolom URL yang mengganggu. Untuk menyembunyikan paksa kolom URL di html5rocks, saya melampirkan pengendali peristiwa onload ke objek window dan men-scroll halaman secara vertikal sebanyak satu piksel:

Kolom URL yang tidak menarik menghabiskan ruang layar.

  // Hides mobile browser's address bar when page is done loading.
  window.addEventListener('load', function(e) {
    setTimeout(function() { window.scrollTo(0, 1); }, 1);
  }, false);

Kami juga menggabungkan pemroses ini dalam variabel template is_mobile karena tidak diperlukan di desktop.

Mengurangi permintaan jaringan, menghemat bandwidth

Sudah menjadi fakta umum bahwa mengurangi jumlah permintaan HTTP dapat meningkatkan performa secara signifikan. Perangkat seluler semakin membatasi jumlah koneksi serentak yang dapat dibuat browser, sehingga situs seluler akan mendapatkan manfaat lebih besar dari pengurangan permintaan yang tidak relevan ini. Selain itu, mengurangi setiap byte sangat penting karena bandwidth sering kali terbatas di ponsel. Anda mungkin merugikan pengguna.

Berikut adalah beberapa pendekatan yang kami lakukan untuk meminimalkan permintaan jaringan dan mengurangi bandwidth di html5rocks:

• Hapus iframe - iframe lambat. Sebagian besar latensi kami berasal dari widget berbagi pihak ketiga (Buzz, Google Friend Connect, Twitter, Facebook) di halaman tutorial. API ini disertakan melalui tag <script> dan membuat iframe yang mengurangi kecepatan halaman. Widget telah dihapus untuk perangkat seluler.

• display:none - Dalam kasus tertentu, kami menyembunyikan markup jika tidak sesuai dengan profil seluler. Contoh yang baik adalah empat kotak bulat di bagian atas halaman beranda:

Tombol kotak di halaman beranda.

Elemen tersebut tidak ada di situs seluler. Penting untuk diingat bahwa browser masih membuat permintaan untuk setiap ikon, meskipun penampungnya disembunyikan dengan display:none. Oleh karena itu, menyembunyikan tombol-tombol ini saja tidak cukup. Hal ini tidak hanya akan membuang-buang bandwidth, tetapi pengguna bahkan tidak akan melihat hasil dari bandwidth yang terbuang tersebut. Solusinya adalah membuat boolean "is_mobile" di template Django kami untuk menghilangkan bagian HTML secara bersyarat. Saat pengguna melihat situs di perangkat smart, tombol akan dihilangkan.

• Cache Aplikasi - Tidak hanya memberi kita dukungan offline, tetapi juga membuat startup lebih cepat.

• Kompresi CSS/JS - kami menggunakan kompresor YUI, bukan Closure compiler, terutama karena kompresor ini menangani CSS dan JS. Satu masalah yang kami alami adalah kueri media inline (kueri media yang muncul di dalam stylesheet) gagal di YUI compressor 2.4.2 (lihat masalah ini). Menggunakan YUI Compressor 2.4.4+ akan memperbaiki masalah ini.

• Menggunakan sprite gambar CSS jika memungkinkan.

• Menggunakan pngcrush untuk kompresi gambar.

• Menggunakan dataURI untuk gambar kecil. Encoding Base64 menambahkan ~30%+ ukuran ke gambar, tetapi menghemat permintaan jaringan.

• Penelusuran Khusus Google yang dimuat otomatis menggunakan satu tag skrip, bukan memuatnya secara dinamis dengan google.load(). Opsi kedua membuat permintaan tambahan.

<script src="//www.google.com/jsapi?autoload={"modules":[{"name":"search","version":"1"}]}"> </script>

• Pretty printer kode dan Modernizr kami disertakan di setiap halaman, meskipun tidak pernah digunakan. Modernizr memang bagus, tetapi menjalankan banyak pengujian pada setiap pemuatan. Beberapa pengujian tersebut melakukan modifikasi yang mahal pada DOM dan memperlambat pemuatan halaman. Sekarang, kita hanya menyertakan library ini di halaman yang benar-benar membutuhkannya. -2 permintaan :)

Penyesuaian performa tambahan:

• Memindahkan semua JS ke bagian bawah halaman (jika memungkinkan).
• Tag <style> inline dihapus.
• Pencarian DOM yang di-cache dan manipulasi DOM yang diminimalkan - Setiap kali Anda menyentuh DOM, browser akan melakukan reflow. Reflow bahkan lebih mahal di perangkat seluler.
• Memindahkan kode sisi klien yang tidak efisien ke server. Secara khusus, pemeriksaan untuk melihat gaya navigasi halaman saat ini: js var lis = document.querySelectorAll('header nav li'); var i = lis.length; while (i--) { var a = lis[i].querySelector('a'); var section = a.getAttribute("data-section"); if (new RegExp(section).test(document.location.href)) { a.className = 'current'; } }
• Elemen dengan lebar tetap diganti dengan width:100% atau width:auto yang fleksibel.

Cache aplikasi

Versi seluler html5rocks menggunakan Application Cache untuk mempercepat pemuatan awal dan memungkinkan pengguna membaca konten secara offline.

Saat menerapkan AppCache di situs, sangat penting untuk tidak meng-cache file manifes (baik secara eksplisit dalam file manifes itu sendiri atau secara implisit dengan header kontrol cache yang berat). Jika manifes Anda di-cache oleh browser, proses debug akan menjadi sangat sulit. iOS dan Android sangat baik dalam meng-cache file ini, tetapi tidak menyediakan cara yang mudah untuk mengosongkan cache seperti yang dilakukan browser desktop.

Untuk mencegah caching tersebut untuk situs kita, pertama-tama kita tetapkan App Engine agar tidak pernah meng-cache file manifes:

- url: /(.*\.(appcache|manifest))
  static_files: \1
  mime_type: text/cache-manifest
  upload: (.*\.(appcache|manifest))
  expiration: "0s"

Kedua, kami menggunakan JS API untuk memberi tahu pengguna saat manifes baru selesai didownload. Mereka akan diminta untuk memuat ulang halaman:

window.applicationCache.addEventListener('updateready', function(e) {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache();
    if (confirm('A new version of this site is available. Load it?')) {
      window.location.reload();
    }
  }
}, false);

Untuk menghemat traffic jaringan, buat manifes Anda tetap sederhana. Artinya, jangan menyebutkan setiap halaman di situs Anda. Cukup cantumkan file gambar, CSS, dan JavaScript yang penting. Hal terakhir yang ingin Anda lakukan adalah memaksa browser seluler untuk mendownload sejumlah besar aset pada setiap update appcache. Sebagai gantinya, ingatlah bahwa browser akan secara implisit meng-cache halaman html saat pengguna mengunjungi (dan menyertakan atribut <html manifest="...">).