iklan-surgaweb2

Di tutorial sebelumnya saya telah menjelaskan cara mendeteksi browser client yang menggunakan perangkat mobile. Silahkan dibaca disini: Cara mendeteksi mobile browser. Sekarang saya akan jelaskan perbedaan HTML untuk versi desktop dengan HTML untuk versi mobile.

Perbedaannya hanya pada meta tag:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Jadi jika anda ingin membuat halaman HTML anda menjadi versi mobile anda cukup menambahkan meta tag di atas ke header HTML anda. Misalnya:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Web versi mobile</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<p>Hallo ini web versi moblie</p>
</body>
</html>

Gampang kan?! 🙂

Nah agar tampilan web anda tidak kacau dalam artian tidak melebihi lebar layar HP/tablet maka semua element width dalam css dan html anda jangan menggunakan lebih dari 400px. Untuk leibih amannya gunakan width:100%; atau width:auto;

Jadi sebenarnya perbedaanya hanya pada skalanya. Jika halaman webnya kita buat skala maksimum pada meta tag adalah 1.0 maka halaman website kita tersebut tidak bisa diperbesar (zoom) atau diperkecil. Dia akan otomatis menyesuaikan dengan ukuran layar device yang membukanya. Tapi kalau ada terdapat misalnya gambar yang ukurannya melebihi ukuran layar smartphone pengunjung maka tampilannya akan sedikit kacau. Jadi harus diseting agar ukurannya tidak melebihi ukuran layar dengan cara yang sudah disebutkan diatas.

Baca juga: Cara membuat CSS khusus untuk tampilan web mobile

jual tool seo penyusun kata otomatis

Yang saya dijelaskan diatas ini sebenarnya teori dasarnya saja. Namun seiring perkembangan teknologi, untuk membuat website versi mobile sekarang sudah sangat banyak tools atau library yang langsung bisa kita pakai tanpa repot-repot kita membuatnya dari awal. Salah satunya anda bisa menggunakan Jquery Mobile yang dirancang khusus untuk pembuatan website versi mobile. Atau anda juga bisa menggunakan web desain framework populer seperti:

Twitter Bootstrap 3

Bootstrap

 

Foundation Framework

Foundation

Gumby Framework

Gumby

 

Yahoo Pure CSS

Pure

 

InK Interface Kit

Ink

Dengan menggunakan framework web desain ini anda sudah bisa mendapatkan website versi mobile secara otomatis karena frameword desain ini sudah auto responsive yang artinya akan otomatis mengenali apa perangkat pengunjung dan langsung menyesuaikan tampilannya. Jadi silahkan anda pelajari salah satu dari framework ini agar website anda support untuk mobile view.

 

Semoga bermanfaat.

[AdsWithin]

(Visited 91,228 times, 1 visits today)

Related posts:

  1. Tools untuk membuat web versi mobile
  2. Cara membuat website versi mobile dengan bootstrap
  3. Cara Membuat Website WordPress Versi Mobile
  4. Cara membuat CSS khusus untuk tampilan web mobile
  5. Cara membuat webiste mobile dengan jquery mobile

Related Posts

PHP Script Website Sekolah Sekolah

Download Script Website Sekolah Gratis 100%

Vebri Dores
Mobile

Cara Blokir Nomor Tidak Dikenal di WhatsApp

Vebri Dores

