Membuat Website Responsive dengan 3 Langkah Mudah
Saat ini, situs web tidak hanya harus terlihat bagus di layar desktop, tetapi juga di tablet dan ponsel cerdas.
Sebuah situs web responsif jika mampu beradaptasi dengan layar klien.
Desain web responsif sangat penting saat ini dan sebenarnya merupakan salah satu teknik yang perlu Anda kuasai sebagai pengembang web atau desainer web.
Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana membangun situs responsif dengan mudah dan bagaimana menerapkan teknik desain responsif pada halaman web yang ada dalam tiga langkah mudah.
Ketika membangun situs web responsif, atau membuat situs responsif, hal pertama yang harus dilihat adalah tata letaknya.
Ketika saya membangun situs web yang responsif, saya selalu memulai dengan membuat tata letak yang tidak responsif, ditetapkan pada ukuran standar. Misalnya, lebar default CatsWhoCode.com adalah 1100px.
Ketika saya senang dengan tata letak yang tidak responsif, saya menambahkan pertanyaan media dan sedikit perubahan pada CSS saya untuk membuat situs yang responsif. Ketika datang ke desain web, itu jauh lebih mudah untuk fokus pada satu tugas pada suatu waktu.
Situs Di Perangkat Seluler
Ketika Anda selesai dengan tata letak yang tidak responsif, hal pertama yang harus dilakukan adalah menempelkan baris berikut di dalam tag <head> dan </head> pada halaman HTML Anda.
<meta name = "viewport" content = "width = lebar perangkat, skala awal = 1, skala maksimum = 1, skala pengguna = tidak ada"> <meta http-equiv = "Kompatibel dengan X-UA" content = "IE = edge, chrome = 1"> <meta name = "HandheldFriendly" content = "true">
Ini akan mengatur tampilan pada semua layar pada rasio aspek 1 × 1 dan menghapus fungsi default dari iPhone dan perangkat seluler lainnya yang membuat situs web pada tampilan penuh dan memungkinkan pengguna untuk memperbesar tata letak dengan menjepit.
Sekarang saatnya untuk menambahkan beberapa pertanyaan media. Menurut situs W3C ,
Queries Media terdiri dari jenis media dan nol atau lebih ekspresi yang memeriksa kondisi fitur media tertentu. Dengan menggunakan kueri media, presentasi dapat disesuaikan dengan rentang perangkat output tertentu tanpa mengubah kontennya sendiri.Dengan kata lain, kueri media memungkinkan situs web Anda terlihat bagus di semua jenis tampilan, dari ponsel cerdas hingga layar besar. Inilah yang disebut desain web responsif .
Kueri media bergantung pada tata letak situs web Anda, jadi cukup sulit bagi saya untuk memberi Anda cuplikan kode yang siap digunakan. Namun, kode di bawah ini adalah titik awal yang baik untuk sebagian besar situs web. Dalam contoh ini, #primaryadalah area konten utama, dan #secondarybilah samping.
Dengan melihat kode, Anda dapat melihat bahwa saya menetapkan dua ukuran: Yang pertama memiliki lebar maksimum 1060px dan dioptimalkan untuk tampilan lanskap tablet. #primarymenempati 67% dari wadah induknya, dan #secondary30%, ditambah margin kiri 3%.
Ukuran kedua dirancang untuk potret tablet dan ukuran yang lebih kecil. Karena ukuran layar smartphone yang kecil, saya memutuskan untuk memberikan #primarylebar 100%. #secondaryjuga memiliki lebar 100%, dan akan ditampilkan di bawah #primary.
Seperti yang sudah saya katakan, Anda mungkin harus menyesuaikan sedikit kode ini agar sesuai dengan kebutuhan spesifik situs web Anda. Tempel di .cssfile situs Anda .
/ * Pertanyaan Media: Lansekap Tablet * /
Layar @ media dan (max-width: 1060px) {
#primary {width: 67%; }
#secondary {width: 30%; margin-kiri: 3%;}
}
/ * Pertanyaan Media: Potret Tabled * /
Layar @ media dan (max-width: 768px) {
#primary {width: 100%; }
#secondary {width: 100%; margin: 0; perbatasan: tidak ada; }
}
Setelah selesai, mari kita lihat seberapa responsif tata letak Anda. Untuk melakukannya, saya menggunakan alat luar biasa yang dibuat oleh Matt Kersley. Anda tentu saja dapat memeriksa hasilnya di perangkat seluler Anda sendiri.
2 - Media
Tata letak yang responsif adalah langkah pertama menuju situs web yang sepenuhnya responsif. Sekarang, mari kita fokus pada aspek yang sangat penting dari situs web modern: media, seperti video atau gambar .Kode CSS di bawah ini akan memastikan bahwa gambar Anda tidak akan pernah lebih besar dari wadah induknya. Ini sangat sederhana dan berfungsi untuk situs web yang paling responsif. Agar berfungsi dengan benar, cuplikan kode ini harus dimasukkan ke dalam stylesheet CSS Anda.
img {max-width: 100%; tinggi: otomatis; }
Meskipun teknik di atas efisien, kadang-kadang Anda mungkin perlu memiliki kontrol lebih besar atas gambar dan menampilkan gambar yang berbeda sesuai dengan ukuran tampilan klien.
Ini adalah teknik yang dikembangkan oleh Nicolas Gallagher . Mari kita mulai dengan html:
Cara Membuat Situs Web Responsif dalam 3 Langkah Mudah 1
Seperti yang Anda lihat, kami menggunakan data-*atribut untuk menyimpan url gambar pengganti. Sekarang, mari gunakan kekuatan penuh CSS3 untuk mengganti gambar default dengan salah satu gambar pengganti yang ditentukan jika min-device-widthkondisinya cocok:
@ media (lebar perangkat minimum: 600px) {
img [data-src-600px] {
konten: attr (data-src-600px, url);
}
}
@ media (lebar perangkat minimum: 800px) {
img [data-src-800px] {
konten: attr (data-src-800px, url);
}
}
Mengesankan, bukan? Sekarang mari kita lihat media lain yang sangat penting di situs web hari ini: video.Karena sebagian besar situs web menggunakan video dari situs pihak ketiga seperti YouTube atau Vimeo, saya memutuskan untuk fokus pada teknik video elastis oleh Nick La . Teknik ini memungkinkan Anda untuk membuat video yang tertanam responsif.
HTML:
Dan sekarang, CSS:
.video-container {
posisi: relatif;
padding-bottom: 56,25%;
padding-top: 30px;
tinggi: 0;
overflow: disembunyikan;
}
.video-wadah iframe,
.video-objek kontainer,
.video-container embed {
posisi: absolut;
atas: 0;
kiri: 0;
lebar: 100%;
tinggi: 100%;
}
Setelah Anda menerapkan kode ini ke situs web Anda, video yang disematkan sekarang responsif.3 - Tipografi
Langkah terakhir dari tutorial ini jelas penting, tetapi seringkali diabaikan oleh pengembang ketika datang ke situs web responsif: Tipografi.Sampai saat ini, sebagian besar pengembang menggunakan piksel untuk menentukan ukuran font. Meskipun piksel baik-baik saja ketika situs web Anda memiliki lebar tetap, situs web responsif harus memiliki font yang responsif. Ukuran font situs Anda harus terkait dengan lebar wadah induknya, sehingga dapat beradaptasi dengan layar klien dan mudah dibaca pada perangkat seluler.
Spesifikasi CSS3 termasuk unit baru bernama rems. Mereka bekerja hampir identik dengan emunit, tetapi relatif terhadap htmlelemen, yang membuatnya jauh lebih mudah digunakan daripada ems.
Karena remssifatnya relatif terhadap htmlelemen, jangan lupa mengatur ulang htmlukuran font:
html {ukuran font: 100%; }
Setelah selesai, Anda dapat menentukan ukuran font responsif seperti yang ditunjukkan di bawah ini:
@ media (lebar minimum: 640px) {body {ukuran font: 1rem;}}
@ media (lebar minimum: 960px) {body {ukuran font: 1.2rem;}}
@ media (lebar minimum: 1100px) {body {ukuran font: 1.5rem;}}
Untuk informasi lebih lanjut tentang remunit ini, saya sarankan Anda artikel yang bermanfaat ini . Pastikan juga untuk memeriksa panduan teknik desain web responsif ini .
Post a Comment for "Membuat Website Responsive dengan 3 Langkah Mudah"