Dimensi Standard laman: ciri-ciri, keperluan dan cadangan

pembangunan teknologi tapak web - satu proses yang sangat pelbagai. Namun semua peringkat boleh dibahagikan kepada dua komponen utama - yang berfungsi dan sarung luar. Atau, seperti dalam webmaster pengantar masing-masing Beg End dan Front End. Orang yang membeli laman web mereka di studio pembangunan web, sering naif percaya bahawa ia adalah perlu untuk memberi tumpuan hanya pada fungsi, dan ia akan menjadi keputusan yang tepat. Tetapi ini adalah benar dalam masa yang sangat, sangat jarang berlaku, biasanya untuk permulaan projek-projek di peringkat ujian beta. Seluruh reka bentuk grafik dan antara muka pengguna yang hanya diwajibkan untuk mematuhi piawaian pembangunan web dan selesa.

Asas pertama yang dihadapi oleh pereka antara muka, atau pereka - adalah lebar susun atur laman web ini. Lagipun, ia adalah perlu untuk menarik muka untuknya. Intuitif terdapat dua pendekatan - sama ada untuk membuat susun atur yang berasingan bagi setiap resolusi skrin popular, atau anda boleh membuat satu versi laman untuk semua peta. Kedua-dua pilihan adalah salah, tetapi perkara pertama yang pertama.

lebar standard dalam piksel untuk laman web ini yang pernah anda perlukan

Sebelum perkembangan fenomena massa susun atur mudah suai telah pembangunan laman web dengan beribu-ribu piksel lebar. Angka ini dipilih kerana satu sebab mudah - bahawa tapak itu telah diletakkan di atas mana-mana skrin. Dan ada logik tertentu, tetapi mari kita andaikan bahawa seseorang itu masih sekurang-kurangnya HD-monitor pada desktop. Dalam kes ini, susun atur anda akan kelihatan jalur kecil di tengah-tengah skrin, di mana segala-galanya adalah dibentuk dalam satu longgokan, dan di sisi bukan ruang yang besar. Sekarang mari kita andaikan bahawa seorang telah datang ke laman web anda dari tablet dengan skrin 800 piksel lebar, dan ditandakan dalam tetapan "Tunjukkan laman web versi penuh." Dalam kes ini, laman web anda juga akan dipaparkan secara tidak betul, kerana semata-mata tidak dimuatkan ke dalam skrin.

Dari pertimbangan ini, kita boleh membuat kesimpulan bahawa lebar tetap untuk susun atur, kita tidak layak dan anda ingin mencari cara yang lain. Mari kita menganalisis idea susun atur yang berasingan bagi setiap lebar skrin.

Susun atur untuk semua majlis

Jika anda telah memilih sebagai strategi untuk membuat susun atur untuk semua saiz skrin yang terdapat di pasaran, maka laman web anda akan menjadi yang paling unik di Internet. Lagipun, hari ini ia hanya mustahil untuk meliputi keseluruhan rangkaian peranti dalam usaha untuk membuat tetapan yang tepat untuk setiap pilihan. Tetapi jika anda memberi tumpuan kepada resolusi monitor dan skrin peranti yang paling popular, idea yang baik. Its hanya kelemahan - kos kewangan. Lagipun, apabila pereka antara muka berjenama terkenal dan coder akan dipaksa untuk 5 atau 6 kali untuk melaksanakan kerja yang sama, projek ini akan kos tidak seimbang asalnya ditanam pada harga bajet.

Oleh itu bermegah yang banyak versi untuk skrin yang berbeza boleh kecuali bahawa laman-odnostranichniki yang tujuan - untuk menjual satu produk dan pastikan anda melakukannya dengan baik. Nah, jika anda bukan salah seorang daripada mereka Landing, pelbagai lokasi, dengan alasan lanjut.

Saiz yang paling popular laman

A kompromi antara kedua-dua keterlaluan adalah lukisan susun atur selama tiga atau empat saiz skrin. Antaranya, satu perlu menjadi susun atur untuk peranti mudah alih. Selebihnya perlu disesuaikan untuk skrin desktop kecil, sederhana dan besar. Bagaimana untuk memilih lebar Laman? Di bawah kami membentangkan Bayaran statistik perkhidmatan untuk bulan Mei 2017, yang menunjukkan kepada kita pengagihan populariti resolusi skrin pelbagai peranti, serta dinamik perubahan dalam penunjuk ini.

