Saat ini, kebanyakan orang mengakses Internet melalui gadget seluler - tablet, ponsel, dan dalam hal ini, pengoptimalan situs web juga mencapai tingkat yang baru. Jika pengguna masuk dan melihat bahwa situs tersebut tidak dioptimalkan untuk perangkat seluler: gambar tidak dapat dilihat, tombol telah dipindahkan, font kecil dan tidak dapat dibaca, desain miring - 99 dari 100% dia akan keluar dan mulailah mencari yang lain yang lebih nyaman. Dan itu akan mencentang kotak bahwa sumber daya tidak relevan, yaitu tidak sesuai dengan permintaan pencarian. Oleh karena itu, desain halaman harus disesuaikan dengan berbagai perangkat seluler. Apa itu website versi mobile, bagaimana cara membuatnya, dan metode apa yang terbaik untuk digunakan? Baca lebih lanjut di artikel ini.

Jadi, ada empat cara utama untuk menyesuaikan situs Anda ke versi seluler.

Templat adaptif melibatkan perubahan gambar situs web bergantung pada ukuran layar. Biasanya, mereka disetel ke standar 1600, 1500, 1280, 1100, 1024, dan 980 piksel. Kueri digunakan untuk implementasi. Itu tidak mengubah dirinya sendiri.

Kelebihan metode ini antara lain:

• pengembangan yang mudah, karena strukturnya sendiri menyesuaikan dengan parameter layar, dan pembaruan apa pun tidak memerlukan pengembangan desain dari awal, cukup dengan memperbaiki CSS dan HTML;
• satu alamat URL - pengguna tidak perlu mengingat beberapa nama, tidak perlu adanya redirect (pengalihan dari satu alamat ke alamat lain), yang dapat mempersulit pekerjaan seorang webmaster, dan memudahkan mesin pencari untuk mengurutkan dan memberi peringkat sumber daya dengan satu alamat.

Tentu saja, templat adaptif juga memiliki kelemahan, yang lebih besar daripada kelebihannya. Namun demikian, banyak pengembang yang menganut konsep khusus ini, misalnya Google Corporation, yang situs versi selulernya memiliki desain responsif. Jadi, kekurangannya:

• Desain responsif tidak mendukung tugas yang sama di perangkat seluler seperti di desktop. Misalnya, jika ini adalah versi seluler dari situs web bank, di mana pengguna kemungkinan besar memerlukan informasi tentang nilai tukar atau ATM terdekat, maka desain ini sudah cukup. Namun jika ini adalah sumber daya terstruktur yang kompleks dengan banyak bagian dan subbagian, maka pengunjung tidak akan menyukainya.
• Pemuatan yang lambat mengubah situs favorit Anda menjadi situs yang dibenci. Hal ini terutama berlaku untuk sumber daya yang memiliki banyak animasi, video, pop-up, dan elemen aktif lainnya. Karena bobotnya yang besar, halaman akan “melambat”, pengguna akan marah dan pergi, dan posisi pencarian situs akan turun.
• Ketidakmampuan untuk menonaktifkan versi seluler merupakan kelemahan signifikan lainnya. Jika suatu elemen disembunyikan oleh tata letak seperti itu, Anda tidak dapat melakukan apa pun untuk membukanya, tidak seperti situs tempat Anda dapat menonaktifkannya dan beralih ke domain biasa.

Namun demikian, versi seluler situs tersebut dengan cepat, tanpa keahlian dan biaya khusus, memungkinkan Anda menyesuaikan sumber daya untuk gadget apa pun. Namun, mengingat kekurangan yang tercantum, ini cocok untuk sumber daya yang kecil dan sederhana dengan informasi dan multimedia yang minimal, tanpa navigasi dan animasi yang rumit. Untuk situs yang kompleks, 2 metode lain cocok.

Cara ini sangat umum dan sering kali berhasil membuat situs menjadi lebih ramah pengguna di perangkat seluler. Esensinya adalah membuat versi halaman terpisah, dirancang untuk aplikasi dan terletak di URL atau subdomain terpisah, misalnya m.vk.com. Pada saat yang sama, fungsi utama dipertahankan, desain situs terlihat berbeda. Keuntungan dari metode ini sangat jelas:

• antarmuka pengguna yang nyaman;
• mudah untuk mengubah dan mengedit, karena versinya ada secara terpisah dari sumber daya utama;
• karena bobotnya yang rendah, versi situs yang terpisah bekerja jauh lebih cepat daripada templat adaptif;
• Paling sering dimungkinkan untuk beralih ke versi utama halaman dari versi seluler.

Namun hal ini bukannya tanpa kelemahan:

• Beberapa alamat - versi desktop dan seluler situs. Bagaimana cara membuat pengguna mengingat dua opsi? Web master sering kali berpindah dari versi desktop ke versi seluler, tetapi jika halaman ini tidak ada di versi seluler, pengguna akan menerima pesan kesalahan. Di sini timbul kesulitan dengan mesin pencari, yang merasa sulit untuk menentukan peringkat 2 sumber daya yang identik, dan ini secara langsung mempengaruhi promosi.
• Versi seluler situs dari komputer, jika pengguna tidak sengaja mengaksesnya, akan terlihat konyol, yang juga dapat memengaruhi lalu lintas.
• Versi ini seringkali sangat disederhanakan, yaitu versi desktop, sehingga pengguna akan menerima fungsionalitas yang sangat terbatas. Namun pada saat yang sama, jika ada yang kurang, pengunjung dapat membuka halaman versi lengkap.

Secara umum, situs seluler terpisah dapat dibenarkan dan merupakan cara paling umum untuk mengadaptasi sumber daya untuk perangkat seluler. Ini populer di kalangan toko online besar seperti Amazon.

