Momopururu » Blog Archives

Tag Archives: responsive design

Hijaiya Versi Mobile

Yuhu.. Iseng pagi-pagi ngedit tampilan mobile dari web online store hijaiya. Yap, itu online store saya dan sahabat saya 😀

Lumayan, gak terlalu lama ternyata dan gak terlalu susah *somboong* *keplak pala sendiri* bikinnya, karena sebelumnya udah pernah ngerjain juga, jadinya sudah mulai terlatih.

Langsung aja ah norak-in tampilan di berbagai gadget:

Ada yang mau juga webnya bisa muncul cantik di mobile browser? Boleh loh buat menghubungi saya, biar tampilan webnya bisa responsif 😉

Published by:

User Agent Spoofer

Jadi ceritanya saya baru saja selesai membuat mobile version dari web  yang saya buat. Nah, waktu mau mulai mengedit versi mobile-nya, saya bingung gimana cara tau bagian apa yang mesti dibenerin. Biasanya saya pakai inspect element di google chrome atau firefox untuk ngeliat bagian mana yang tampilannya masih kurang bagus. Nah, kalau dari hp saya belum tau gimana caranya inspect element itu.

Tapi untungnya google chrome punya add-ons yang memudahkan buat para web developer untuk melihat versi mobile ataupun tampilan di browser lain dari web yang dikerjakannya, namanya User Agent Spoofer. Bermanfaat banget nih. Tinggal pasang add-ons-nya terus bisa langsung pilih kita mau menampilkan tampilan dari sudut pandang apa. Mulai dari defaultnya, yaitu google chrome sendiri, mozilla firefox, opera, safari, sampai tampilan di windows phone.

Begini tampilannya, letaknya di kanan atas pada google chrome.

User Agent Spoofer

User Agent Spoofer

Gak cuman google chrome aja kok yang punya. Buat yang defaultnya make firefox, firefox juga punya add-ons UA Switcher yang fungsinya sama dengan UA Spoofer-nya google chrome.

Nah, buat yang mengerjakan web dengan responsive design (tampilannya otomatis menyesuaikan device yang dipakai), bisa banget nih ngutak-ngatik codingan css di tampilan yang berbeda-beda. Untuk yang belum responsive design, cara untuk membuat responsive design itu tidak begitu sulit kok.

  1. Cukup bedakan stylingnya atau file .css-nya. Misalnya kalau di web file .css itu judulnya style.css, untuk yang tampilan di mobile device judulnya mobile.css. Sebenerny file .css-nya juga bisa digabung, tapi akan lebih mudah dan tidak membingungkan sebaiknya dipisah.
  2. Di mobile.css, tulis[code language=”css”]@media only screen and (max-width: 480px){styling di sini}[/code]untuk mengkhususkan style pada mobile.
  3. Selanjutnya import mobile.css di css utama. Misalnya, file .css utama yang dipakai adalah style.css, maka tulis[code language=”css”]@import url(‘css/mobile.css’);[/code]

Cukup simple kan? 😉

Contoh perbandingan tampilan di web, iPad, dan android:

Published by:
%d bloggers like this: