Tips memilih template blog yang mantap

Info Blog 97 kali ini akan berbagi sekedar pengalaman dalam memilih template blog yang mantap untuk membantu perkembangan blog di masa-masa mendatang, khususnya di dalam menyikapi berlakunya algoritma Google MobileGeddon sejak tanggal 21 April 2015 kemarin. Satu hal yang perlu penulis tekankan di sini adalah algoritma tersebut menekankan pada faktor mobile, jadi bukan sekedar template responsive belaka. Mengenai perbedaan di antara kedua model template ini silahkan anda baca pada artikel Responsive Template vs Mobile Friendly.

Sekedar tambahan pengetahuan tentang perbedaaan di antara Responsive Template dan Mobile Friendly template ini terletak pada struktur HTML templatenya dengan penjelasan sebagai berikut  :

Responsive Template.

Responsive Template ini pada umumnya mempergunakan kode-kode CSS untuk membangunnya, seperti contoh berikut ini :

@media screen and (max-width:1066px) {
    #header { float:none; max-width:none; text-align:center; margin-top:10px; } #header-inner { margin-bottom:0; } #header h1,#header p { margin-right:0; } #header .description { margin:0; } .menusearch { float:none; padding:5px 0 10px; } .main-wrapper { margin-right:0; width:63%; } .sidebar-wrapper { border:none; margin:0 auto 5px; padding:5px;width:34%; } .credit { padding:20px !important; } #credit { float:none; text-align:center; margin:0; } .outerpic-wrapper,outerpic2-wrapper,outerpic3-wrapper,.content-wrapper { padding:0; } #header2,.page-menu ul { text-align:center; width:100%; }
}

@media screen and (max-width:768px) {
    .header-wrapper { margin-right:0; min-height:0; width:100%; } #header { text-align:center; width:100%; max-width:none; } #header-inner { margin:10px 0; } #menu { position:relative; } #menu ul { background:#111; position:absolute; top:100%; right:0; left:0; z-index:3; height:auto; display:none; } #menu ul.menus { width:100%; position:static; padding-left:20px; } #menu li { display:block; float:none; width:auto; } #menu input,#menu label { position:absolute; top:0; left:0; display:block; } #menu input { z-index:4; } #menu input:checked + label { color:white; } #menu input:checked ~ ul { display:block; } .page-menu li a { border-right:0; } .sidebar .widget-content { width:100%; margin:0; padding:0; } .main-wrapper { width:53%; } .sidebar-wrapper { width:44%; margin:0; padding:0; }
}

@media screen and (max-width:640px) {
    .menu { border-bottom:0; } .page-menu { margin:0; } .outer-wrapper { padding:0; } #content { clear:both; border:none; padding:0; } .sidebar-wrapper {width:100%; position:relative; top:auto; right:auto; clear:both; left:auto; background:none; padding:10px; } #comment-editor { margin:10px; } .footer { width:auto; margin:15px; } .pagebutton-nextprevious, .smoothscroll-top { display:none; } .main-wrapper { width:100%; }
}

@media screen and (max-width:480px) {
    #header img { width:100%; } .post-comment-link { display:none; } #featuredSlider { display:none; } #related-posts { width:100%; }
}

@media screen and (max-width:320px) {
    .comments .comments-content .datetime { display:block; float:none; } .comments .comments-content .comment-header { height:70px; }
}

@media screen and (max-width:240px) {
    .header-wrapper { margin-right:0; min-height:0; width:100%; } #header { text-align:center; width:100%; max-width:none; } #header-inner { margin:10px 0; } #header img { border:0 none; background:none; width:auto; height:auto; margin:0 auto; }
}

Jadi dalam hal ini responsive template mempergunakan kode-kode media screen untuk mengatur penyesuaian tampilan blog pada berbagai ukuran layar.

Mobile Friendly.

Template model mobile friendly tidak mempergunakan kode-kode media screen untuk mengatur penyesuaian tampilan blognya pada perangkat seluler, namun mempergunakan kode-kode CSS Mobile Template seperti contoh di bawah ini.

<!-- CUSTOM CSS MOBILE TEMPLATE -->
<b:if cond='data:blog.isMobile'>
<style type='text/css'>
/* VIEWPORT */
@viewport, @-wekit-viewport, @-moz-viewport, @-ms-viewport, @-o-viewport {width:device-width;max-zoom:2;min-zoom:0.5}.mobile #sidebar, .mobile #sidebar .widget-content,.mobile #header-wrapper,.mobile #footer-wrapper,.mobile .comments,.mobile #leaderboard .widget-content,.widget-posting .widget-content,.mobile .mobsearch,.mobile .mobads,.mobile #blog-pager,.mobile .post,.mobile .breadcrumbs,.mobile #mobilemenu,.mobile #sosnet,.mobile .comments .comment-block,.mobile .comments h3 {padding:10px !important}.mobile #sidebar,.mobile #posting,.mobile #header,.mobile #kotak-posting,.mobile #widget-posting-kiri,.mobile #widget-posting-kanan,.mobile #kotak-sidebar,.mobile #kotak-sidebar-kiri,.mobile #kotak-sidebar-kanan,.mobile #kotak-sidebar-bawah {float:none !important;margin:0 0 0 0 !important;width:auto !important;max-width:100% !important}.mobile pre,.mobile blockquote {background-image:none;padding:8px 8px 8px 8px}
.mobile img,.mobile iframe {max-width:100%}

