Bagaimana Apple Melakukannya “Elevating the Expedition”

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

Kita membicarakan salah satu yang besar hari ini: Halaman pemasaran iPad dari Apple, “Elevating the expedition”.

Bisa dikatakan situs mereka adalah situs yang impresif, menampilkan beberapa JavaScript dan CSS yang powerful. Apple juga telah mengambil keputusan serius untuk memilih konsep target pengunjung mereka di situs ini. Mari kita dalami!

Impresi Pertama: Elemen Dasar

Situs ini datang sebagai tambahan dari situs panjang yang menggunakan scrolling untuk menambah presentasi konten dan menampilkan desain animasi. Selama Anda mengscroll situs, Anda akan melihat konten akan bermunculan, termasuk juga angka ketinggian selama Anda terus melakukan scroll ke bawah; ini sebagai indikator yang diikuti dengan sebuah narasi seakan sedang mendaki.

Kita juga melihat beberapa animasi paralax yang halus (awan, contohnya), beberapa ilustrasi yang terpengaruh ketika mereka ditampilkan, dan beberapa animasi tak terbatas yang tanpa perlu dipengaruhi oleh interaksi apapun.

Gambar yang sangat besar sering digunakan di dalam situs (lebih lanjut tentang ini di bagian selanjutnya), baik sebagai gambar background atau gambar konten secara inline.

Keputusan: Kenapa Praktik Terbaik Terkadang Relatif

Apple melakukan keputusan yang menarik dengan halaman pemasaran ini. Mungkin keputusan yang paling dipertanyakan disini adalah ukuran dari aset di halaman ini. Di bawah ini kalian bisa melihat tangkapan layar dari inspektor Chrome. Pada kecepatan internet yang cepat, situs ini perlu lebih dari 2s hanya untuk memuat asset. Total ukuran file yang harus di download melebihi 12.5Mb. Apple, tentu saja telah, mengoptimasi beberapa darinya (yang kita juga akan bicarakan), tapi tetap perlu dipertanyakan - bagaimana mana bisa kita memebenarkan PNG dengan ukuran 4MB yang secara teknis hanya untuk “tambahan” animasi awan?

Jawabannya, hampir sepertinya, target dari Apple untuk halaman ini tidak akan pernah mengalami masalah lag untuk mendownload aset ini, dan jika mereka mengalaminya, mereka mungkin tidak peduli. Sasaran pengunjung hampir pasti menggunakan Mac atau perangkat modern lainnya, dan mereka biasanya menggunakan internet yang cepat. Maka dari itu Apple memutuskan untuk mendukung pengalaman yang luar biasa dan pengalaman yang kurang untuk mereka yang tidak berada dalam sasaran pasar mereka.

Ini juga perlu di perhatikan bahwa halaman ini adalah kampanye pemasaran yang ada di luar dari alur penjualan Apple, yang berarti tidak ada yang melarang mereka untuk membeli iPad dari koneksi Dell dengan monitor SD CRT, jika mereka lebih memilih itu.

Keputusan yang Apple buat lainnya yang menarik (baik disini dan di beberapa projek web) adalah penggunaan gambar untuk teks judul headline.

Banyak orang tahu Apple telah, selama beberapa tahun, membanggakan nama mereka sendiri karena konsistensi, dan tipografi yang jelas; Steve Jobs bahkan pernah mengambil kelas kaligrafi di universitas Reed, yang ia bilang menginspirasinya membawa kontrol font yang di artikulasi ke dalam sistem operasi Mac. Dengan prioritas ini, Apple secara regular memilih render gambar dari sebuah teks daripada menggunakan font untuk kebanyakn headlinenya, mungkin agar merela bisa mengendalikan apa yang dilihat semua orang. Walau ada harga untuk keputusan ini, Apple menukar harga mahal tersebut dengan konsistensi kualitas dan kontrol penuh atas produk akhir.

Menariknya, mereka juga sampai melakukannya dengan angka indikator pada bagan oksigen.

Lihatlah sendiri, disini sprite SVGnya

Peningkatan Progresif

Apple menggunakan beberapa teknik peningkatan progresif sederhana di situs ini; sebut saja, desain tetap sama di semua browser, walau interaksinya dapat bervariasi berdasarkan kemampuan dari browser. Apple menggunakan css transform; dan kebanyakan pengingkatan progresif berputar di aspek tersebut. Elemen lainnya, seperti slider input di bagian kedua, ditampilkan hanya pada browser yang mendukung. Apple menggunakan cara hack seperti berikut ini, yang menyembunyikan elemen di IE 7-9, tapi menampilkannya di browser lain. Ini berguna untuk merender elemen statis untuk IE, seperti grafik puncak ketinggian.

.chart .oxygen-slider {
    position:absolute;
    top:246px;
    left:45px;
    display:none\9;
}
.ie-graph {
    display:none;
    display:block\9;
    position:relative;
    top:0;
}

