Sunday, 2 August 2015

Jenis Layouts

Ketika datang structural layout dari halaman. ada beberapa jenis layouts yang dapat Anda pilih. Ada tiga tipe layout yang populer yaitu fixed width layout, fluid layout, dan elastic layout, masing-masing memiliki kelebihan dan kelemahan tersendiri.

Ketika memutuskan yang mana tipe layout yang Anda ingin gunakan, ini penting untuk mempertimbangkan pengalaman para pengguna. Untuk sebuah situs responsif, layout Anda perlu memilih untuk bekerja dengan baik di sejumlah besar perangkat. Dengan banyaknya digunakan , ini penting untuk memilih sebuah tipe layout yang memungkinkan Anda untuk menyediakan pengalaman terbaik untuk sebagian besar jumlah pengguna.  Anda juga perlu untuk mengambil pertimbangan kemungkinan kesempatan situs Anda dapat di akses pada apapun mulai dari yang terkecil dari smartphone ke televisi 85-inch di ruang tamu.

Mari lihat pada style layout yang berbeda, dan pertimbankan kelebihan dan kelemahan dari masing-masing layout, dengan tujuan untuk belajar bagaimana untuk memilih sedikti terbaik dari masing-masing dalam rangka membangun pengalaman terbaik dari para pengguna situs web.

Fixed Width Layouts
Seperti namanya,  fixed width layouts dibangun terutama dengan sebuah wrapper yang mempunyai sebuah lebar tetap. Ini kemudian diposisikan di layar, biasanya yang terpusat di viewport browser. Terlepas dari ukuran layar yang digunakan untuk mengakses situs fixed width layout akan mempertahankan lebar tetap.

Secara Historis, ketika para pengembang membangun situs web, mereka membangun dari sebuah desain, yang memiliki lebar tetap. Biasanya, para desainer akan mendesain situs menjadi 960px lebar, karena ini adalah lebar ideal  untuk menggunakan grid layouts karena jumlah ini dibagi 3, 4, 5, 6, 8, 10, 12, dan 15. Ketika para pengembang mulai membangun desain ini, mereka akan membangun situs pada 960px  lebar, berjuang untuk piksel yang sempurna dengan membangun kemungkinan. Ide di sini adalah bahwa mereka akan membuaat desain terlihat fantastik di browser seperti apa yang telah ditampilkan ke klien sebagai desain flat. Sebuah contoh khas  three-column fixed layout, dengan dua sidebar, dan area konten utama, ditampilkan seperti berikut :

Figure 1-1 ,Contoh 960px lebar, three-column fixed layout

Jika Anda melihat pada bagimana typical fixed width layout  terdiri, Anda biasanya akan memiliki wrapper dengan lebar tetap 960px, dan dalam hal ini Anda kemudian akan mempunyai konten situs web Anda, biasanya memiliki lebar yang didefinisikan dalam piksel. Dalam contoh di atas ada area konten utama dengan lebar 576px, dengan 192px  dua kolom pada kedua sisi.

Membangun dengan lebar tetap masih sangat popular, dan ketika Anda faktor kemampuan untuk membuat konten termasuk gambar yang desain sesuai sempurna, itu mudah untuk dipahami mengapa. Contoh situs web dengan lebar tetap saat ini dari Samsung dipersembahkan dalam gambar di bawah ini :

Situs Web Samsung adalah contoh yang bagus dari fixed layout
Situs Web Samsung dibangun menjadi 960px lebar, memungkinkan situs untuk ditargetkan ke bermacam viewport yang pupuler. Meskipun tidak responsif, situs ini masih dapat digunakan untuk perangkat mobile; full screen loading awal dengan situs terlihat lengkap, kemudian untuk berinteraksi dengan situs, pengguna dapat mengambil keuntungan browser built-in interaksi pengguna mencubit, menarik, dan dobule-tap untuk memperbesar dan nafigasi konten. Meskipun ini dapat digunakan, itu tidak menyediakan pengalaman pengguna  yang fantastik yang telah kita harapkan pada perangkat mobile kita.

