Cara Membuat Tampilan Web, Wap dan Blog Pas di Segala Ukuran

Ok Next .. Kembali kepembahasan kali ini .. yaituCARA MEMBUAT TAMPILAN WEB, WAP DAN BLOG PAS DI SEGALA UKURAN LAYAR .. mengingat pengalaman saya dulu .. di tiap kali mencoba coba belajar mendesain web .. lagi - lagi saya menemukan ke gagalan .. sudah d coba berulang ulang kali .. tapi tetep saja .. sama sekali tidak menemukan titik terang .. permasalahan nya hanyalah di bagian tampilan .. disitu saya bener - bener merasa pusing 7 keliling .. kenapa begitu ?? .. ya karna hasil dari apa yang saya buat .. tidak pernah sama jika di lihat dari layar hp yang berbeda .. di tampilan hp A sangat pas dan ok lah .. tapi di lihat dari hp B .. C dan D .. beda - beda .. dan yang sangat saya sesalkan di lihat pada hp yang berukuran layar lebih kecil .. tampilan sangat tidak pas .. tumpang tindih & acak - acakan ..

saking sudah merasa pusing nya .. karna gk bisa - bisa .. akhir jya saya berhenti .. mengundurkan diri dari dunia maya .. terutama di dunia blogging .. setelah beberapa bulan saya kembali .. tapi disitu saya cuma menjadi seorang bloger Copas .. yang sama arti nya .. meng'update ulang isi artikel / postingan .. dari bloger lain .. tanpa di fahami / di pelajari / di coba nya dulu sendiri .. sebelum di update dan d publikasikan .. karna pada saat itu saya hanya melampiaskan rasa kesepian doank .. dari pada banyak maen gk karuan .. apa lagi banyak bengong .. akhir nya buka - buka .. & jadilah seorang bloger copas .. dulu saya mrnggunakan blog dari blogspot.com .. dengan seiring nya waktu .. lambat laun .. saya merasa malu sendiri .. malu kenapa saya tidak bisa berkreasi sendiri ?? .. kenapa saya lagi - lagi ngjiplak / meniru ide - ide orang lain ?? .. akhir nya saya pun kembali bangkit .. dan berusaha belajar sendiri .. sebelum membuka / membuat blog baru .. saya coba - coba kembali mendesain tampilan yang nanti nya akan saya pake di blog baru saya .. tetapi ya begitu lah .. nama nya juga orang belajar .. selalu mendapatkan kegagalan ..

tetapi saya coba terus menerus .. karna saya ingin bisa .. dan sedikit demi sedikit .. saya akhir nya tau dengan sendiri nya .. setelah saya bisa & tau .. akhir nya gk jadi bikin blog baru .. di karna kan hp saya udah ancur duluan .. akibat sering nya mengalami kegagalan .. membuat saya emosi .. karna pada saat itu juga tidak hanya sekedar ingin bisa & belajar mendesain sebuah web atau pun blog saja .. banyak hal yang ingin saya ketahui & ingin saya mencoba nya sendiri .. dan yaaa .. setelah hampir semua apa yang saya pelajari .. dapat saya selesaikan .. tapi saya kehilangan alat tempur .. di situ saya jarang lagi online .. cuma sesekali meluangkan waktu pergi ke warnet .. itu pun cuma nonton anu .. karna usia beranjak dewasa .. pemikiran dan ke inginan pun sudah laen lagi hahaha .. terbawa khayalan tingkat tinggi cerita nya .. dan akhir nya saya pun kembali lagi mempunyai handphone .. yaa walaw pun mirip seperti sandal bakiak 17an .. tapi gak apa lah .. yang prnting punya hp .. bisa SMS'an sama cabe - cabean hahaha .. jaman dulu saya umuran 19 - 20 sih belum ada ya cabe - cabean .. ada juga cabe - cabean maenan anak kecil .. .. lama kelamaan bosen juga .. akhir nya pas lagi merantau ketemu janda muda beranak satu .. disitu saya merasakan .. apa yaa kalau bahasa sunda nya ( Ragab ) .. hahahaha maklum lah biar pun orang indonesia .. tapi saya asli di lahirkan di tanah sunda .. jadi d maklum saja jika ada kata - kata yang tidak bisa saya terjemahkan ke bahasa nasional .. lagian kenapa juga sih ya .. saya ko jadi malah curhat .. hahaha ..

Ok lah kalau gitu .. berhubung waktu sudah menunjukan pukul 01:52 .. kita langsung saja ke poko pembahasan kali ini .. yaitu CARA MEMBUAT TAMPILAN WEB, WAP DAN BLOG PAS DI SEGALA UKURAN LAYAR .. saya rasa dari sedikit pengalaman saya dulu .. sudah dapat di pahami .. apa maksud & tujuan saya pada malam hari ini ..