Daripada jadual ini, ia adalah mungkin untuk belajar bagaimana untuk menentukan saiz tapak yang anda mahu gunakan. Di samping itu, ia boleh disimpulkan bahawa format yang paling biasa hari ini adalah skrin di 1366 oleh 768 mata. skrin ini dipasang di komputer riba bajet, jadi populariti mereka adalah semula jadi. Seterusnya yang paling popular ialah Full HD-monitor, yang merupakan standard emas untuk filem, permainan, dan, oleh itu, untuk membuat susun atur tapak. Seterusnya dalam jadual yang kita lihat membenarkan peranti mudah alih 360 x 640 piksel, serta pelbagai penjelmaan desktop dan skrin mudah alih selepas itu.

reka bentuk susun atur

Jadi, selepas menganalisis statistik, kita boleh menyimpulkan bahawa lebar optimum laman web ini mempunyai 4 variasi:

1. Versi komputer riba dengan 1366 piksel lebar.
2. Full HD-versi.
3. 800 piksel dalam susun atur saiz lebar untuk paparan pada monitor desktop kecil.
4. versi mudah alih laman web ini - 360 piksel lebar.

Katakan kita membuat keputusan apa yang anda mahu menggunakan saiz kod sumber yang dijanakan untuk laman web ini. Tetapi apa-apa projek masih lagi mahal. Oleh itu fikirkanlah pilihan, kali ini tanpa menggunakan lebar tetap.

Membuat susun atur fleksibel

Terdapat satu pendekatan alternatif yang kita hanya perlu menyesuaikan saiz minimum skrin, dan saiz semata-mata laman web yang akan diminta peratus. Dalam kes ini, unsur-unsur antara muka seperti menu, butang dan logo, boleh ditakrifkan secara mutlak, memberi tumpuan kepada saiz minimum lebar skrin dalam piksel. Blok dengan kandungan, sebaliknya, akan diregangkan mengikut yang dinyatakan peratus daripada lebar kawasan skrin. Pendekatan ini membolehkan tidak mengesan saiz tapak itu sebagai kekangan untuk pereka dan bakat untuk mengalahkan nuansa ini.

Apa yang nisbah emas, dan bagaimana untuk menggunakan laman web dengan susun atur?

Malah di Renaissance banyak arkitek dan artis cuba untuk memberikan ciptaan beliau bentuk yang sempurna dan bahagian. Untuk jawapan kepada soalan-soalan mengenai implikasi apa-apa perkadaran, mereka beralih kepada ratu semua sains - matematik.

Sejak zaman kuno telah dicipta oleh bahagian yang mata kita menganggap sebagai yang paling semulajadi dan elegan, kerana ia adalah sentiasa ada dalam alam semula jadi. Penemu formula nisbah ini adalah seorang arkitek Greek berbakat bernama Phidias. Ia dikira bahawa jika kebanyakan bahagian berkaitan dengan rendah secara keseluruhannya adalah lebih besar, maka bahagian ini akan kelihatan sihat. Tetapi dalam kes ini, jika anda mahu untuk membahagikan simetri objek. bahagian ini kemudian menjadi dipanggil nisbah emas, yang masih tidak harga yg terlalu tinggi kepentingannya untuk sejarah dunia budaya.

Mari kita kembali kepada reka bentuk web

Ia amat mudah - menggunakan nisbah emas, anda boleh mereka bentuk halaman yang akan paling menyenangkan kepada mata manusia. Dikira mengikut formula seksyen emas, kita dapati bilangan rasional 1,6180339887 ..., tetapi untuk kemudahan anda boleh menggunakan nilai yang bulat 1.62. Ini bermakna bahawa blok halaman kami harus 62% dan 38% daripada keseluruhannya, tidak kira apa saiz dijana kod sumber bagi laman web yang anda gunakan. Sebagai contoh, anda boleh lihat di skim berikut:

Penggunaan teknologi baru

