Ukuran situs standar: fitur, persyaratan dan rekomendasi

Teknologi pengembangan situs web adalah proses yang sangat multifaset. Tapi tetap saja semua tahapannya bisa terbagi menjadi dua komponen utama - yaitu functional dan outer shell. Atau, seperti kebiasaan di webmaster, backend dan front-end, masing-masing. Orang yang memesan situs web mereka dari studio pengembangan web, seringkali secara naif percaya bahwa perlu berfokus hanya pada fungsinya, dan ini akan menjadi keputusan yang tepat. Tapi ini benar dalam kasus yang sangat jarang terjadi, biasanya untuk proyek startup pada tahap beta. Dalam hal lain, desain grafis dan antarmuka pengguna harus sesuai dengan standar pengembangan web dan merasa nyaman.

Landasan pertama yang dihadapi oleh perancang antarmuka, atau perancang, adalah lebar tata letak situs. Bagaimanapun, perlu untuk menarik antarmuka untuk itu. Murni secara intuitif ada dua pendekatan - baik untuk membuat tata letak terpisah untuk setiap resolusi layar yang populer, atau untuk membuat satu versi situs untuk semua pemetaan. Dan kedua pilihan itu akan salah, tapi tentang segala hal secara berurutan.

Lebar standar situs dalam piksel untuk RuNet

Sebelum pengembangan layout adaptif, fenomena massa adalah pengembangan sebuah situs dengan lebar seribu piksel. Angka ini dipilih karena satu alasan sederhana - untuk menempatkan situs di layar manapun. Dan ini memiliki logikanya sendiri, tapi anggap saja orang tersebut setidaknya memiliki monitor HD di desktop. Dalam kasus ini, tata letak Anda akan tampak seperti sebuah strip kecil di tengah layar, di mana semuanya ditumpuk dalam satu tumpukan, dan di sisi-sisinya adalah ruang kosong yang tak berpenghuni. Sekarang mari kita asumsikan bahwa seseorang datang ke situs Anda dari tablet dengan lebar layar 800 piksel, dan dalam pengaturannya centang "Tampilkan versi lengkap dari situs web." Dalam kasus ini, situs Anda juga akan ditampilkan dengan tidak benar, karena tidak sesuai dengan layar.

Dari pertimbangan ini, kita dapat menyimpulkan bahwa lebar tetap untuk tata letak tidak sesuai dengan kita dan perlu mencari cara lain. Mari kita analisis gagasan tata letak terpisah untuk setiap lebar layar.

Tata letak untuk segala kesempatan

Jika Anda telah memilih sebagai strategi untuk membuat layout untuk semua ukuran layar yang ada di pasaran, maka situs Anda akan menjadi yang paling unik di Internet secara keseluruhan. Bagaimanapun, tidak mungkin untuk mencakup keseluruhan rangkaian perangkat saat ini, mencoba membuat penyesuaian yang akurat untuk setiap pilihan. Tapi jika Anda fokus pada resolusi layar monitor dan perangkat yang paling populer, maka idenya tidak buruk. Satu-satunya minus adalah biaya finansial. Bagaimanapun, ketika perancang antarmuka, desainer dan perancang tata letak dipaksa untuk melakukan pekerjaan yang sama 5 atau 6 kali, proyek tersebut akan biaya yang tidak dapat dibandingkan dengan harga yang awalnya ditetapkan dalam anggaran.

Oleh karena itu, anggap banyaknya versi untuk layar yang berbeda, kecuali situs web satu halaman, yang bertujuan menjual satu produk dan tentu melakukannya dengan baik. Nah, jika Anda tidak memiliki salah satu pendaratan ini, dan situs multipage, maka perlu diperdebatkan lebih jauh.

Ukuran situs yang paling populer