Banyaknya smartphone dan device lainnya .. yang memiliki browser serta akses ke internet .. membuat Web Designer harus memikirkan .. banyak trik untuk membuat websitenya tetap dapat diakses .. dari manapun tanpa merusak desain yang sudah dibuatnya .. untuk tampilan desktop ..

Sebelumnya para pembuat website .. biasa membuat dua tampilan situs .. misalkan namadomain.com ketika dibuka di smartphone / mobile .. maka akan dialihkan ke m.namadomain.com .. dan sebagainya .. Namun dengan adanya CSS3 Media Queries .. yang belakangan ini banyak dibicarakan dan sampai menjadikan sebuah tren .. web baru Responsive Web Design .. semua dapat dilakukan tanpa harus membuat dua tampilan .. Satu untuk desktop dan satu untuk mobile .. Sangat Merepotkan bukan ? ..

Untuk Caranya sangat mudah .. Mari Memulai

Cukup mudah .. agan tinggal menambahkan @media .. ke dalam css websitemu ..

@media only screen and (max-width: 699px) { /* Tambahkan CSS untuk ukuran layar maksimal 699px (dari 0px - 699px) */ }

@media only screen and (min-width: 1000px) { /* Tambahkan CSS untuk ukuran layar minimal 1000px (dari 1000px - ~) */ }

@media only screen and (min-width: 700px) and (max-width: 999px) { /* Tambahkan CSS untuk ukuran layar minimal 700px dan maksimal 999px (700px - 999px) */ }

Untuk mencobanya .. agan bisa me-resize browser yang agan pakai .. Agar lebih spesifik lagi .. kita harus menentukan target layar dari website yang akan diakses diberbagai device .. Untuk smartphone biasanya berukuran .. kurang dari 320px di portrait mode dan kurang dari 480px di landscape mode .. Tablet berukuran sekitar 768px – 1024px .. Dan desktop dengan width yang lebih besar ..

Dan inilah hasilnya . . . .

@media only screen and (max-width: 1024px) { /* Desktop, Tablet & Mobile. */ }

@media only screen and (min-width: 768px) and (max-width: 1024px) { /* Desktop & Tablet */ }

@media only screen and (max-width: 767px) { /* Tablet (Portrait) */ }

@media only screen and (min-wdth: 480px) and (max-width: 767px) { /* Tablet (Portrait) & Mobile (Landscape) */ }

@media only screen and (max-width: 479px) { /* Mobile */ }

1024px disini adalah besar layar yang nantinya akan dipakai untuk width website kita .. Agan bisa menggantinya dengan 960px ( yang biasa banyak dipakai ) .. atau sesuai dengan ukuran yang biasa .. agan gunakan untuk lebar websitemu sendiri ..

Tambahan Meta untuk Browser iOS & Android

Browser bawaan untuk smartphone .. misalkan pada iOS & Android biasanya menggunakan zoom default .. yang berbeda - beda .. Dan itu sama sekali membuat media queries .. yang sudah kita buat terkadang menjadi tidak pas .. Untuk itu kita perlu menambahkan meta baru di head website yang kita buat

< meta name="viewport" content="width=device-width,initial-scale=1.0" / >

width=device-width .. akan mengatur width sesuai dengan width di device .. yang digunakan .. Dan initial-scale=1.0 .. akan men-zoom sesuai dengan ukuran valuenya .. 1.0 berarti berskala 1:1 dengan aslinya .. dan agan bisa menggantinya ..

Tips Dari Saya

√ Letakkan media queries dipaling bawah setelah style default bawaan .. Jadi style default tidak akan ikut terbawa .. jika media queries sudah ditentukan untuk suatu ukuran layar tertentu ..

√ Urutkan media queries dari urutan yang paling besar ke-kecil .. Terkadang ada beberapa style yang tabrakan .. dengan style lainnya yang sudah didefinisikan diatasnya ..

Sudah Bisa di gunakan di browser terbaru

CSS3 Media Queries ini sudah bisa digunakan di semua browser terbaru .. termasuk IE9 keatas dan browser bawaan Android / iOS dan Blackberry

Jadi tunggu apa lagi .. buat website-mu tetap rapi diakses dari mana saja ..

Note : Perlu di ingat postingan ini hanya cuma sebagai pengingat buat saya .. ketika saya lupa .. dan buat pemula yang lagi berusaha ingin mendesain tempilan Web / Wap / Blognya sendiri .. tidak di anjurkan bagi para master yang sudah ahli di bidang nya .. tetapi semoga apa yang saya share di kesempatan kali ini .. bisa sedikit bermanfaat buat semua nya .. yang sudah kebetulan membaca postingan ini .. kurang lebih nya mohon di maklum saja .. bila sedikit ngawur .. atau pun jika ada salah - salah kata .. dalam penulisan ..