Jika Anda melihat pada situs Samsung di Mobile Safari pada iPhone , Anda akan melihat gambar ditampilkan berikut :

Samsung desktop site (kiri) vs. Samsung mobile site (kanan)

Samsung menyediakan situs mobile tertentu, seperti yang ditampilkan pada gambar diatas , namun itu tidak membagi konten yang sama seperti situs desktop. Ini berarti bahwa para pengguna masih dapat menggunakan situs desktop pada perangkat mobile mereka untuk mengakses konten yang tersedia.

Salah satu masalah utama dari desain dengan lebar tetap adalah bahwa Anda membuat penilaian tentang lebar situs Anda harus di desain dan dibangun. Untuk membatasi membuat berbagai macam keputusan maka ada sejumlah besar untuk lebar browser yang didukung. Hasil dari ini adalah bahwa pada sebuah jendela browser yang kecil dari pada lebar tetap yang dipilih Anda mendapatkan horizontal scrolling, dan pada jendela browser yang besar Anda memiliki ruang berlebih ke sisi dari situs Anda, yang dapat dimanfaatkan lebih baik.

Ketika Apple meluncurkan iPhone pada 2007, mayoritas dari situs web adalah lebar tetap sehingga para pengembang mencoba  untuk mengkompensasi untuk hal ini untuk membuat situs dengan awal diperbesar (seperti samsung), berarti bahwa para pengguna akan mungkin untuk melihat lebar full dari situs meskipun itu terlalu besar untuk perangkat nya. Meskipun ini menawarkan pengalaman lebih baik daripada hanya melihat sudut dari situs, itu masih dapat membuat frustasi untuk navigasi sebuah situs besar.

Menggunakan desain lebar tetap tidak perlu keputusan yang buruk, dan ini penting untuk mempertimbangkan apa yang situs web Anda akan digunakan untuk dan target pengunjungnya. Situs lebar tetap masuk akal untuk situs dimana Anda ingin untuk mempertahankan layout yang sama dan proporsi semua viewport.

Elastic Layouts
Elastic layouts tidak mendefinisikan lebar dalam piksel tetapi sebaliknya mengukurnya ke dalam ems. Unit em adalah sebuah multiple dari font size, sehingga jika Anda mengeset ukuran font Anda ke 16px, maka lebar 2em  sama dengan 32px. Ini berarti bahwa jika pengguna mengubah ukuran font saat melihat situs, layout dari situs juga akan secara proporsional berubah untuk menaikkan atau menurunkan ukuran font.

Elastic layout memberikan para pengembang kontrol lebih karena karena proporsi desain tetap utuh ketika para pengguna mengubah ukuran teks dalam browser. Apa ini berarti bahwa jika pengguna perlu untuk meningkatka ukuran font yang digunakan di situs Anda, pengalaman mereka pada situs Anda tidak berbeda dari yang pengguna lihat situs para ukuran font aslinya. Elemen dari mengubah ukuran situs dari secara proporsional untuk ukuran font. Ini berarti bahwa elastic layouts bekerja dengan sangat baik untuk memungkinkan para pengembang untuk memastikan bahwa situs mereka dapat diakses oleh semua pengguna.

Jika Anda mengambil desain situs web dengan dengan lebar tetap asli, menggunakan based font size 16px, Anda dapat dengan mudah mengkonversi layout  untuk menggunakan em  dari pada piksel dengan  membagi masing-masing lebar kolom piksel dengan ukuran font, dalam hal ini layout yang sama ditampilkan dalam gambar di bawah ini, untuk contoh fixed layout  yang di konversi menjadi elastic layout.

Contoh lebar 960px, elastic layout tiga kolom dengan konversi em

Contoh sekarang memiliki lebar kolom yang didefinisikan dalam em daripada piksel. perhitungan dari piksel ke em  sangat mudah dilakukan :

Width in pixels / base font size = Width in em

Menggunakan rumus sederhana ini, Anda dapat mudah menghitung lebar dari element-elemen Anda dalam em. Dalam gambar di atas Anda dapat melihat bagaimana menghitung lebar elemen dengna mengganti lebar piksel ke dalam perhitungan.

