[Review]: Mobile Website

Ukuran: px

Mulai penontonan dengan halaman:

Download "[Review]: Mobile Website"

Liana Gunawan
6 tahun lalu
Tontonan:

2 [Review]: Mobile Website Oleh: titan Perkembangan teknologi smartphone yang semakin pesat, berpengaruh juga pada dunia website, setelah beberapa waktu yang lalu boomingnya standar baru dari html yaitu HTML5 & CSS3, yang membuat website lebih flexible, efektif dan kayak akan fitur. Dewasa ini kita sering menjumpai website-website yang menyediakan tampilan khusus untuk mobilephone (terutama smartphone), sebagai contoh "m... Perkembangan teknologi smartphone yang semakin pesat, berpengaruh juga pada dunia website, setelah beberapa waktu yang lalu boomingnya standar baru dari html yaitu HTML5 & CSS3, yang membuat website lebih flexible, efektif dan kayak akan fitur. Dewasa ini kita sering menjumpai website-website yang menyediakan tampilan khusus untuk mobilephone (terutama smartphone), sebagai contoh "m.facebook, mobile twitter, m.tempo.co". Hampir seluruh smartphone mendukung penuh standar HTML5 & css3, membuat website bersifat semakin portable, akses dimanapun dan kapanpun. Mobile website di era sekarang lebih interaktif, tidak seperti jaman dulu harus menggunakan WAP dengan konten dan fitur yang terbatas. Bagaimana teknik membuat mobile website? kunci dasar dalam membuat mobile website adalah "membedakan tampilan (css+html)->layout" khusus untuk mobile atau tablet. membaca user agent kemudian melakukan user redirect ke domain mobile jika user mengakses dari mobile phone. Layouting mobile website : Ada beberapa teknik untuk membuat mobile website salah satunya dengan membuat tampilan khusus untuk mobile dengan sifat layout bersifat fluid. contoh tampilan layout yang biasa digunakan pada mobile website adalah sebagai berikut : source : teknik yang kedua dengan menggunakan css3 dimana kita hanya membuat satu website dan css yang membaca screen browser pengunjung teknik ini dinamakan "responsive-css", berikut beberapa contoh pengglan skrip dari responsive css : /* Smaller than standard 960 (devices and browsers) only screen and (max-width: 959px) { header h1 { border-bottom: 1px solid rgba(255,255,255,0.2);

