Teknologi pengembangan situs web adalah proses yang sangat beragam. Tapi tetap saja, semua tahapannya dapat dibagi menjadi dua komponen utama - fungsional dan kulit terluar. Atau, seperti biasa di antara webmaster, masing-masing back-end dan front-end. Orang-orang yang memesan situs web mereka dari studio pengembangan web sering kali secara naif percaya bahwa perlu fokus hanya pada fungsionalitas, dan ini akan menjadi keputusan yang tepat. Tapi ini benar dalam kasus yang sangat, sangat jarang, biasanya untuk proyek startup pada tahap pengujian beta. Jika tidak, desain grafis dan antarmuka pengguna hanya diminta untuk mematuhi standar pengembangan web dan nyaman.
Landasan pertama yang dihadapi oleh perancang antarmuka, atau perancang, adalah lebar tata letak situs. Lagi pula, untuk itu perlu menggambar antarmuka. Secara intuitif, muncul dua pendekatan - buat tata letak terpisah untuk setiap resolusi layar populer, atau buat satu versi situs untuk semua tampilan. Dan kedua opsi akan salah, tetapi hal pertama yang pertama.
Lebar situs web standar dalam pikseluntuk Runet
Sebelum pengembangan tata letak adaptif, pengembangan situs dengan lebar seribu piksel adalah fenomena massal. Angka ini dipilih karena satu alasan sederhana - sehingga situs cocok dengan layar apa pun. Dan ini memiliki logikanya sendiri, tetapi mari kita asumsikan bahwa seseorang masih memiliki setidaknya monitor HD di desktop. Dalam hal ini, tata letak Anda akan tampak seperti strip kecil di tengah layar, di mana semuanya disatukan dalam satu tumpukan, dan di samping ada ruang besar yang tidak digunakan. Sekarang mari kita asumsikan bahwa seseorang mengakses situs web Anda di tablet dengan layar lebar 800px dan "Tampilkan situs web lengkap" dicentang di pengaturan. Dalam hal 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 jelas tidak cocok untuk kita dan kita perlu mencari cara lain. Mari kita menganalisis ide tata letak terpisah untuk setiap lebar layar.
Tata letak untuk semua kesempatan
Jika Anda telah memilih sebagai strategi untuk membuat tata letak untuk semua ukuran layar di pasar, maka situs Anda akan menjadi yang paling unik di seluruh Internet. Lagi pula, hari ini tidak mungkin untuk mencakup seluruh jajaran perangkat, mencoba menyempurnakan untuk setiap opsi. Tetapi jika Anda fokus pada resolusi monitor dan layar perangkat yang paling populer, maka idenya tidak buruk. Satu-satunya kelemahannya adalah biaya finansial. Lagi pula, ketika seorang perancang antarmuka, perancang dan pembuat kode dipaksa untuk melakukan pekerjaan yang sama 5 atau 6 kali, proyek tersebut akan memakan biaya.jauh lebih tinggi dari harga yang dianggarkan semula.
Oleh karena itu, hanya situs satu halaman yang dapat membanggakan banyak versi untuk layar yang berbeda, yang tujuannya adalah untuk menjual satu produk dan pastikan untuk melakukannya dengan baik. Nah, jika Anda tidak memiliki salah satu dari arahan ini, tetapi situs multi-halaman, maka Anda harus berpikir lebih jauh.
Ukuran Situs Paling Populer
Kompromi antara dua ekstrem adalah membuat tata letak untuk tiga atau empat ukuran layar. Di antara mereka, seseorang harus menjadi tata letak untuk perangkat seluler. Sisanya harus disesuaikan untuk layar desktop kecil, sedang, dan besar. Bagaimana cara memilih lebar situs? Di bawah ini kami menyajikan statistik layanan HotLog untuk Mei 2017, yang menunjukkan kepada kami distribusi popularitas berbagai resolusi layar perangkat, serta dinamika indikator ini.
Dari tabel tersebut Anda dapat mengetahui cara menentukan ukuran situs yang ingin Anda gunakan. Selain itu, kita dapat menyimpulkan bahwa format yang paling umum saat ini adalah layar 1366 x 768 piksel. Layar seperti itu dipasang di laptop murah, jadi popularitasnya wajar. Yang paling populer berikutnya adalah monitor Full HD, yang merupakan standar emas untuk video, game, dan karenanya untuk membuat tata letak situs web. Selanjutnya dalam tabel kita melihat resolusi perangkat seluler 360 kali 640 piksel, serta berbagai opsi untuk layar desktop dan seluler setelahnya.
Merancang tata letak
JadiSetelah menganalisis statistik, kita dapat menyimpulkan bahwa lebar situs yang optimal memiliki 4 variasi:
- Versi laptop dengan lebar 1366px.
- Versi Full HD.
- Tata letak lebar 800px untuk tampilan pada monitor desktop kecil.
- Situs versi seluler - lebar 360 piksel.
Katakanlah kita telah memutuskan ukuran apa yang akan digunakan untuk sumber yang dihasilkan untuk situs. Tapi proyek seperti itu masih akan mahal. Jadi mari kita lihat lebih banyak opsi, kali ini tanpa menggunakan lebar tetap.
Membuat tata letak fleksibel
Ada pendekatan alternatif, ketika hanya perlu beradaptasi dengan ukuran layar minimum, dan ukuran situs itu sendiri akan ditentukan oleh persentase. Pada saat yang sama, 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 diregangkan sesuai dengan persentase lebar area layar yang ditentukan. Pendekatan ini memungkinkan Anda untuk berhenti menganggap ukuran situs sebagai batasan bagi perancang dan dengan terampil mengalahkan nuansa ini.
Apa itu rasio emas dan bagaimana penerapannya pada tata letak halaman web?
Bahkan di zaman Renaisans, banyak arsitek dan seniman mencoba memberikan kreasi mereka bentuk dan proporsi yang sempurna. Untuk jawaban atas pertanyaan tentang nilai proporsi seperti itu, mereka beralih ke ratu semua ilmu - matematika.
Sejak zaman kuno, telah ditemukan proporsi yang dianggap mata kita sebagai yang paling alami dan elegan,karena itu ada di mana-mana di alam. Penemu formula untuk rasio seperti itu adalah seorang arsitek Yunani kuno yang berbakat bernama Phidias. Dia menghitung bahwa jika bagian yang lebih besar dari proporsi terkait dengan yang lebih kecil secara keseluruhan terkait dengan yang lebih besar, maka proporsi seperti itu akan terlihat paling baik. Tapi ini kasusnya jika Anda ingin membagi objek secara asimetris. Proporsi ini kemudian disebut bagian emas, yang masih tidak melebih-lebihkan pentingnya bagi sejarah budaya dunia.
Kembali ke desain web
Ini sangat sederhana - dengan menggunakan rasio emas, Anda dapat mendesain halaman yang semenyenangkan mungkin bagi mata manusia. Menghitung sesuai dengan definisi rumus rasio emas, kita mendapatkan bilangan irasional 1, 6180339887 …, tetapi untuk kenyamanan, kita dapat menggunakan nilai pembulatan 1, 62. Ini berarti bahwa blok halaman kita harus 62 % dan 38% dari keseluruhan, berapa pun ukuran sumber yang dihasilkan untuk situs yang Anda gunakan. Anda dapat melihat contoh dalam diagram ini:
Gunakan teknologi baru
Teknologi tata letak situs web modern memungkinkan untuk menyampaikan gagasan perencana dan perancang secara akurat, jadi sekarang Anda dapat menerapkan gagasan yang lebih berani daripada di awal teknologi Internet. Anda tidak perlu lagi berpikir keras tentang ukuran situs yang seharusnya. Dengan munculnya hal-hal seperti blok tata letak adaptif, pemuatan konten dan font yang dinamis, pengembangan situs web menjadi jauh lebih menyenangkan. Bagaimanapun, teknologi ini adalahpembatasan lebih sedikit, meskipun mereka masih ada. Tapi seperti yang Anda tahu, tanpa batas tidak akan ada seni. Kami menyarankan Anda menggunakan satu pendekatan desain yang benar-benar kreatif - rasio emas. Dengannya, Anda dapat mengisi ruang kerja secara efektif dan indah, apa pun ukuran situs yang Anda atur di template Anda.
Cara menambah ruang kerja situs
Ada kemungkinan besar Anda tidak akan memiliki cukup ruang untuk memasukkan semua elemen UI ke dalam tata letak kecil. Dalam hal ini, Anda harus mulai berpikir kreatif atau bahkan lebih kreatif dari sebelumnya.
Kosongkan ruang maksimum di situs dengan menyembunyikan navigasi di menu pop-up. Adalah logis untuk menggunakan pendekatan ini tidak hanya di perangkat seluler, tetapi juga di desktop. Lagi pula, pengguna tidak perlu selalu melihat judul apa yang ada di situs Anda - dia datang untuk konten. Dan keinginan pengguna harus dihormati.
Contoh cara menyembunyikan menu yang baik adalah tata letak berikut (foto di bawah).
Di sudut atas area merah, Anda dapat melihat tanda silang, mengklik yang akan menyembunyikan menu menjadi ikon kecil, meninggalkan pengguna sendirian dengan konten situs web.
Namun, ini opsional, Anda dapat meninggalkan navigasi, yang akan selalu terlihat. Tetapi Anda dapat menjadikannya elemen desain yang indah, dan bukan hanya daftar tautan populer di situs. Gunakan ikon intuitif sebagai tambahan atau bahkan sebagai ganti tautan teks. itu samaakan memungkinkan situs Anda menggunakan ruang layar di perangkat pengguna dengan lebih efisien.
Situs web terbaik responsif
Jika Anda tidak tahu tata letak mana yang harus dipilih untuk situs, maka semuanya sederhana untuk Anda. Untuk menghemat biaya pengembangan dan pada saat yang sama tidak kehilangan audiens Anda karena tata letak yang buruk untuk beberapa perangkat, gunakan desain responsif.
Desain responsif adalah desain yang terlihat sama bagusnya di perangkat yang berbeda. Pendekatan ini akan memungkinkan situs Anda dapat dimengerti dan nyaman bahkan di laptop, bahkan di tablet, bahkan di smartphone. Efek ini dicapai dengan secara otomatis mengubah lebar area kerja layar. Dengan menggunakan lembar gaya responsif untuk situs Anda, Anda membuat keputusan terbaik.
Apa perbedaan antara desain responsif dan versi situs web
Desain responsif berbeda dari versi seluler situs dalam kasus terakhir, pengguna menerima kode html yang berbeda dari kode desktop. Ini adalah kerugian dalam hal optimasi kinerja server serta optimasi mesin pencari. Selain itu, menjadi lebih sulit untuk menghitung statistik untuk berbagai versi situs. Pendekatan adaptif tidak memiliki kelemahan ini.
Responsivitas untuk berbagai perangkat dicapai melalui tata letak dengan persentase lebar yang ditentukan atau dengan mentransfer blok ke ruang yang tersedia (dalam bidang vertikal pada ponsel cerdas alih-alihhorizontal di desktop), atau membuat tata letak individual untuk layar yang berbeda.
Pelajari lebih lanjut tentang desain dan pengembangan responsif dalam tutorial kami.