Sebuah kompromi antara dua ekstrem adalah menggambar tata letak untuk tiga atau empat ukuran layar. Di antara mereka, seseorang pasti mockup untuk perangkat mobile. Sisanya harus disesuaikan dengan layar desktop kecil, menengah dan besar. Bagaimana cara memilih lebar situs? Berikut adalah statistik layanan HotLog untuk bulan Mei 2017, yang menunjukkan distribusi popularitas berbagai resolusi layar perangkat, serta dinamika perubahan indikator ini.

Dari tabel tersebut, Anda bisa belajar menentukan ukuran situs yang ingin Anda gunakan. Selain itu, kita dapat menyimpulkan bahwa format yang paling umum saat ini adalah layar 1366 dengan 768 poin. Layar seperti itu dipasang di laptop anggaran, jadi popularitasnya alami. Yang paling populer berikutnya adalah monitor Full HD, yang merupakan standar emas untuk klip video, game, dan karenanya untuk membuat layout situs. Selanjutnya pada tabel kita melihat resolusi perangkat mobile 360 pada 640 poin, serta berbagai pilihan untuk layar desktop dan mobile setelah itu.

Rancang tata letak

Jadi, setelah menganalisa statistik, kita dapat menyimpulkan bahwa lebar optimal dari situs ini memiliki 4 variasi:

1. Versi untuk laptop dengan lebar 1.136 piksel.
2. Versi full HD
3. Tata letak 800 piksel untuk display pada monitor desktop kecil.
4. Versi seluler dari situs ini memiliki lebar 360 piksel.

Katakanlah kami memutuskan bagaimana menggunakan ukuran sumber yang dihasilkan untuk situs ini. Tapi proyek seperti itu masih akan mahal harganya. Jadi mari kita pertimbangkan lebih banyak pilihan, kali ini tanpa menggunakan lebar tetap.

Membuat tata letak yang fleksibel

Ada pendekatan alternatif, bila perlu menyesuaikan hanya untuk ukuran layar minimum, dan ukuran situs akan ditetapkan oleh persen. Dalam hal ini, elemen antarmuka seperti menu, tombol dan logo dapat diatur dalam nilai absolut, dengan fokus pada ukuran minimum lebar layar dalam piksel. Blok dengan konten, sebaliknya, akan meregang sesuai dengan persentase yang ditentukan dari lebar area layar. Pendekatan ini memungkinkan Anda untuk berhenti memandang ukuran situs sebagai batasan bagi perancang dan berbakat untuk mengalahkan nuansa ini.

Berapakah rasio emas, dan bagaimana cara menerapkannya pada tata letak halaman web?

Bahkan di Renaisans, banyak arsitek dan seniman mencoba memberi ciptaan mereka bentuk dan proporsi yang ideal. Setelah menjawab pertanyaan tentang makna proporsi ini, mereka beralih ke ratu semua ilmu - matematika.

Sejak zaman kuno, proporsi telah ditemukan, yang dipandang mata kita sebagai yang paling alami dan elegan, karena berada di alam yang ditemukan di alam. Penemu rumus rasio seperti itu adalah seorang arsitek Yunani kuno berbakat bernama Phidias. Dia menghitung bahwa jika sebagian besar proporsinya mengacu pada yang kurang, karena keseluruhannya mengacu pada yang lebih besar, maka proporsi ini akan terlihat paling baik. Tapi begitulah jika Anda ingin membagi objek secara asimetris. Proporsi ini kemudian disebut bagian emas, yang masih belum melebih-lebihkan pentingnya sejarah dunia budaya.

Kembali ke Desain Web

Ini sangat sederhana - menggunakan bagian emas, Anda bisa mendesain halaman yang paling sesuai dengan mata manusia. Menghitung dengan definisi rumus bagian emas, kita mendapatkan bilangan irasional 1.6180339887 ..., tapi untuk kenyamanan kita bisa menggunakan nilai bulat 1.62. Ini berarti bahwa blok halaman kita harus 62% dan 38% dari keseluruhan, terlepas dari ukuran kode sumber untuk situs yang Anda gunakan. Contoh yang bisa Anda lihat pada skema ini:

Gunakan teknologi baru