3 text-align: center; header nav { text-align: center; header ul { display: inline-block; float: none;.bottom nav { text-align: center;.bottom ul { display: inline-block; float: none; /* Tablet Portrait size to standard 960 (devices and browsers) only screen and (min-width: 768px) and (max-width: 959px) { header h1 { width: 726px; header nav { width: 726px;.container, section { width: 756px;.full { width: 726px;.one_quarter { width: 159px;.one_third { width: 222px;.one_half { width: 348px;.two_thirds { width: 474px;.portfolio_4col li { width: 179px;.portfolio_3col li {

4 width: 240px;.portfolio_2col li { width: 361px; article.main { float: left; width: 300px; article.main_image { float: left; width: 144px; margin-right: 30px; margin-bottom: 20px;.carousel_slider ul { width: 400px;.bottom.copyright { width: 726px; border-bottom: 1px solid rgba(255,255,255,0.2); text-align: center;.bottom nav { width: 726px;.comment.content { width: 394px;.comment_reply.content { width: 314px;.recent_posts img { /* All Mobile Sizes (devices and browser) only screen and (max-width: 767px) {.bottom.copyright { header ul { header li { margin: 0; padding: 0;

5 background-color: #222; border-bottom: 1px solid #000; header li a, header li a:visited { text-align: center; margin: 0; padding: 0; header li:hover a, header li.selected a { border-bottom: none; header li ul { margin-top: -20px; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; header li:hover ul { width: auto; margin: 0; position: relative; margin-top: 0; opacity: 1; header li:hover li { background-color: #111; border: none; header li:hover li a { padding: 0;.comment.picture {.comment.content {.comment_reply { margin-left: 20px;.comment_reply.content {.not-selected {

6 /* Mobile Landscape Size to Tablet Portrait (devices and browsers) only screen and (min-width: 480px) and (max-width: 767px) { header h1 { width: 450px; header nav { width: 450px;.container, section { width: 480px;.full,.one_third,.two_thirds { width: 450px;.portfolio_3col li,.portfolio_4col li { width: 223px;.portfolio_2col li { width: 449px; article.main { float: left; width: 276px; article.main_image { float: left; width: 144px; margin-right: 30px; margin-bottom: 20px;.slider {.sidebar { border-top: 1px solid #eaeaea; float: right; margin-top: 20px; margin-bottom: 20px; padding: 0; padding-top: 40px; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;.bottom nav { width: 450px;

7 /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) only screen and (max-width: 479px) { header h1 { width: 270px; header nav { width: 270px;.container, section { width: 300px;.full,.one_third,.two_thirds,.one_quarter,.one_half { width: 270px;.one_half.one_quarter.first,.one_half.one_quarter.last { margin-left: 0; margin-right: 0;.portfolio_3col li,.portfolio_4col li { width: 223px;.portfolio_2col li { width: 449px; article.main { float: none; article.main_image { float: none; margin-bottom: 20px;.slider {.sidebar { border-top: 1px solid #eaeaea; float: right; margin-top: 20px; margin-bottom: 20px; padding: 0; padding-top: 40px; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;.bottom {

8 css akan membaca resolusi screen pengunjung dengan kode only screen and (max-width: 479px); 2. User Agent untuk mobile website yang memiliki domain khusus seperti m.tempo.co /m.facebook.com/mobile.twitter.com. website yang dibuat khusus untuk mobile kita harus membaca user browser dan meredirect domain secara otomatis ke domain web.kelebihannya kita dapat menyesuaikan konten dan fitur untuk mobile website, karena bagaimanapun juga website yang diakses via mobile harus dibuat dibuat seefektif mungkin, agar performance website kita tidakmenurun. Cara ini dapat dilakukan dengan beberapa teknik salah satunya dengan PHP, berikut penggalan code untuk membaca browser pengunjung : $ismobile = false; $isbot = false; $op = strtolower($_server['http_x_operamini_phone']); $ua = strtolower($_server['http_user_agent']); $ac = strtolower($_server['http_accept']); $ip = $_SERVER['REMOTE_ADDR']; $ismobile = strpos($ac, 'application/vnd.wap.xhtml+xml')!== false $op!= '' strpos($ua, 'sony')!== false strpos($ua, 'symbian')!== false strpos($ua, 'nokia')!== false strpos($ua, 'samsung')!== false strpos($ua, 'mobile')!== false strpos($ua, 'windows ce')!== false strpos($ua, 'epoc')!== false strpos($ua, 'opera mini')!== false strpos($ua, 'nitro')!== false strpos($ua, 'j2me')!== false strpos($ua, 'midp-')!== false strpos($ua, 'cldc-')!== false strpos($ua, 'netfront')!== false strpos($ua, 'mot')!== false strpos($ua, 'up.browser')!== false strpos($ua, 'up.link')!== false strpos($ua, 'audiovox')!== false strpos($ua, 'blackberry')!== false strpos($ua, 'ericsson,')!== false strpos($ua, 'panasonic')!== false strpos($ua, 'philips')!== false strpos($ua, 'sanyo')!== false strpos($ua, 'sharp')!== false strpos($ua, 'sie-')!== false

9 strpos($ua, 'portalmmm')!== false strpos($ua, 'blazer')!== false strpos($ua, 'avantgo')!== false strpos($ua, 'danger')!== false strpos($ua, 'palm')!== false strpos($ua, 'series60')!== false strpos($ua, 'palmsource')!== false strpos($ua, 'pocketpc')!== false strpos($ua, 'smartphone')!== false strpos($ua, 'rover')!== false strpos($ua, 'ipaq')!== false strpos($ua, 'au-mic,')!== false strpos($ua, 'alcatel')!== false strpos($ua, 'ericy')!== false strpos($ua, 'up.link')!== false strpos($ua, 'vodafone/')!== false strpos($ua, 'wap1.')!== false strpos($ua, 'wap2.')!== false; $isbot = $ip == ' ' strpos($ua, 'googlebot')!== false strpos($ua, 'mediapartners')!== false strpos($ua, 'yahooysmcm')!== false strpos($ua, 'baiduspider')!== false strpos($ua, 'msnbot')!== false strpos($ua, 'slurp')!== false strpos($ua, 'ask')!== false strpos($ua, 'teoma')!== false strpos($ua, 'spider')!== false strpos($ua, 'heritrix')!== false strpos($ua, 'attentio')!== false strpos($ua, 'twiceler')!== false strpos($ua, 'irlbot')!== false strpos($ua, 'fast crawler')!== false strpos($ua, 'fastmobilecrawl')!== false strpos($ua, 'jumpbot')!== false strpos($ua, 'googlebot-mobile')!== false strpos($ua, 'yahooseeker')!== false strpos($ua, 'motionbot')!== false strpos($ua, 'mediobot')!== false strpos($ua, 'chtml generic')!== false strpos($ua, 'nokia6230i/. fast crawler')!== false; selanjutnya : if($ismobile){ header('location: urlencode($_server['http_host']. $_SERVER['REQUEST_URI'])); exit();

okeh sekian dulu review mobile website, semoga bermanfaat :D referensi : http://www.1stwebdesigner.

10 okeh sekian dulu review mobile website, semoga bermanfaat :D referensi : dan berbagai sumber Tentang Penulis titan Hi, saya senang dengan dunia Komputer, more information visit

dokumen-dokumen yang mirip

BAB VI DESAIN WEB RESPONSIF

BAB VI DESAIN WEB RESPONSIF A. KOMPETENSI DASAR Memahami konsep dasar desain halaman web responsif Mampu menerapkan konsep desain web responsif ke dalam aplikasi Mampu menghasilkan desain aplikasi web