/* WRAPPER */
body.mobile {}
.mobile #wrapper {margin:0 auto 0 !important;width:auto !important;max-width:800px !important;font-size:13px;padding:0px !important;}
/* HEADER */
.mobile #header {height:auto !important;}
.mobile #header h1.title,.mobile #header p.title {font-size:22px}
.mobile #header img {width:auto;}

/* NAVIGASI */
.mobile #mobilemenu {background:#106FE4;color:#fff;text-align:center;width:auto;overflow:hidden;margin:0;}
.mobile #mobilemenu span a {color:#fff;padding:0;margin:0}
.mobile #mobilemenu span a:hover {text-decoration:underline}/* POST */
.mobile #content-wrapper {padding:0 0;}
.mobile #posting {padding:10px 0 0 0}
.mobile .mobile-date-outer,.mobile .date-outer {margin:0;padding:0}
.mobile .post {position:relative;min-height:55px;}
.mobile h2.mobile-post-title {font-size:16px;font-weight:bold;margin:0 0 5px 60px;padding:0}
.mobile h3.mobile-post-title {font-size:16px;font-weight:bold;margin:0 0 10px;padding:0}
.mobile .mobilethumb {position:absolute;top:10px;left:10px;margin:0}
.mobile .mobilethumb img {display:block;width:50px}
.mobile-index-contents {padding-left:60px}
.mobile #blog-pager {}
.mobile .item-post-footer {margin:5px 0 0;padding:6px 0;border-top:1px solid #fff}
.mobile pre,.mobile blockquote {margin:0 0 13px 0 !important}

.mobile pre,.mobile blockquote {background-image:none;padding:10px 10px 10px 10px}

.mobile .post, .mobile #blog-pager,.mobile .breadcrumbs {margin:0 10px 10px}
.mobile .post-body img {height:auto;}

.mobile .form-wrapper,.mobile .comments .avatar-image-container,.mobile #top-nav {display:none !important}

.mobile #related-post {text-align:left;margin:8px 0;padding:0}
.mobile #related-post ul {list-style-type:none;margin:0 0 0 0 !important}
.mobile #related-post ul li {padding:3px;border-bottom:1px solid #ededed}
.mobile #related-post ul li:last-child {border-bottom:none !important}
.mobile #related-post h3 { color:#333;font-weight:bold;padding:0 0 6px 0;margin:0;font-size:15px}
/* KOMENTAR */
.comments .comment-block, .comments .comments-content .comment-replies, .comments .comment-replybox-single {margin-left:0px !important;}
.mobile #sosnet {background:#fafafa;border-bottom:1px solid #ededed;clear:both;overflow:hidden;margin:0;padding:6px}.mobile .mobsearch {background:#fafafa;margin:0;border-top:1px solid #ededed}
.mobile #footer-wrapper .footer-kiri,.mobile #footer-wrapper .footer-kanan {float:none !important;text-align:center}
.mobile #banner-header, .mobile .share-buttons {display:none}
</style>
</b:if>
<!-- CSS CUSTOM MOBILE TEMPLATE END -->

Jadi di dalam templatenya terdapat dua pengaturan, yaitu untuk model desktop dan tampilan untuk perangkat seluler seperti kode-kode di atas.

Dan seperti yang sudah pernah penulis sampaikan bahwa template model Mobile Friendly ini sudah pasti responsive, sedangkan template model Responsive belum tentu Mobile Friendly (tergantung dari kecermatan pengaturannya).

Setelah anda mengetahui perbedaan tehnis dari template model responsive dan mobile friendly, berikut ini penulis sampaikan tips memilih template blog yang mantap (untuk platform blogger tentunya), yaitu :

1. Carilah template-template responsive yang tidak terlalu banyak mempergunakan text Javascript untuk pengaturannya, karena text Javascript ini berpotensi untuk memperberat loading blog.
2. Lakukan test uji kecepatan dengan mempergunakan GT Metrix maupun Google PageSpeed Insight terlebih dahulu.
3. Jangan mudah terpesona oleh tampilan atau model template yang ada, karena faktor kecepatan loading harus tetap menjadi bahan pertimbangan utama.
4. Carilah template yang sesuai dengan kebutuhan anda, jangan sampai keliru, seperti misalnya anda membutuhkan template untuk toko online, namun anda mempergunakan model personal template atau simple template, pasti tidak cocok.
5. Sedapat mungkin pahami betul karakter template yang akan pergunakan tersebut terutama dari sisi berat atau sizenya, carilah ukuran berat kosong template yang di bawah 80 Kb.

Demikianlah uraian penulis tentang tips memilih template blog yang mantap, semoga bermanfaat.