Tiga Cara Implementasi Mobile Web

Seiring berkembangnya Smartphone dan Tablet , berkembang pula pembuatan website yang dikhususkan untuk pengguna mobile. Saat ini ada 3 cara yang paling populer dalam mengimplementasikan website untuk diakses digadget dengan keterbatasan layar yang kecil dengan antarmuka touchscreen. Tiga teknik yang akan saya jelaskan adalah Mobile site,  Dynamic Serving, Responsive design.

Responsive Web Desain
Responsive Web Desain

Mobile Site

Mobile site juga sering disebut juga dengan teknik separete URL karena pembuat web harus membuat dua versi untuk webnya. Biasanya mobile site menggunakan subdomain m atau mobile di urlnya. Contohnya m.detik.com, m.facebook.com dan sterusnya. Teknik ini adalah teknik paling lama dan sekarang sudah mulai ditinggalkan. Berikut ini adalah kelebihan dan kekurangannya

Kelebihan 

  1. Loading lebih cepat karena content yang di load lebih sedikit.
  2. Mampu berfungsi dengan baik bahkan di Feature phone

Kekurangan

  1. Repot karena harus membuat dua versi website versi desktop dan versi mobile
  2. Tidak bagus dari sisi seo karena ada dua alamat url untuk content yang sama.
  3. Biasanya tampilan dari mobile site tidak menarik karena fokus pada “yang penting content bisa dibaca”.

Dynamic Serving

Dynamic Serving digunakan untuk mengatasi permasalahan SEO di mobile site. Dengan dynamic serving, dari manapun user mengakses, baik dari feature phone, smartphone,atau desktop Browser) alamat URL Tetap sama dan ini sangat bagus buat SEO. User akan mendapatkan website sesuai dengan device yang sedang dipakainya dan tanpa mengakses URL yang berbeda.

Kelebihan

  1. Content disesuaikan dengan perangkat
  2. bekerja dengan baik disegala perangkat jika di implementasikan dengan benar
  3. Menggunakan satu URL sehingga bagus buat SEO.

Kekurangan 

  1. Implementasinya cukup rumit karena kita harus mengimplementasikan semau proses di server
  2. Harus mendata user agent di setiap gadget/device
  3.  Proses redirect menyebabkan waktu akses menjadi lebih lama

Responsive Web design

Teknik ketiga inilah yang sedang trend di dunia Web.  Teknik ini memanfaatkan Meta View Port di HTML5. Apa kelebihannya?

Kelebihan

  1. Implementasi Mudah karena hanya menyediakan satu website dan satu base code
  2. Bagus buat SEO karena hanya menggunakan satu URL
  3. Tampilan halaman web akan menyesuikan diri dengan perangkat user (adaptive)

Kekurangan 

  1. Boros Bandwidth jika diakses dari perangkat feature phone/smartphone karena content sama persis dengan web desktop
  2. Waktu loading sama dengan waktu loading akses desktop
  3. Responsive web design hanya berjalan untuk perangkat yang mendukugn HTML5 Meta View Port

Dari penjelasan diatas, tidak ada teknik yang paling bagus, yang ada adalah yang paling sesuai dengan budget, Kemampuan developer  dan besarnya website. Namun jika dilihat dari sisi teknis, maka teknik Responsive web Design adalah yang paling mudah di implementasikan  bahkan oleh orang awam sekalipun. Jika anda memakai wordpress, teknik ketiga ini lebih mudah lagi karena cukup mengunakan Thema WordPress yang responsive.

Untuk mengimplentasikan cara diatas, sudah banyak tutorial di internet, namun jika sempat saya akan memberi contohnya di lain waktu.  Referensi lebih lanjut tentang 3 teknik diatas bisa dibaca di link berikut :

  1. Mobile SEO, https://developers.google.com/webmasters/mobile-sites/mobile-seo/
  2. A Cheat Sheet for Mobile Design: Responsive Design, Dynamic Serving and Mobile Siteshttp://www.bruceclay.com/blog/mobile-design-cheat-sheet/
  3. A Comparison of Methods for Building Mobile-Optimized Websites, http://sixrevisions.com/mobile/methods-mobile-websites/

Download Free HTML5 Bootstrap Theme Template

Mendesain website di era responsive memang gampang gampang susah. Desain web sekarang sangat berbeda dengan era 5 tahun yang lalu. Dulu, anda cukup belajar CSS Layout, Table Layout atau Photosop, maka desain web sudah dikatakan “KEREN”. Untuk website pemerintah apalagi, sudah baku dengan konsep 3 kolom dengan rincian, Header, menu atas, widget kiri, content ditengah, dan widget kanan serta footer dengan tulis Copyright by Foo Design. Betul ga?