laman web susun atur teknologi moden membolehkan anda untuk menyampaikan idea-idea pereka dan pereka bentuk dengan tepat, jadi sekarang anda mampu pelaksanaan idea-idea lebih berani daripada pada awal teknologi Internet. Tidak lagi perlu banyak untuk teka-teki lebih apa yang sepatutnya menjadi saiz tapak. Dengan adanya perkara-perkara seperti blok susun atur penyesuaian, pembebanan dinamik kandungan dan fon, pembangunan laman web telah menjadi banyak kali lebih menyeronokkan. Lagipun, teknologi ini mempunyai kurang sekatan, walaupun mereka berada. Tetapi seperti yang anda tahu, tanpa had, tidak akan ada seni. Kami mencadangkan anda menggunakan pendekatan benar-benar kreatif untuk mereka bentuk - seksyen emas. Dengan itu, anda akan dapat dengan cekap dan baik mengisi ruang kerja, tidak kira apa saiz atau laman web yang anda ditanya dalam template anda.

Bagaimana untuk meningkatkan laman web ruang kerja

Kemungkinan bahawa anda tidak akan mempunyai ruang yang cukup untuk menampung semua unsur-unsur antara muka dalam susun atur saiz kecil. Dalam kes ini, anda akan mempunyai untuk mula berfikir secara kreatif, atau lebih kreatif daripada yang anda lakukan sebelum ini.

ruang percuma sehingga maksimum di laman web yang mungkin, menyembunyikan navigasi dalam menu pop-up. Pendekatan ini adalah logik untuk menggunakan bukan sahaja mudah alih, tetapi juga pada desktop. Lagipun, pengguna tidak perlu setiap masa untuk melihat apa yang mempunyai tajuk di laman anda - ia telah datang untuk kandungan. Seorang pengguna ingin dihormati.

Contoh cara yang baik untuk menyembunyikan menu adalah susun atur berikut (gambar di bawah).

Di atas sudut merah kawasan, anda boleh melihat salib, klik pada menu yang menyembunyikan dalam ikon kecil, meninggalkan pengguna bersendirian dengan kandungan laman web.

Walau bagaimanapun, ini adalah pilihan, anda boleh meninggalkan navigasi yang sentiasa di sisi. Tetapi anda boleh menjadikannya sebagai elemen reka bentuk yang indah, bukan sahaja senarai pautan di laman web yang popular. Menggunakan ikon intuitif selain daripada teks pautan atau menggantikan mereka. Ia juga akan membolehkan laman web anda untuk penggunaan yang lebih cekap ruang skrin pada peranti anda.

Laman Web Terbaik - penyesuaian

Jika anda tidak tahu yang mana satu untuk memilih susun atur untuk laman web ini, semua hanya untuk anda. Untuk menjimatkan kos pembangunan dan pada masa yang sama tidak kehilangan penonton kerana susun atur miskin untuk beberapa peranti, menggunakan reka bentuk web responsif.

Adaptive dipanggil reka bentuk yang kelihatan pada peranti yang berbeza sama dengan baik. Pendekatan ini akan membolehkan laman web anda untuk jelas dan mudah walaupun untuk komputer riba, sekurang-kurangnya pada tablet, walaupun pada telefon pintar. Ia mencapai kesan ini adalah disebabkan oleh perubahan automatik ke kawasan kerja lebar skrin. Menggunakan lembaran gaya penyesuaian untuk laman web ini, anda mengambil keputusan yang tepat mungkin.

Apa yang membezakan reka bentuk penyesuaian adanya pelbagai versi laman web anda

reka bentuk responsif adalah berbeza daripada laman web mudah alih supaya dalam kes kedua, pengguna menerima html-kod, yang berbeza dari desktop. Ini adalah kelemahan dari sudut pandangan mengoptimumkan prestasi pelayan, serta pengoptimuman enjin carian. Di samping itu, lebih sukar ia menjadi untuk mempertimbangkan statistik mengikut versi laman web ini. Pendekatan penyesuaian adalah tidak mempunyai kelemahan.

Penyesuaian untuk peranti yang berlainan dicapai kerana lebar susun atur atau Peratusan melalui blok pengangkutan di ruang yang ada (dalam satah menegak dan bukannya telefon pintar mendatar pada desktop a), atau susun atur individu dengan mewujudkan pelbagai skrin.

Anda boleh mengetahui lebih lanjut mengenai reka bentuk responsif dan membangunkan anda dapat dari buku.