Bagaimana cara membuat situs web yang responsif? Transformasikan!

Bagaimana cara membuat situs web yang responsif? Di sini Anda dapat memperoleh informasi tentang teknik adaptif ini berdasarkan model web saat ini, yang berarti bahwa dalam satu desain, portal web dapat diakses dan dilihat dengan benar dari komputer atau perangkat elektronik apa pun.

¿Cara membuat Website Responsif?

Membuat situs web responsif atau sensitif terhadap kemungkinan adaptasi sangatlah mudah. Selain menjamin keberhasilan bekerja dengan benar di internet dari platform elektronik apa pun. Pada baris berikut, cara membuat web responsif dijelaskan, yang dipahami dari sifat adaptabilitas halaman web. Oleh karena itu, ketika mendesain halaman web dengan model responsif, tampilan atau gambar web tersebut akan dapat disesuaikan dan dilihat tergantung pada perangkat elektronik yang digunakan untuk navigasi.

Tidak ada yang tidak menyadari banyaknya jumlah peralatan atau perangkat elektronik yang saat ini ada untuk menavigasi Internet, seperti: komputer, tablet, smartphone, laptop, dll. Pada hari-hari awal internet, pengembang situs web terbiasa membuat halaman dengan lebar piksel yang sama. Misalnya, di tahun 90-an, monitor yang ada memiliki ukuran layar tunggal 14” dengan lebar tetap 640 piksel. Desainer halaman web menyesuaikan desain mereka dengan dimensi standar dari satu-satunya monitor yang ada.

Menjelang awal tahun 2000 dan hingga kedatangan tahun 2010, model monitor dan lebar piksel bervariasi. Desain web disesuaikan dengan variasi masing-masing. Sejak tahun 2010 terjadi revolusi teknologi yang hebat, menyebabkan ketidakseimbangan dalam skenario desain halaman web. Navigasi melalui telepon seluler diperkenalkan di bidang Internet. Telepon baru ini menggunakan browser seperti halnya komputer. Dengan revolusi teknologi yang hebat ini, sudah waktunya untuk memajukan apa yang dikenal sebagai Desain Responsif atau Desain Adaptif halaman web.

Pentingnya mengetahui cara membuat Web Responsif

Sangat penting bagi pengembang halaman web untuk mengetahui cara membuat web yang responsif; bahwa bahkan perusahaan Google yang sangat terkenal di internet menunjukkannya sebagai sesuatu yang sangat diperlukan. Karena halaman web yang dirancang dengan model responsif memungkinkan pengoptimalan navigasi, menghindari duplikat konten, dan memberikan kualitas gambar yang luar biasa stabil. Aspek lain yang penting saat membuat situs web responsif adalah:

• Dengan adaptasi tunggal bahasa markup hypertext (HTML) dan bahasa CSS, itu dapat dicapai untuk mencakup resolusi layar apa pun. Dengan demikian menghindari pembuatan halaman web untuk setiap jenis perangkat yang memungkinkan Anda untuk mengunjungi atau menjelajahinya. Aspek ini juga mengurangi waktu desain.
• Ini secara otomatis beradaptasi saat menjelajah, memungkinkan membaca dan interaksi pada setiap kunjungan tertentu.
• Mereka berhasil memposisikan diri mereka lebih baik dan lebih cepat di mesin pencari. Karena jenis desain ini menghindari duplikasi dan pengalihan.
• Halaman web yang dibuat dengan desain ini memungkinkan kontennya menjadi viral lebih cepat, karena cara berbagi yang orisinal dan sederhana.

Apa itu Desain Web Responsif?

Desain web responsif, juga dikenal sebagai desain web adaptif, adalah cara mendesain atau mengembangkan halaman web. Sistem ini memiliki kekhususan yang memungkinkan situs web yang dibuat dengan desain tunggal untuk dikunjungi atau diakses dari komputer atau platform elektronik apa pun. Nama responsive adalah istilah bahasa Inggris yang mengacu pada sesuatu yang responsive, adaptable, perceivable, visible, dll.

Teknik ini menerima nama ini karena kemampuan situs web jenis ini untuk menyesuaikan dengan setiap pengukuran lebar layar. Memungkinkan tampilan dan pengoperasian yang benar, tanpa membedakan perangkat yang digunakan untuk navigasi.

Ini dimungkinkan berkat pengaturan gambar dan konten, serta kesederhanaan menu web yang responsif. Empat kualifikasi utama yang menentukan dan membuat jenis desain halaman web ini sangat populer adalah:

• Sederhana
• Ekonomis
• Cepat
• Dan di atas semua hal di atas, mereka berfungsi penuh

Cara Membuat Web Desain Responsif dan Kerumitannya

Kerumitan mengenai desain dan pengembangan halaman web dapat dikatakan telah muncul sejak tahun 2010-an, ketika ponsel dengan navigasi mulai muncul di kancah internet. Yang menggunakan browser seperti Google, Firefox, Explorer, antara lain, sama seperti PC. Menjadi dengan cara ini dalam kemungkinan baru mengunjungi situs web yang berbeda. Pada masa ini tablet elektronik pertama dengan akses internet juga mulai bermunculan.

Dari situlah kebutuhan akan desain halaman web menjadi lebih kompleks. Karena berbagai macam ukuran layar yang ada untuk tampilan dan pengoperasian situs web. Anda harus menemukan jenis desain yang akan bekerja untuk semua jenis perangkat, dan menyesuaikan secara otomatis.

Anda tidak dapat lagi mendesain untuk satu, dua, atau tiga resolusi layar utama. Perlu dipahami bahwa resolusi perangkat akan semakin bervariasi, selain jauh lebih kecil daripada monitor komputer.

Momen ini menandai akhir dari kekakuan desain web. Dan tidak hanya untuk berbagai macam perangkat, tetapi juga masing-masing memiliki karakteristik khusus, seperti:

• Ukuran layar
• Resolusi layar
• daya CPU
• Sistema operativo
• Kapasitas memori antara lain.

Model desain web baru kemudian diperkenalkan, yang tujuannya adalah bahwa dengan satu desain, visualisasi yang benar akan dimungkinkan terlepas dari perangkat penjelajahan. Namun, mengembangkan situs web jenis ini memiliki tingkat kerumitannya sendiri.

Apa alasan rumitnya pengembangan Web Responsif?

Mengembangkan situs web di bawah desain adaptabilitas yang disebut responsif memiliki tingkat kerumitannya sendiri, bahkan hingga hari ini. Karena dua penyebab utama, yang ditunjukkan di bawah ini:

1-Ini adalah teknologi yang belum dikembangkan untuk waktu yang lama dan karena berbagai cara aplikasi, tidak mungkin untuk menentukan mana yang terbaik dari semua opsi. Inovasi selalu muncul terkait jenis desain web yang akan dikembangkan. Oleh karena itu, sulit untuk menentukan kerangka kerja atau teknologi pendukung terbaik, atau aturan umum yang memastikan solusi untuk sejumlah besar kemungkinan hambatan. Untuk mempermudah pengembangan website jenis ini.

2- Penyebab kedua adalah bahwa sistem desain adaptif tidak didasarkan semata-mata dari sudut pandang teknologi. Adapun cara situs akan bervariasi sesuai dengan layar atau perangkat yang berbeda. Sebaliknya, itu harus dirancang dengan gagasan tentang cara kerjanya di setiap skenario navigasi yang mungkin. Penyebab ini menambah tingkat kerumitan yang tinggi pada model desain web responsif yang harus diselesaikan oleh orang-orang yang bekerja sebagai pengembang situs.

Melatih dan memperoleh keterampilan yang cukup untuk bekerja dengan desain web adaptif atau responsif membutuhkan lebih banyak waktu dibandingkan dengan jenis desain web lainnya. Namun diharapkan, dengan kemajuan komputasi, tingkat kerumitannya akan berkurang. Untuk lebih berkembang dalam hal ini, dari staf dengan pengetahuan situs web yang terlibat dalam jenis desain responsif, staf profesional seperti:

• Tata Letak
• Desainer
• Programmer
• Staf pemasaran komersial dan digital

