Memanipulasi situs HTML5 Anda

Eric Bidelman

Twitter GitHub Halaman beranda

Pengantar

Mengembangkan untuk web seluler adalah topik yang hangat saat ini. Tahun ini, untuk pertama kalinya, ponsel pintar menjual PC yang terjual. Semakin banyak pengguna menggunakan perangkat seluler untuk melintasi web, yang berarti sangat penting bagi developer untuk mengoptimalkan situs mereka untuk browser seluler.

Medan pertempuran "seluler" masih belum terpetakan bagi banyak developer. Banyak orang memiliki situs lama yang mengabaikan pengguna seluler sama sekali. Sebaliknya, situs ini didesain terutama untuk penjelajahan desktop dan mengalami penurunan performa yang buruk di browser seluler. Tidak terkecuali situs ini (html5Rock.com). Saat peluncuran, kami berupaya membuat situs versi seluler.

Membuat html5Rock.com yang mobile-friendly

Sebagai latihan, menurut saya akan menarik untuk menggunakan html5Rock (situs HTML5 yang sudah ada) dan meningkatkannya dengan versi yang mobile-friendly. Saya terutama mengkhawatirkan jumlah pekerjaan minimum untuk menargetkan ponsel pintar. Tujuan latihan saya bukan untuk membuat situs seluler yang benar-benar baru dan mengelola dua codebase. Hal itu akan sangat memakan waktu dan sangat membuang-buang waktu. Kami telah menentukan struktur situs (markup). Kami telah melihat tampilan dan nuansa (CSS). Fungsi inti (JS) ada di sana. Intinya adalah, banyak situs berada di tempat yang sama.

Artikel ini membahas cara kami membuat html5Rock versi seluler yang dioptimalkan untuk perangkat Android dan iOS. Cukup muat html5Rock.com pada perangkat yang mendukung salah satu OS tersebut untuk melihat perbedaannya. Tidak ada pengalihan ke m.html5Rock.com atau tindakan berbahaya lain yang seperti itu. Anda mendapatkan html5Rock apa adanya... dengan manfaat tambahan dari sesuatu yang terlihat hebat dan bekerja dengan baik di perangkat seluler.

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

Kueri Media CSS

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

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

akan menargetkan perangkat cetak dan memberikan gaya tertentu untuk konten halaman saat halaman dicetak. CSS3 mengembangkan ide tentang jenis media dan meningkatkan fungsinya dengan kueri media. Kueri media memperluas kegunaan jenis media dengan memungkinkan pelabelan lembar gaya yang lebih tepat. Dengan begitu, penyajian konten dapat disesuaikan dengan berbagai perangkat output tertentu tanpa harus mengubah kontennya. Kedengarannya sempurna untuk tata letak yang ada dan perlu dimodifikasi!

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

Menargetkan ukuran layar

Pada contoh berikut, phone.css akan berlaku untuk perangkat yang dianggap browser sebagai "perangkat genggam" atau perangkat dengan lebar layar <= 320 piksel.

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

Memberikan awalan pada kueri media dengan kata kunci "only" akan menyebabkan browser yang tidak mematuhi CSS3 mengabaikan aturan tersebut.

Yang berikut 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 sebentar dan membahas media="handheld". Faktanya adalah, Android dan iOS mengabaikan media="handheld". Klaimnya adalah pengguna akan melewatkan konten kelas atas yang disediakan oleh stylesheet yang menargetkan media="screen" dan developer cenderung tidak mempertahankan versi media="handheld" yang berkualitas lebih rendah. Jadi, sebagai bagian dari moto "web lengkap", sebagian besar browser ponsel pintar modern mengabaikan lembar gaya genggam.

Sebaiknya gunakan fitur ini untuk menargetkan perangkat seluler, tetapi berbagai browser telah menerapkannya dengan cara yang berbeda:

• Beberapa hanya membaca lembar gaya genggam.
• Beberapa hanya membaca lembar gaya genggam jika ada, tetapi default ke lembar gaya layar jika tidak ada.
• Beberapa di antaranya membaca lembar gaya genggam dan lembar gaya layar.
• Beberapa hanya membaca {i>style sheet<i} layar.