Di baris display:none\9; dan display:block\9; baris tersebut hanya bisa digunakan di IE 7-9; trik kecil ini mencegah penggunaan stylesheet spesifik untuk IE.

Slider dan animasi pada bagan ini tidak tampil di IE.

Apple juga menggunakan JavaScript untuk melakukan hal-hal kecil seperti mengganti gambar dengan versi high-res jika diperlukan. Walau Chromium telah secara official mengimplementasikan gambar responsif, ini masih jauh dari bisa diadopsikan secara penuh, jadi dengan melakukannya dengan JavaScript saat ini adalah salah satu opsi yang tersedia.

File yang Besar: Bagaimana Mereka Mengatasi Ini.

Bagaimana Anda memuat file yang besar dan mengatasinya? Mari kita lihat beberapa pelajaran dari situs ini.

1. Optimasi Kapanpun Memungkinkan

Sangat penting untuk mengoptimasi, kapanpun memungkinkan. Pada kasus ini, Apple telah mengoptimasi beberapa gambar. Contohnya, gambar header 1024 x 1766 berukuran 341kb, dan beberapa kumpulan sprite berukuran 49.9 KB. Walaupun tidak ada byte yang seharusnya dibuang, ukuran ini relatif bisa di unduh dengan cepat pada beberapa kecepetan koneksi yang modern, termasuk juga kebanyakan kecepatan carrier mobile.

2. Jangan Menghalangi Halaman

Gambar dan script bisa secara signifikan memperlambat kecepatan render sebuah halaman. Kapanpun memungkinkan, gunakan sesuatu seperti lazy-loading (loading dengan JavaScript setelah halaman telah di muat) untuk memuat gambar berukuran besar, atau sertakan mereka di CSS sebagai background image jika mereka tidak termasuk dalam alur konten semantik. Apple menggunakan teknik JavaScript post-loading dengan semua gambar hi-res, seperti yang telah kita diskusikan sebelumnya dan juga menggunakan CSS untuk mengatur gambar background PNG untuk awan besar.

3. Penempatan adalah Kunci

Ingin halaman Anda terasa cepat? fokus dengan membuat 2000px atas pertama secepat mungkin. Apapun yang ada di bawah 2000px itu, jika Anda memuat 2 window-tinggi berisi konten, sangat mungkin konten yang berada lebih dari 2000px telah selesai di muat ketika pengguna menscroll ke bagian itu. Apple telah membuat ini sebagai prioritas dengan mendorong PNG berukuran besar berada di 4400px dari atas halaman, dan telah meletakan gambar yang lebih cepat di muat di bagian atas.

Bagaimana Mereka Melakukannya: Beberapa yang spesifik

Elemen Slider

Elemen slider menawarkan pengguna interaksi pertama pada halaman (selain scrolling). Apple menggunakan input range, dan beberapa CSS magic, untuk melakukan ini. Seperti yang sebelumnya disebutkan, angka di kanan dari bagan dilakukan dengan gambar, tapi kita akan menggunakan tipografi secara regular untuk tetap pada poin ini. (Jika Anda tertarik mempelajari teknik ini, mulai dengan mempelajari mengenai CSS sprites.)

Anda bisa melihat slider ini bekerja pada CodePen

Ada beberapa hal yang perlu di catat di contoh ini. Pertama, ada banyak CSS yang perlu kita gunakan untuk membuat slider terlihat bagus. Kebanyakan CSS lainnya lebih digunakan pada trik positioning dan after/before.

Aspek lain yang penting dari demo ini adalah elemen indikator. Mari kita lihat JavaScriptnya untuk ini.

var slider = $(".bgslider");
var max = slider.attr("max");
var min = slider.attr("min");
var colBg = $(".fg");
var indic = $(".indicator");
slider.on("change", function(){
  var val = slider.val() / max * 100;
  colBg.css("height", val + "%");
  indic.css("top", val*.7 + "%")[0].innerHTML = Math.round(val);
});

Kita bisa langsung melihat bahwa slider adalah dimana semua interaksi berlangsung. Tapi melihat pada indikator, kita melihat baris berikut:

1	indic.css("top", val*.7 + "%")[0].innerHTML = Math.round(val);

Apa yang baris ini lakukan? Pertama, ini mengatur nilai top dari indikator menjadi nilai persen dari slider, di kalikan 7 - ini memberikan indikator yang tidak akan berada di bawah dari elemen. Pada contoh dari Apple, indikator mengikuti gambar; pada contoh ini, indikator kita bergerak dalam kecepatan berbeda dari gambar kita. Ini dapat memberikan kontrol yang lebih terhadap animasi itu sendiri.

Selanjutnya, kita lihat animasi JavaScript.

