Thursday, 30 July 2015

Mobile Dulu vs. Desktop Dulu

Para pengembang akan sering kode dalam cara mereka sebagian besar nyaman dengan -manusia adalah makhluk habit/kebiasaan, setelah semua, dan meskipun apa beberapa percaya, para pengembang adalah manusia. Oleh karena itu, ketika desain web responsif datang, pendekatan yang paling umum adalah membangun situs desktop Anda pertama dan kemudian mengadaptasinya ke mobile application menggunakan media queries; Setelah semua mayoritas pengguna mereka masih datang dari pengguna desktop dan pengembangan untuk desktop adalah apa yang digunakan para pengembang untuk itu.

Jenis metodologi yang disebut graceful degradation, gagasan bahwa Anda harus membuat pengalaman yang terbaik pertama dan kemudian mulai mempertimbangkan untuk degradasi sebagai kemampuan dari penurunan browser. Untuk situs responsif, ini berarti bahwa seperti viewport menyusut, situs web akan kembali dengan skala, menghapus baik konten dan fitur.

Ada, bagaimanapun, metodologi lain yang sesuai lebih baik desain responsif, yang disebut progressive enhancement. Progressive enhancement bukan hal yang baru, ini pertama diusulkan oleh Steven Champeon pada 2003 di South dengan Southwest Interactive conference di Austin. Dalam sebuah artikel  yang diikuti ditulis untuk Webmonkey, Steven mengatakan :
Daripada mencoba untuk mencampur presentasi ke dalam markup  bahwa browser denominator umum terendah tidak dapat menangani apapun, strip it out. Pastikan hanya browser mampu bahkan memintanya di tempat pertama, lebih kita kenal tentang apa dukungan browser, lebih baik kita ketika datang ke pengaturan markup dan style kita.

Apa yang Steven katakan adalah untuk membangun situs Anda dengan browser kemamuan paling sedikit dan semakin meningkatkan situs dengan menambah fitur dan konten baru. Jika Anda ingin menerapkan metodologi ini untuk sebuah situs responsif, Anda harus melihat untuk membanugn situs mobile untuk peratama, Kemudian Anda dapat meningkatkan situs seperti kemampuan dari peningkatan perangkat. Peningkatan semacam ini disebut mobile-first responsive design.

Ketika graceful degradation  dibandingkan dengan progressive enhancement, itu terlihat pertama itu terlihat seperti koin dengan sisi yang berlawanan. Dengan graceful degradation, kita cukup mulai dengan membangun situs dengan kemungkinan terbaik dan kemudian menurunkan pengalaman. Dan dengan progressive enhancement kita mulai membangun pengalaman untuk browser dengan kemampuan rendah dan semakin meningkatkan pengalaman untuk desktop.

Pada kenyataanya, ketika kita membangun situs dengan desktop pertama, kita sering menambahkan banyak fitur untuk situs web. Ini mungkin memberikan pengalaman luar biasa kepada para pengguna untuk pengguna desktop, namun sering ada fitur yang mempunya skala tidak baik. Masalahnya kemudian menjadi bagaimana untuk mendapatkan bagian dari situs untuk bekerja pada mobile applications. Hal ini sangat banyak point bahwa Luke Wroblewski membuat di blognya pada tahun 2009:
Perangkat mobile meminta tim pengembang software untuk fokus hanya pada data dan tindakan yang paling penting. Ada cukup tidak ruangan pada layar asing 320 oleh 480  piksel , elemen yang tidak perlu. Anda mempunyai prioritas, Sehingga ketika sebuah tim mendesain mobile pertama, dah hasil akhirnya adalah pengalaman yang di fokuskan pada tugas utama para pengguna ingin untuk selesaikan tanpa melakukan yang tidak perlu dan antarmuka yang umum yang terdapat pada situs web desktop-accessed saat ini. Itu pengalaman pengguna yang bagus dan bagus untuk bisnis.
Apa yang dia katakan bahwa dengan fokus pada mobile pertama, kita dapat membangung pengalaman lebih baik untuk para pengguna kita. Kita tidak mengacaukan antarmuka kita dengan fitur yang tidak perlu seperti kita yang harus memprioritaskan fitur yang penting untuk para pengguna. Penggunaan Mobile juga memungkinkan kita untuk menambahkan fitur tambahan , melalui cara yang mereka memperluas kemampuan browser, sebagai contoh, informasi geologi yang tepat dan touch events. Ini berarti bahwa sementara mobile browser mungkin terbatas dalam beberapa cara, mereka menambahkan fitur ekstra dari yang kita dapat dengan mudah mengambil keuntungan.

