Tips Menentukan Ukuran website dengan Tampilan Full Screen Yang Tepat

Dalam artikel  ini kami akan membahas tentang bagaiman ukuran website dengan Tampilan Full Screen yang sebenarnya. Desain Full Screen disini  dimaksudkan ialah tampilan desain yang memenuhi keseluruhan layar dari browser sebuah perangkat.

Tampilan seperti ini biasnya kita temui pada beberapa website-website yang menerapkan tampilan slider Atau untuk halaman depan sebuah websitenya.

Dapat kita perhatikangambar diatas, slider utamanya tamak menerapkan ukuran 100% dengan lebar (width) dan tinggi (height) serta ukuran slider tersebut akan tetap 100% baik dilihat dari perangkat dekstop maupun di tablet & smartphone.

100

Tetapi  jika anda ingin menerapkan rasio gambar (image ratio) gambar yang  sama, biasanya gambar ini akan terlihat terpotong, baik dari sisi lebarnya atau tingginya.

Dengan memperhatikan gambar disamping, tampknya untuk monitor yang mendatar (misal di komputer) gambar fullscreen, akan sedikit terpotong  pada sisi atas dan bawah.

Sebaliknya  untuk layar portrait (misal smartphone), gambar akan tampak terpotong pada kiri dan kanan.

Jadi sebenarnya berapa ukuran untuk website dengan  tampilan desain Full Screen yang tepat ?

Ukuran standar umum  Ukuran website Dengan Tampilan full screen di desktop ialah 1280x 720 pixel, sedangkan  untuk ukuran Full HD di desktop/ Komputer adalah 1920×1080 pixel.

Tetapi hal ini bukanlah sebuah ketetapan dengan kata lain tampilan ukuran sangat bergantung dari layar monitor(komputer) maupun mobile devices (tablet/smartphone) yang digunakan. Meskipun tidak ada ketetapan yang pasti berapa ukuran dengan website Full Screen tersebut yang pasti sebuah website yang menerapkan (slidernya) sudah pasti memiliki width & height 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 Smartphone. Tetapi ukuran ini hanya untuk viewport (lebar fisik layar). Bukan resolusi Smartphone sebenarnya.
  • 1024 x 768 – ukuran ini digunakan pada Tablet & Smartphone.
  • 1280 x 720 – ukuran ini untuk Laptop, beberapa Tablet & Smartphone(mid-end).
  • 1366 x 768 – ukuran ini biasanya terapkan pada Laptop.
  • 1920 x 1080 – ukuran ini digunakan pada perangkat Laptop dan juga Monitor Komputer (FullHD).
  • 2560 x 1440 – Untuk ukuran sering digunakan pada Monitor Komputer dan beberapa High-end Laptop dan juga Smartphone(Quad HD)
  • 3840 x 2160 – Untuk Ukuran website Dengan Tampilan full screen
     ini  biasanya digunakan pada (high-end) Monitor Gaming (4k)
  • 7680 x 4320 – untuk ukuran ini biasanya terapkan pada perangkat (high-end) Monitor Gaming (8k)

Nah dari uraian yang disebutkan diatas kamu kamu sudah dapat memperkirakan berapa ukuran yang digunakan oleh website website dengan desain Full Screen yang tepat.

Tedapat hal yang harus diperhatikan ialah kamu harus meperhitungkan ukuran browser menu dan juga juga taskbar menu pada windows atau menu bar pada perangkat Mac. Karana ukuran website yang menggunakan desain full screen tingginya akana sama dengan beberapa list yang telah di uraikan diatas.

Tapi kalau kamu ingin mendesain website dengan Photoshop atau yang lainnya, disarankan menggunakan resolusi 1280x720px. Meski demikian hasil desain gambar di Photoshop/sketsa akan tampak berbeda dengan aslinya. Karena akann tampak sketsa objek  berada di tengah, pada website nanti bisa jadi akan berpindah jadi agak kekiri atau kenanan.

Jadi, semua akan bergantung dan di sesuaikan dengan ukuran layar perangkat yang dituju/kita gunakan.

Nah Berapakah ukuran yang baik untuk background image atau gamabr latar belakang yang harus diterapkan pada website dengan desain Full Screen?

Untuk ukuran standar saat ini background image dengan desain fullscreen di desktop adalah 1280x 720 pixel, dan untuk ukuran background image Full HD di desktop adalah 1920×1080 pixel.

Namun sekali lagi, ukuran tidak menjadi ketetapan. Semua tergantung penggunaan perangkat.

Jadi maksudnya begini, jika anda membuat website sendiri, lalu ingin menggunakan desain layout ini, perlu dipahami terlebih dahulu target pengunjung ke website kamu.

Misal, kamu menargetkan yang yang rata-rata ukuran monitornya 1280×720. maka sebaiknya kamu membuat gambar latar belakangnya minimal berukuran 1280×720 pixel.

Mengapa harus 1280×720 pixel minimalis?

Jika anda menggunakan gambar yang ukurannya dibawah dari itu, maka nanti pengunjung kamu yang bermonitor berukuran 1280×720 melihat gambar latar belakang kamu gunakan  pecah-pecah atau pixelated. Hal ini disebakan gambar tadi, akan dibuat menyesuaikan (minimal) 100% lebar & tinggi dari monitor digunakan pengunjung.

Nah untuk menghindari pixelated disarankan menggunakan gambar yang minimalis atau ukuran 1280×720 pixel.

Tips untuk Ukuran website dengan Tampilan Full Screen

Studi Kasus misalnya kamu ingin menggunakan website dengan desain fullscreen, disarankan minimal gambar latar belakangnya berukuran diatas 1280×720 pixel.

Sementara untuk ukuran gambar berukuran besar memiliku sisi kelemahannya, terutama jika kamu ingin menerapkannya di website kamu.  Kuncinya Semakin besar ukuran gambarnya (lebar & tinggi) maka semakin besar juga (file)sizenya.

karena itu perlu optimize  terlebih dahulu menggunakan software deit gambar seperti Photoshop atau jika kamu menggunakan wordpres dapat menggunakan plugin seperti plugin Smushit atau Imagify.

Baca Juga : Contoh Dan 4 Cara Menulis Artikel SEO Friendly Untuk Blog Kamu

Kesimpulan

Kita cukupkan sampai disini dulu sedikit pembahasan mengenai ukuran  website dengan tampilan Full Screen ini. Semoga dapat bermanfaat dan bisa kamu coba juga tips dan trik nya di website kamu. Jika kamu memiliki saran  untuk penyempurnaan artikel ini tilahkan tinggalkan komentar jika masih ada hal yang belum jelas atau pengen kamu ketahui lagi.