charlestonwebsolutions.com
Menu
  • Beranda
  • Tentang
  • Graphic Design
  • Web Design
Menu

Month: January 2020

Cara Membuat Web Responsif

Posted on January 4, 2020February 15, 2020 by Fiona
Cara Membuat Web Responsif 1

Bootstrap adalah salah satu Kerangka CSS yang paling banyak digunakan oleh pengembang web, bagi Anda yang masih belum tahu dan mengerti apa yang dimaksud dengan Kerangka Web, maka silakan merujuk ke tautan berikut: https://www.betberry.win/casino/

Apa itu Kerangka Web?

Bootstrap sendiri berfungsi untuk membantu menampilkan situs web Anda secara responsif, dengan kata lain Bootstrap akan mengkondisikan penampilan situs web Anda sesuai dengan lebar halaman browser atau layar monitor atau gadget yang Anda gunakan, atau yang biasa disebut dengan Mobile View, Mobile Responsive atau Versi Seluler.

Anda tentu telah membuka halaman web seperti situs Gaswad.Com, ketika Anda mengakses melalui Desktop atau layar monitor, tampilannya berbeda dari tampilan ketika Anda mengaksesnya melalui Gadget atau layar Mobile, itu karena ketika Anda membuat Gaswad. Template com yang penulis sengaja buat menjadi web responsif baik pada layar kecil (Ponsel), sedang (Tablet) atau layar besar (Monitor / Monitor HD).

Untuk mengetahui apakah situs web Anda Responsif Seluler atau tidak, coba akses salah satu tautan berikut, lalu masukkan nama domain Anda.

  • search.google.com/test/mobile-friendly
  • websiteresponsivetest.com

Cara Membuat Web Responsif

Kenapa Harus Responsif?

Jika Anda melihat perkembangan dunia maya saat ini situs web yang responsif sangat direkomendasikan oleh para ahli SEO karena selain mendukung SEO situs web Anda, situs web yang responsif atau sudah mendukung penampilan Versi Seluler dapat membuat tampilan pada layar gadget lebih ringkas. , tetapi juga dapat membuat pengunjung nyaman mengakses situs web Anda karena tidak ada terlalu banyak 'pernak-pernik' yang terlihat seperti Versi Lengkap, sementara pengunjung tidak mengesampingkan kemungkinan bahwa pengunjung situs web Anda akan kembali lagi karena kenyamanan Anda dapatkan ketika mengakses situs web Anda.

Bekerja dengan Bootstrap

Jika Anda melihat dokumentasi resmi, sebenarnya ’sudah cukup jelas tetapi mungkin ada beberapa dari Anda yang bahkan lebih bingung melihat dokumentasi karena menggunakan bahasa Inggris (seperti penulis pertama).

Untuk membuat web responsif dengan Bootstrap, Anda harus terlebih dahulu memahami bahwa jenis layar dibagi menjadi 3 jenis, yaitu:

  • Telepon selular
  • Tablet
  • Monitor
  • Monitor HD

Anda tentu tahu bahwa setiap jenis layar memiliki resolusi berbeda, yah 'resolusi ini yang akan Anda jadikan referensi untuk membuat halaman situs web yang responsif, tentu saja, dengan bantuan Bootstrap.

Bootstrap memiliki aturan berikut untuk menentukan tingkat respons halaman web berdasarkan resolusinya.

  • Seluler (320px - 767px)
  • Tablet (768px -991px)
  • Monitor (992px - 1199px)
  • Monitor HD (1200px - ~)

Karena resolusi setiap layar berbeda, Bootstrap membedakan kelas dalam elemen HTML situs web berdasarkan pada resolusi layarnya juga, yaitu:

  • Mobile, menggunakan kelas ‘col-xs-1‘ hingga ‘col-xs-12‘
  • Tablet, menggunakan kelas ‘col-sm-1‘ hingga ‘col-sm-12‘
  • Monitor, gunakan kelas ‘col-md-1‘ hingga ‘col-md-12‘
  • Monitor HD, menggunakan kelas ‘col-lg-1‘ hingga ‘col-lg-12‘