Ketika kita senang dengan membangun mobile kita, kita kemudian dapat memproses untuk memperluas viewport dan semakin meningkatkan situs, menggunakan teknik seperti deteksi fitur untuk memungkinkan kita untuk fitur target pada browser yang mendukungnya.

Melihat pada Membangun situs Mobile pertama
Sekarang Anda tahu tentang manfaat membangun situs responsif pertama dan metodologi di belakang ini, mari kita melihat membangun mobile-first .

Untuk mulai membangun situs mobile-first, Anda perlu untuk meletakkan bersama beberapa basic HTML. Untuk contoh ini Anda akan mengetik beberapa HTML yang dapat digunakan untuk sebuah posting blog, terdiri dari sebuah header, artikel dan daftar posting yang berhubungan, seperti ditampilkan berikut ini.

<!DOCTYPE html>
<html>
<head>
<title>Mobile First</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="mobile-first.css">
</head>
<body>
<header>
<h1>Blog</h1>
</header>
<div class="content" role="main">
<article>
<h2>Article title</h2>
<p>02/12/2013</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras
justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada
magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Duis
mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio
sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
</article>
<aside>
<h2>Related Articles</h2>
<nav>
<ul>
<li><a href="#">Article item 1</a></li>
<li><a href="#">Article item 2</a></li>
<li><a href="#">Article item 3</a></li>
</ul>
</nav>
</aside>
</div>
</body>
</html>



Jika Anda memuat ini ke browser Anda, Anda akan mendapatkan halaman single-column sederhana tanpa apapun style, seperti ditampilkan berikut :

Contoh situs mobile first kita  sebelum kita mengaplikasikan style

Karena Anda membangun mobile first, Anda akan berkonsentrasi pada membangun main CSS untuk style halaman pertama, Anda akan mengaplikasikan style berikut :
  1. body : margin dan padding set ke 0px, ukuran font set ke 14px., dan line height set ke 18px.
  2. header : tambahkan background color dan padding
  3. h1 : set color ke putih
  4. aside dan article : tambahkan margin 20px untuk kiri dan kanan
  5. article : tambahkan border untuk memisahkan article dengan related article 
 Setelah menempatkan ini bersama-sama, maka akan terlihat sepanjang line of the code saya letakkan bersama

body{
margin: 0;
padding: 0;
font-size: 14px;
line-height: 18px;
}

header{
background: #304480;
padding: 10px 20px;
}
h1{
color: #fff;
}
article, aside{
margin: 0 20px;
}
article{
border-bottom: 1px solid #304480;
}



situs, seperti ini terlihat pada browser dengan ekstra small viewport


Jika Anda merenggangkan browser dengan lebar layar Anda, namun situs tidak terlihat begitu bagus, seperti berikut :

situs mobile first kita, ditampilkan dalam viewport besar

Situs single column  bekerja baik pada mobile, namun pada viewport yang besar, itu masuk akal untuk menampilkan daftar artikel yang berhubungan pda sidebar dan untuk membatasi lebar situs.

Ketika Anda meningkatkan viewport situs dari extra small device view, Anda mencapai lebar dari small device, sebagai contoh ini adalah tablet . Untuk contoh ini, Anda akan mengambil lebar minimum dari sebuah iPad, yang 768px , sebagai dasar untuk small device view dan menggunakannya untuk media query. Media query karena itu akan menargetkan min-width dari 768px, seperti ditampilkan berikut

