Di artikel ini saya akan bahas mengenai ukuran untuk website dengan desain Full Screen. Desain Full Screen disini maksudnya adalah tampilan desain yang memenuhi keseluruhan layar monitor atau browser.
Biasanya cara ini dipakai oleh beberapa website-website untuk tampilan slider utamanya. Atau tidak jarang untuk halaman muka websitenya.
Bahe - WordPress Theme
Seperti yang kita lihat pada gambar diatas, slider utamanya memiliki ukuran 100% untuk lebar (width) dan tinggi (height). Dan ukuran slider tersebut akan tetap 100% di setiap layar monitor ataupun di tablet & HP smartphone.
Namun jika kita mau menerapkan rasio gambar (image ratio) gambar yang selalu sama, maka nanti gambar ini akan terlihat terpotong, entah di lebarnya atau tingginya.
Seperti yang kita lihat dari gambar disamping, untuk monitor yang mendatar(misal di komputer) gambar fullscreen, akan terpotong sedikit di atas dan bawah.
Sedangkan untuk layar yang agak tinggi (misal smartphone), gambar akan terpotong di sisi kiri dan kanan.
Jadi berapa ukuran untuk website dengan desain Full Screen sebenarnya?
Ukuran standar saat ini untuk website dengan desain fullscreen di desktop adalah 1280x 720 pixel, dan untuk ukuran Full HD di desktop adalah 1920x1080 pixel.
Namun hal itu tidaklah baku, alias masih tergantung dari layar monitor(komputer) atau mobile devices(tablet/smartphone) yang digunakan.
Jadi tidak ada ketetapan yang pasti untuk ukuran website Full Screen tersebut. Cuma yang pasti website seperti itu (slidernya) memiliki width & height yang selalu 100%.
Standar ukuran layar untuk PC/komputer, laptop, tablet, smartphone (dalam pixel):
- 360 x 640 , 360 x 740 , 480 x 853, 411 x 731 - ukuran ini biasanya digunakan pada Smartphone. Cuma untuk ukuran ini hanya untuk viewport(lebar fisik layar). Bukan resolusi Smartphone nya sendiri.
- 1024 x 768 - ukuran ini biasanya digunakan pada Tablet & Smartphone.
- 1280 x 720 - ukuran ini biasanya digunakan pada Laptop, beberapa Tablet & Smartphone(mid-end).
- 1366 x 768 - ukuran ini biasanya digunakan pada Laptop.
- 1920 x 1080 - ukuran ini biasanya digunakan pada Laptop dan juga Monitor Komputer (FullHD).
- 2560 x 1440 - ukuran ini biasanya digunakan pada Monitor Komputer dan beberapa High-end Laptop dan juga Smartphone(Quad HD).
- 3840 x 2160 - ukuran ini biasanya digunakan pada (high-end) Monitor Gaming (4k)
- 7680 x 4320 - ukuran ini biasanya digunakan pada (high-end) Monitor Gaming (8k)
Nah jadi berdasarkan ukuran-ukuran layar diatas kamu bisa mengira-ngira berapa ukuran yang digunakan oleh website-website dengan desain Full Screen.
Tapi ada yang perlu kamu perhitungkan juga, yaitu ukuran browser menu dan juga taskbar menu(diwindows) atau menu bar (di Mac). Jadi bukan berarti ukuran website yang menggunakan desain full screen tingginya selalu sama dengan list yang diatas.
Tapi kalau kamu ingin mendesain website, di Photoshop misalnya, saya sarankan minimal mulai dari resolusi 1280x720px. Cuman perlu diingat, hasil desain(gambar di Photoshop/sketsa) akan berbeda dengan kenyataan. Nanti kalau misal di sketsa foto orang berada di tengah, di website nanti bisa saja berpindah jadi agak kekiri atau kenanan.
Karena sekali lagi, semua tergantung ukuran layar yang dituju/kita gunakan.
Berapa ukuran yang baik untuk background image(gambar latar belakang) yang harus digunakan website dengan desain Full screen?
Ukuran standar saat ini untuk background image dengan desain fullscreen di desktop adalah 1280x 720 pixel, dan untuk ukuran background image Full HD di desktop adalah 1920x1080 pixel.
Namun sekali lagi, ukuran ini tidak lah baku. Semua tergantung dari target yang kita tuju.
Jadi maksudnya begini, kalau kamu mau membuat website sendiri, lalu ingin menggunakan desain layout ini, coba kamu pahami dulu target pengunjung ke website kamu ini.
Misal, kamu mengejar yang yang rata-rata ukuran monitornya 1280x720. Nah, kalau begitu sebaiknya kamu membuat gambar latar belakangnya minimal berukuran 1280x720 pixel.
Kenapa harus 1280x720 pixel minimal?
Karena kalau kita menggunakan gambar yang berukuran dibawah dari itu, maka nanti pengunjung kamu yang bermonitor berukuran 1280x720 itu akan melihat gambar latar belakang kamu agak pecah-pecah(pixelated) sedikit.
Hal ini dikarenakan gambar tadi, akan dibuat mengikuti (minimal) 100% lebar & tinggi si monitor pengunjung tersebut.
Nah untuk menghindari hal seperti itu saya sarankan kamu menggunakan gambar yang minimal menggunakan ukuran 1280x720 pixel.
Tips untuk ukuran gambar
Berdasarkan pengalaman saya, kalau misal kamu mau menggunakan website dengan desain fullscreen seperti ini, saya sarankan minimal gambar latar belakangnya berukuran diatas 1280x720 pixel.
Seperti website contoh diatas, dia menggunakan 1600x1100 pixel untuk gambar slidernya. Mungkin website ini mengejar pengunjung yang memiliki monitor ukuran 1280x720 keatas.
Tapi ingat, ukuran gambar berukuran besar ada kelemahannya, apalagi kalau kamu ingin menggunakannya di website kamu. Semakin besar ukuran gambarnya (lebar & tinggi) maka semakin besar juga (file)sizenya.
Oleh karena itu coba di optimize dulu menggunakan program seperti Photoshop atau bisa menggunakan plugin seperti plugin Smushit atau Imagify jika website kamu menggunakan WordPress.
Selain itu, kamu juga bisa menambahkan semacan “image mask” di atas gambar tersebut. Jadi nanti terdapat garis-garis pola diatas gambar latar belakang tersebut. Contohnya bisa dilihat di website ini.
Berapa ukuran yang baik untuk background video(video latar belakang) yang harus digunakan website dengan desain Full screen?
Sama seperti halnya di image/gambar, tergantung kepada ukuran yang kita tuju.
Video juga harus kita perlakukan sama seperti gambar. Cuma, menurut saya tidak harus menggunakan ukuran yang terlalu besar seperti yang kita lakukan pada background image(gambar latar belakang).
Karena video sendiri punya kualitas gambar yang agak berbeda dengan gambar biasa.
Contohnya kamu coba buka youtube, lalu tonton video dengan resolusi 480p, sedangkan monitor kamu 1280x720, apakah gambar videonya pecah? Tidak terlalu kan? Nah, karena itu, saya sarankan minimal kalau kamu ingin menggunakan video sebagai latar belakang di website kamu, minimal kualitas videonya 720p atau 1080p (ukuran youtube).
Tips untuk ukuran video
Gunakan ukuran video sesuai kebutuhan kita
Untuk video disini, saya sarankan menggunakan ukuran paling-paling buruk di 480p. Dan jangan lupa memakai “image mask” juga di atas videonya. Cari image mask yang berpola garis menyamping. Ini tujuannya memberi kesan videonya tidak terlalu pecah juga menambah kekerenan 100%.
Lalu hindari menggunakan menggunakan self-hosted video.
Maksudnya, jangan menggunakan video yang kamu simpan di website kamu sendiri. Karena selain memakan space hosting kamu, kecepatan dan peforma website & hosting kamu juga akan terkena pengaruhnya. Contohnya website kamu nanti menjadi lambat ketika membuka halaman yang menggunakan video tersebut.
Gunakan Youtube video atau Vimeo video
Nah solusi untuk diatas, gunakan selalu video dari pihak ketiga, seperti Youtube atau Vimeo ini. Cuma karena vimeo rata-rata diblokir oleh ISP Indonesia, saya sarankan pake Youtube aja.
Kesimpulan
Oke sampe disini dulu pembahasannya mengenai ukuran untuk website dengan desain Full Screen ini. Semoga bisa bermanfaat dan bisa kamu coba juga tips dan trik nya di website kamu. Silahkan tinggalkan komentar jika masih ada hal yang belum jelas atau pengen kamu ketahui lagi.
Kalau kamu tertarik untuk belajar HTML dan CSS ini lebih lanjut, kamu bisa mencoba mengunjungi situs ini.
Disitus itu selain kamu bisa berlangganan kursus-kursus online, kamu juga mendapatkan langganan untuk Digital Asset yang cukup banyak. Mulai dari gambar, musik, video bahkan sampai HTML template juga ada.
Kamu bisa buka link ini kalau kamu pengen tahu tutorial membuat background image (gambar latar belakang) yang full screen.
Buat kamu para pemula yang ingin mencari WordPress theme yang keren, kamu bisa buka link ini.
Buat kamu para pemula yang ingin menyewa hosting buat website kamu, kamu bisa membaca cara mencari hosting yang tepat disini.