Sekarang eranya responsive. Untuk mengakses website tidak melulu harus pake PC atau Laptop, namun juga merambah ke Tablet serta smartphone. Agar website tampil cantik disetiap device bukanlah perkara gampang, maka dari itu munculah Framework CSS berbasis Grid seperti Bootstrap, UIKit, Grid960, Foundation Framework dan sebagainya. Dalam artikel ini saya fokus pada Thema Bootstrap saja mengingat sepertinya nih (setahu saya) bootstrap sudah menjadi standar de facto untuk Thema website yang responsive. Thema ini ada yang dijual dan ada juga yang free. Dilihat dari sisi penggunanya, Thema bootstrap dibagi lagi menjadi thema HTML, Thema Wordpess dan Thema Joomla.

Pemilik website wordpress atau joomla cukup install thema dan Apply thema maka tampilan langsung berubah responsive dengan perubahan total. Untuk Thema HTML sendiri cocok bagi para programer Web yang malas mempekerjakan desainer atau mau hemat anggaran. Cara termudah tentunya dnegan mencari Thema Bootstrap yang free, terutama lisensi Apache atau MIT Licence yang bisa digunakan untuk proyek komersial. Langsung ke inti, berikut ini adalah website yang menyediakan thema Gratis berbasis Bootstrap yang bisa anda pakai.

shapebootstrap.net

Thema bootstrap disini rata rata sudah menggunakan versi 3.x. Thema juga tersedia untuk Joomla dan WordPress dengan jumlah terbatas.Kategori thema disini juga cukup lengkap, dari One page Website, Portofolio, Bisnis template, Admin Template, Landing template, Coming soondan sebagainya. Anda cukup preview dan DOWNLOAD jika merasa cocok.

shapebootsrap

 

BootstrapPage.com

Bootstrappage.com adalah website yang sudah cukup lama memberikan thema berbasis bootstrap secara gratis. Candralab eCommerce yang saya open sourcekan pun menggunakan salah satu thema dari BootstrapPage. Thema gratis disini tidak terlalu banyak, namun cukup bagus untuk membuat website Company profil atau eCommerce berbasis bootstrap. Yang perlu anda perhatikan adalah thema gratis disini ada yang menggunakan bootstrap3 dan masih ada yang menggunakan bootstrap2.x.

Website bootstrappage.com
Website bootstrappage.com

BootstrapPaste.com

Jika saya lihat websitenya, sepertinya desainer bootstrap ini dari indonesia. Nama nama themanya seperti Dewi, Resi,Hidayah dan sebagainya

herutempalte

HTML5 Up

Sebenarnya, website ini tidak semua menggunakan Bootstrap, namun semua thema disini menggunakan Teknologi HTML5 Responsive desain. berbeda dengan website lain, Thema disini paling banyak digunakan untuk One page Website  atau profil dengan thema yang mirip mirip, perbedaannya ada pada header adn kombinasi warna. Website ini juga menawarkan fitur untuk mempreview hasil tampilan web di device Tablet atau smartphone.

html5up
HTML5 Up menyediakan puluhan thema HTML5 Responive yang bisa anda pakai secara gratis

Bootswatch.com

Bootswatch lebih tepatnya menyediakan Visual Style berbasis Bootstrap. Jika anda belajar menggunakan bootstrap, maka anda dapati rata rata thema Hitam putih dengan warna icon dan button default. Bootswatch menyediakan Visual Style (Swatch) Untuk Bootstrap3  ada sekitar 17 Visual style yang bisa anda pakai secara gratis. Secara pribadi, saya lebih sering menggunakan Bootswatch untuk thema Admin . Jika anda ingin mendapatkan Visual style versi 2.x juga ada. Untuk versi bootstrap versi 2, visual style bisa didownload si http://bootswatch.com/2/.

Bootswatch menyediakan visual style untuk website berbasis bootstrap
Bootswatch menyediakan visual style untuk website berbasis bootstrap

BootstrapZero

Website ini lebih tepat disebut Bootsrap Hero karena thema gratis yagn disediakannya bukan hanya keren tapi profesional dan sekelas Thema premum. Pokoknya Website Best of the best dari free thema Bootstrap ya BootstrapZero ini. Disini juga ada puluhan thema Front End yang siap pakai. Maknyus dan Top markotop deh pokoknya

bootstrapzero

 

And One More thing!

Setelah anda mendapat hal paling top markotop dalam masalah bootstrap thema, pastinya dong anda kepikiran gimana ya cara cepat download semua resource gratis dengan puluhan thema bootstrap diatas? ANDA BISA MENDAPATKAN Sebagian besar thema diatas beserta component bootstrap lain dalam sekali DOWNLOAD  cukup masuk ke http://www.bootbundle.com, Lalu KLIK DOWNLOAD.  Bagaimana? Super duper keren kan?