576 / 16 = 36em
192 / 16 = 12em


Ini penting untuk menyadari bahwa em dapat memiliki nilai desimal, jadi jika perhitungan Anda tidak menghasilkan angka bulat , itu tidak masalah.

Sebuah contoh dari situs yang menggunakan elastic layouts adalah Northern Ireland Community Archives microsite  tentang  Plantation of Ulster, seperti ditampilkan berikut : http://niarchive.org/trails/plantation-rewriting-the-story/

situs Plantation adalah contoh yang bagus dari elastic layout

Situs web menggunakan em untuk mendefinisikan lebar dari outer wrapper  dan kolom dari layout. Jika base font size  di tingkatkan, seluruh situs kemudian mengubah ukuran untuk mengakomodasi teks yang besar , seperti ditampilkan berikut

Situs Plantation setelah base font size dinaikkan


Salah satu masalah awal dengan elastic layouts adalah bahwa karena lebar dari situs adalah berdasarkan pada base font size, jika pengguna meningkatkan ukuran font melampaui titik tertentu, situs akan menjadi sangat besar dalam viewport, berpotensi menyebabkan browser mempunyai scrollbar horisontal.

Masalah lain dengan elastic layouts adalah bahwa mereka pada dasarnya masih merupakan bentuk fixed width layout, yang saya maksud bahwa elasticity berdasarkan pada  base font size, sehingga kecuali ukuran font diubah oleh pengguna, situs akan lebar tetap sesuai yang diharapkan para pengembang.  Apa ini berarti bahwa saat lastic layouts menawarkan pendekatan lebih accessible daripada pixel-based fixed layout. Layout masih terlihat untuk mengambil ke posisi pada masing-masing breakpoint karena CSS dalam setiap media queries diterapkan , dengan demikian itu tidak fluidity antara mereka sebagai situs yang menyesuaikan ke ukuran yang berbeda.

Salah satu alasan bahwa elastic layouts tidak lebih populer adalah karena kesulitan yang ditimbulkan oleh karena harus menghitung lebar dalam em. Itu tidak segera jelas apa lebar dari 36em  akan menjadi dalam piksel sampai Anda melihat dalam  base font size. Dengan base font size 16px, lebar akan menjadi 576px; Namun dengan hanya mengubah base font size ke 14px, lebar akan berkurang menjadi 504px. Harus melakukan ini (meskipun sederhana ) perhitungan menambah langkah ekstra untuk pengembang.

Masalah lain yang mungkin Anda temui adalah bahwa em dihitung relatif terhadap parent; oleh karena itu jika parent mendefinisikan ukuran font yang berbeda dari pada body, Anda mungkin menemukan lebar dari elemen adalah bukan apa yang Anda harapkan. Hal ini karena Anda memiliki kemungkinan dihitung berdasar lebar pada ukuran font dari body, untuk memperbaiki ini Anda cukup redo dasar perhitungan pada ukuran font parent elemen. Untuk menghindari masalah ini sepenuhnya, salah satu pilihan adalah menggunakan rem daripada em untuk ukuran font, yang berarti semua font size akan relatif terhadap base font size terlepas ukuran font elemen parent, peringatan yang menjadi rem yang tidak bekerja pada browser legalicy seperti Internet Explorer 8 dan yang terdahulu.

Fluid Layouts
Fluid layouts, juga dikenal sebagai liquid layouts atau  relative layouts, perubahan lebar tergantung pada viewport para pengguna. Tidak seperti fixed layouts, dimana lebar didefinisikan dalam piksel, Anda malah menentukan lebar sebagai persentase, dimana persentase tersebut mengacu pada porsi pada viewport. Seperti pada gambar berikut :

Sebagai contoh fluid web site, dengan browser yang saat ini terbuka pada 960px  lebar