Kurangi waktu desain

Jika dua penyebab sebelumnya teratasi, mungkin ini akan mengurangi masa pengembangan atau pembuatan web yang responsif. Pada saat yang sama dimungkinkan untuk membuatnya tersedia untuk penggunaan situs web biasa.

Sementara itu, dengan apa yang kita miliki saat ini, mungkin lebih cepat untuk mengembangkan desain web baru untuk perangkat seluler dari awal; untuk mengubah atau mendesain ulang web agar dapat beradaptasi atau responsif. Akan selalu ada harapan bahwa suatu hari seseorang akan menemukan cara untuk melakukannya dan mencapainya, mari berharap untuk itu.

Sementara itu, apa yang bisa dilakukan?

Fakta bahwa masih sangat kompleks untuk mendesain ulang seluruh situs yang kita miliki di web, agar dapat beradaptasi. Ini tidak berarti bahwa kami berhenti membuat beberapa perubahan kecil pada situs. Untuk meningkatkannya dan membuatnya responsif terhadap adaptasi pada browser yang berbeda serta pada perangkat elektronik yang berbeda.

Hal pertama yang harus dilakukan adalah memverifikasi jenis desain web yang dimiliki situs navigasi. Terutama memeriksa:

• Tata letak situs web
• Apa strukturnya dalam hal HTML dan CSS

Menganalisis dua poin dasar ini, dapat ditetapkan bahwa modifikasi kecil dapat dilakukan untuk meningkatkan situs web.

Pertimbangan sebelumnya yang perlu diperhatikan untuk mengetahui cara membuat Web Responsif

Jika Anda sudah memiliki portal web, halaman arahan, atau blog konten, yang dikembangkan di bawah desain biasa dan Anda ingin mengubahnya menjadi situs web desain responsif atau adaptabilitas. Itu hanya membuat keputusan dan mengambil langkah pertama untuk mencapainya, membuat keputusan untuk melakukannya!

Fakta mengubah situs web dari desain konvensional menjadi responsif tidak berarti bahwa semua karya asli akan hilang. Karena tidak semua konten akan dibuang, tetapi akan mengalami sedikit perubahan di dalamnya. Konten seperti gambar, teks, dan beberapa elemen lain dari situs yang ada dapat digunakan dan berfungsi dengan benar dengan transformasi.

Namun, dihadapkan dengan alternatif untuk mengadaptasi dan meningkatkan situs, akan lebih mudah untuk mengetahui beberapa pertimbangan sebelumnya yang akan mendukung pekerjaan yang akan dilakukan.

Periksa Gerakan Web yang ada

Sebelum melakukan perubahan apa pun di web yang ada, disarankan untuk memverifikasi lalu lintas yang dimilikinya. Artinya, statistik mengenai jumlah orang yang mengunjungi website. Berdasarkan informasi ini, kami akan bekerja untuk memodifikasi desain, dengan tujuan untuk mendapatkan kesuksesan yang lebih besar dan posisi pencarian yang lebih baik. Dalam mendesain ulang dan mengadaptasi web, akan lebih mudah untuk mengetahui tentang alat SEO, karena mereka adalah yang terbaik dalam hal memperoleh posisi yang lebih baik di jaringan.

Inspirasi yang baik itu perlu

Juga disarankan untuk melihat dan membuat analisis pesaing atau halaman dengan konten yang mirip dengan situs web yang akan diterapkan perubahan ke arah desain web responsif. Pratinjau ini dimaksudkan untuk melakukan penelitian untuk kemungkinan peningkatan konten. Tetapi juga bagaimana halaman-halaman serupa itu bekerja di perangkat yang berbeda. Aspek-aspek yang perlu diperhatikan untuk pemilihan situs yang dapat menjadi inspirasi atau model dalam perbaikan. Mereka akan menjadi kemudahan navigasi pada halaman-halaman itu dan halaman-halaman yang membutuhkan lebih sedikit zoom atau scrolling. Di sini Anda dapat menemukan trik terbaik untuk Tingkatkan SEO untuk mencapai konten yang baik Terapkan mereka!

Semantik Html nikmat

Penggunaan Html semantik menunjukkan bahwa tata letak situs web asli dibuat dengan benar. Ini mendukung atau sangat membantu, karena hanya elemen HTML penting yang digunakan. Mengingat dalam pengembangan web, semantik setiap tag di atas desain web yang sama. Menyerahkan ke CSS pekerjaan desain itu sendiri, sesuai dengan kelas dan ID.

Selama proses pembuatan website responsif, elemen-elemen seperti:

• DIV
• P
• UL
• LI antara lain

Namun, jika perlu untuk mematuhi langkah pengeluaran dengan seluruh desain model. Karena Anda tidak dapat menggunakan CSS yang mengganggu, yaitu, jangan gunakan atribut Gaya apa pun di dalam kode. Karena lebih halus dan dengan sedikit DIV, Html, ini akan membantu untuk mempermudah melakukan adaptasi atau membuat web lebih sensitif. Karena CSS akan ditingkatkan dalam hasil yang diperoleh.

Atur Zoom dengan Benar tentang cara membuat situs web yang responsif

Pilihan zoom yang tepat di browser seluler direkomendasikan untuk mencapai tampilan situs web secara penuh. Browser pada perangkat seluler sudah ada sebelum desain web responsif mulai dikembangkan. Untuk tampilan penuh situs web di perangkat ini, browser harus menggunakan alat zoom. Jadi ketika mengakses situs web yang dirancang secara tradisional dari perangkat seluler. Resolusi alami ponsel tidak akan terlihat, tetapi adaptasi yang dilakukan oleh alat zoom akan ditampilkan hingga disesuaikan dengan lebar 960 piksel.

Karena tidak ada cara lain untuk melakukannya, para pengembang membuat HTML yang melakukan perubahan atau penyesuaian zoom. Beginilah, saat melakukan adaptasi resolusi pada perangkat, tim harus disuruh menggunakan jenis penskalaan lain. Jenis yang cocok untuk digunakan adalah tag meta yang dikenal sebagai viewport, yang dimasukkan di bagian atas situs web. Dengan tag meta ini Anda dapat merinci prosedur yang akan dijalankan browser di web yang diubah. Lihat sintaks berikut, ditulis kata demi kata:

Tata letak simbolis dari tag meta viewport ini adalah yang paling sering digunakan dalam desain web responsif. Namun, ada banyak konfigurasi lain yang dapat digunakan untuk tujuan ini. Hanya saja sintaks yang disajikan berisi dua variabel yang membuat browser seluler beradaptasi dengan web dan bukan sebaliknya. Variabel ini adalah:

Lebar perangkat atau lebar perangkat

Variabel width=device-width disertakan dalam konfigurasi sehingga lebar dalam piksel layar cocok dengan lebar perangkat seluler. Dengan cara ini, resolusi ponsel itu sendiri akan ditampilkan.

Untuk memberikan penggunaan sebaik mungkin, browser seluler menampilkan halaman yang serupa dengan lebar layar desktop. Lebar ini dapat bervariasi tergantung pada perangkat seluler. Tetapi seringkali biasanya salah satu dari sekitar 980 piksel. Selanjutnya, berupaya mengoptimalkan tampilan konten dengan memperbesar ukuran font, serta mengubah skala konten agar sesuai dengan layar perangkat.

Ini dapat menyebabkan pengguna merasa agak tidak koheren atau membingungkan dan kemudian harus mengetuk dua kali untuk memperbesar untuk terlibat dengan konten. Memanfaatkan variabel meta tag viewport: width=device-width menuntut tindakan pada tata letak untuk menyesuaikan lebar. Sedemikian rupa sehingga halaman dapat menyesuaikan kembali konten agar sesuai dengan dimensi layar yang berbeda, apakah itu ditampilkan pada ponsel kecil atau pada monitor PC.

Skala Awal atau Skala Awal