Opera Mini tidak mengabaikan media="handheld". Trik agar Windows Mobile mengenali media="handheld" adalah dengan menggunakan huruf besar 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 html5Rock menggunakan kueri media

Kueri media banyak digunakan di seluruh HTML5Rock seluler. Mereka memungkinkan kami menyesuaikan tata letak tanpa harus membuat perubahan signifikan pada markup template Django kami... penyelamatan yang nyata! Selain itu, dukungan mereka di berbagai browser cukup bagus.

Pada <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 html5Rock.com, tetapi sekarang kami menerapkan gaya baru (mobile.css) untuk lebar layar di bawah 800 piksel. Kueri medianya mencakup ponsel pintar (~320px) dan iPad (~768px). Efeknya: kami secara bertahap mengganti gaya 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 itu penting!
• Menghapus status :hover. Pesan tersebut tidak akan pernah terlihat di perangkat sentuh.
• Menyesuaikan tata letak menjadi kolom tunggal. Selengkapnya akan dibahas nanti.
• Menghapus box-shadow di sekitar div penampung utama situs. Bayangan kotak besar akan mengurangi performa halaman.
• Menggunakan model kotak fleksibel CSS box-ordinal-group untuk mengubah urutan setiap bagian di halaman beranda. Anda akan melihat "PELAJARI GRUP FITUR HTML5 PELAJARI MENURUT UTAMA" muncul sebelum bagian "TUTORIAL" di halaman beranda, tetapi setelahnya di versi seluler. Pengurutan ini lebih masuk akal untuk perangkat seluler dan tidak memerlukan perubahan markup. FTW flexbox CSS!
• Menghapus opacity perubahan. Mengubah nilai alfa adalah hit performa di perangkat seluler.

Tag meta seluler

Mobile WebKit mendukung beberapa pernak-pernik yang memberi pengguna pengalaman penjelajahan yang lebih baik 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 tentang tampilan konten di 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 mengambil nilai piksel. Menyetel width=320 akan mencapai hasil yang sama seperti width=device-width di iPhone dan beberapa ponsel smart lainnya. Perlu diingat bahwa tidak semua ponsel memiliki lebar seperti ini. Jadi, sebaiknya tetap gunakan device-width dan biarkan browser yang menentukan sisanya.

Android memperluas tag meta area pandang dengan memungkinkan developer menentukan resolusi layar situs yang dikembangkan:

 <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 setel properti meta target-densitydpi ke device-dpi. Tindakan ini akan menghentikan Android melakukan penskalaan di halaman web dan memungkinkan Anda membuat penyesuaian yang diperlukan untuk setiap kepadatan, melalui CSS dan JavaScript.

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

Penjelajahan layar penuh

Ada dua nilai meta lainnya yaitu iOS-sfic. 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 transparan:

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

Untuk 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. Ekstensi ini akan membuat ikon seperti aplikasi yang mencolok 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" />

Bagaimana html5Rock menggunakan tag meta seluler

Menyatukan semuanya, berikut adalah cuplikan dari bagian <head> pada html5Rock:

 <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

Pada layar yang lebih kecil, jauh lebih mudah untuk men-scroll secara vertikal daripada horizontal. Menyimpan konten dalam tata letak kolom tunggal dan vertikal lebih disukai untuk perangkat seluler. Untuk html5Rock, kami menggunakan kueri media CSS3 untuk membuat tata letak seperti itu. Sekali lagi, tanpa mengubah markup.

Tata letak vertikal kolom tunggal di seluruh situs.

Pengoptimalan seluler

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

Sembunyikan otomatis kolom URL

Browser seluler tidak memiliki ruang layar versi desktop. Masalah terburuk, di platform yang berbeda, terkadang ada kolom URL besar di bagian atas layar... bahkan setelah halaman selesai dimuat.

