Pengguna yang mengakses Internet melalui tablet dan ponsel semakin meningkat. Ini, seperti yang telah Anda ketahui, berarti tidak cukup hanya mendesain halaman web yang bagus dan terlihat bagus di komputer kita: halaman ini juga harus dilihat di setiap perangkat seluler. Masalah? Ukuran dan resolusi layar berbeda. Oleh karena itu, sangat sulit untuk membuat desain yang dapat beradaptasi dengan benar di semua media (yang terkenal desain responsif, diterjemahkan sebagai desain adaptif).
Berikut beberapa tip yang perlu diperhatikan saat membuat desain dengan karakteristik tersebut. Perhatian!
Kiat untuk desain adaptif
- Buat template sederhanaYang saya maksud sederhana bukan hambar. Saya sedang berbicara tentang estructura HTML situs web Anda: semakin jelas, semakin baik. Ingatlah bahwa layar komputer dapat memuat tiga kolom vertikal; di layar ponsel, Anda hanya akan muat satu. Pikirkan tentang itu dan bagaimana Anda akan memposisikan ulang elemen.
- Singkirkan semua yang tidak perluHindari efek jQuery, animasi Flash, dan kode lain yang memperlambat pemuatan halaman Anda. Semakin sedikit konten yang Anda miliki, semakin cepat web memuat.
- Tentukan gaya css untuk setiap "ukuran"Buat tiny.css, small.css, dan big.css (misalnya) yang berjalan bergantung pada perangkat tempat itu dilihat. Sebagai contoh:
@import url (tiny.css) (min-width: 300px);
@import url (small.css) (min-width: 600px);
@import url (big.css) (min-width: 900px);
- Resolusi yang paling sering digunakan320 piksel / 480 piksel / 720 piksel / 768 piksel / 900 piksel / 1024 piksel
- Jadikan template Anda FLEKSIBELKapan pun Anda bisa, bekerjalah dengan persentase, bukan jumlah tetap. Berikut adalah beberapa persamaan referensi: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Tipografi Ini lebih penting dari sebelumnya Terkadang layar perangkat Anda bisa sangat kecil sehingga yang Anda lihat hanyalah teks. Itulah mengapa kami harus memilih dengan sangat hati-hati font terbaik di situs kami, sehingga ketika ukurannya diperkecil, mereka tidak kehilangan keterbacaan. Selain itu, kita harus tahu bagaimana menggabungkan font yang lebih netral dengan yang lain dengan kepribadian yang memberikan web karakter yang diperlukan. Oleh karena itu, saran pertama adalah Anda meluangkan waktu untuk memilih font yang akan Anda gunakan.
- Usa gambar berkualitas tinggiSaat ruang berkurang, gambar akan menyertainya. Pilih yang tidak kehilangan kualitas saat dikurangi, dan yang berfungsi sama saat diskalakan. Gambar berkualitas rendah akan membuat situs web Anda terlihat buruk.
- Bahwa gambar Anda selalu terlihat penuhCegah foto Anda terpotong dengan menambahkan kode img (lebar: 100%;) di css Anda. Dengan cara ini, Anda memberi tahu perangkat untuk menghitung ulang ketinggian yang harus diberikan pada gambar sehingga lebarnya dapat dilihat seratus persen.
- Semuanya rendah URL yang samaLupakan subdomain seperti www.mysite.com/mobile, karena file index.html yang sama di folder root akan berfungsi untuk semua perangkat (jika Anda melakukan desain adaptif dengan benar). Anda sudah tahu keuntungannya: semakin sedikit subdomain, semakin cepat pemuatan halamannya.
- Manfaatkan dukungan: Jadilah imajinatif Mengakses situs web dari komputer desktop tidak sama dengan dari iPad atau ponsel. Dengan yang pertama, Anda akan menavigasi dengan tenang dan santai. Dengan yang terakhir, Anda akan melakukannya di jam-jam idle dan menutup jendela segera setelah Anda bosan. Manfaatkan kondisi ini untuk menghibur pengguna dan membuat mereka bersenang-senang dalam beberapa menit yang akan mereka persembahkan untuk Anda. Mungkin ketika dia pulang dia akan memutuskan untuk mengunjungi Anda dengan cara yang lebih santai.
- Terinspirasi Dalam publikasi digital, Anda akan bertanya-tanya mengapa nasihat ini. Sangat mudah: majalah digital (baik) tahu bagaimana memanfaatkan dukungan dan desain mereka sangat cerdas. Dapatkan inspirasi dari mereka dan buat situs web yang sulit ditinggalkan.
Informasi lebih lanjut - Majalah digital
Sumber - Terpisah, 960.gs, berbentuk kolom
Ada hal-hal yang sangat tidak saya setujui.
Pada poin 5 ... karena 200px = 15,38% dan yang berikut ... perbandingan referensi ini tidak dapat dibuat tanpa ukuran induk, ukuran per piksel bukanlah ukuran relatif seperti persentase!
Tentukan gambar dengan lebar: 100% salah, menurut saya itu bukan rekomendasi. Gambar mendefinisikannya dengan lebih baik dengan lebar dan tingginya, sehingga server membutuhkan lebih sedikit waktu untuk memproses informasi (tidak harus menghitung ukurannya) dan kami meningkatkan kecepatan memuat halaman (sangat penting dalam desain web adaptif atau responsif) .
Saya sudah memasukkan, meskipun ini adalah pekerjaan hidung ... gambar untuk layar retina. Jika kita ingin melakukan desain web yang responsif, maka wajib menggunakan gambar untuk tampilan retina, karena% tampilan seluler dan tablet yang tinggi menggunakan layar ini. Jadi tidak ada gunanya berusaha merancang untuk mereka dengan setengah bukaan gas.
Bagus untuk istirahat
Pada poin 5, mereka menempatkan Anda dalam konteks dan memberi tahu Anda tentang tata letak total 1300px dengan 3 kolom, satu dari 200, 300 dan 1000.
Jika Anda meneruskannya ke persentase, dalam kasus mereka seperti yang Anda katakan, 15,38% ((200 * 100) / 1300) (desimal di bawah, sistem internasional: P)
Tetapi jika kita berbicara tentang tata letak 500px dan kita memiliki 3 kolom, satu dari 200, 200 lainnya dan lainnya 100px, persentasenya tidak lagi sama, dalam hal ini 200px = 40% ((200 * 100) / 500)
Mereka akan menjadi: 200px = 40% dan 100px = 10%
Ayolah, seperti yang saya katakan, itu bukan referensi yang Anda tunjukkan, mereka hanya referensi pada tata letak 1300px.
salam
Sungguh gagal, Anda benar di dunia ini! Terima kasih lagi ;)