Kelas-kelas ini (col-xs- *; col-sm- *; col-md- *; col-lg- *) yang akan kita gunakan nanti untuk membuat web responsif, jadi yang terbaik adalah jika Anda mengingat kelas-kelas ini maka akan lebih baik .

Bootstrap sendiri berfungsi berdasarkan Grid atau kolom dengan menggunakan kelas-kelas di atas untuk membentuk Grid-nya, jumlah penggunaan Grid yang akan digunakan jika secara total harus total 12 Grid dalam satu baris (baris).

Misalnya, perhatikan gambar berikut:

Cara Membuat Web Responsif 2

Bagaimana? Apakah Anda sudah mendapatkan bayangannya ?? Tentu saja Anda sudah memilikinya, anak-anak Indonesia pintar karena ketika Anda bayi, Anda minum ASI, bukan Coca-cola. Ya Tidak? Ya benar ?? Yakiiinn ?? Coba minta masing-masing ibumu ya ’. 😀

Lalu jika Anda melihat gambar di atas ada beberapa Grid dalam satu baris (baris), well ’, Grids atau kolom yang nantinya adalah tempat untuk meletakkan konten konten Anda.

Oke, 'untuk cara Bootstrap bekerja di atas, saya pikir sudah cukup,' sekarang kita beralih ke subjek utama artikel ini. Untuk membuat web responsif menggunakan CSS Framework Bootstrap, silakan ikuti langkah-langkah berikut.

Menginstal Bootstrap

Langkah pertama yang perlu kita lakukan adalah menginstal Bootstrap ke situs web kami. Dalam tutorial ini kita akan menggunakan Bootstrap versi 3.3.7, tetapi pertama-tama, silakan unduh kode sumber situs web statis sederhana dari artikel berikut karena kita akan memodifikasi skrip HTML di dalamnya sedemikian rupa agar web menjadi responsif:

Bagi Anda yang tidak mengerti cara membuat situs web statis, penulis merekomendasikan untuk mempelajari tutorial di atas terlebih dahulu karena ini akan membantu Anda memahami elemen kelas yang akan digunakan oleh Bootstrap nanti.

Setelah Anda mengunduh kode sumber dan mengekstraknya ke folder Anda, silakan buka file index.html dan tambahkan kode berikut ke tag <head>:

Cara Membuat Web Responsif 3

Setelah itu, tambahkan juga baris kode berikut tepat sebelum tag </body>:

Cara Membuat Web Responsif 3

Selesai, pemasangannya sangat mudah bukan? Pada instalasi Bootstrap di atas penulis menggunakan Bootstrap CDN karena terasa paling ringkas dan cepat. Tetapi jika Anda menginginkan metode manual, silakan unduh kode sumber Bootstrap terlebih dahulu, kemudian muat file '/css/bootstrap.min.css' ke dalam tag <head> dan file '/js/bootstrap.min.js' sebelum </ tubuh>.

Anda dapat mengunduh kode sumber Bootstrap melalui tautan berikut:

Unduh Bootstrap 3.3.7

Jadi, bagi Anda yang belum mengikuti artikel Tutorial: Cara Membuat Web Statis Sederhana Dengan HTML, penulis merekomendasikan untuk melihat terlebih dahulu ke salah satu situs bb untuk mendalaminya. Salam.

Baca juga : Mengetahui Laptop Desain Grafis Terbaik
Read more

Recent Posts

  • 7 Tips Untuk Menjadikan Anda Seorang Web Desainer Yang Lebih Baik
  • Bagaimana Desain Web Mempengaruhi Bisnis Anda
  • Mengapa Desain Dan Pengembangan Situs Web Penting ?
  • Cara Memulai Perusahaan Desain Web Anda Sendiri
  • 5 Alasan Mengapa Desain Web Yang Bagus Itu Sangat Penting

Web Design

Archives

  • November 2022
  • October 2022
  • July 2022
  • May 2022
  • October 2021
  • July 2021
  • February 2021
  • December 2020
  • October 2020
  • September 2020
  • May 2020
  • April 2020
  • March 2020
  • January 2020
  • December 2019
  • August 2019
  • July 2019
  • June 2019

HTML Responsive Template

©2023 charlestonwebsolutions.com