119 thoughts on “Cara membuat web versi mobile”

  1. saya ingin bertanya.jika saya sudah mempunyai website namun ingin diubah menjadi versi mobile menggunakan wap.apakah saya harus membuat dari awal atau mengubah dari web yg sudah ada?dan apa saja yg diubah?terima kasih.

    Balas

    1. bukan mengubah tetapi menambahkan versi mobile. jadi kalau pengunjung mengakses web anda menggunakan laptop maka tampilkan web versi desktop, dan kalau pengunjuang mengakses melalui hp/mobile maka alihkan ke versi mobile.
      web versi mobile harus anda sediakan terlibihdahulu. anda bisa memisahkan alamat url untuk versi mobile dengan yang versi desktop seperti facebook.com dan m.facebook.com

      namun anda juga bisa tidak memisahkan kedua versinya, dengan cara ketika pengunjung mengakses menggunakan perangkat mobile maka yang di css include adalah css yang versi mobile dan kalau tidak maka css yang diinclude adalah css versi desktop.

      agar kita tahu pengunjung mengakses pakai perangkat mobile atau tidak anda bisa baca tutorial saya disini https://blog.waroengweb.co.id/php/cara-mendeteksi-mobile-browser.html

      silahkan mencoba dulu kalau masih kurang jelas kami bersedia membantu anda. 🙂

      Balas

  2. boleh tanya, klo buat web mobile itu buat aplikasinya ato cuma tampilan web versi mobilenya saja?, trus kalo apa bedanya kalo membuat web mobile menggunakan wml dgn html?
    terima kasih 🙂

    Balas

    1. wml itu bahasa markup yang digunakan untuk mengimplementasikan WAP. sekarang kita sudah hampir meninggalkan web versi wap. browser di hp sekarang sdh mampu menampilkan html dan css bahkan javascript dan flash.
      sebenarnya web versi mobile itu bisa menggunakan aplikasi yang kita buat khusus untuk device moblie tertentu. contoh gampangnya coba buka facebook via operamini maka yg tampil adalah halaman html versi mobile. tapi kalau kita buka via BB mengguanakan aplikasi facebook untuk bb maka yang tampilannya pasti lain karena itu bukan sekedar web tapi aplikasi.
      unutk bisa membuat aplikasi mobile kita harus tahu bahasa pemograman yang digunakan di handphone tersebut. ada 3 aplikasi mobile yang sedang populer sekarang yaitu android, iphone, dan bb.

      Balas

  5. gmana caranya untuk membuat aplikasi di dreamweafer untuk membedakan mobile dengan dekstop ?
    apa itu membuat dua file yang satu buat indeks mobile dan yang satu buat indeks dekstop?

    Balas

  6. struktur filnya mungkin bisa begini:

    / (folder utama)
    index.php
    utama.php
    m (folder / subdomain)
    – index.php

    file home untuk versi desktop ada di file utama.php dan file home untuk mobile ada di index.php dalam folder m
    lalu fil index.php yang di folder utama pasang pendeteksi browser. jika yang akses pakai komputer biasa maka include file utama.php jika yg akses dari mobile maka include file m/index.php

    untuk membuat pendeteksi silahkan baca artikel saya https://blog.waroengweb.co.id/php/cara-mendeteksi-mobile-browser.html

    Balas

  8. Thanks berat ilmunya yg sangat berguna… Masih boleh banyak belajar khan mas ? maklum masih pemula nich…. gimana membuat file index.php dan apa isi filenya ? trims….

    Balas
  9. Ping-balik: Cara membuat webiste mobile dengan jquery mobile | WaroengWeb Blog

  10. pak, gimana caranya
    1. dr panduan yg bapak berikan, itu save filenya apa?
    2. kebnykan website http://www.domain.com, mengkonversi jd m.namadomain.com, itu bagaimana?
    3. bagaimana caranya tampilan web utama kita, sama spt versi mobilenya?
    ditunggu informasinya
    thank you

    Balas

    1. 1. save filnya index.php lihat komentar saya diatas sudah saya jelaskan
      2. bukan mengkonversi tapi caranya buatlah subdomain di server hosting anda dengan nama m . maka otomatis di server anda akan ada folder m. nah lalu duplikat script website utama anda ke dalam folder m kemudian ubah file index.php nya atau tambahkan meta tag seperti ini :

      3. berarti ga perlu web versi desktop dong. jadinya web mobile aja ga usah bikin subdomain m.

      Balas

  11. q mau tanya gan
    q punya wapsite di wen.ru dan pertanya’anya gimana kalo tampilan wap di desktop brbeda dngn tampilan di mobile, lebih gampangnya ada dua tampilan.
    makasih

    Balas

  12. saya udah coba, udah buat subdomainna. tetapi masih gak bisa.
    yg saya lakukan,
    mengganti script index.php dengan script diatas, kemudian script lama index.php saya ruba ke utama.php.

    saya udah ikutin caranya, tapi gak bisa? apakah ada yg ketinggalan step-step diatas. mohon informasi dan bantuannya yah 🙂

    Balas

    1. testingnya pakai hp bro. sebenarnya bedanya cuman sedikit. lihat meta tag nya ini

      initial-scale=1.0; maximum-scale=1.0;

      itu artinya layar di hp kita tidak bisa dizoom karena skala maksimumnya 1.0. jadi resulusi gambar dan ukuran hurufnya otomatis disesuaikan dengan resolusi layar hp

      Balas

  13. keren bangat sharingnya mas bro… bagaimana dengan 2 pilihan tampilan, bila menggunakan pc akan langsung pake web bila menggunakan ponsel akan langsung menggunakan mobile version… trims bro sharingnya…

    Balas

      2. mas bro bisa bantu saya ga, saya punya web yg dibikin orang lain, dia ga bisa bikin versi mobilenya, mas bro bisa aga bantu saya agar web saya bisa tampil versi mobilenya?

        Balas

  17. Pak,,,saya lagi membuat web mobile menggunakan dreamweaver cs5.5 tapi untuk build ke mobile aplication nya tidak tersedia di tool dreamweaver.bapak punya tutorial web mobile gak?Trima kasih sebelumnya.

    Balas

  21. apakah ada cara menghindari hack untuk web versi mobile gan,dulu saya punya klien.webnya yang versi mobile yang dihack sementara versi yang lain bisa diakses

    Balas

  24. askum sob. . Mau tanya ni. . Gimana cara memasang theme kreator sendiri di hp yg sudah kita rubah tampilan. Dan digunakan di mywapblog. Contohnya spiderme.thm atau harypother.nth itukan theme hp. Tp digunakan di mywapblog bs gk sob. Trims..

    Balas

  25. mau nanya nih kk masih newbie, saya punya website html/css, ditutorial ditunjukan bahwa kita hanya menambahkan “meta” saja, itu artinya membuat html ulang untuk versi mobile nya dong kak?

    satu lg kak, untuk web mobile tsb, harus menggunakan php. apakah bisa website html saya dirubah menjadi phpV

    Balas

  26. mau nanya nih kk masih newbie, saya punya website html/css, ditutorial ditunjukan bahwa kita hanya menambahkan “meta” saja, itu artinya membuat html ulang untuk versi mobile nya dong kak?

    satu lg kak, untuk web mobile tsb, harus menggunakan php. apakah bisa website html saya dirubah menjadi php? bagaimana cranya kak ?

    maaf bnyk tanya, masih baru banget didunia website
    terimakasih sebelumnya kak :))

    Balas

  28. permisi numpang tanya, kalau mau test web jquery mobile nya lgsg ke hp android pakai connectify me apakah bisa ? soalnya sy cb hp sy tdk bs masuk server tp ketika sy coba pakai emulator opera mini emulator bisaa , makasih sbelumnyaa..

    Balas

      1. terimakasih sebelemnya ,maksd sy sy sudah mencoba akses dr hp mengetik alamat ip/folder/namafile.php tp selalu koneksi serve timeout apakah hal ini bisa disebabkan karena jquery mobile nya tdk support ?

        Balas

        1. coba aja anda akses file anda yang selain jquery mobile apakah timeout juga. kalau iya berarti koneksi ke server anda yang bermasalah. jika anda menggunakan server localhost di windows anda harus membuat setingan firewall anda off

          Balas

  29. mas mau nanya, saya punya situs yang di flas itu bagaimana ya untuk convert ke versi mobile, apa html pakai yang di atas yadi ya? makasih….terus apa kode di atas tadi langsung say ataroh di situs langsung work ya,, saya belom mmencoba, karena saya tes di blogspot tidak bekerja, terim kasih

    Balas

  30. mau nanya mas, saya kan punya situs ya, nah situs saya di flash, terus yang saya tanyakan kan situs flash kan pake XML, apa bisa ya pake kode di atas, terus misal untuk ngetes apa harus pake hp? misalnya di blogspot kan ada preview untuk mobile apa bisa ya pake itu?

    terus satu lagi mas kalo situs yang yang belom ada set untuk versi mobile sperti blogspot apa harus menambah kode lain selain kode di atas? apa hanya menggunakan kode di atas sudah bia?

    terima kasih mas, saya lagi pengen nie mas situs versi mobil.

    Balas

  31. wah, tutorial nya bagus skali 🙂

    saya ada pertanyaan, apa bila tidak keberatan,
    saya menggunakan dreamweaver untuk mencoba membuat
    mobile web, menggunakan jquery
    itu secara otomatis berbentuk mobile size,
    tetapi, yang saya bingungkan, bagaimana cara input gambar untuk header dan footer

    serta cara menata layoutnya 😀

    mungkin bisa membantu,
    dan terima kasih banyak mas 😀

    Balas

    1. biasa aja sama dengan versi desktop namun disarankan untuk width nya pakai % aja misal 100% atau 50%. kalau pakai px nanti tidak bisa menyesuaikan dengan ukuran layar handphone atau tablet yang berbeda2

      Balas

  38. Mantaffff….

    masih ada pertanyaan nih gan..
    ketika kita buat sub domain “”m””
    apakah seluruh isi file utama seperti index.. contact us. css. jaquery, dll nya do copy semua ke folder “”m”” dan di ubah beberpa point css nya agar user frendly..?

    soalnya kalo cuma index nya saja yang di copy ke folder m.. ketika kita mengakses hlaman lain maka akan kembali ke versi dekstop..

    Balas

    1. bikin subdomain baru yaitu m.binatang.net lalu arahkan ke folder m. dalam folder m masukkan website versi mobile. trus di file index.php pada domain utama (bukan folder m) ditambahkan pendeteksi browser. jika browser pengunjung adalah perangkat mobile maka arahkan ke subdomain m.

      Balas

  40. oya mas brow mau tanya, web saya terkadang Index google na sering ilang. Tadinya yang ke Index sekitar 3000 trus kok tiba-tiba tinggal 1000 itu apa penyebabnya??????

    mohon di bantu untuk kawan-kawan yang punya solusi.

    Balas

    1. 1. kalau wordpress tergantung temanya. ada tema yang support mobile. seperti tema responsive html. itu sudah langsung menyesuaikan dengan perangkat mobile.
      2. ya. ini utk yang bikin web sendiri. kalau bagi yang belum paham html, terbiasa pakai cms, saya sarankan ikut aturan main cms nya.
      3. tidak seperti itu. ini hanya untuk menyesuaikan tampilan saja. kalau yg anda maksud itu namanya subdomain mobile.

      Balas

  44. sharing ilmunya sangat membantu sekali, namun saya masih bingung bukan dengan info yang saya baca pada web saudara, tetapi masih agak repot untuk mengaplikasikan nya untuk web saya, sepertinya butuh waktu dalam melakukan uji coba
    terima kasih

    Balas

  45. Mau tanya gan…berarti kalau kita buat web dengan meta untuk mobile dan ketika kita akses dengan laptop itu tetap tampilan desktop ya?walau ada meta untuk mobilenya?dan ketika kita akses dengan smartphone akan jadi tampilan mobile web?benar tidak gan? 🙂

    Balas

  46. Saya agak kesulitan membuat website saya menjadi mobile friendly, kalu dibuka di smartphone sih bakalan menyesuaikan ke lebar smartphone yg dipake, cuma loading nya agak lama kalu di buka di hape, tapi kalo di laptop sih udah agak cepat mas. mohon solusinya 🙂

    Salam @infokuiz

    Balas

  50. Bos kalau sy masih awam sekali dalam web tapi ingin belajar Dari Nol bisa dibantu?sy minta dikirim kan tutorial nya Dari dasar untuk Cara biking web baik yg pake blog,atau WordPress dan yg web pake .com mohon dikirim kan tutorialnya Serra link nya.terimakasih. GBU

    Balas

    1. kalau mau instan anda bisa pakai wordpress. coba dulu daftar di wordpress.com. bikinlah blog gratisan dulu disana. coba-coba aja posting dan ubah tampilan sesuka anda. nah kalau sudah terbiasa dengan yang gratisan anda bisa coba pesan hosting dan beli domain sendiri. banyak penyedia hosting dan domain di indornsia tinggal cari aja di google. anda bisa meminta ke penyedia hosting tersebut untuk menginstallkan wordpress untuk anda. kemudian anda bisa memakai wordpress tersbut untuk website anda sendiri. termasuk untuk beli domain .com anda tinggal chating aja dengan penyedia hosting dan domain tersebut untuk mengorderkan domain untuk anda. biasanya CS mereka akan membantu anda dan memberikan petunjuk pemakainnya.

      Balas

  59. kang kalau saya buat web nya menggunakan CI, cara buat test di hp nya gimana ya? misalkan saya copy index.htmlnya saja ke hp, ntar css,js dllnya gakan bisa kebawa kah?

    tolong jawab ya kang

    Balas

  60. kang ini tuh saya udah coba nyisipin codingnya. dan bisa langsung versi mobile, bisa juga versi web.

    jadi saya gaperlu kan buat folder duplicate yang versi mobile nya ?

    Balas

  66. pak, gimana caranya
    1. dr panduan yg bapak berikan, itu save filenya apa?
    2. kebnykan website http://www.domain.com, mengkonversi jd m.namadomain.com, itu bagaimana?
    3. bagaimana caranya tampilan web utama kita, sama spt versi mobilenya?
    ditunggu informasinya
    thank you

    Balas

  67. Maaf mas saya suka baca blog mas izinkan saya bertanya sedikit, begini ada template kesukaan saya , saya pengen ngotak atik tpi takut nah saya make plugin jetpack kira” bagus ga ya? terima kasih

    Balas

  69. mas saya pakai blogger….kalau saya mau menampilkan blog saya versi mobile, kok related pos, widget-widget penting, dan breadcrumbs. GAK TAMPIL YA….padahal saya sudah pasang <b:widget id mobile='yes'

    oiya mas saya juga masang laman diatas header, tapi gak tampil juga via mobile…mohon bantuanyya!

    terimakasih

    Balas

  71. Terimakasih informasinya ini sangat membantu sekali…dan Saya sangat Suka membaca Artikel di blog ini karena semakin menambah pengetahuan saya… di tunggu artikel yang lainya.

    Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

WhatsApp chat