Teknologi modern dari desain website memungkinkan Anda untuk secara akurat menyampaikan gagasan perancang dan perancang, jadi sekarang Anda mampu menerapkan gagasan yang lebih berani daripada pada awal teknologi Internet. Tidak perlu lagi memikirkan secara serius ukuran situs ini. Dengan datangnya hal-hal seperti tata letak adaptif blok , pemuatan konten dan font yang dinamis, pengembangan situs menjadi semakin menyenangkan. Bagaimanapun, teknologi semacam itu memiliki batasan yang lebih sedikit, walaupun memang ada. Tapi seperti yang Anda tahu, tanpa batasan tidak akan ada seni. Sebaiknya gunakan satu pendekatan kreatif untuk disain - bagian emas. Dengan itu, Anda dapat secara efektif dan baik mengisi ruang kerja, tidak peduli ukuran situs yang Anda tentukan di template Anda.

Cara meningkatkan ruang kerja situs

Ada kemungkinan tinggi bahwa Anda tidak akan memiliki cukup ruang untuk menyesuaikan semua elemen antarmuka menjadi tata letak ukuran kecil. Dalam hal ini, Anda harus mulai berpikir kreatif atau bahkan lebih kreatif daripada sebelumnya.

Maksimalkan ruang di situs bisa dengan menyembunyikan navigasi di menu pop-up. Pendekatan ini logis untuk digunakan tidak hanya pada perangkat mobile, tapi juga pada desktop. Setelah semua, pengguna tidak perlu melihat setiap saat pada rubrik apa yang ada di situs Anda - dia datang untuk kontennya. Dan keinginan pengguna perlu dihormati.

Contoh cara yang baik untuk menyembunyikan menu adalah tata letak berikut (foto di bawah).

Di pojok atas area merah , Anda bisa melihat salib, mengklik yang akan menyembunyikan menu di ikon kecil, membiarkan pengguna sendiri dengan konten situs web.

Namun, Anda tidak perlu melakukan ini, Anda bisa meninggalkan navigasi, yang akan selalu terlihat. Tapi Anda bisa menjadikannya elemen desain yang indah, dan bukan hanya daftar link populer di situs ini. Gunakan ikon intuitif selain tautan teks atau bahkan bukan daripadanya. Ini juga akan memungkinkan situs Anda untuk lebih efisien menggunakan ruang layar pada perangkat pengguna.

Situs terbaik - adaptif

Jika Anda tidak tahu layout mana yang akan dipilih untuk situs ini, maka semuanya mudah bagi Anda. Untuk menghemat biaya pengembangan dan masih belum kehilangan penonton karena tata letak yang buruk untuk perangkat, gunakan desain adaptif.

Adaptive disebut desain yang terlihat pada perangkat yang berbeda sama baiknya. Pendekatan ini memungkinkan situs Anda mudah dimengerti dan nyaman bahkan di laptop, setidaknya di tablet, bahkan di smartphone. Efek ini dicapai karena adanya perubahan otomatis pada lebar area kerja layar. Dengan menggunakan lembar gaya adaptif untuk situs ini, Anda membuat keputusan yang paling tepat.

Yang membedakan desain adaptif dari ketersediaan berbagai versi situs

Desain adaptif berbeda dari versi mobile situs karena dalam kasus terakhir pengguna menerima kode html yang berbeda dari versi desktop. Ini adalah kelemahan dalam hal mengoptimalkan kinerja server, serta optimasi search engine. Selain itu, menjadi lebih sulit untuk menghitung statistik pada berbagai versi situs. Pendekatan adaptif tidak memiliki kekurangan seperti itu.

Kemampuan beradaptasi untuk berbagai perangkat dicapai melalui tata letak dengan persentase lebar atau dengan mentransfer blok ke ruang yang tersedia (di bidang vertikal pada ponsel cerdas dan bukan horizontal di desktop), atau membuat tata letak individu untuk berbagai layar.

Informasi lebih lanjut tentang desain adaptif dan pengembangannya bisa Anda dapatkan dari buku teks.