Variabel initial-scale= disertakan dalam konfigurasi untuk menentukan skala relasional antara piksel CSS dan piksel seluler bergantung pada perangkat. Dalam konfigurasi yang ditunjukkan di atas ditunjukkan untuk skala awal: skala awal = 1.0. Di sini sintaksnya menunjukkan bahwa rasio antara piksel adalah 1:1, piksel CSS dibaca ke piksel perangkat. Perintah kemudian diberikan ke browser seluler untuk mengadopsi nilai ini untuk zoom dan itu akan menjadi nilai yang digunakan oleh perangkat. Namun, mari kita lihat dua opsi berikut:

1. Ketika variabel skala awal sama dengan 1.0, itu mengacu pada tampilan tanpa zoom, karena itu adalah satu banding satu.
2. Sedangkan jika skala awal=2.0, variabel mengacu pada zoom yang diperbesar menjadi dua kali ukurannya di seluruh halaman.

Oleh karena itu, opsi yang tepat untuk digunakan pada situs web yang dirancang agar sesuai dengan lebar ponsel adalah yang pertama. Ini memberitahu perangkat untuk tidak menerapkan zoom apapun. Tetapi juga, mungkin ada kasus di mana opsi terbaik adalah tidak memasukkan atau menerapkan variabel ini. Meninggalkan dengan cara ini bahwa ponsel yang sama adalah ponsel yang menyesuaikan zoom dengan sendirinya, dengan lebar yang telah ditunjukkan dalam desain.

Konfigurasi Viewport Dasar – Contoh Aplikasi:

Apakah Anda memiliki lebar 500 piksel dan perintah skala awal diberikan, web mengambil tampilan lebar layar 500 piksel. Namun, di seluler, konfigurasi aslinya akan ditampilkan dengan rasio setara perkiraan 320 piksel dari total 500 piksel web.

Namun, jika, di sisi lain, urutan skala awal tidak diberikan, seluruh web ditampilkan, yaitu 500 piksel, di bawah zoom yang disesuaikan. Sintaks dari dua konfigurasi khas tag viewport ini, secara tekstual adalah sebagai berikut:

Konfigurasi sebelumnya adalah untuk situs web dengan desain responsif yang disesuaikan dengan resolusi seluler. Sedangkan untuk website yang belum sepenuhnya disesuaikan dengan resolusi seluler, konfigurasinya adalah sebagai berikut:

Selain yang khas, ada beberapa konfigurasi lain. Salah satunya adalah mendesain website dengan lebar sebesar mobile, menerapkan zoom. Namun desain jenis ini akan sangat aneh dan membingungkan bagi pengguna.

Cara Membuat Website Responsif – Media Query

Ketika Anda ingin mengetahui cara membuat situs web yang responsif atau halaman yang dapat disesuaikan, Anda harus tahu bahwa Anda harus menerapkan sistem yang dikenal sebagai kueri media. Teknik ini memungkinkan Anda untuk menetapkan, melalui suatu kondisi, bentuk atau gaya yang berbeda tergantung pada resolusi layar. Tapi apa itu Media Query?

Pertanyaan Media

Media query adalah teknik yang terdiri dari pembentukan kalimat CSS. Dengannya Anda dapat membuat pernyataan yang berlaku untuk desain web, selama kondisi tertentu yang telah diberikan atau ditetapkan terpenuhi. Pernyataan kueri media ini pada dasarnya dapat diterapkan pada dua titik di web:

• Pertama, dalam panggilan ke file CSS, tentukan di masing-masing file apa kondisi untuk memuatnya. Contoh:

• Kedua, dalam file CSS yang sama, buat ruang terpisah di mana pecahan CSS yang akan digunakan disertakan.Contoh:

