Pengguna yang mengakses Internet melalui tablet dan telefon bimbit semakin meningkat. Ini, seperti yang telah anda ketahui, bermaksud tidak cukup hanya merancang laman web yang bagus dan kelihatan baik di komputer kita: ia juga mesti dilihat pada setiap peranti mudah alih. Masalah? Ukuran dan resolusi skrin yang berbeza. Itulah sebabnya sangat sukar untuk membuat reka bentuk yang dapat disesuaikan dengan betul untuk semua media (yang terkenal reka bentuk responsif, diterjemahkan sebagai reka bentuk adaptif).
Berikut adalah beberapa petua yang perlu diingat semasa membuat reka bentuk dengan ciri-ciri ini. Beri perhatian!
Petua untuk reka bentuk adaptif
- Buat templat ringkasSecara sederhana saya tidak bermaksud hambar. Saya bercakap mengenai struktur HTML laman web anda: semakin jelas, semakin baik. Perlu diingat bahawa skrin komputer boleh memuatkan tiga lajur menegak; di skrin telefon bimbit, anda hanya akan memuatkannya. Fikirkan dan bagaimana anda akan meletakkan semula unsur-unsurnya.
- Hapuskan semua yang tidak perluElakkan kesan jQuery, animasi Flash dan kod lain yang melambatkan pemuatan halaman anda. Semakin kurang kandungan jenis ini, semakin cepat memuatkan web.
- Tentukan gaya css untuk setiap "ukuran"Buat tiny.css, small.css, dan big.css (misalnya) yang berjalan bergantung pada peranti yang dilihatnya. Sebagai contoh:
@import url (tiny.css) (lebar minimum: 300px);
@import url (small.css) (lebar minimum: 600px);
@import url (big.css) (lebar minimum: 900px);
- Resolusi yang paling banyak digunakan320px/480px/720px/768px/900px/1024px
- Jadikan templat anda FLEKSIBELBila boleh, bekerjasama dengan peratusan dan bukannya jumlah tetap. Berikut adalah beberapa kesamaan rujukan: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Tipografi lebih penting daripada sebelumnya Kadang-kadang skrin peranti anda boleh menjadi sangat kecil sehingga yang anda lihat hanyalah teks. Itulah sebabnya kita harus memilih font terbaik di laman web kita dengan berhati-hati, sehingga apabila saiznya lebih kecil, mereka tidak kehilangan keterbacaan. Di samping itu, kita harus tahu bagaimana menggabungkan fon yang lebih neutral dengan yang lain dengan keperibadian yang memberikan web watak yang diperlukan. Oleh itu, petua pertama ialah anda meluangkan masa untuk memilih fon yang akan anda gunakan.
- Usa gambar berkualiti tinggiApabila ruang dikurangkan, gambar akan menyertainya. Pilih yang tidak kehilangan kualiti apabila dikurangkan, dan yang berfungsi sama apabila skala. Imej berkualiti rendah akan menjadikan laman web anda kelihatan buruk.
- Agar gambar anda selalu dilihat penuhCegah foto anda dipotong dengan menambahkan kod img (lebar: 100%;) di css anda. Dengan cara ini, Anda menyuruh perangkat untuk menghitung ulang ketinggian yang harus diberikan pada gambar sehingga lebarnya dapat dilihat seratus persen.
- Semua rendah URL yang samaLupakan subdomain seperti www.mysite.com/mobile, kerana fail index.html yang sama di folder root akan berfungsi untuk semua peranti (jika anda melakukan reka bentuk adaptif dengan betul). Anda sudah mengetahui kelebihannya: semakin sedikit subdomain, semakin cepat muat halaman.
- Manfaatkan sokongan: Berimaginasi Tidak sama untuk mengakses laman web dari komputer desktop daripada iPad atau telefon bimbit. Dengan yang pertama, anda akan menavigasi dengan tenang dan santai. Dengan yang terakhir, anda akan melakukannya dalam waktu terbiar dan menutup tingkap sebaik sahaja anda bosan. Manfaatkan syarat-syarat ini untuk menghiburkan pengguna dan membuat mereka bersenang-senang dalam beberapa minit yang akan mereka dedikasikan kepada anda. Mungkin semasa dia pulang dia akan memutuskan untuk mengunjungi anda dengan cara yang lebih santai.
- Dapatkan inspirasi Dalam penerbitan digital, anda akan tertanya-tanya mengapa nasihat ini. Sangat mudah: majalah digital (bagus) tahu memanfaatkan sokongan dan reka bentuk mereka sangat bijak. Dapatkan inspirasi dari mereka dan buat laman web yang sukar ditinggalkan.
Maklumat lanjut - Majalah digital
air pancut - splio, 960.gs, kolum
Ada perkara yang saya sangat tidak setuju.
Pada titik 5 ... kerana 200px = 15,38% dan yang berikut ... perbandingan rujukan ini tidak dapat dibuat tanpa ukuran induk, ukuran per piksel bukanlah ukuran relatif seperti peratusan!
Tentukan gambar dengan lebar: 100% salah, saya rasa itu bukan cadangan. Imejnya lebih baik menentukannya dengan lebar dan tinggi, jadi pelayan memerlukan lebih sedikit masa untuk memproses maklumat (tidak perlu menghitung ukurannya) dan kami meningkatkan kelajuan memuatkan halaman (yang sangat penting dalam web adaptif atau responsif reka bentuk).
Saya sudah memasukkan, walaupun ini adalah tugas hidung ... gambar untuk skrin retina. Sekiranya kita ingin membuat reka bentuk web yang responsif, wajib menggunakan gambar untuk paparan retina, kerana% paparan mudah alih dan tablet yang tinggi menggunakan skrin ini. Oleh itu, tidak ada gunanya meletakkan usaha itu menjadi reka bentuk untuk mereka pada tahap minimum.
Bagus untuk yang lain
Pada titik 5, mereka meletakkan anda dalam konteks dan memberitahu anda mengenai susun atur keseluruhan 1300px dengan 3 lajur, satu dari 200, 300 dan 1000.
Sekiranya anda memberikannya kepada peratusan, dalam kes mereka adalah seperti yang anda katakan, 15,38% ((200 * 100) / 1300) (perpuluhan di bawah, sistem antarabangsa: P)
Tetapi jika kita membincangkan susun atur 500 piksel dan kita mempunyai 3 lajur, satu dari 200, satu lagi dari 200 dan satu lagi dari 100 piksel, peratusannya tidak lagi sama, dalam hal ini 200 px = 40% ((200 * 100) / 500)
Mereka adalah: 200px = 40% dan 100px = 10%
Ayuh, seperti yang saya katakan, mereka bukan rujukan yang anda nyatakan, mereka hanya rujukan pada susun atur 1300px.
berkaitan
Apa kegagalannya, anda betul-betul betul di dunia! Terima kasih sekali lagi ;)