Mesin pencari Google secara aktif mendukung arah desain seluler ini. Ini adalah metode yang paling sulit, mahal, namun efektif dalam mengadaptasi situs web untuk ponsel atau tablet. Namanya RESS. Ini menargetkan sumber daya ke dalam aplikasi seluler yang dapat diunduh untuk setiap perangkat secara terpisah. Untuk Android - dari GooglePlay, dan untuk Apple - dari iTunes.

Aplikasi semacam itu cepat, gratis, nyaman, dan memiliki kemampuan untuk menampung berbagai jenis informasi, sementara memori telepon dan lalu lintas Internet tidak habis sebanyak saat mengunjungi situs melalui browser. Mereka mudah diakses, karena tautannya akan selalu ada di layar, dan tidak perlu memasukkan nama yang rumit ke bilah alamat browser.

Tentu saja ada juga kekurangannya di sini, seperti kompleksitas dalam pengembangan, biaya tenaga kerja yang tinggi untuk programmer dalam jumlah besar, dan kebutuhan untuk membuat beberapa pilihan tata letak. Terkadang perangkat seluler tidak dikenali oleh aplikasi. Dukungan teknis reguler dan perbaikan bug diperlukan. Namun demikian, opsi ini dianggap yang terbaik dari tiga opsi yang diusulkan karena pengoperasiannya yang produktif dan tidak terputus.

Semua metode di atas memerlukan, meskipun tidak selalu panjang dan rumit, namun tetap dibayar pekerjaan untuk webmaster. Jika Anda tidak melihat adanya kebutuhan mendesak untuk pengembangan tersebut, versi seluler sederhana dan gratis dari situs ini cocok untuk Anda. Apa cara termudah untuk melakukannya?

Unduh template khusus (plugin) untuk desain responsif. Misalnya WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile dan lain-lain. Mereka akan membantu Anda menampilkan situs dengan lebih benar di ponsel Anda, dan Anda akan menerima beberapa tip tentang apa yang perlu diperbaiki agar lebih menyesuaikan halaman dengan versi seluler.

Tentu saja, metode ini sepertinya tidak cocok untuk sumber daya yang serius. Sebaliknya, fitur gratis ini ditujukan untuk situs, blog, dan feed berita kecil dan sederhana. Kita juga tidak boleh lupa bahwa mesin pencari Google, seperti Yandex, saat ini sangat menuntut versi seluler, sehingga ada kemungkinan besar menurunkan peringkat Anda menggunakan metode ini.

Dengan metode ini, kemungkinan besar iklan dan spanduk pop-up akan terpotong, tetapi halaman akan dimuat dengan cepat dan tanpa jeda.

Tidak masalah apakah situs versi seluler dibuat secara gratis atau dengan bantuan staf webmaster, apakah dibuat menggunakan sistem RESS atau menggunakan template adaptif. Yang paling penting adalah agar dapat bekerja secara efektif, beberapa prinsip yang sangat penting harus dipatuhi. Jadi, seperti apa seharusnya versi seluler situs tersebut? Bagaimana cara menjadikannya produktif, efisien dan produktif?

Minimalisme adalah hal yang harus diperjuangkan oleh pengembang situs web versi seluler. Bayangkan betapa sulitnya memahami informasi yang penuh warna, tombol, spanduk, dan yang harus Anda telusuri tanpa henti untuk mencari materi yang tepat. Desain ponsel harus sederhana dan bersih. Pilih 2-3 warna untuk membagi ruang (misalnya yang bermerek). Lebih baik jika salah satunya berwarna putih. Bagilah ruang layar kecil menjadi area yang jelas dan mudah dibaca. Kunci virtual harus terlihat sehingga pengguna mengetahui dengan jelas di mana harus menekan dan melihat - ini produknya, ini formulir pengisian datanya, ini informasi pengiriman dan pembayarannya.

Semua opsi tambahan yang berguna dalam versi desktop dan membuat hidup lebih mudah bagi pengguna hanya akan membawa komplikasi di sini. Tinggalkan hanya elemen yang paling penting saja. Animasi, banner iklan, dan multimedia kemungkinan besar hanya akan memperlambat pengoperasian website atau aplikasi dan mengalihkan perhatian dari hal utama.

Masalah penyelarasan juga tidak kalah mendesaknya, karena jika dilakukan secara tidak benar, pengguna hanya akan menerima akhiran kata-kata penting. Secara umum diterima untuk menyelaraskan ke kiri dan vertikal. Bayangkan menelusuri feed berita di ponsel Anda. Anda melakukan ini dari atas ke bawah, tetapi tidak ke kiri atau kanan.

Jika tidak ada kemungkinan terjadinya rantai transisi yang panjang, coba gabungkan beberapa langkah menjadi satu. Misalnya, sebuah situs memerlukan memasukkan data dalam beberapa tahap - nama, lalu alamat, di mana di setiap sel terdapat rumah, jalan, apartemen, dll. Agar tidak memaksa pengguna untuk mencoba masuk ke banyak sel kecil sel, minta dia untuk mengisi hanya 2 - nama dan alamat.

Terkadang, sebaliknya, terlalu banyak informasi perlu dipisahkan. Misalnya, di menu drop-down Anda memiliki daftar lebih dari 80 kota tempat pengiriman dilakukan. Kelompokkan berdasarkan wilayah sehingga pengguna tidak perlu menelusuri daftar besar ini. Saat dia menggerakkan kursor ke pusat atau wilayah regional, daftar kota lainnya akan muncul.

Ngomong-ngomong, tentang daftarnya. Ada dua di antaranya - ditetapkan dalam urutan abjad atau lainnya dan dengan substitusi. Pilihan mereka tergantung pada apa yang akan dicantumkan.