@media screen and (min-width: 768px){
header, .content{
width: 728px;
margin: 0 auto;
padding: 10px 20px;
}
article, aside{
float: left;
margin: 0px;
}
article{
width: 80%;
border-bottom: 0px;
}
aside{
width: 20%;
}
}


Seperti  yang telah Anda lakukan semua pergeseran sekitar untuk membuat situs bekerja pada tablet, Anda perlu cukup untuk meningkatkan lebar dari halaman untuk mengambil keuntungan dari viewport yang besar, kode di bawah ini  media query ktia  menargetkan viewport besar

@media screen and (min-width: 1024px){
header, .content{
width: 940px;
}
}



Sekarang jika Anda melihat ini pada browser, Anda akan melihat bahwa situs sekarang styled ke dalam tampilan two-column yang bagus, dengan related articles  ditampilkan di sidebar, seperti ditampilkan berikut :

situs ditampilkan dalam larger device viewport

Dalam contoh ini kita telah membangun blog responsif sederhana, membangun dari mobile first perspective. Kita membangun core styles dari awal, dan kemudian sebagai viewport browser kita meningkatkan dalam ukuran kita memperkenalkan media queries  baru untuk memungkinkan situs kita respon terhadap lebar dari viewport dan mengambil keuntungan dari peningkatan ruang.

Caveats of Mobile First
Ada keberatan dari membangun sebuah situs web menggunakan pendekatan mobile-first, yang terbesar adalah tingkat dukungan browser untuk media queries. Secara keseluruhan dukungan browser untuk media queries adalah bagus. Namun, versi awal dari Internet Explorer untuk mendukung media queries adalah Internet Explorer 9. Ini berarti dengan pendekatan mobile-first ,  Internet Explorer 8 dan sebelumnya, akan menerima situs mobile Anda. Anda mungkin senang berhenti disitu, atau sebaliknya Anda memilih untuk menambahkan sebuah polyfill  yang disebut Respond.js, yang akan memungkinkan untuk dukungan media query yang terbatas, untuk Internet Explorer 8.

Itu dapat juga menjadi tantangan untuk mendapatkan kenyamanan dengan membangun sebuah situs untuk kendala mobile; Jika Anda seperti saya dan telah menghabiskan pengalaman Anda menggunakan mouse events seperti hover dan clicks, Anda akan melihat ketidakhadiran pada perangkat smaller,  touch-screen  dimana bukan Anda memiliki finger taps dan swipes.

Membangun dari perspektif mobile-first, kita harus memikirkan input types para pengguna kita menggunakan dari awal, yang bertujuan untuk mendukung spektrum yang luas dari cara pengguna kita mungkin berinteraksi dengan situs kita. Salah satu masalah mungkin kita menemukan dengan dukungan multiple input types yang tepat adalah dengan beberapa tindakan , beberapa browser telah mencoba untuk mengantisipasi bagaimana kita ingin situs web kita bekerja.

Sebuah contoh akan menjadi interaksi mouse-hover, pada beberapa perangkat  touch-screen, browser telah menerapkan hover event sehingga dapat diubah, dengan hover state yang diaktifkan ketika Anda pertama kali menekan pada element, dan menonaktifkan pada tekan kedua. Tujuan dari ini adalah untuk memeungkinkan pengguna untuk mengakses konten yang selain di akses hanya  pada hover (dan Anda tidak  dapat hover  pada perangkta mobile ). Hal ini sendiri menambah tantangan lebih seperti area yang mempunyai hover state boleh juga menjadi sebuah link. Berarti sudah memiliki siap pada tindakan ketika pengguna tap di atasnya. Sayangnya media queries tidak dapat menentukan apakah perangkat adalah perangkat sentuh, dan teknik deteksi fitur juga tidak menentukan secara akurat apakah pengguna menggunakan perangkat sentuh. Oleh karena itu  , kita perlu berfikir cara baru yang dapat  menangani interaksi ini ketika membangun sebuah situs web.

No comments:

Post a Comment