Jika Anda mengambil contoh pada fixed width layout pada gambar paling atas pada artikel ini figure 1-1, dan mengubah dimensi ke persentase, Anda akan mempunyai dua kolom dengan lebar 20 persen dan single column dengan lebar 60 persen. Dengan viewport browser pada 960px, nilai-nilai piksel ini yang sama dengan contoh ini, seperti ditampilkan dalam gambar berikut :

Contoh fluid web site, dengan browser membuka pada 1,600px lebar

Jika Anda kemudian mengubah ukuran browser untuk mempunyai lebar viewport 1,600px, situs web hanya akan secara alami menyesuaikan lebar full dari browser, Kolom kecil sekarang akan mempunyai lebar 320px  dan kolom yang besar 960px. Keuntungan dari ini adalah bahwa konten secara alami mengisi halaman, berpotensi mengubah sekala gambar dan mengalirkan teks mengisi ke tempat yang tersedia.

Yahoo! baru-baru ini mendesain ulang situs Flickr  menggunakan pendekatan fluid layout (seperti ditampilkan gambar dibawah ini) , mengambil keuntungan dari ruang tambahan yang tersedia untuk memungkinkan meningkatkan ukuran gambar, dan tergantung pada ukuran layar, meningkatkan jumlah gambar per baris, manfaat disini adalah bahwa para pengguna situs dapat menelusuri lebih banyak gambar lebih cepat dan lebih terlibat dengan situs.

Situs web Flickr adalah contoh yang bagus dari fluid  web site

Jika Anda mengubah ukuran jendela browser , situs Flickr hanya menyesuaikan skala dengan browser, membuat lebih baik menggunakan ruang yang tersedia. Gambar baik peningkatan ukuran atau memungkinkan untuk lebih berturut-turut, memanfaatkan ruang yang dilihat para pengguna dan memaksimalkan jumlah dari materi yang mungkin mereka lihat pada saat diberikan . Anda dapat melihat pandangan yang lebih luas dari situs Flickr pada gambar di bawah ini

Situs web Flickr ketika ditampilkan dalam wider screen

Keuntungan Flickr  menggunakan fluid layout adalah jelas; image dapat mengisi semua ruang  yang tersedia, memungkinkan pengguna untuk  mengapresiasi photo tertentu, meningkatkan pengalaman para pengguna untuk juga dapat diukur dengan peningkatan keterlibatan situs yang telah diterima. Meskipun Yahoo! belum merilis angka perusahaan, pengguna Flickr  bernama Thomas Hawks2 melakukan riset sendiri. Dalam waktu 6 hari dari launching desain ulang, 80 juta photo baru telah diunggah ke situs. dibandingkan 6 hari sebelum desain ulang, ketika para pengguna telah hanya mengunggah 47 juta gambar.

Sebuah fluid layout tidak hanya bermanfaat untuk situs seperti Flickr, yang semata-mata berisi gambar, tetapi juga menguntungkan untuk situs dimana konten adalah tiled. Sebagai contoh Pinterest, yang meskipun juga cukup berat pada gambar , telah konten lainnya ditampilkan. untuk Pinterest, para pengguna akan sering skim melalui papan yang menarik perhatian mereka, mencari hal yang menarik perhatian mereka, dan dengan menggunakan fluid layout, Pinterest mungkin akan menampilkan jumlah maksimum dari konten yang pengguna mungkin untuk melihatnya pada waktunya. memungkinkannya untuk menemukan apa yang mereka ingin secara lebih tepat. Lebar fluid, antarmuka tiled dari Pinterest ditampilkan berikut :

Antarmuka tiled Pinterset keuntungan dari desain fluid untuk menampilkan konten lebih

Salah satu manfaat menggunakan  fluid layout  adalah bahwa itu dapat menjadi lebih user friendly karena dengan itu dapat menyesuaikan dengan perangkat pengguna. Tidak hanya memiliki white space terlebih, fluid layout dapat mengambil keuntungan dari ruang yang tersedia, memungkinkan konten untuk mengisi semua ruang yang tersedia, dan pada perangkat yang besar, itu memungkinkan konten lebih mempunyai spasi untuk ruang bernapas ekstra.