Memperbaiki nyaman jika pengguna tahu persis apa yang dia cari. Misalnya kota, nomor atau tanggal. Opsi kedua cocok untuk nama yang panjang dan rumit atau untuk kasus di mana terdapat banyak variasi nama yang sama, dan masing-masing variasi membawa pengguna selangkah lebih dekat ke tujuan. Opsi substitusi otomatis lebih sering digunakan ketika pengunjung membutuhkan bantuan. Misalnya, situs web merajut menawarkan untuk membeli jarum rajut. Pengguna memasukkan permintaan pencarian "Jarum rajut logam", dan dalam petunjuk dia melihat "Jarum rajut 5 mm", "Jarum rajut 4,5 mm", dll.

Poin ini terutama berlaku untuk situs tempat mereka menjual sesuatu secara online, dan Anda harus mengisi formulir standar untuk pembayaran, pengiriman, dll. Jika seseorang melakukan pembelian dari ponselnya, kemungkinan besar dia tidak punya waktu untuk membuka komputer , artinya proses pembelian harus dilakukan secepat dan senyaman mungkin.

Untuk melakukan ini, formulir mungkin berisi data yang sudah diisi; Anda dapat menggunakan jawaban yang paling populer. Misalnya masukkan tanggal hari ini, metode pembayaran tunai, kota, jika Anda bekerja di wilayah yang sama. Mereka dapat diubah, tetapi jika Anda mencapai target, waktu pengguna akan dihemat.

Saat membuat desain situs versi seluler, ingatlah bahwa ponsel setiap orang berbeda, begitu pula visi mereka. Situs Anda mungkin dilihat di layar kecil, jadi font harus sederhana dan mudah dibaca, tombol harus cukup besar untuk diklik tanpa dibawa ke halaman lain, dan gambar harus terbuka secara terpisah dan berukuran besar, terutama jika berhubungan dengan Internet -. toko.

Ketika berbicara tentang mengadaptasi situs web ke perangkat seluler, kita tidak bisa tidak menggunakan statistik untuk memahami betapa pentingnya proses ini untuk promosi online.

Jumlahnya adalah sebagai berikut. Saat ini, 87% penduduk menggunakan gadget, kecuali anak-anak bungsu dan beberapa orang lanjut usia. Para ekonom memperkirakan perdagangan seluler akan tumbuh 100 kali lipat dalam 5 tahun ke depan. Namun, hanya 21% situs yang diadaptasi untuk bekerja dengan perangkat seluler. Artinya lalu lintas internet dan pasar e-commerce hanya ditempati oleh seperlima kecil saja.

Pikirkan tentang angka-angka ini. Apakah masuk akal untuk menyesuaikan sumber daya Anda? Tentu saja ya. Selain itu, meskipun ada begitu banyak ruang kosong di pasar ini, Anda dapat membuat segmen Anda sendiri di dalamnya.

Menggunakan versi seluler disarankan untuk platform apa pun yang ingin mendapatkan peringkat tinggi. Bagaimanapun, ini berdampak langsung pada pengguna, menciptakan kondisi nyaman baginya untuk tetap berada di situs Anda.

Yang berikut ini tidak akan ada tanpa versi seluler:

• portal berita, karena ini adalah apa yang kebanyakan orang lihat dari ponsel mereka dalam perjalanan ke tempat kerja atau sekolah;
• jejaring sosial - untuk alasan yang sama, ditambah lagi ada faktor komunikasi online, yang berarti obrolan yang nyaman dan dapat dimengerti harus dibuat untuk ini;
• buku referensi, situs dengan navigasi, dll., tempat orang berpaling ketika mencari sesuatu;
• toko online adalah peluang untuk menarik pelanggan yang tidak membuang waktu berbelanja, tetapi membeli semuanya melalui Internet seluler.

Saat ini, teknologi seluler berada dalam tahap pertumbuhan dan perkembangan aktif, oleh karena itu, dalam upaya untuk menjadi pemimpin pasar, perusahaan mana pun harus memastikan bahwa sumber daya Internetnya memenuhi persyaratan. Karena meningkatnya permintaan pengguna, situs web harus terus dimodernisasi dan disesuaikan untuk perangkat yang berbeda. Jelas bahwa jika seseorang merasa tidak nyaman berada pada sumber daya tertentu, dia tidak dapat memperoleh informasi tentang suatu produk atau harga di sana, melakukan pemesanan, mencari tahu tentang pengiriman, maka dia akan menemukan situs di mana semua ini menjadi mungkin. Oleh karena itu, untuk memenangkan persaingan, penting untuk memiliki sumber daya yang fleksibel, nyaman, fungsional dan menarik.

Versi seluler situs Android atau iOS akan membantu Anda melakukan ini. Untuk melakukan ini, Anda harus memilih salah satu metode desain ulang di atas - templat adaptif, membuat situs baru di subdomain dan memindahkannya dengan mengalihkan, menggunakan templat gratis, atau membuat aplikasi seluler yang dapat digunakan pengguna untuk masuk dengan lebih nyaman dan tetap di halaman.

Semua orang membicarakan tentang desain web responsif. Namun apakah ini berarti semua orang memahami tujuannya?

Desain responsif bukan hanya tentang mengembangkan situs web untuk perangkat seluler, tetapi tentang mengadaptasi tata letak ke berbagai ukuran layar (viewports).

Dalam tutorial ini, kita akan melihat prinsip dasar di balik desain web responsif untuk lebih memahami teknik ini. Selanjutnya, kita akan membuat situs web responsif yang dapat diskalakan dengan sempurna pada layar besar dan kecil. Desain web responsif telah menjadi sangat populer karena semakin banyak orang yang menggunakan perangkat seluler seperti iPhone, iPad, BlackBerry, serta ponsel cerdas dan tablet berkemampuan internet lainnya.

