Baca Juga
Selamat malam .. pagi .. siang atau pun sore .. sesuaikan saja dengan keadaan planet yang agan tempati .. pada kesempatan yang ke 19x nya ini .. Catatan Si Oon .. akan berbagi CARA MEMBUAT TAMPILAN WEB, WAP DAN BLOG PAS DI SEGALA UKURAN LAYAR .. sebelum ke pembahasan kali ini .. jangan lupa baca juga postingan saya yang sebelum nya .. kali aja sedikit bermanfaat buat agan - agan semua nya .. yang gak sengaja kebetulan sudah membaca postingan ini
☞ 18. CARA BUAT WAP AUTOLIKE SENDIRI CUMA 1 MENIT DAN 2 WAP AUTOLIKE NEW OCHA LIKER
☞ 17. CARA BUAT GOOGLE ANALYTICS PADA BLOG ( Blogspot.com )
☞ 16. CARA BUAT FORM GOOGLE SEARCH ENGINE ( CSE / CUSTOM SEARCH ENGINE )
☞ 15. Script PHP AUTO LIKE FB DAN WAP AUTOLIKE 1000+ OCHA LIKER
☞ 14. Cara Buat Zona Download Video, Mp3, Image, Menu AutoLike Fb, Di Wapka Mobi
☞ 13. CARA KELUAR DAN MASUK ID BBM DI ANDROID TANPA HARUS MENDELETE BBM TERLEBIH DULU
☞ 12. Surah Almulk ( Ayat 1 s/d 30 ) Dan Terjemahannya
☞ 11. CARA BUAR REVIEW CSS MWB DI WAPKA
☞ 10. CARA BUAT RATING DI MWB
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 :mrgreen: .. 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 :D .. 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 :D .. 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 :mrgreen: .. 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 :D .. karna usia beranjak dewasa .. pemikiran dan ke inginan pun sudah laen lagi hahaha .. terbawa khayalan tingkat tinggi cerita nya :mrgreen: .. 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 .. :D .. 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 :D .. 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 ..
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 ..
Sehingga bisa kita buat seperti ini
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
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 ..
Dan cukup sampe disini dulu mengenai CARA MEMBUAT TAMPILAN WEB, WAP DAN BLOG PAS DI SEGALA UKURAN LAYAR .. sampai ketemu lagi di lain waktu .. dan di lain kesempatan .. akhir kata saya ucapkan ..