@media screen dan (min-width:320px) dan (max-width:480px){

/*Deklarasi Gaya Untuk Rentang Lebar Ini */

Pada kenyataannya, kueri media adalah alat yang ampuh yang memungkinkan kemungkinan meninggalkan desain web responsif, untuk melakukan berbagai masalah lain di dalam web. Layak untuk didokumentasikan nanti, sedikit lebih banyak tentang teknik kueri media ini.

Sementara itu, untuk saat ini cukup mengetahui dua poin tentang sistem kueri media:

1. Cara membuat deklarasi kueri media dalam file CSS
2. Bagaimana memperbarui dengan teknik media query ke browser internet kuno

Deklarasi Kueri Media

Dalam paragraf sebelumnya dimungkinkan untuk mengamati dua cara mengeksekusi kueri media. Pertama di halaman gaya eksternal dan cara kedua untuk menulis langsung ke halaman gaya.

Dalam konteks bagaimana membuat desain web yang responsif, perlu dipahami bahwa media query adalah deklarasi CSS yang digunakan sebagai indikator untuk mengetahui kapan deklarasi gaya lain harus dibuat berdasarkan ukuran atau nilai ponsel. atau perangkat lain tempat web akan ditampilkan.

Contoh, cara mendeklarasikan pecahan CSS, yang berada di dalam kondisi yang ditentukan oleh kueri media, memiliki konfigurasi sintaks berikut:

@layar media dan ([KONDISI]) {

/* Aturan baru kami dengan lebar layar ini atau kurang */

}

Demikian juga, tergantung pada lebar layar, tiga jenis pernyataan kueri media dapat dihasilkan. Dengan cara ini Anda dapat memastikan aplikasi Anda dalam setiap kasus

-Deklarasi pertama harus diterapkan hanya pada resolusi yang kurang dari lebar piksel = X:

@media screen dan (max-width:[WIDTH]px) {

/* Aturan baru kami dengan lebar layar ini atau kurang */

}

-Deklarasi kedua harus diterapkan hanya pada resolusi yang lebih besar dari lebar piksel = X:

@media screen dan (min-width:[WIDTH]px) {

/* Aturan baru kami dengan lebar layar ini atau lebih */

}

-Deklarasi ketiga akan diterapkan dalam resolusi yang memiliki lebar antara rentang piksel yang ditentukan antara X dan Y:

@layar media dan (lebar minimum:[WIDTH X]px) dan (lebar maksimum:[WIDTH Y]px) {

/* Aturan baru kami dengan lebar layar ini atau lebih */

}

Yang mana dari ketiganya?

Keputusan akan didasarkan pada selera pengembang. Namun, yang lebih umum adalah menerapkan pernyataan kueri media pertama yang ditunjukkan di atas. Hanya disarankan untuk diterapkan secara kumulatif. Sedemikian rupa sehingga, setiap kali lebarnya dibuat lebih kecil, elemen desainnya dimodifikasi.

Jadikan Media Query kompatibel dengan Internet Explorer

Internet Explorer adalah salah satu browser pertama yang ada di web. Oleh karena itu, sangat mungkin browser ini tidak mendukung atau kompatibel dengan banyak sistem, parameter, atau teknik yang sering digunakan oleh pengguna jaringan. Tetapi ada banyak staf teknis dalam pengembangan web, yang sepenuhnya terlibat dalam pencarian inovasi. Yang telah membuat berbagai perpustakaan untuk mengaktifkan dan membuat browser lama ini kompatibel.

Untuk membuat versi yang kompatibel kurang dari nomor sembilan (9) dari Internet Explorer. Ini hanya menerapkan library javascript berikut: css3-mediaqueries-js.

Dengan menempatkan skrip berikut di kepala situs web, Anda akan dapat bekerja dengan kueri media tanpa ketidaknyamanan.

Hasil yang diperoleh mungkin bukan yang paling sempurna, tetapi umumnya memungkinkan tingkat kompatibilitas yang baik.

Cara Membuat Website Responsif – Desain Dasar

Mungkin ada berbagai cara untuk mengadaptasi situs web dan mengubahnya, namun situs web responsif saat ini memiliki tiga dasar atau bentuk konsepsi desain. Sebelumnya pratinjau pengembang ditampilkan dengan beberapa detail baru untuk diterapkan dalam desain ini. Itu berasal dari kebiasaan mengembangkan situs web yang berciri kaku atau tetap. Untuk pindah ke situs web yang dirancang secara responsif, mengubah karakteristik kekakuan itu.

Hari ini Anda dapat menemukan perangkat elektronik tanpa akhir yang dapat digunakan untuk menelusuri web. Dan dengan berjalannya waktu jumlahnya akan semakin banyak. Pengembang situs web mengharuskan situs web ini dapat beradaptasi dengan benar ke berbagai perangkat ini.

Desain dasar untuk menyederhanakan pekerjaan

Salah satu cara untuk menyederhanakan tugas desain responsif adalah dengan membagi atau mengklasifikasikannya menjadi tiga kelompok dasar untuk mengetahui cara menanganinya. Tiga grup kualifikasi besar ini adalah:

1. Layar besar: Di mana situs web memiliki ruang yang cukup dan bahkan lebih untuk dapat dilihat sepenuhnya tanpa ketidaknyamanan.
2. Layar lama atau kecil: Di mana web tidak menemukan lebar yang memadai untuk visualisasi lengkapnya, yaitu, tidak sesuai dengan bingkai layar. Itu bahkan menunjukkan bilah bawah yang tidak nyaman, tanpa penggunaan apa pun yang memungkinkan Anda melihat lebih sedikit konten.
3. Layar perangkat seluler: Web menemukan ruang kecil pada perangkat ini sehingga hanya dengan desain umum, dimungkinkan untuk membaca informasi kontennya.

Jadi, jika Anda ingin mengubah desain dan tata letak situs web asli menjadi yang diperbarui yang dapat digunakan dan layak. Yang diperlukan adalah menyelesaikan ketiga kelompok dasar ini. Tingkat kesulitan dalam memperoleh solusi umumnya akan tergantung pada bagaimana model telah dirumuskan. Namun, secara umum, dengan teknologi saat ini, beberapa perubahan dapat dilakukan di web.

Cara Membuat Web Responsif untuk Layar Besar – Solusi

Pada titik dasar ini biasanya tidak mewakili kesulitan besar. Karena web dirancang untuk dilihat dalam format layar besar ini. Standar saat ini adalah bahwa situs web didasarkan pada bingkai tengah lebar layar dalam piksel 960. Sedemikian rupa sehingga ketika dimuat di ponsel dengan zoom yang disesuaikan, itu cocok dengan sebagian besar dari mereka dengan benar. . Tetapi dalam kasus situs web lama, bingkai tengah dengan lebar piksel itu mungkin dirancang untuk layar dengan lebar 1024 piksel. Dalam kasus apa pun, untuk grup dasar ini, masuk akal untuk menggunakan wadah seperti yang ditunjukkan oleh sintaks berikut:

#main { lebar:960 piksel; margin:0 otomatis; }

Konfigurasi ini mendukung pengaturan wadah "utama" yang memungkinkannya menjadi web-centric. Seiring dengan wadah ini, latar belakang yang berbeda dapat ditambahkan untuk memperkaya tampilan luar web. Mengembangkan desainnya sedikit untuk menghindari halaman hitam-putih sebanyak mungkin.

Singkatnya, pada tingkat layar besar ini, tidak banyak yang dilakukan untuk mengubah web. Meskipun tidak menutup kemungkinan ada pengguna web yang ingin melihatnya dari TV dengan layar yang besar dan juga jarak pandang yang pendek.

Kasus-kasus ini memerlukan perubahan besar seperti pada grup basis seluler. Namun karena biasanya tidak banyak yang menggunakan TV untuk bernavigasi, pengembang biasanya tidak menginvestasikan banyak waktu dalam adaptasi ini. Jika Anda masih ingin mengerjakan adaptasi jenis ini, disarankan untuk membuat peraturan yang serupa dengan yang diterapkan di grup seluler, yang ditunjukkan di bawah ini.

Cara Membuat Web Responsif untuk Layar Kecil – Solusi

Dari kelompok desain dasar ini, kompleksitas transformasi web yang akan diadaptasi dimulai. Skenarionya adalah sebagai berikut halaman yang dibuat untuk bekerja pada lebar layar tertentu. Bahwa sebenarnya, sejumlah orang mengunjunginya dari komputer yang disesuaikan dengan lebar itu. Tetapi ada juga sebagian besar orang yang perlu dipertimbangkan, yang memiliki perangkat dengan resolusi lebih rendah daripada desain untuk mengunjungi web.

Dalam grup klasifikasi ini, perangkat dengan resolusi layar lebih rendah dari desain harus dipisahkan dari perangkat seluler. Nah, kasus-kasus tersebut dianalisis dalam kasus desain ketiga. Oleh karena itu, perlu dimulai dari definisi yang jelas tentang titik di mana perangkat layar kecil berakhir dan titik di mana perangkat seluler dimulai.

Untuk layar kecil dengan cara yang sama, resolusi situs web asli harus dikurangi untuk menyesuaikannya dengan perangkat tersebut. Hanya saja harus jelas sampai sejauh mana penurunan ini akan dilakukan, tanpa melampaui. Sehingga sejumlah besar elemen tidak berkumpul di layar kecil, mengurangi tampilan web.

Informasi yang Dibutuhkan untuk Menetapkan Batas

Informasi dari perangkat seluler dibagikan di bawah ini. Yang akan menjadi sangat penting dalam hal menetapkan batas kapan berhenti menjadi layar kecil, menjadi perangkat seluler. Ini akan membuat keputusan lebih mudah.

data seluler:

• Ponsel digunakan secara vertikal, yang merupakan bentuk yang paling sering digunakan. Biasanya mengadopsi resolusi lebar 320 piksel.
• Dalam posisi horizontal, resolusi ponsel disesuaikan dengan ukuran sebenarnya dari layar perangkat. Resolusi ini umumnya antara 400 dan 600 piksel lebar.
• Di sisi lain, di tablet, resolusi akan tergantung pada perangkat. Secara umum, dengan mempertimbangkan statistik model terlaris, resolusinya sekitar 600 piksel. Bahkan mampu mencapai lebar 1024 piksel.

Batas lebar layar

Batas lebar standar terbesar yang akan diadopsi dalam desain web responsif dalam klasifikasi ini, menurut informasi sebelumnya, adalah hingga lebar 400 piksel. Dari pengukuran lebar ini, perubahan visualisasi web harus dimulai secara drastis, serta operasi dasarnya akan mengalami perubahan tertentu.

Namun, lebih banyak lagi, beberapa pengembang menetapkan batas ini ke lebar 600 piksel. Menciptakan dari resolusi ini, adaptasi menengah antara layar kecil dan perangkat seluler.

Di sisi batas bawah, diatur untuk mengadopsi lebar layar minimum hingga 320 piksel. Bagaimanapun, terserah kepada pengembang web untuk menetapkan rentang yang lebih besar dari batas yang diberikan ini. Tetapi tidak disarankan untuk mencoba menutupi semua perangkat layar kecil.

Gaya navigasi utama dalam solusi layar kecil

Menangkap setidaknya tiga gaya navigasi utama ini mungkin cukup dalam solusi adaptif layar kecil. Yang tercantum di bawah ini:

• Perangkat seluler digunakan secara vertikal: Dalam hal ini, layar perangkat hanya memungkinkan pembacaan dan navigasi yang sangat disederhanakan yang ditetapkan dalam rentang resolusi antara 320 dan 400 piksel.
• Perangkat seluler yang digunakan secara horizontal dan tablet: Dalam hal ini, tampilan horizontal tradisional sudah dapat dicapai. Namun, perlu dicatat bahwa navigasi dihasilkan dengan sentuhan dan bukan dengan mengklik. Menurut tindakan ini harus dihindari: onMouseOver dalam 400, 600 atau 800 piksel.
• perangkat meja: Dalam kasus ini, desain web normal berfungsi tanpa masalah dengan lebar layar lebih dari 800 piksel.

Setelah mengatakan semua hal di atas, layar kecil berarti berbagai PC, perangkat seluler lanskap, dan tablet. Keragaman ini mencakup grup ini dengan kompleksitas yang lembut untuk mengadaptasi web ke desain yang responsif. Dalam hal ini, sangat penting untuk penyederhanaan pekerjaan, pekerjaan tata letak dilakukan dengan balok. Untuk menyatukan tiga jenis perangkat dalam satu tindakan.

Jika ditentukan dengan jelas dari lebar layar ponsel yang dipertimbangkan. Format layar perantara yang akan ditampilkan diperjelas. Untuk mengubah blok tata letak saat ini sehingga ukurannya berubah sesuai dengan layar dan dapat berfungsi serta ditampilkan dengan benar.

Wadah Lebar Global

Wadah global dalam situs web memenuhi fungsi menunjuk atau menunjukkan lebar global. Artinya, dengan elemen-elemen ini Anda dapat memusatkan dan menetapkan lebar tertentu ke situs web. Mereka memberikan konfigurasi beberapa fleksibilitas dengan mengubah dari lebar tetap ke lebar maksimum atau tutup. Ditetapkan dalam deklarasi awal untuk kerangka kerja web, berubah dari lebar a max-width. Dengan cara yang sama, lebar minimum ditetapkan sesuai dengan rentang yang ditetapkan sebelumnya, dengan deklarasi lebar-min. Dengan demikian, akan dimungkinkan untuk mengontrol lebar perangkat yang dianggap tidak berada dalam kendali. Mengambil kisaran batas lebar layar yang diberikan di atas; Sintaks dari deklarasi akan menjadi sebagai berikut:

#main {max-width:960px; lebar minimum:320 piksel; margin:0 otomatis;}

Untuk layar besar solusinya sama. Namun, lebih jauh lagi, ketika jaring secara bertahap berkurang ukurannya secara bersamaan, bingkai tengah akan melakukannya dengan lebar.

Contoh praktis

Di bawah ini adalah contoh praktis pada pengaturan untuk transformasi bingkai lebar. Dalam contoh ini ada website dengan lebar 1080 piksel, yang diterapkan pada elemen header, konten utama, dan footer. Hal pertama yang harus dilakukan adalah menunjukkan lebar itu di blok penampung global yang berbeda, bukan sebagai lebar tetap, tetapi sebagai lebar halaman maksimum. Adapun kalimat, mereka akan tergantung pada jumlah blok jenis ini yang akan digunakan. Jadi mari kita lihat sintaks berikut:

#header #top {posisi:relatif; lebar maks:1074 piksel; lebar minimum:320 piksel; tinggi: 115px; margin:0 otomatis; […]}

[...]

#header ul.menu {posisi:relatif; lebar maksimum:1008px; lebar minimum:320 piksel; tinggi: 95 piksel; […]}

[...]

#aux-main{posisi:relatif; lebar maksimum:1008px; lebar minimum:320 piksel; margin:0 otomatis; […]}

[...]

#footer ul {max-width:768px; lebar minimum:320 piksel; margin:10px otomatis;}

Wadah Interior

Dari titik ini, kami akan mempelajari lebih lanjut tentang cara membuat situs web responsif dengan mengubahnya. Hampir dapat dipastikan bahwa halaman yang akan diubah terdiri dari desain atau tata letak, dibagi menjadi beberapa elemen, misalnya:

• Header lebar seratus persen
• Konten yang menempati sebagian besar lebar
• Di bagian samping, satu atau lebih bilah samping atau bilah lateral
• Menempati seratus persen lebar, footer

Jadi, Anda akan memiliki beberapa wadah yang mungkin memiliki lebar tetap yang menentukan kolom pada halaman. Wadah ini mungkin telah diubah menjadi kolom melalui penerapan berbagai teknik, seperti:

• Mengapung dalam jumlah terbesar
• Tampilan: sebaris dalam beberapa kasus
• Tampilan: kotak di lain dari mereka

Langkah selanjutnya yang harus diambil adalah mengubah elemen-elemen tersebut menjadi pernyataan yang tidak terlalu tepat. Sehingga wadah induk tidak benar-benar mengkalibrasi pernyataan asli yang ditunjukkan. Atau yang sama, Anda harus mengubah dari piksel ke nilai persentase di semua elemen yang merujuk pada spasi di lebar situs web, seperti berikut:

• Lebar
• lebar maksimum
• Margin dan
• bantalan

Dengan pekerjaan tata letak yang dilakukan sebelumnya, langkah ini menjadi sangat sederhana. Karena hanya membuat pembagian, untuk dapat menentukan apa yang sesuai dengan ukuran dalam piksel elemen penampung dalam nilai persentase. Oleh karena itu, persentase akan dihitung dengan menerapkan persamaan matematika berikut:

[Px lebar elemen dalam] / [Px lebar elemen induk] * 100

Ini adalah metode yang baik bagi pengembang web untuk membiasakan diri mengerjakan model web dengan pengukuran dalam persentase, karena langkah ini sudah dapat diselesaikan.

Perhitungan persentase

Langkah selanjutnya yang harus dilakukan adalah perhitungan persentase. Di bagian ini sesuatu yang mengganggu dapat disajikan dalam hal kolom. Karena kolom sebelumnya dibuat dengan elemen float, dan saat Anda mengecilkan bingkai, bilah sisi bergerak di bawah konten. Namun, persamaan di atas diterapkan. Dan dengan cara ini perhitungan persentase setiap elemen dalam wadah global DIV dilakukan. Yang seperti disebutkan di atas memiliki lebar 1080 piksel. Mengkonversi pengukuran tersebut ke nilai persentase, maka diperoleh sintaks berikut:

#main #content { float:kiri; lebar:63.9880952%; margin:30px 0 0 1.98412698%; }

[...]

#main #sidebar { float:kiri; margin:20px 0 0 3.47222222%; lebar:28.7698413%; }

Seperti yang dapat dilihat, baik lebar dan margin horizontal telah diubah. Dengan cara ini situs web akan mempertahankan tampilan persegi. Poin penting lainnya yang perlu diperhatikan adalah jumlah desimal yang ditunjukkan dalam persentase. Yang tujuannya adalah agar perhitungannya seakurat mungkin dengan nilai aslinya dalam piksel.

Solusi untuk elemen interior longgar yang ukurannya bertambah

Dalam proses transformasi halaman web, dimungkinkan untuk menemukan elemen longgar tertentu dalam model yang, karena tipologinya, dapat tumbuh di atas wadah global maksimumnya, lebar maksimum. Elemen-elemen ini dapat dideteksi dengan bermain dengan ukuran browser, karena terdeteksi mereka diperbaiki. Cara cepat lain untuk memperbaiki atau menghindari elemen-elemen ini adalah dengan memilih wadah dan memberi perintah agar tidak ada elemen dalam yang tumbuh melebihi ukuran wadah itu sendiri.

Dalam contoh yang sedang dikembangkan, bentuk koreksi terakhir ini diterapkan, di dalam konten utama dan bilah sisi. Dengan demikian, masalah tertentu yang mungkin timbul dari widget dapat diselesaikan sendiri. Menurut ini, konfigurasi untuk menyelesaikan elemen interior yang longgar adalah sebagai berikut:

#main #content { float:kiri; lebar:63.9880952%; margin:30px 0 0 1.98412698%; }

#utama #konten * {lebar maksimal:100%}

[...]

#main #sidebar { float:kiri; margin:20px 0 0 3.47222222%; lebar:28.7698413%; }

#utama #bilah samping * {lebar maksimal:100%}

Elemen Diposisikan dalam Mutlak

Untuk semua elemen yang diposisikan sama sekali di halaman web untuk diubah. Proses sebelumnya yang sama harus diterapkan pada mereka dengan lebar, mengadaptasinya ke nilai dalam persentase pada sumbu absis untuk memvariasikan lebarnya. Dengan asumsi bahwa dalam contoh yang sedang dikembangkan, ada beberapa elemen yang diposisikan sama sekali di header. Posisi mereka harus disesuaikan dengan elemen-elemen ini, sehingga mereka tidak tetap mengambang di udara ketika dimensi jaring diperkecil. Untuk ini, konfigurasinya adalah sebagai berikut:

[...]

#header #top p.breadcrumb {posisi:absolut; atas:90 piksel; kiri:3.72439479%; warna: putih;}

[...]

#header #top p.like { position:absolute; atas:10px; kiri:54.0037244%; }

[...]

#header #top div.vcard{posisi:absolut; atas:11px; kanan:5.49348231%; lebar: 27.9329609%;}

Menerapkan Kueri Media dalam elemen interior

Saat mengadaptasi lebar halaman, ada kemungkinan ada elemen yang, karena kontennya, tidak menemukan ruang dalam desain ulang. Ini bisa menghalangi, dengan membuat adaptasi terlihat buruk. Untuk menghindari situasi canggung ini, kueri media sederhana digunakan yang memungkinkan modifikasi drastis CSS, ketika beberapa dimensi tertentu terjadi.

Kueri media adalah alat yang sangat kuat yang dengannya banyak kecerdasan dapat dibuat. Kali ini mereka akan diterapkan untuk menentukan kondisi tertentu mengenai lebar layar, dan dari mana CSS akan berubah. Untuk ini kita akan mengingat sintaks berikut:

@media screen dan (max-width:[WIDTH]px) {

/* Aturan baru kami dengan lebar layar ini atau kurang */

}

Pernyataan kueri media ini secara khusus berupaya menyesuaikan tata letak dengan resolusi yang berbeda. Jadi itu dapat digunakan lebih dari apa pun untuk menyembunyikan elemen sekunder tertentu, yang, dengan lebar layar tertentu, dapat lebih mengganggu daripada membantu pengguna. Selain berfungsi untuk membuat kopling kecil, sehingga beberapa elemen dapat ditampung dalam desain ulang dalam skenario yang berbeda.

Untuk mencontohkan apa yang telah dikatakan, beberapa elemen resolusi di bawah 800 dan 600 piksel akan disembunyikan. Bahwa dalam satu kasus mereka menghalangi pandangan yang benar dari konten halaman utama situs web yang akan diadaptasi. Menurut sintaks berikut:

Layar @ media dan (max-width: 800px) {

#header #top p.suka,

#header #top p.breadcrumb,

#header #top div.vcard p.twitter,

#header #top div.vcard p.linkedin,

#header #top div.vcard p.lezat,

#header #top div.vcard p.google,

.vcard h2{ tampilan: tidak ada;}

}

Layar @ media dan (max-width: 600px) {

#sidebar .twitter {tampilan: tidak ada;}

}

Seperti yang dapat dilihat, mereka disembunyikan dalam resolusi kurang dari 800 piksel:

-Yang suka

-remah roti

-Tombol sosial, antara lain

Dari 600 piksel ke bawah, tweet terakhir dihapus dari bilah sisi

Media Query juga memungkinkan Anda untuk mengubah beberapa gaya

Seperti yang sudah Anda lihat, kueri media memungkinkan Anda menyembunyikan beberapa elemen interior. Tetapi mereka juga memungkinkan Anda untuk membuat perubahan pada beberapa gaya. Kekhususan ini dapat digunakan jika suatu elemen, selain tidak disesuaikan dari segi lebarnya, tidak diinginkan atau tidak ingin dihilangkan atau disembunyikan. Jika situasi ini muncul di web yang ingin Anda ubah. Kemudian, melalui penggunaan media query, akan diupayakan untuk mengubah gayanya secara halus, sehingga beradaptasi.

Dengan asumsi bahwa di web yang sedang dikerjakan, tombol sosial menyebabkan masalah seperti ini. Dan ia memutuskan untuk secara halus mengubah pemformatannya, dengan menghapus ikon dan mengurangi ukuran font, ketika halaman turun di bawah lebar 960 piksel. Konfigurasi kemudian akan menjadi sebagai berikut:

@media screen dan (max-width:960px) {

#header #top div.vcard p {ukuran font:9px;}

#header #top div.vcard p.twitter ke,

#header #top div.vcard p.linkedin a ,

#header #top div.vcard p.lezat a,

#header #top div.vcard p.google a {background:none; bantalan: 0; lebar: 50%; mengapung: kiri;}

}

Apa yang harus dilakukan dengan menu?

Bagaimana dengan menu-menunya, dalam proses bagaimana membuat website responsif di layar kecil? Jawaban atas pertanyaan ini adalah bahwa ini adalah masalah yang agak rumit untuk dipecahkan. Karena merupakan kumpulan elemen yang biasanya agak panjang, dan juga menu itu sendiri, maka itu bukanlah konten utama web. Oleh karena itu, tidak boleh membiarkan halaman dibuka di layar kecil, menu menempati banyak ruang.

Pada perangkat sentuh, dapat mengganggu pengguna, bahwa daftar tautan kecil muncul, jadi mengecilkan tautan tidak akan menjadi solusi yang paling tepat. Alternatif yang bisa menguntungkan adalah mengganti menu dengan elemen pilih. Yang merupakan kontrol yang menunjukkan menu pilihan, di mana pengguna dapat memilih dengan nyaman. Elemen pilih mengurangi daftar menu yang panjang menjadi blok kecil, sehingga penggunaannya ideal untuk perangkat seperti tablet dan ponsel.

Saat melakukan penggantian ini dalam desain responsif baru, disarankan untuk menggunakan plugin tinynav jquery. Yang sederhana dan sangat kompatibel, plugin ini merujuk ke semua item UL di menu. Dan ini pada gilirannya menambahkan elemen pilih ke awal daftar dengan karakteristik yang ditunjukkan. Selanjutnya, langkah yang masih harus dilakukan adalah menyembunyikan UL atau pilih dengan media query, hingga diperoleh solusi yang menguntungkan.

Prosedur dengan elemen pilih

Prosedur penggantian menu dengan elemen pilih akan dilakukan melalui plugin yang disebutkan di atas. Yang harus ditempatkan di header pada daftar link. Jadi, ketika halaman mulai turun ke resolusi kurang dari 800 piksel, tautan akan diganti dengan pilih. Kemudian untuk mengikuti langkah-langkah berikut:

• Tambahkan skrip dan di plugin jquery siap atur panggilan ke elemen baru. Menurut berikut ini:

$(".menu ul").tinyNav();

Konfigurasi ini menambahkan pilihan di setiap daftar tautan di menu atas

• Beri tahu CSS dasar untuk menyembunyikan elemen pilihan baru, dengan deklarasi berikut:

.tinynav { tampilan: tidak ada }

• Manfaatkan kueri media yang sesuai dan di dalamnya tambahkan format pilih dan perintah untuk menyembunyikan daftar itu sendiri. Meninggalkan konfigurasi sebagai berikut:

Layar @ media dan (max-width: 800px) {

#header ul.menu li ul {display:none}

.tinynav { tampilan: blok; posisi: mutlak; bawah:5px; lebar:79%; margin-kiri: 15%}

}

Dengan cara ini, menu web akan digantikan oleh elemen pilih, dengan menurunkan resolusi layar menjadi kurang dari 800 piksel.

Blokir Latar Belakang dalam cara membuat Web Responsif 

Pada titik ini dalam adaptasi web, tingkat kesulitan akan tergantung pada bagaimana modelnya. Saat mendesain web, pada titik CSS, blok biasanya dihiasi dengan latar belakang gambar. Sejumlah besar teknik digunakan dalam proses dekorasi. Beberapa di antaranya lebih mudah daripada yang lain dalam hal mengubah ukuran.

Beberapa solusi

Inilah sebabnya, tergantung pada teknik yang digunakan, prosedurnya mungkin kurang atau lebih sederhana. Bahkan mungkin latar belakang yang dimiliki web, kehilangan tujuannya ketika ujung-ujungnya disembunyikan. Sehingga dalam kasus ini masalah besar untuk diatasi. Berikut adalah beberapa solusi untuk ini:

• Ubah sebanyak mungkin latar belakang ke gaya CSS3. Yang akan beradaptasi dengan sangat baik terhadap perubahan. Sekarang mudah untuk mendapatkan sebagian besar browser yang kompatibel, saat menggunakan tepi bulat, bayangan, atau gradien. Dengan tiga situasi CSS, sulit bagi desain untuk membutuhkan sejumlah besar gambar untuk membuat blok.
• Lakukan tanpa gambar latar belakang, untuk menggantinya sebanyak mungkin dengan CSS3 terdekat dengan cara kueri media dan lebar adaptif melakukan tugasnya
• Jika kasus dana yang sudah mendominasi situasi blok. Disarankan untuk menduplikasi gaya ini di blok dan mencari latar belakang asli agar sedikit dibedakan

Solusi lain untuk tiga jenis gambar latar belakang yang dapat mengganggu adalah:

• Gambar dengan pembatas di bingkai halaman, yang bahkan tersisa di luar bagian yang ditampilkan, hasil akhirnya tidak mengganggu, oleh karena itu dibiarkan
• Ikon dalam judul tertentu, yang diperbaiki dengan menyembunyikannya dengan kueri media saat mulai mengganggu
• Latar belakang global tajuk memang menyertakan kotak putih tempat nama penulis web dicantumkan. Untuk ini, gaya yang sama dapat diulang di kotak penulis sehingga satu latar belakang disembunyikan dengan yang lain dengan mengurangi dimensi halaman.

Cara Membuat Web Responsif untuk Layar Ponsel – Solusi

Beberapa aspek cara membuat website responsif di layar kecil sudah terlihat sebelumnya. Dengan pengetahuan ini, Anda dapat beralih dari desain web kaku dengan lebar tetap 1080 piksel ke desain yang cukup dapat beradaptasi dengan layar kecil, dari sejumlah besar perangkat. Tetapi solusi desain responsif untuk layar seluler tidak ada.

Dengan penerapan apa yang terlihat untuk layar kecil dalam desain untuk seluler, perubahan membuatnya terlihat dapat diterima. Masih banyak yang perlu disempurnakan, karena tata letak dua kolom dengan elemen yang diaglutinasi di header sangat tidak praktis untuk ponsel

Oleh karena itu, adalah tepat untuk memulai proses untuk mencapai tampilan yang benar di perangkat seluler. Penting untuk dicatat bahwa penggunaan navigasi di ponsel tidak sama dengan di situs web biasa. Anda mungkin ingin melangkah lebih jauh dari perubahan adaptasi lebar layar sederhana atau penyembunyian elemen.

Tag Viewport dalam kasus ini

Elemen viewport adalah alat yang bagus untuk mengadaptasi web ke seluler. Pertama, karena viewport berfungsi untuk menunjukkan ke ponsel cara kerja zoom yang Anda inginkan, saat perangkat menampilkan situs web. Yang mengatakan, pada dasarnya dua opsi dapat disajikan, ditunjukkan di bawah ini:

Opsi 1: Untuk situs web dengan desain responsif yang digabungkan dengan resolusi seluler, berikut ini tersedia:

Opsi ini adalah yang paling ideal, tetapi juga yang paling melelahkan. Karena ketika Anda mengurangi lebar kolom di bawah 500 atau 400 piksel, lebarnya menjadi tidak dapat diatur sama sekali. Oleh karena itu, perubahan radikal harus dilakukan dalam visualisasi web.

Opsi 2: Jika itu adalah kasus situs web yang belum sepenuhnya disesuaikan dengan resolusi seluler, kami memiliki yang berikut:

Opsi lain ini mungkin lebih cepat. Karena hanya ditunjukkan dalam desain bahwa ponsel dapat ditampilkan dalam resolusi yang diinginkan. Dengan kata lain, web akan terus menjadi halaman biasa, hanya dalam versi yang lebih diperkecil atau diadaptasi.

Konsekuensi yang mungkin

Jika Anda memilih opsi kedua, dua masalah mungkin muncul dengan situs web yang akan diadaptasi atau dirancang secara responsif.

-Pertama: Area pandang dalam hal ini akan berfungsi secara global di semua browser seluler. Mengingat kasus, misalnya, bahwa tag viewport lebar 500 piksel ditunjukkan, itu akan menghasilkan perangkat iPad dengan lebar sekitar 800 piksel menampilkan halaman dengan lebar hanya 500 piksel. Gagal memanfaatkan seratus persen ruang yang tersedia.

-Kedua: Melanjutkan kasus yang menunjukkan area pandang dengan lebar 500 piksel. Dalam hal ini, resolusi lebar 320 piksel, konten web yang sedang dikerjakan akan ditampilkan dalam mode yang sangat diperkecil. Oleh karena itu, jika beberapa penyesuaian tidak dilakukan, itu akan menjadi non-fungsional. Di sisi lain, jika penyesuaian tertentu dilakukan untuk mengadaptasi menu atau sumber, versi web akan dimodifikasi dengan cara yang sama untuk ditampilkan di tablet, dalam hal layar kecil. Kesimpulannya, solusi menunjukkan lebar tetap dengan tag viewport mungkin yang tercepat, tetapi tidak lagi efisien.

Melihat konsekuensi dari memilih opsi 2 dari tag viewport, menjadikan opsi 1 yang paling direkomendasikan. Dengan cara ini, ponsel itu sendiri diperbolehkan untuk menunjukkan resolusi yang mampu, saat menggunakan viewport yang ditunjukkan di atas sebagai opsi 1 di Kepala halaman.

Dengan keputusan visualisasi ini, nantinya akan mengerjakan kueri media, untuk versi seluler. Ini membutuhkan perpindahan dari kolom ke blok dengan lebar seratus persen. Hapus juga, kompres elemen tertentu, sesuaikan font sehingga ramah untuk dibaca pada lebar 320 piksel.

menghapus kolom

Seperti yang telah disebutkan di atas, untuk adaptasi mobile responsive perlu penyempurnaan desain pada tampilan dua kolom agar tidak terjadi penggumpalan elemen pada header. Untuk proses ini, kolom akan dihilangkan dengan menempatkan satu ditumpangkan di atas yang lain, tetapi ada dua skenario yang dapat terjadi:

-Bahwa kolom sudah dipesan di Html: Jika demikian, mereka sudah disajikan dengan cara yang diinginkan untuk seluler. Anda hanya perlu menghilangkan Float atau memodifikasi display:inline-block atau display:box, untuk menggantinya dengan display:block normal. Dengan menerapkan sintaks berikut:

Layar @ media dan (max-width: 400px) {

#konten {tampilan: blok; mengapung: tidak ada; }

}

-Jika kolom tidak dipesan: Dalam skenario ini, Anda harus bekerja dengan posisi absolut sehingga blok bawah menempati bagian atas halaman. Serta menggunakan margin untuk memindahkan blok atas ke blok bawah, sehingga tidak tumpang tindih. Contoh, dengan asumsi distribusi berikut:

Dalam penataan ini, diinginkan bahwa pada ponsel elemen-elemen bilah sisi bilah sisi ditempatkan sebelum konten. Kemudian CSS disajikan sebagai berikut:

Layar @ media dan (max-width: 400px) {

#main {posisi:relatif; lebar: 100%; }

#content{margin-top:80px; lebar: 100%; mengapung: tidak ada;}

#sidebar{tinggi:80px; posisi: mutlak; atas:0; lebar: 100%; mengapung: tidak ada; }

}

Untuk memvisualisasikan skenario kedua, di mana posisi absolut harus digunakan dalam versi seluler, contoh struktur berikut disajikan:

Layar @ media dan (max-width: 450px) {

#main #sidebar {tampilan:blok; float:tidak ada !penting; lebar: 100%; posisi: mutlak; atas:-80px; margin:0 !penting; border-bottom:1px solid #aaa; bantalan:0 0 20px 0;}

#main #content { float: tidak ada; lebar: otomatis; margin:100 piksel 0 0 0; }

}

Dalam hal ini juga ada perubahan menjadi 450 piksel di versi seluler.

Menyesuaikan Font

Aspek lain yang harus diperhatikan dalam adaptasi responsif di versi seluler adalah penyesuaian font. Karena, ketika web dirancang, dibuat dengan mempertimbangkan monitor besar. Saat berpindah ke versi seluler yang memiliki layar vertikal kecil, situs web seringkali tidak nyaman untuk dibaca atau dilihat. Judul web memakan banyak ruang, teks konten, karena ukuran font, membuatnya sulit untuk dibaca. Menurut ini, perlu untuk meninjau semua sumber, membawanya ke konfigurasi yang layak untuk ditampilkan di layar ponsel.

Di bawah ini adalah penyesuaian mengenai aspek ini, di mana font menu diubah, ukuran font judul dikurangi dan konten ditingkatkan. Perhatikan konfigurasi berikut:

  #header ul.menu li,

#header ul.menu li.analytics,

#header ul.menu li.development {latar belakang: tidak ada;}

#header ul.menu li h4 {margin:30px 0 0 0px; ukuran font:12px; indentasi teks: 10%;}

#utama #konten .hnews h3 a,

#main #content .hnews h1 a{ ukuran font:22px; }

#main #content .hnews .entry-content {ukuran font:16px;}

Penyesuaian lain dalam hal estetika dan gaya

Semua proses sebelumnya sudah saya lakukan cara membuat website responsive di design untuk versi mobile. Yang tersisa adalah memberikan sentuhan akhir pada tampilan dan gaya web. Dalam hal ini Anda dapat mendesain ulang gaya-gaya yang tidak beradaptasi dengan versi baru dan membuang gaya-gaya yang datang untuk memiliki tempat di dalamnya. Dengan cara yang sama, Anda dapat memindahkan beberapa elemen seperti bilah sisi, misalnya, untuk memposisikannya di lokasi lain, atau juga membuat perubahan pada margin, di antara penyesuaian lainnya. Untuk akhirnya mencapai web seluler yang indah siap digunakan.

Bagaimana cara membuat Website Responsif? – Tes dan tes

Saat Anda mendesain tidak hanya dalam hal pengembangan web, tetapi dalam setiap kreasi atau penataan sesuatu yang baru. Ada tahap testing atau pengujian, di mana Anda dapat memeriksa hasilnya, apakah sudah optimal atau memerlukan perbaikan.

Yang mengatakan, akan lebih mudah untuk melakukan pemeriksaan atau tes setelah menjalankan semua prosedur sebelumnya. Tes ini harus dilakukan saat langkah-langkah dijalankan dan untuk dapat memverifikasi perubahan yang dicapai di masing-masing langkah. Dengan cara yang sama, perlu untuk melakukan dua pemeriksaan berikut dalam pengoperasian web:

Pergi pengujian di browser

Saat Anda mengerjakan desain responsif, Anda harus menyesuaikan lebar layar. Untuk memeriksa adaptasi baru, yang mengambil bentuk baru. Dengan cara yang sama, kesalahan kecil dapat dideteksi dan dengan demikian dapat melakukan penyesuaian pada kueri media yang digunakan. Untuk memeriksa lebar layar, ada dua cara untuk melakukannya:

• Bertindak langsung dengan menghapus maksimalisasi browser untuk menguji lebarnya.
• Manfaatkan hal-hal seperti ISH sebagai alat yang berguna untuk melakukan pengaturan pengujian ini dengan perintah sederhana.

Lewati cache seluler

Perangkat seluler pada dasarnya menyimpan data cache di luar apa yang diperlukan, bahkan lebih dari browser biasa. Dalam yang biasa, biasanya cukup untuk mengeksekusi CTRL+F5 untuk menginduksi beban tanpa cache. Meskipun jenis tindakan ini sulit dilakukan di ponsel, bahkan browser tertentu memiliki opsi untuk menonaktifkan cache. Untuk memfasilitasi pekerjaan yang lebih baik tanpa cache, berikut ini disarankan:

• Bekerja dengan variabel dalam panggilan Css, seperti:

"/styles.css?version=xxxx"

Membuat modifikasi dalam setiap kasus tertentu nomor versi. Agar URL berbeda sehingga tidak menggunakan cache.

• Bekerja langsung di browser. Secara perlahan meningkatkan resolusi seluler minimum, antara 420 dan 450 piksel. Dengan cara ini Anda dapat membuatnya ditampilkan di browser dengan cukup menyusut. Cara lain adalah melalui penggunaan alat yang mengubah ukuran halaman web.

Dengan tindakan tersebut tentunya akan diperoleh hasil yang lebih praktis dan nyaman saat melakukan tes.

Bagaimana Cara Membuat Website Responsif? - Kesimpulan

Dalam semua hal di atas dimungkinkan untuk mengetahui beberapa teknik, alat teknologi dan prosedur yang sering diterapkan dalam desain web responsif. Semua pengetahuan ini juga dapat diterapkan pada situs web yang ada yang ingin Anda bawa ke desain adaptif. Tanpa harus bekerja membangun website baru.

Oleh karena itu, untuk pertanyaan berikutnya: Melakukan semua yang telah Anda pelajari, apakah mungkin membuat situs web dengan desain responsif? Jelas jawabannya adalah No. Mengapa? Karena itu hanya mungkin untuk membuat situs web sensitif terhadap adaptasi, yang awalnya tidak. Karena itu dikandung di bawah sifat kaku atau tetap.

Kemungkinan konsekuensi atau kesalahan

Selama proses mengadaptasi situs web tradisional atau yang lebih sensitif terhadap perubahan, dapat menyebabkan beberapa kesalahan dan oleh karena itu konsekuensi tertentu akan muncul, mari kita lihat:

-Elemen tertentu harus dihilangkan yang sangat penting saat halaman dibuat. Di sisi lain, tindakan menghilangkannya dilakukan berdasarkan penampilan dan bukan karena pentingnya konten yang akan dikirimkan kepada pengunjung web.

-Ini mungkin tidak mencapai kesempurnaan dalam aspek visual secara keseluruhan. Mampu hanya meningkatkan yang sudah ada. Kasus yang sama sekali berbeda jika web dibuat dari awal.

-Tergantung pada model situs web asli, mungkin atau mungkin tidak mencapai akhir adaptasi terhadap perubahan. Dengan beberapa maket, pengembang dalam upaya ini, hanya akan dapat membuat solusi perantara.

Akhirnya tentang desain responsif

Akhirnya, apa yang dilakukan hanya detail sederhana. Menyoroti pentingnya bekerja untuk mendapatkan model yang dapat disesuaikan dengan desain yang tidak asli. Saat Anda membaca Desain Responsif, Anda memahami bahwa Anda berbicara tentang desain dan bukan tentang pekerjaan tata letak. Oleh karena itu, cara membuat website yang responsif harus berasal dari konteks desain baru yang orisinil.

Namun, mampu menampilkan situs web yang dapat berubah dan beradaptasi dengan resolusi ponsel, mulai dari yang kaku, merupakan pencapaian yang cukup besar dan bermanfaat. Apa yang dijelaskan di sini tidak berarti bahwa Anda sudah terlatih dalam desain responsif. Untuk ini, diperlukan lebih banyak penelitian.

Karena lebih banyak dasar, pengetahuan dan pembelajaran yang berbeda lebih umum, proses yang lebih teknis akan dibutuhkan.

Cara Membuat Website Responsif – Tips Terakhir

Untuk menyimpulkan, penting untuk mengetahui bahwa desain responsif adalah apa yang ada di web saat ini. Jenis desain web ini membutuhkan cara berpikir yang baru. Mengembangkan situs web ini bisa lebih mudah dengan mengikuti tips berikut:

• Pikirkan seluler terlebih dahulu: Saat mendesain, akan lebih mudah untuk memulai terlebih dahulu dengan beradaptasi dengan ukuran kecil layar ponsel. Jadi, setelah menyesuaikan konten ke layar ukuran yang lebih besar. Sebab, ketika mendesain dengan mempertimbangkan ponsel, Anda bisa lebih objektif dengan konten yang seharusnya ditampilkan di halaman, hanya menyisakan apa yang benar-benar penting untuk disajikan.
• JANGAN optimalkan desain untuk ponsel atau tablet tertentu
• Ikuti standar dan praktik yang baik: Misalnya, tidak menggunakan gaya CSS yang ditentukan dalam file itu sendiri, di dalam tag Html.
• Hindari menjadi budak piksel dalam desain: Ingatlah bahwa elemen menemukan posisi yang sesuai dengannya. Ini karena mereka memperhatikan fluiditas wadah dan dimensi. Jika tidak ditampilkan sesuai keinginan, cukup perbaiki tata letak elemen dengan menerapkan kueri media.