Penting untuk dipahami bahwa situs tidak boleh dibuat untuk desktop atau perangkat seluler tertentu. Yang penting di sini adalah kemampuan tata letak untuk beradaptasi dengan ukuran yang berbeda.

Frustrasi pengguna

Beberapa orang menganggap wajar jika pengguna mengurangi fungsionalitas dan menghilangkan konten yang mereka anggap tidak penting. Namun bagaimana Anda bisa yakin bahwa informasi yang Anda potong atau pindahkan ke halaman sekunder bukanlah konten yang paling penting bagi saya?!

Pertama, Anda perlu memahami bahwa desain responsif bukan hanya tentang desain seluler. Kedua, mengembangkan website responsif yang baik membutuhkan banyak waktu dan tenaga, bukan hanya bantuan media queries. Dengan jumlah perangkat web yang sangat besar dan terus bertambah, sangat penting untuk memberikan kesempatan pada situs web Anda untuk memfasilitasi pengalaman pengguna secara efektif.

Untuk website responsive, kita bisa menggunakan kode yang sama baik untuk desktop maupun mobile. Ini nyaman karena kita tidak perlu menyesuaikan konten secara terpisah untuk setiap perangkat. Namun banyak situs menyembunyikan kontennya karena dianggap tidak diperlukan oleh pengguna seluler. Ada dua masalah dengan ini:

• Pertama, ini secara efektif memberikan sanksi kepada pengguna seluler yang menjelajahi situs.
• Kedua, gaya tersembunyi di CSS tidak berarti konten tidak dapat dimuat. Hal ini dapat berdampak besar pada efisiensi, terutama bagi mereka yang konektivitasnya buruk.

Oleh karena itu, pendekatan terbaik dalam desain situs web adalah dengan mempertimbangkan desain perangkat seluler atau kecil terlebih dahulu. Dengan cara ini, Anda dapat fokus pada informasi terpenting yang perlu disampaikan oleh situs web Anda. Dan kemudian, jika perlu, Anda dapat menggunakan metode pemuatan bersyarat, di mana kisi tata letak, gambar besar, dan kueri media ditempatkan di atas desain layar kecil yang ada.

Panduan langkah demi langkah

Untuk tutorial ini, kami membuat situs web yang berskala sempurna antara layar besar dan kecil. Anda menyimpan semua konten, di semua ukuran layar. Dan dengan menggunakan kueri media, navigasi akan dialihkan dari tampilan horizontal ke vertikal untuk perangkat yang lebih kecil.

Elemen kunci fleksibilitas dalam desain responsif adalah lebar tata letak yang dapat disesuaikan. Yang perlu Anda lakukan hanyalah membuat lebar pembungkus, konten, dan kolom yang akan beradaptasi dengan lebar perangkat yang berbeda. Hal ini bukanlah hal yang baru, namun saat ini hal ini lebih penting daripada sebelumnya. Untuk mempermudah, kami akan membuat halaman lancar yang terdiri dari navigasi, gambar utama, dan dua kolom yang memperhitungkan penempatan akun pada perangkat dengan ukuran berbeda. Kami juga menyertakan respond.min.js, yang memungkinkan kueri media berfungsi di IE6-8.

Struktur HTML dasar:

Demo situs responsif

• Gulir ke konten

• Rumah
• Membeli
• Melayani
• Kontak

Sejarah model Mercedes SL dimulai pada tahun 1954 - saat itulah Jerman menghadirkan Mercedes 190 SL dua pintu di New York Auto Show. Bisa dibayangkan betapa terkejutnya para pengunjung pameran motor saat itu. Di bawah bodi keindahan menawan terdapat platform pendek dari sedan Mercedes W120 Ponton dan monocoque baja. Suspensinya sepenuhnya independen - dengan double wishbone di depan dan poros ayun di belakang. Panjang - 4290 mm, jarak antar gandar - 2400 mm.

Terkait CSS, menyetel lebar maksimal adalah ide yang bagus; ini akan menghentikan penskalaan situs di layar besar, namun tidak akan menghentikan penyusutan halaman. Salah satu masalah utama saat beralih dari lebar tetap ke lebar lancar adalah gambar. Di CSS, ada solusi sederhana untuk masalah ini. Cukup atur lebar gambar menjadi 100%. Mari tambahkan juga otomatis untuk tinggi gambar guna menghindari gambar tergencet di Opera dan Safari pada layar kecil:

/* Tata letak */ #wrapper ( lebar: 96%; lebar maksimal: 920 piksel; margin: otomatis; padding: 2%; ) #main ( lebar: 60%; margin-kanan: 5%; float: kiri; ) samping ( lebar: 35%; float: kanan; ) /* Logo H1 */ header h1 ( tinggi: 98px; lebar: 216px; float: kiri; tampilan: blok; latar belakang: url(images/sllogo.png) 0 0 tidak- ulangi; indentasi teks: -9999px; ) /* Navigasi */ navigasi header ( float: kanan; margin-atas: 40px; ) navigasi header li ( tampilan: inline; margin-kiri: 15px; ) navigasi header ul li a ( dekorasi teks:tidak ada; warna:#333;) #skipTo ( tampilan: tidak ada; ) #skipTo li ( latar belakang: #ccc; ) /* Gambar utama*/ #banner ( float: kiri; margin-bawah: 15 piksel; lebar : 100%; ) #banner img ( lebar: 100%; tinggi: otomatis; )

Gambar Anda akan muncul pada elemen induknya dengan lebar penuh, dan akan menyusut seiring dengan itu. Pastikan saja lebar maksimum gambar tidak melebihi lebar maksimum wadahnya.

