Foto memiliki banyak sekali potensi dan fungsi, terutama dalam menyampaikan sebuah pesan. Hal ini sangat terlihat dalam dunia print. Foto dapat ditemukan dalam majalah, brosur sampai media terbesar yaitu billboard. Sering kali, foto ditampilkan secara “fullscreen” dimana foto akan menutupi seluruh canvas yang tersedia. Contohnya adalah halaman majalah yang hanya menampilkan sebuah foto model saja. Bahkan seringkali foto tersebut menutupi dua halaman majalah ditemani dengan text yang minimal. Kita ingin menerapkan hal yang serupa kepada website.Dalam media website, menggunakan foto sudah dapat dilakukan dari dulu, tetapi merentangkan fungsi foto secara fullscreen dalam web design merupakan sebuah praktek baru yang menguntungkan. Setelah web design telah mengalami transisi dari website yang dipagari oleh sebuah wrapper dengan fixed width menjadi website yang mengoptimalkan seluruh ruang yang tersedia pada layar, banyak sekali hal baru yang dapat kita lakukan termasuk menggunakan fullscreen image sebagai background.
Kutikai menggunakan background fullscreen di halaman penyambut.
Apa Yang Diinginkan Dari Fullscreen Background
- Memenuhi layar tanpa adanya whitespace
- Gambar scale mengikuti ukuran layar
- Mempertahankan proporsi gambar (aspect ratio)
- Gambar berada di tengah-tengah layar
- Cross-browser compatible
- Tidak mengakibatkan scrollbar
Sekarang Anda Bisa Melakukannya Juga!
html { background: url(images/bg.png) no-repeat center center fixed; background-size:cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size:cover; }
Menggunakan Gambar Fullscreen Dalam Element HTML Lain
.div-class { background: url(images/bg.png) no-repeat center center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
“Bug” Dari Fullscreen Foto Yang Perlu Diketahui Solusinya?
Thematic menetapkan feel dari website dengan menampilkan gambar fullscreen pemandangan.
Mengimplementasikan Fullscreen Image Dalam Design Website Product
Menggunakan background fullscreen untuk menampilkan product yang dilakukan Plastc.
David Hellman, seorang web designer, menggunakan foto portretnya secara fullscreen.
Interior, Makanan dan Event
Sebuah bar bernama The Ruby Tap membagi sebuah experience melalui foto fullscreen.
Dimana Saya Mendapatkan Foto-foto Ini?
Royalty Free Stock Foto
- Unsplash - Unsplash merupakan favorite saya! Unsplash menampilkan koleksi foto indah berkualitas oleh berbagai photographer secara cuma-cuma. Unsplash merilis foto baru setiap 10 hari, dengan begitu anda akan selalu memiliki foto yang cukup untuk digunakan di website anda.
- Gratisography - Gratisography juga memberikan foto indah berkualitas secara cuma-cuma. Perbedaan dari Unsplash adalah, bila Unsplash merupakan koleksi dari berbagai photographer, suma foto yang anda temukan di Gratisography merupakan foto hasil jepretan Ryan McGuire dari Bells Design.
- AllTheFreeStock - Bila anda ingin resource yang lebih banyak lagi, kunjungi AllTheFreeStock. AllTheFreeStock tidak memberikan foto royalty free seperti Unsplash atau Gratisography, tetapi AllTheFreeStock memberikan sebuah list untuk semua website yang memberikan tidak hanya royalty free foto tetapi juga video dan icons!
Gunakan Smartphone Anda
Saya rasa saya sudah meyakinkan anda untuk menggunakan gambar fullscreen sebagai background website anda. Mungkin bagi anda yang sudah familiar dengan dasar CSS, anda sudah mengerti cara menggunakan gambar sebagai background anda menggunakan property background-image. Hal ini benar dan sama sekali tidak salah tetapi ada beberapa masalah dari property ini.
Masalah pertama adalah, background anda tidak akan scale mengikuti layar device anda. Hal ini merupakan sesuatu yang penting terutama dimana sekarang, orang mengakses website menggunakan berbagai macam device yang memiliki berbagai macam ukuran layar, anda ingin background anda untuk tetap tampil indah di layar apapun.
Kita juga ingin background untuk benar-benar menutupi layar tanpa adanya whitespace. Menggunakan property
background-image mungkin akan menutupi layar sepenuhnya tetapi itu hanya bila gambar yang digunakan lebih besar dari ukuran layar. Dan bila website dibuka menggunakan sebuah device yang memiliki layar yang lebih besar dari gambar, maka akan terlihat whitespace yang tidak dapat ditutupi oleh gambar. Tentu, kita tidak bisa menyiapkan gambar yang spesifik untuk setiap ukuran layar. Terlebih lagi, kita tidak ingin menggunakan ukuran gambar yang terlalu besar karena itu akan menambahkan ukuran file menjadi lebih berat dan hasilnya, website akan lebih lama untuk diload.
Oleh karena itu kita menginginkan sebuah gambar background fullscreen yang:
Menggunakan foto fullscreen sebagai background website anda merupakan sesuatu yang mudah dan anda dapat melakukannya juga! Percaya atau tidak, anda dapat melakukan hal ini dengan beberapa baris CSS saja.
Di code CSS yang kita gunakan, kita tidak akan menggunakan property
background-image melainkan property shorthand background karena kita ingin memberikan beberapa value tambahan selain hanya mengarahkan CSS kepada background yang kita inginkan.
Mari kita bahas value bagi property
background dengan lebih seksama. Setelah mengarahkan CSS ke gambar yang kita ingin jadikan background dengan value url(), kita berikan juga value no-repeat agar kita yakin kalau gambar yang kita pilih hanya tampil sekali saja. Selain itu, kita juga berikan value center center sebagai value bagi property background-position (yang digabungkan di property shorthand background) agar gambar yang kita pilih berada tepat di tengah-tengah layar anda. Terakhir adalah value fixed agar bila website anda memiliki scroll, background tidak akan mengikuti.
Code diatas menggunakan selector yang menarget element
html. Hal ini dikarenakan oleh element html akan selalu sebesar width dan height dari layar dimana website tersebut tampil. Akan tetapi, hal ini bukanlah sesuatu yang signifikan. Saya sendiri lebih sering menarget body untuk melakukan trick ini dibanding menarget html.
Yang membuat code ini berfungsi dan membuat semua criteria yang kita inginkan diatas dapat didapatkan adalah berkat property CSS
background-size. Kita akan menggunakan CSS dengan property background-size yang dapat memberikan ukurang kepada gambar background kita. Bila digunakan dalam context lain, value yang kita berikan dapat merupakan sebuah persentase atau angka fix seperti 500px 500px dimana value pertama menentukan height gambar dan value kedua menentukan width gambar. Value yang kita gunakan adalah value cover yang mengartikan kalau ukuran height dan width gambar akan memenuhi besar dari layar dimana gambar tersebut tampil.
Kita juga harus memberikan vendor prefixes bagi browser webkit (Chrome dan Safari), gecko (Firefox) dan presto (Opera) karena property CSS backgorund-size belum sepenuhnya disupport oleh browser-browser sekarang.
Selain menggunakan foto fullscreen sebagai background, anda juga dapat membuat foto fullscreen tampil dalam berbagai element HTML yang lain. Mungkin saja anda menggunakan sebuah
div wrapper atau container dalam design website anda dan ingin gambar fullscreen tampil di dalam div tersebut. Caranya gampang, menggunakan code yang persis seperti tadi tentunya.
Hanya ada perbedaan kecil dari code di atas dan code yang kita gunakan tadi. Di code di atas ini, selector kita ganti menjadi nama class dari div yang ingin anda target. Bila element HTML anda menggunakan id, anda juga bisa menarget id menggunakan selector CSS untuk id. Bila anda menarget element
div, maka semua div akan memiliki background fullscreen yang sama. Selain div, anda juga bisa menarget element-element HTML lainnya dimana property background berfungsi. Semua ini tergantung dari design yang anda miliki.
Fullscreen foto merupakan sesuatu yang mengagumkan dan sangat mudah untuk diimplementasikan. Tetapi ada sebuah “bug” yang dihasilkan oleh metode ini. Hal ini terkait dengan ukuran layar yang dimiliki oleh device yang sangat beragam dan datang dalam berbagai macam bentuk.
Bug tersebut adalah, background fullscreen anda akan hampir selalu tampil berbeda disetiap device. Mungkin dalam laptop anda, gambar fullscreen anda terlihat pas dan sempurna. Tetapi saat anda mencoba membuka website anda dilaptop teman anda, gambar fullscreen anda terlihat lebih zoom in. Hal ini akan terlihat juga saat anda membuka website anda dalam handphone anda dan seterusnya.
Selain menggunakan metode lain selain code CSS diatas (dan tidak disarankan karena metode lain hanya akan membuat proses ini tambah rumit dan hasilnya tidak tentu lebih baik), anda harus lebih hati-hati dengan menggunakan background yang anda gunakan.
Fokuskan peran gambar background sebagai gambar yang melengkapi website anda dan menetapkan feel dari website anda saat pengunjung mengunjungi website anda. Contohnya adalah menggunakan background pemandangan gunung dengan keseluruhan warna gambar yang tenang dan teduh bila website anda mempromosikan acara camping yang fokus kepada kebersamaan.
Bila anda ingin menampilkan sebuah produk di background fullscreen anda, pastikan produk tampil di tengah-tengah layar. Hal ini akan menghindari produk anda untuk tidak terpotong dari layar bila website anda dibuka dari handphone karena handphone akan memotong width gambar. Handphone melakukan ini supaya gambar dapat tampil di layar yang lebih kecil sambil tetap menahankan proporsi gambar. Ini juga alasan mengapa kita memberikan property center center agar bila gambar terpotong, bagian yang tampil dari gambar adalah bagian tengah gambar. Bila focus gambar anda merupakan bagian kiri, kanan atau bagian lain dari gambar, anda bebas menggunakan value lain untuk property
background-position.
Selain itu, bila anda ingin menampilkan makanan, interior kamar, interior restaurant dan gambar-gambar sejenisnya, anda ingin menggunakan gambar yang keseluruhan dan feel gambar masih dapat terlihat dan dirasakan oleh pengunjung walupun sedikit terpotong. Hal ini dikarenakan oleh gambar-gambar jenis ini perlu menggunakan keseluruhan layar. Oleh karena itu, anda juga ingin menggunakan gambar berukuran lebih kecil di website anda untuk lebih menunjukan produk anda dengan lebih jelas dalam layar apapun.
Perhatikan juga proposi dari gambar anda. Kalau bisa, gambar anda tetap memiliki width yang lebih besar tetapi tidak terlalu besar dari height. Proporsi 4:3 atau 5:3 mungkin merupakan ratio yang tepat. Anda juga ingin gambar yang memiliki resolusi yang cukup tinggi. Hal ini dikarenakan oleh bila layar yang menampilkan gambar anda lebih besar dari gambar yang anda miliki, gambar tersebut akan distretch. Terkadang saat menampilkan gambar di handphone, beberapa handphone akan me-stretch gambar anda juga agar tampil secara seluruh dilayar handphone. Bila resolusi anda kurang tinggi, gambar akan terlihat blurry dan tentu bukan sesuatu yang bagus bagi website anda. Tetapi resolusi anda tidak harus terlalu besar. Ingat kalau print dan website berbeda dimana gambar walaupun distretch tidak akan langsung pecah dan sering kali tetap tampil sempurna. Oleh karena itu, pilihlah gambar yang cukup besar dalam resolusi tetapi tidak terlalu berat dalam size file agar gambar anda akan dapat tetap load secara cepat saaat pengunjung mengunjungi website anda. Gambar anda tidak perlu sebesar layar terbesar yang ada di pasar.
Terakhir adalah, anda mungkin ingin mempertimbangkan untuk menampilkan gambar di sebuah div karena div bisa mengecil secara proporsional dengan element-element lain yang anda taruh di website anda. Terlebih lagi, anda memiliki control yang jauh lebih banyak terhadap sebuah div dibandingkan dengan element body atau element html.
Sekarang anda sudah tahu cara mengimplementasikan fullscreen image dengan code CSS. Tetapi bagaimana cara mengimplementasikan fullscreen image dalam design website?
Saya sudah menyebut beberapa cara orang mengimplementasikan fullscreen image dalam design website di pengantar dan tutorial yang saya tulis diatas. Yang pertama dan paling sering dilakukan adalah menampilkan produk dengan background fullscreen.
Tidak hanya anda dapat menampilkan produk anda secara besar-besar di website anda, anda juga dapat menyambut pengunjung dengan produk anda. Denga begini, pesan dan tujuan dari website anda dapat terlihat sangat jelas yaitu mempromosikan atau menginformasikan pengunjung mengenai produk anda. Terlebih lagi, anda tidak perlu menampilkan produk anda lagi di bagian penyambut tetapi bisa menaruh element website lain seperti tombol buy now atau kata pengantar yang dapat mengait pengunjung. Hasilnya, menyambut pengunjung dapat dilakukan dengan cara yang lebih kreatif dan ramah juga.
Selain itu, sebuah trend menggunakan foto fullscreen dalam website adalah dengan menggunakan foto portret. Ada beberapa kegunaan dari foto ini. Pertama adalah untuk portfolio pribadi. Memasang foto protret anda di bagian penyambut portfolio anda merupakan sesuatu yang bagus untuk dilakukan. Mengetahui siapa anda berkerja dengan merupakan sesuatu yang bagus, terutama untuk client atau hirer yang mengunjungi website anda. Tentu tampilkan foto terbaik anda yang ramah, rapih dan fun tentunya.
Selain itu foto portret dapat digunakan untuk hal-hal kampanye. Banyak sekali kampanye yang menggunakan foto portret. Terus terang saja, sebuah foto membuat kesan lebih intim dan hal tersebut dapat menyampaikan rasa simpati dengan lebih baik tanpa adanya rasa terpaksa. Dengan begitu, kita dapat bermain dengan emosi pengunjung dan dengan begitu, dapat menyampaikan pesan dengan daya yang lebih besar.
Fullscreen foto juga sering digunakan dalam website restaurant, interior design dan juga website event-event seperti sebuah conference maupun sebuah concert. Kesamaan dari ketiga website ini adalah, ketiga website ini menjual dan mempromosikan sebuah experience. Sesuatu yang tidak dapat disentu bagaikan sebuah produk yang dapat digenggam, tetapi sesuatu yang dirasakan.
Kita tidak bisa melakukan ini secara online, tetapi kita bisa meniru experience ini menggunakan foto fullscreen sebagai background. Mengingat kembali kalau foto fullscreen dapat memberikan pesan secara intim, foto fullscreen juga dapat menyampaikan experience. Seperti saat anda melihat foto teman anda mengunjungi negara lain, mengunjungi sebuah restaurant atau mengunjungi sebuah event dan tempat-tempat yang menyenangkan. Anda tentu akan berkata, “Wah, kayaknya menyenangkan sekali ya. Saya ingin melakukan ini juga.” Hal inilah yang ingin dicapai dan dapat dicapai dengan menggunakan foto fullscreen.
Untuk menguraikan mengenai event, sebuah event dapat menjadi sebuah foto traveling bagi travel agency, sebuah concert, sebuah event marathon dan event yang menyenangkan yang ingin anda sampaikan dan ingin anda undang pengunjung untuk ikuti.
Tentu anda sudah merasa, agar semua hal yang saya sebut berfungsi, anda memerlukan sebuah gambar yang indah. Anda tidak salah, anda memang memerlukan gambar yang indah. Tetapi tidak semua dari anda memiliki camera DSLR dan memiliki waktu untuk mengunjungi pergunungan dan memotret pemandangan yang indah. Tidak usa khawatir! Ada banyak cara untuk mendapatkan foto yang indah tanpa perlu susah payah!
Tentu ada banyak lagi cara untuk menerapkan foto fullscreen dalam website anda. Tugas ini saya serahkan kepada anda untuk bereksperimen.
Dengan mulai populernya open source movement, inisiatif yang serupa sudah mulai diadaptasi oleh designer dan juga photographer. Ada banyak sekali website yang memberikan foto berkualitas yang dapat anda gunakan secara commercial yang bersifat royalty free. Artinya, anda dapat menggunakan foto-foto tersebut secara gratis untuk bisnis anda dan anda tidak perlu membayar author dari photo yang ada gunakan sepersen pun! Tentu setidaknya anda ingin memberikan credit yang layak terhadap photographer yang sudah bersedia memberikan karyanya secara cuma-cuma di website anda. Tetapi selain itu, kenapa tidak?
Mari saya beritahu anda sebuah rahasia. Anda sekarang hidup di abad ke-21! Handphone yang anda gunakan sangatlah canggih melebihi komputer yang digunakan Apollo 11. Seperti yang saya katakan sebelumnya, website dan print berbeda.
Banyak yang terlalu terpaku dengan concept print dimana gambar harus ber-resolusi tinggi. Hasilnya, banyak designer yang menggunakan gambar dengan file size yang berat yang melebihi 3mb. Hal ini berbeda dengan website! Dalam design website, anda ingin gambar yang sekecil-kecilnya dan kalau bisa, gambar anda memiliki file size 1kb! (Rata-rata gambar yang digunakan di website-website memiliki file size 100kb - 500kb). Oleh karena itu, smartphone anda dapat memotret banyak gambar yang cukup untuk digunakan di background fullscreen anda.
Terlebih lagi, handphone anda sekarang rata-rata memiliki camera lebih dari 5mp dan banyak yang dilengkapi fitur-fitur lain seperti Optical Image Stabilization dan banyak lagi. Tempatkan lebih banyak kepercayaan di handphone yang anda selalu kantongi dan bawa kemana-mana.
Dengan begini, anda sudah siap untuk menggunakan foto fullscreen dalam design website anda! Rasakan bagaimana anda dapat menyampaikan pesan dengan lebih efektif dan efisien dengan fullscreen image sebagai background website anda.
Posting Komentar