Search

Mendesain Tampilan Mobile atau Responsive Web Design (RWD)

Membuat layout tampilan mobile dengan Responsive Web Design (RWD) menggunakan Bootstrap belum banyak yang tahu bagaimana sebaiknya. Saya di sini akan fokus pada desain atau layout tampilan mobilenya saja karena ini adalah konsep dasarnya.

Lihat gambar di bawah ini, sebelah kiri adalah tampilan website di media komputer, laptop tengah adalah media table dan paling kanan adalah media mobile.

Dari layout paling kanan yang harus Anda fokus adalah

  1. Anda harus membuat 1 (satu) kolom dan pengunjung harus perlu scroll ke atas dan ke bawah, tidak ada scroll ke samping kiri atau kanan.
  2. Jangan ada tab yang harus di klik karena kita fokus agar pengunjung hanya scroll ke atas dan ke bawah.
  3. Konten di tampilan mobile tidak harus mengikuti konten di tampilan komputer. Biasanya di mobile fokus kepada BERITA, ARTIKEL, PENGUMUMAN, SLIDER FOTO. Jadi pengunjung melihat gambar dan kemudian membaca. Contoh di bawah ini adalah Layout dari tampilan mobile yang bisa Anda buat terlebih dahulu. Ini semacam Arsitektur Web Mobile Desain.

Semoga Bermanfaat,



Penulis adalah Konsultan di bidang Animasi, Web Desain Arsitektur, Web Development, SEO, Internet Marketing. Founder BABAStudio.com (Sejak 2003) & SekolahPINTAR.com (2015). Untuk Info Pelatihan (021) 5366-4008.