Menggunakan gambar berukuran besar dapat memengaruhi waktu pemuatan. Jadi untuk layar yang lebih kecil, terdapat metode gambar responsif yang mendeteksi ukuran layar pengguna dan menghasilkan gambar yang lebih kecil/besar tergantung kebutuhan. Cara ini masih sulit disebut ideal, namun tetap patut dipertimbangkan.

Ganti navigasi utama

Alasan utama mengapa Anda perlu mengubah navigasi adalah karena minimisasi yang terjadi, yang dapat membuat tombol tidak terbaca dan sulit untuk diklik. Menggunakan metode ini akan membuat hidup pengguna lebih mudah. Anda juga akan melihat dalam kode bahwa kami telah membuat perubahan pada bagian #main dan samping untuk menggabungkannya menjadi satu kolom.

/* Kueri media */ @media screen and (max-width: 480px) ( #skipTo ( display: block; ) navigasi header, #main, side ( float: left; clear: left; margin: 0 0 10px; width : 100%; ) navigasi header li ( margin: 0; latar belakang: #ccc; tampilan: blok; margin-bawah: 3px; ) navigasi header a ( tampilan: blok; padding: 10px; perataan teks: tengah; )

Anda akan melihat bahwa pada beberapa perangkat seluler, situs web Anda akan secara otomatis menyusut agar sesuai dengan layar. Poin ini menjadi masalah ketika kita perlu memperbesar ukuran layar untuk menavigasi konten yang tidak nyaman.

Agar pertanyaan media dapat diterapkan sepenuhnya, situs responsif yang dioptimalkan untuk seluler harus berisi sesuatu seperti berikut:

Properti width bertanggung jawab atas ukuran viewport. Ini dapat diatur ke jumlah piksel tertentu, lebar=960, atau ke nilai lebar perangkat, yaitu lebar layar dalam piksel pada skala 100%. Properti skala awal mengontrol skala saat halaman pertama kali dimuat. Properti skala maksimum, skala minimum, dan dapat diskalakan pengguna mengontrol bagaimana pengguna dapat menskalakan halaman (lebih besar/lebih kecil).

Dari penulis: Desain situs web responsif adalah pendekatan desain baru yang semakin mendapat perhatian, namun mengingat betapa berbedanya metode ini dengan metode pengembangan tradisional, hal ini pada awalnya tampak sangat sulit bagi perancang dan pengembang web baru. Pada artikel ini, saya akan membahas beberapa poin terpenting terkait pengembangan dan penerapan desain web responsif dan membuat hidup Anda sedikit lebih mudah, teman-teman.

Pendekatan klasik untuk membuat situs web terlihat seperti ini: blok pengembangan, blok desain web, blok tata letak, dll. Namun, dalam beberapa tahun terakhir, semuanya mulai berubah secara dramatis: istilah “desain web” secara bertahap memudar, sementara “desain adaptif” secara diam-diam memperkuat posisinya, secara bertahap membuat perubahan dalam kesadaran para spesialis.

Pada umumnya, desain web tidak boleh dianggap begitu jelas, dan pesatnya perkembangan desain adaptif, yang hampir dianggap sebagai standar industri, telah melibatkan berbagai alat dan platform.

“Apa itu desain responsif dan beradaptasi dengan apa?” - orang yang bodoh mungkin bertanya. Saya akan menjawab Anda: untuk jenis perangkat yang digunakan. Desain responsif memastikan tampilan halaman web yang baik di berbagai gadget yang terhubung ke Internet.

Situs web yang sama akan terlihat bagus di laptop, ponsel cerdas, tablet, dll., apa pun format layar dan resolusi yang digunakan. Pada saat yang sama, pengguna juga harus nyaman melihat halaman web dalam semua format, tanpa perlu, misalnya, memperluas blok individual agar tidak melewatkan tombol yang diinginkan.

Karena kenyataan bahwa setiap proyek adaptif bersifat individual dan berulang, cukup sulit untuk menganalisis semua prosesnya guna memberikan solusi untuk semua kesempatan dan meningkatkan efisiensi kerja. Namun, ada strategi dan teknik umum yang berhasil untuk menerapkan, meningkatkan, dan membuat desain situs web responsif yang dapat diterapkan di hampir semua situasi.

Strategi pengembangan ini diusulkan pada tahun 2009 oleh Luke Wroblewski, penulis buku dan artikel tentang desain web, kepala jejaring sosial Bagcheck, yang diakuisisi oleh Twitter Inc. hanya 9 bulan setelah pembuatannya.

Pendekatan Luke Wroblewski terhadap pengembangan disebut "Mobile First" karena tiga alasan:

lingkungan seluler memungkinkan Anda untuk fokus dan menghilangkan kekacauan yang terjadi karena "mengacaukan" sejumlah besar ruang di layar;

Pasar seluler cenderung berkembang dengan sangat cepat;

Lingkungan seluler dikaitkan dengan banyak kemungkinan (kamera, gerakan multi-sentuh, GPS, akselerometer, geolokasi).

Sejak itu, desain web terus beralih ke pendekatan ini. Banyak perancang web dan pengembang web pertama-tama berpikir tentang cara membuat desain responsif untuk situs versi seluler, dan kemudian terlibat dalam pengembangan desktop.

Strategi "Mobile First" dimulai dengan membuat struktur dan konten versi seluler yang berfungsi di lingkungan internet berkecepatan rendah dan bergerak menuju breakpoint yang lebih besar dengan koneksi yang lebih cepat, sekaligus meningkatkan dan mengoptimalkan versi ringan.

Tren dan pendekatan modern dalam pengembangan web

Pelajari algoritme untuk pertumbuhan pesat dari awal dalam pembuatan situs web

Hal ini memastikan pengoperasian semua jenis perangkat yang inovatif dan efisien. Pengembang situs web fokus pada kebutuhan pengguna, membuat halaman yang dioptimalkan dan berkecepatan tinggi, serta memperhatikan konten penting. Omong-omong, bahkan Google menggunakan pendekatan “Mobile First”.

Tujuan pembuatan desain responsif adalah untuk memberikan kegunaan terbaik dalam konteks apa pun. Ini adalah peluang bagus untuk menganalisis konten dan membuatnya mudah diakses dan dibaca di semua jenis perangkat.

Banyak orang yang tidak menggunakan strategi Mobile First lebih memilih strategi Content First. Tentu saja ini adalah hal yang benar untuk dilakukan, namun Anda tidak boleh menganggap panggilan ini secara harfiah dan berpikir bahwa Anda tidak boleh mulai mengembangkan desain sampai semua konten siap.

Konten harus terus dibuat dan didiskusikan baik pada tahap pembuatan desain website responsif maupun setelah selesai! Seperti yang dikatakan desainer terkenal Cennydd Bowles, “desain dan konten harus berjalan seiring.” Mereka harus saling melengkapi.

Strategi “Struktur konten yang diutamakan” adalah masalah yang sama sekali berbeda. Pertama-tama, Anda harus memahami dengan jelas misi situs tersebut, apa yang ingin disampaikannya kepada dunia. Dan baru kemudian dengan hati-hati mempertimbangkan struktur isinya, metode pembuatan, jenis dan tujuan setiap elemen, sementara pengguna harus diutamakan.

Anda harus memiliki strategi yang akan memastikan bahwa Anda menyediakan konten yang diperlukan setiap pengguna di setiap tahap perjalanan mereka di sumber daya Anda. Struktur situs harus didasarkan pada penelitian terhadap perilaku dan kebutuhan audiens target Anda.

Jika Anda menyusun konten dengan baik pada tahap awal pengembangan situs web, Anda dapat dengan mudah mentransfernya ke platform dan perangkat lain di masa mendatang. Tentunya tidak ada salahnya jika contoh desain responsif menjadi referensi referensi Anda.

Memutuskan resolusi apa yang akan digunakan untuk desain adaptif harus dimulai dengan membuat sketsa tata letak yang terorganisir, yang akan mudah untuk diukur di masa depan.

Beragamnya perangkat dengan kemampuan, resolusi, dan ukuran layarnya berarti banyaknya tata letak. Membuat sketsa akan meletakkan dasar bagi prototipe proyek di masa depan. Dengan bantuannya, Anda dapat mengemukakan berbagai ide untuk didiskusikan, membuat sketsa kasar yang akan menjadi dasar kerangka situs.

Setelah sketsa siap, Anda dapat melanjutkan ke pembuatan versi draf situs atau template HTML yang berfungsi. Proses ini disebut pembuatan prototipe, dan melibatkan desain visual minimal untuk meningkatkan interaksi dan fungsionalitas.

Strategi ini akan membantu Anda memikirkan kembali seluruh pendekatan Anda dalam menciptakan desain responsif. Daripada mengembangkan “situs seluler” dan “situs web”, Anda kini akan fokus pada pengembangan sistem yang fleksibel dengan serangkaian aturan yang menentukan bagaimana konten dikirimkan dan disampaikan berdasarkan konteks.

Saya harap artikel ini bermanfaat bagi desainer web berpengalaman dan pemula.

Dan terakhir, kata perpisahan tradisional: jadikan situs ini bermanfaat, nyaman, dan familier, apa pun perangkat yang digunakan untuk melihatnya. Sampai jumpa lagi, teman-teman!

P.S.: apakah Anda sudah berlangganan pembaruan blog kami?

Tren dan pendekatan modern dalam pengembangan web

Pelajari algoritme untuk pertumbuhan pesat dari awal dalam pembuatan situs web

Kehadiran desain adaptif adalah suatu keharusan - kehidupan telah membuktikan hal ini; tidak ada Mobile Joomla yang memberikan efek seperti adaptasi situs web langsung. Hari ini saya akan memberi tahu Anda cara membuat desain responsif dengan mengedit gaya CSS menggunakan kepala dan jari Anda. Tidak mungkin menjelaskan semuanya secara detail, karena setiap template memiliki nuansa, tetapi saya akan memberikan dorongan untuk mulai beradaptasi.

Pertama, kami mengadaptasinya untuk desktop. Ini adalah tahap dasar, dari mana tarian dengan rebana dimulai. Banyak orang yang salah memahami dunia, berpikir bahwa mereka tidak memiliki masalah dalam menampilkan situs di komputer biasa, karena seseorang telah membuat template, dan pada resolusi normal terlihat mulus. Dengan resolusi monitor anda ya, tapi bagaimana dengan di layar yang lebih besar, bagaimana tampilannya dengan absolute dan pixel di layar dengan resolusi 1920x1080? Tujuan mengadaptasi desain adalah untuk menampilkan situs secara normal di perangkat seluler dan menghindari masalah di layar besar.

Apa yang kita lakukan? Yang utama adalah mengonversi semua nilai besar di template CSS dari piksel (px) menjadi persentase (%). Ada beberapa aturan di sini:

Sedikit untuk pemahaman umum. Anda memiliki situs web dengan lebar halaman 1000 px, memiliki tiga blok - pusat 800 px dan dua sidebar samping 100 px. Artinya setelah diganti dengan persentase, ukuran halaman akan menjadi 100%, wadah tengah menjadi 80%, dan blok samping menjadi 10%. Kasar, tapi bisa dimengerti. Sekarang sedikit lebih spesifik.

Sebelum adaptasi (saya menyimpan file CSS lama untuk sejarah), wadah utama ditulis dengan gaya seperti ini:

#container(margin:0 otomatis;lebar:1100px; …

Setelah adaptasi menjadi seperti ini:

#container(margin:0 auto;width:77%;overflow: tersembunyi !penting; …

Menu teratas telah berubah dari:

Menu atas>ul>li ul(lebar:155px; …

Menu atas>ul>li ul(lebar:90%; …

Dan offset blok konten diimplementasikan dengan:

#konten(margin:0 220 piksel; …

#konten(margin:0 20% …

Perhatikan kodenya:

overflow: tersembunyi! Penting;

Kami menggunakannya untuk menonaktifkan pengguliran horizontal, ini berguna untuk adaptasi seluler; terkadang masuk akal untuk hanya menunjukkan larangan pengguliran horizontal menggunakan:

overflow-x: tersembunyi !penting;

Lakukan semua pekerjaan melalui Firebug atau inspektur Google, periksa dengan mata Anda - situs akan terlihat sama setelah mengonversi px ke%. Anda tidak perlu mengecilkan layarnya; kami belum sampai pada tahap adaptasi seluler, namun kami telah melakukan pekerjaan dasar untuk layar besar.

Basis data telah dibuat, ini adalah tahap yang paling sulit; sekarang kita perlu memastikan bahwa situs tersebut ditampilkan dengan benar di semua perangkat seluler. Ada beberapa manipulasi sebelumnya, karena tidak mungkin mengompresi semuanya menjadi persentase untuk layar kecil. Setuju, mustahil melihat sitebar selebar 10% di smartphone dengan resolusi 320 px.

Kita perlu menggunakan layar @media dan yang membuat perubahan gaya untuk perangkat dengan resolusi tertentu. Saya pertama kali menentukan dengan memperkecil layar browser pada resolusi apa saya mengalami masalah tampilan. Dengan mempersempit layar, saya menemukan titik "kelengkungan" saya, itu dimulai dengan lebar 1000px, yang berarti Anda perlu mendaftarkan gaya seluler utama dari sini - segala sesuatu yang akan ditampilkan lebih banyak dalam gaya desktop biasa, dan lebih sedikit dalam gaya terpisah.

Saya menulis CSS untuk perangkat seluler pada template Joomla 1.5 seperti ini:

@media screen dan (max-width:500px)(body, tbody(-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;)

@layar media dan (lebar maksimal:400px)(td(word-break:break-all;)

@layar media dan (lebar maksimal:1000px)(td(word-break:break-all;).nomor halaman, #footer, #navigasi, #header,.logo,.nav-box (tampilan: tidak ada !penting ;) #content (posisi: otomatis; lebar: 80%;margin-bawah: 0;margin-kiri: 10%;margin-kanan: 20%;) #container ( lebar: 90% !penting;).kotak konten (lebar:110%).kotak konten h1 (ukuran font: 130%;).kotak konten h2 (ukuran font: 110%;).kotak konten h3 (ukuran font: 120%;).konten -box h4 (ukuran font: 100%;) .top-menu>div (padding-kanan: 0px !important;) img(max-width:96% !important;height:auto !important;)

Beberapa hal spesifik pada kode.

Jika lebar layar kurang dari 1000 piksel, bilah situs samping, header, penomoran halaman, dan footer berhenti ditampilkan. Menurut pendapat saya, mereka tidak diperlukan dalam versi seluler. Inilah yang dilakukan kode tersebut:

Nomor halaman, #footer, #navigasi, #header,.logo,.nav-box (tampilan: tidak ada !penting;).

Secara default, di perangkat seluler Joomla 3 dan yang lebih tinggi, blok samping turun, membentangkan halaman hingga mencapai titik yang memalukan, sehingga bahkan pada mesin baru Anda dapat mengubah beberapa hal secara manual.

Nilai lain juga ditunjukkan untuk blok wadah utama dan jendela konten, dan keluaran H1-H4 diubah menjadi persentase (piksel cocok untuk saya untuk desktop). Koreksi juga telah dilakukan pada keluaran menu atas (untungnya perlu diminimalkan, tetapi ini tidak kritis dan saya akan melakukannya nanti) dan tampilan gambar telah diubah:

img(lebar maksimal:96% !penting;tinggi:otomatis !penting;).

Bagi mereka, diindikasikan bahwa ukuran lebar gambar maksimum adalah 96% (dengan lekukan yang indah), dan tingginya diatur secara otomatis.

Spesifiknya sudah selesai, sekali lagi dalam pengertian umum mengadaptasi website (desain) melalui CSS.

Melalui layar @media dan pastikan untuk menutup blok tampilan yang tidak diperlukan untuk seluler, tetapi konversikan ke % nilai-nilai yang ditampilkan secara tidak benar, karena dibiarkan dalam piksel di CSS versi desktop.

Hasilnya, pengalaman pengguna saat bekerja dengan Joomla Mobile adalah 65-70%, dengan desain adaptif menggunakan CSS menjadi 99%. Kesimpulannya jelas: Yandex dan Goole tidak diuji kemampuan beradaptasinya, tetapi sekarang mereka lulus dengan sukses.

Terjemahan artikel yang sangat berharga “Teknik, Alat, dan Strategi Desain Web Responsif” dari publikasi online populer untuk pengembang Smashing Magazine.

Pada bulan Januari lalu, kami menerbitkan artikel tentang desain responsif, “Desain Web Responsif: Apa Artinya dan Cara Menggunakannya.” Desain web responsif terus mendapatkan banyak perhatian, namun mengingat betapa berbedanya dengan metode pengembangan situs web tradisional, hal ini dapat terlihat sangat rumit bagi para desainer dan pengembang yang belum mencobanya.

Untuk itu, kami telah menyusun ulasan sumber daya yang berguna saat membuat situs web responsif. Tinjauan ini mencakup panduan terperinci, pendekatan, alat, dan artikel yang berisi saran praktis yang diperlukan untuk membuat situs web responsif Anda sendiri.

Elliot Jay Stocks menjelaskan secara detail tentang metode menggabungkan Kueri Media CSS dan transisi CSS. Ide dasarnya adalah ini: saat Anda mendesain situs responsif menggunakan Media Query, Anda terus-menerus mengubah lebar browser untuk melihat bagaimana perilaku situs. Namun setiap kali salah satu Kueri Media Anda diproses, transisi kaku antar gaya akan terlihat (yang pertama, misalnya, untuk desktop, yang kedua untuk tablet). Mengapa tidak menggunakan transisi CSS untuk memuluskan transisi sulit tersebut dengan animasi?

Gambar karet adalah salah satu tema sentral dalam desain web responsif. Artikel Ethan Marcotte memberikan ikhtisar mendetail tentang cara membuatnya menggunakan cuplikan kode img klasik ( max-width: 100%; ), bersama dengan semua detail penting yang Anda perlukan untuk memulai.

Email berukuran besar sering kali memerlukan pengguliran horizontal untuk melihatnya, terutama bila email tersebut memiliki lampiran gambar besar. Dalam studi ini, Campaign Monitor menjelaskan bagaimana email dapat dioptimalkan untuk seluler menggunakan Media Queries dan memberikan beberapa teknik dan cuplikan kode yang berguna untuk dipraktikkan.

Ini adalah Polyfill yang cepat dan ringan (sepotong kode yang menambahkan fungsionalitas yang tidak didukung oleh browser) yang dibuat oleh Scott Jehl untuk mendukung properti min-width dan max-width dari CSS3 Media Query di IE6-IE8 dan yang lebih baru.

Gunakan informasi dari alat kecil ini untuk membuat situs web responsif.

Alat untuk membuat prototipe cepat desain responsif. Anda dapat mendesain CSS untuk berbagai ukuran layar, orientasi, dan browser populer, baik itu ponsel (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tablet (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitor atau TV (720p, 1080p).

Anda dapat melihat hasil desain Anda langsung di browser dan menggunakan alat pengembangan favorit Anda, seperti Firebug. Coba juga alat alternatif ScreenFly.

320 dan Lebih Tinggi didasarkan pada pendekatan mobile-first, di mana desain dibuat untuk layar perangkat seluler terlebih dahulu dan kemudian diperluas untuk tablet, desktop, dan layar yang lebih besar. Ia bekerja dengan baik baik sebagai tambahan pada boilerplate HTML5 maupun sebagai tambahannya sendiri.

Ini adalah templat yang dapat disesuaikan untuk membuat aplikasi web seluler yang kaya fitur dan berkinerja tinggi. Anda akan mendapatkan kompatibilitas lintas-browser untuk smartphone Kelas A dan dukungan yang baik untuk BlackBerry, Symbian, dan IE Mobile lama. Serta sejumlah besar optimasi berbeda untuk browser seluler.

1140 CSS Grid dioptimalkan untuk bekerja pada layar mulai dari ukuran perangkat seluler hingga monitor lebar 1280px. Ini adalah grid sederhana dan fleksibel menggunakan Media Query.

Kerangka kerja CSS ini adalah dasar yang baik untuk mengembangkan langsung pada layar kecil (seperti ponsel) dan layar kecil (seperti tablet) dengan sedikit usaha. Selain itu, ada generator untuk membuat kerangka CSS yang fleksibel untuk Anda sendiri.

Flurid adalah jaring karet dengan 6, 7, 8, 9, 10, 12 dan 16 kolom.

FluidGrids adalah generator grid modular yang membuat tata letak 6, 7, 8, 9, 10, 12, atau 16 kolom.

Kerangka kerja CSS untuk membuat tata letak responsif. Ini berisi 4 tata letak dasar dan tiga set tipografi.

Kerangka kerja yang cair dengan fokus pada tipografi.

Tiny Fluid Grid akan membantu Anda membuat grid fluida Anda sendiri yang terdiri dari 12, 16 atau 24 kolom, mengatur lebar maksimum dan minimum serta persentase padding.

Luke Wroblewski mencatat presentasi Ethan Marcotte tentang penerapan prinsip desain web responsif untuk memodernisasi situs web salah satu surat kabar terkemuka. Ethan antara lain menjelaskan bagaimana pendekatannya terhadap metodologi desain web responsif dan bagaimana proses prototyping dalam konteks desain web responsif.

Luke Wroblewski membuat catatan di Breaking Development Conference selama pembicaraan Stephen Hay tentang realitas perancangan perangkat yang berbeda.

Pengantar yang bagus untuk desain responsif sebagai cara berpikir, bukan sebagai alat atau teknik. Jeremy Keith berpendapat bahwa desain web responsif tidak bisa begitu saja ditambahkan sebagai langkah pada alur kerja yang sudah ada. Daripada mengupayakan kesempurnaan piksel, kita harus mengupayakan kesempurnaan proporsional.

Publikasi ini merupakan kombinasi filosofi dan strategi untuk mengumpulkan praktik terbaik di bidang desain responsif.

Kumpulan situs web yang diperbarui secara berkala yang menggunakan Media Query.

Dalam episode 9 The Big Web Show, Jeffrey Zeldman dan Dan Benjamin mengundang Ethan Marcotte untuk mendiskusikan desain responsif.

Tambahan yang bagus untuk artikel ini adalah blog tentang desain responsif, tempat pengembang berbagi pengalaman dan menulis ulasan tentang alat responsif.