Salah satu cara mudah untuk menanganinya adalah dengan men-scroll halaman menggunakan JavaScript. Meski begitu, melakukannya dengan satu piksel akan menangani kolom URL yang bermasalah. Untuk menyembunyikan kolom URL secara paksa di html5Rock, saya melampirkan pengendali peristiwa onload ke objek window dan men-scroll halaman secara vertikal sebesar satu piksel:

Kolom URL yang bermasalah menggunakan 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);

Kita juga menggabungkan pemroses ini adalah variabel template is_mobile karena tidak diperlukan di desktop.

Kurangi permintaan jaringan, hemat bandwidth

Sudah diketahui bahwa mengurangi jumlah permintaan HTTP dapat meningkatkan performa secara signifikan. Perangkat seluler membatasi lebih lanjut jumlah koneksi serentak yang dapat dibuat oleh browser, sehingga situs seluler akan mendapatkan manfaat yang lebih besar dengan mengurangi permintaan yang tidak relevan ini. Selain itu, memangkas setiap byte juga penting karena bandwidth pada ponsel sering kali terbatas. Anda mungkin menghabiskan uang pengguna!

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

• Hapus iframe - iframe lambat! Sejumlah 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 seluler.

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

Tombol kotak di halaman beranda.

Item 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, hanya menyembunyikan tombol-tombol ini saja tidak cukup. Hal itu tidak hanya akan membuang-buang {i>bandwidth<i}, tetapi pengguna juga tidak akan melihat akibat dari pemborosan {i>bandwidth<i}! Solusinya adalah membuat boolean "is_mobile" di template Django untuk menghilangkan bagian HTML secara bersyarat. Saat pengguna melihat situs di perangkat smart, tombol akan diabaikan.

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

• Kompresi CSS/JS - kami menggunakan kompresor YUI, bukan compiler penutupan, terutama karena kompresor ini menangani CSS dan JS. Salah satu masalah yang kami temui adalah kueri media inline (kueri media yang muncul di dalam stylesheet) barfed di kompresor YUI 2.4.2 (lihat masalah ini). Menggunakan YUI Compressor 2.4.4+ memperbaiki masalah.

• Menggunakan sprite gambar CSS jika memungkinkan.

• Menggunakan pngcrush untuk kompresi gambar.

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

• Memuat otomatis Google Penelusuran Khusus menggunakan tag skrip tunggal, bukan memuatnya secara dinamis dengan google.load(). Yang kedua membuat permintaan tambahan.

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

• Kode cukup printer kami dan Modernizr disertakan di setiap halaman, meskipun tidak pernah digunakan. Modernizr sangat bagus, tetapi menjalankan banyak pengujian di setiap beban. Beberapa pengujian tersebut melakukan modifikasi yang mahal pada DOM dan memperlambat pemuatan halaman. Sekarang, kita hanya menyertakan {i>library <i} ini pada halaman yang benar-benar dibutuhkan. -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 perubahan posisi/geometri. Biaya perubahan posisi/geometri bahkan lebih mahal di perangkat seluler.
• Memindahkan kode sisi klien yang boros ke server. Secara khusus, pemeriksaan untuk melihat menetapkan 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 dapat menyesuaikan.

Cache Aplikasi

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

Saat menerapkan AppCache di situs, sebaiknya jangan menyimpan file manifes dalam cache (baik secara eksplisit dalam file manifes itu sendiri maupun secara implisit dengan header kontrol cache yang berat). Jika manifes Anda di-cache oleh browser, adalah mimpi buruk untuk di-debug. iOS dan Android sangat baik dalam melakukan cache file ini, namun tidak memberikan cara yang praktis untuk mengosongkan cache seperti yang dilakukan browser desktop.

Guna mencegah penyimpanan cache tersebut untuk situs, pertama-tama kita setel App Engine agar tidak pernah menyimpan file manifes ke dalam cache:

- 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 telah selesai didownload. Pengguna 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 menyimpan lalu lintas 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 harus Anda lakukan adalah memaksa browser seluler untuk mendownload aset dalam jumlah besar pada setiap update appcache. Sebagai gantinya, ingat bahwa browser secara implisit akan meng-cache halaman html ketika pengguna berkunjung (dan menyertakan atribut <html manifest="...">).