$("input").animate({"value" : 20000 },
     {
     step: function () {
       slider.val(this.value);
       slider.trigger("change");
     },
    complete: function() {
      slider.val(max).trigger("change");
    },
    duration: 3000
});

Karena fungsi animate jQuery mendukung untuk menganimasikan properti CSS secara default, kita menulis fungsi step dan complete kita sendiri. Ini mengizinkan kita untuk memanfaatkan fungsi queue dan easing bawaan dari jQuery dan mencegah kita menulis fungsi setInterval atau setTimeout rekursif yang dikustomisasi.

Kita secara sengaja tidak melakukannya seperti cara Apple menghasilkan efek ini, jadi kita bisa menampilkan bagaimana Anda mungkin mengatasi masalah yang sama dengan solusi yang berbeda.

Animasi Pack Gear

Selanjutnya, mari kita lihat animasi pack gear.

Kita dapat melihat bahwa beberapa item gear yang berbeda, seakan, tertata rapi ketika Anda mengscroll browser. Efek ini di hasilkan menggunakan event scroll dari JavaScript, CSS transform dan CSS sprite. Apple telah menempatkan 50 item berbeda menggunakan :nth-child dan sprites, yang terlihat seperti ini:

1	.pack-item:nth-child(49) {
2	top:52.5px;
3	left:199px;
4	width:82px;
5	height:69.5px;
6	background-position:-199px -52.5px;
7	}

Bagian menarik dari teknik ini, adalah animasi scroll JavaScript. JavaScript original telah di minifikasi, tapi pengaturan dasar melakukan perulangan dari semua kumpulan item dan menyimpan posisi berdasar dari posisi tengan kumpulan item dan memindahkannya jauh ke arah tersebut. Kita tidak akan membahas semua perhitungan matematika di artikel ini; tapi, kita akan fokus cara untuk mengekplorasi subjek ini.

http://codepen.io/jcutrell/full/krIAp

CodePen ini menampilkan pendekatan kasar dari teknik yang digunakan oleh Apple. Mengubah beberapa bagian berbeda dari JavaScript ini akan memberi Anda hasil yang berbeda, dan akan membantu Anda mengeksplorasi teknik ini dengan lebih teliti.

Ini sebuah tantangan untuk Anda: fade blok item ini, seperti pada teknik Apple.

Clouds

Animasi awan - awan menggunakan teknik scroll parallax sederhana, dan juga animasi infinite CSS. Kita tidak akan membahas teknik parallax (Anda dapat melihat banyak teknik parallax dibahas di Tuts+), tapi mari kita lihat animasi infinite yang awan-awan tersebut gunakan.

Langsung dari CSS Apple:

.clouds {
    position: absolute;
    left: 0;
    background: 0 0 repeat-x;
    background-size: 100% 100%;
}
.basecamp-clouds,
.ascent-clouds {
    z-index: 2;
    left: -788px;
}
.basecamp-clouds {
    top: -500px;
    width: 2600px;
    height: 2413px;
    background-image: url(http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_basecamp_01.png);
}
/* max visible screen * 2 = 5200,
not to be confused with @2x asset. */
.ascent-clouds-1 .tile { top:50px; width:5200px; height:2000px; background-image:url(http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_01.png); }
.ascent-clouds-2 { top:600px; width:2600px; height:1846px; bottom:0; background-image:url(http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_02.png); }

@keyframes cloudAnim {
    from { transform: translateX() translateZ() }
    to { transform: translateX(-50%) translateZ() }
}
.ascent-clouds-1.visible .tile {
    -webkit-animation: cloudAnim 80s linear infinite;
    -moz-animation: cloudAnim 80s linear infinite;
    animation: cloudAnim 80s linear infinite;
}

Kita dapat langsung melihat bahwa animasi awan sangat jelas menggunakan transform: translateX. Apa yang membuat teknik ini sangat powerful, adalah panjang dan kecerahan dari PNG yang digunakan. PNG awan yang besar ini berulang secara terus menerus untuk 80 detik, yang cukup lama untuk pattern pengulangan PNG untuk di lupakan. Walaupun ini tidak sulit di hasilkan, ini adalah penggunaan animasi CSS yang efektif.

Kesimpulan

Apple mungkin berada pada daerah kontroversial terhadap para praktisi pengembangan web secara “praktik terbaik”, tapi semua orang pada profesi desain web harus membuat keputusan. Anda harus selalu memikirkan nilai “pertukaran”; apakah Anda perlu atau tidak mengimplentasikan fitur tidak ditentukan secara murni oleh praktik terbaik, ataupun dari batasan teknologi, tapi harus berdasarkan pada kebutuhan dan kemauan dari mereka yang akan melihat hal yang Anda buat. Jangan biarkan peraturan menghalangi Anda membuat sesuatu yang keren, tapi pastikan mempertimbangkan nilai tukarnnya.