Tidak bisa dipungkiri semakin banyak pengguna smartphone yang lebih nyaman browsing menggunakan gadgetnya ketimbang Desktop PC. Pembeli adalaah raja sepertinya berlaku juga di ranah online, dimana visitor adalah raja, bila tampilan website kita tidak nyaman maka visitor akan mencari web lain, sadisnya, kita sebagai pemilik web di judge dalam beberapa detik saja.
Continue reading
Banyak jalan menuju Roma, dan berikut adalah salah satunya: Gunakan CSS, caranya?
Sering mengirimkan email html dengan tabel ke microsoft outlook dan bingung mengapa selalu ada space putih yang terlihat diantara tabel? Sebel kan rasanya? Berikut saya mendapat informasi tentang beberapa alternatif cara untuk menghilangkan space 1 pixel tersebut di microsoft outlook 2007 dan 2010.Sebelumnya, teman-teman yang mengalami hal ini biasanya mereka yang mengirim email-email berformat HTML, atau mengirimkan newsletter. Dan ini juga sepertinya sudah jadi kelainan bawaan pada microsoft outlook sendiri. Sebagaimana membuat newsletter memerlukan testing dan re-testing, maka keanehan tampilan yang membuat ada space 1 pixel (semacam border putih) di tabel ketika dibuka di outlook inilah yang membuat saya gondok juga karena jadi harus testing dan re-testing teroooss…..
Berdasarkan pencarian dari google, alternatif cara menghilangkan space 1 pixel yang sepintas jadi seperti white border 1pixel pada tabel di microsoft outlook 2010 adalah sebagai berikut:
< table border='0' cellpadding='0' cellspacing='0' >
table {border-collapse: collapse;}
table td { border-collapse: collapse; }
table td {
border-collapse: collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
Jadi, jika ada space diantara tabel-nya masih membandel, mohon pencerahannya teman-teman sekalian.Bila ada yang menemukan alternatif lainnya juga saya harap bisa berbagi disini juga, biar kita semua bisa! 🙂
Sumbar pencerahan: googling
Apakah kamu merasa loading time website lemot? lama loadingnya? berarti loading time website harus dipercepat kalo tidak mau kehilangan visitor, berikut adalah tips-tipsnya 🙂Beberapa hal yang dapat dilakukan dari sisi optimasi HTML untuk mempercepat loading time website adalah sebagai berikut:
contoh: tambahkan kode berikut di .htaccess untuk meng-cache CSS dan Javascript kamu
ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year"
Oke, baru segini nih yang saya tahu. Mohon masukkan jika ada tambahan 🙂 Terima kasih sudah baca, semoga bermanfaat dan selamat berbagi, supaya kita semua bisa!
Berikut adalah masih tips mempercepat loading time website tetapi dengan pendekatan CSS
Pernah kah membuat tampilan website yang sangat bagus kelihatannnya di desktop, namun menjadi kurang ‘pas’ di browser mobile atau malah berantakan? nah buat temen-temen yang ingin membuat design web template yang fleksible di semua browser, meta tag viewport ini sangat berguna mengatasi hal tersebut.
Sebenarnya konsep viewport ini dicetuskan oleh apple (CMIIW) untuk produk2nya termasuk IOS pada ipod/iphone dan ipad, namun diterapkan juga oleh browser-browser lainnya. (Apple memang pelopor yah hehe)
Untuk gampangnya, sebagai contoh tampilan yang dilihat adalah tabel berukuran 980px. Coba langsung tambahkan kode-kode berikut diantara < HEAD>, dan apa yang akan terjadi?
< meta name="viewport" content="width=device-width" >
Ipad pada posisi landscape mempunyai resolusi 980px, dan pada posisi portrait akan memiliki resolusi 768px,maka jika ipad diputar dari landscape ke portrait. Tabel berukuran 980px akan menyusut skalanya menjadi muat di 768px, jadi bukan ukuran tabelnya yang berubah, tetapi skalanya, maka tulisannya akan terlihat mengecil.
< meta name="viewport" content="width=320" >
Ini sangat berguna jika kamu merancang tampilan khusus untuk device tertentu saja. Untuk iphone misalnya.
< meta name="viewport" content="initial-scale=1" >
Berapapun ukuran resolusi browser, tampilan akan 100%. Pada kasus ipad rotation tadi, maka tampilan akan sedikit terpotong pada mode portrait karena skalanya tetap 980px.
< meta name="viewport" content="maximum-scale=1" >
Menentukan maksimum zoom-in yang bisa dilakukan, kalo ini kan 1, berarti gak bisa di zoom-in lagi deh.
< meta name="viewport" content="user-scalable=no" >
User tidak bisa zoom-in dan zoom-out.
Satu hal lagi yang layak dicoba, meta tag viewport memungkinkan lebih dari satu content dimasukkan, cukup dipisahkan dengan tanda koma ‘,’. contohnya:
< meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
Saya setuju dengan kata-kata author dari artikel ini (yang juga jadi referensi saya untuk post ini) : Membuat tampilan web responsive, bukan semata-mata serunya melihat tampilan berubah ketika browser di besar-kecilkan resolusi-nya. Tetapi juga mengakomodasi tampilan untuk dapat tampil nyaman di bermacam device, browser dan resolusi 🙂
Informasi lebih lengkap lagi juga ada di websitenya apel somplak di sini
Makasih udah baca, makasih juga udah mau nyebarin informasi yang semoga bermanfaat, makasih sekali lagi kalo mau juga klik pesan sponsor (hehe)
Selamat mencuba! Mohon koreksi kalo tulisan saya ada yang salah yah 🙂