Meskipun fluid layouts sangat powerfull, tapi mereka mempunyai beberapa kelemahan, yang paling penting adalah bahwa mreka dapat menghasilkan masalah pada cara konten di render. Karena  fluid layout dapat dilihat pada apapun lebar browser, Anda mungkin menemukan bahwa Anda menjumpai masalah dengan bagaimana gambar Anda terlihat. Meskipun dimungkinkan untuk scala gambar Anda dengan mengubah ukuran browser, ini penting untuk menyadari bahwa beberapa gamba akan tidak scale dengan baik. Gambar yang mempunyai titik fokus akan bermasalah, karena skala mereka turun tidak hanya akan kehilangan dampak, tetapi juga membuat fokus terlalu kecil , Demikian pula dengan gambar ow-resolution, dengan skala yang besar , dapat menurunkan kualitas yang signifikan.

Selain masalah dengna render konten, situs lebar fluid mungkin menemukan masalah dengan beberapa fungsi interaktif. Hal ini umum untuk situs web yang menggunakan JavaScript untuk meningkatkan pengalaman para pengguna. Sebagai contoh , untuk menampilkan tinggi kolom yang sama, Masalah datang dengan ketika para pengguna mengubah ukuran browser; teks reflow dan kolom kemudian menjadi terlalu tinggi atau terlalu pendek. Oleh karena itu, JavaScript perlu untuk menghitung ulang tinggi untuk tujuan resizing.

Mengapa Menggunakan Fluid Layouts untuk Responsive Design
 Kita telah menjelajahi Fixed, fluid, dan elactic layout, Ini penting untuk mendapatkan pengertian yang bagus untuk keuntungan dan kelemahan dari setiap pendekatan . Bagaimanapun juga, benar-benar dibahas bagaimana ini semua berhubungan untuk desain responsif.

Pada Artikel sebelumnya, saya telah menjelaskan bagaimana Anda dapat menggunakan media query untuk mengadaptasi situs web Anda ke dalam viewport yang berbeda. Masalah dengan melakukan ini adalah bahwa baik fixed maupun elastic layout, mereka snap antara dua atau lebih layout berbeda yang beradaptasi untuk ukuran layar yang berbeda. Alih-alih menjadi responsif terhadap semua perangkat yang berbeda, mereka malah menyesuaikan untuk bekerja pada layar yang sama atau berbeda.

Tetapi perangkat tidak lagi sesuai dengan ukuran layar umum yang sedikit berbeda; sebaliknya para pengembang sekarang menemukan browser dengan viewport dari apapun dimensi, dilihat pada perangkat mulai dari televisi 85-inch ke layar mobile phone 3.5-inch. Para pengembang harus mempunyai mindset dari ingin situs web nya tampak hebat, terlepas tidak hanya pada sedikit ukuran layar yang dipilih, Jika para pengguna mengubah ukuran browser mereka, Anda akan ingin mengubah ukuran secara halus dan mengalir, dengan layout  yang bekerja sederhana pada apapun resolusi yang diberikan.

Ketika mempertimbangkan pilihan Anda pada layout style, Anda harus memastikan bahwa Anda familiar dengan alternatif pilihan yang tersedia, itulah sebabnya saya telah membahas keuntungan dan kelemahan pada bagian sebelumnya. Ketika membangun situs web, Anda harus merasa nyaman dengan pilihan Anda dari layout style dan mengadaptasinya ke yang sesuai dengan kebutuhan Anda . Bahwa yang dikatakan, desain responsif benar-benar meminta fluid layout untuk memberikan pengalaman para pengguna yang terbaik di seluruh jangkauan terluas perangkat dengan minimal gangguan antara ukuran viewport yang berbeda. Ini bukan berarti Anda tidak dapat mempunyai breakpoint, yang menyebabkan layout untuk snap untuk mengubahnya ke mengambil keuntungan yang terbaik dari ruang screen yang tersedia. Hal ini, pada kenyataannya, mendorong;  Anda akan ingin dapat mengambil keuntungan dari ruang yang tersedia untuk cara terbaik yang Anda dapat.

No comments:

Post a Comment