Setyawan Berbagi

Salam semua... Masih dalam suasana tahun baru saya kembali posting. Kali ini saya posting artikel yang bisa dijadikan referensi sobat sekalian dalam memilih tampilan blog seperti apa yang sobat butuhkan, yaaa semoga saja dapat bermanfaat. Langsung saja kita bahas...

Banyak di antara para web designer yang menginginkan tampilan memukau tanpa membebani loading website/blog mereka, perlu diketahui bahwa hal tersebut hampir mustahil. Jika kita menginginkan loading yang cepat maka kita harus meminimalkan penampilan, begitu pula jika kita menginginkan design yang memukau kita harus bersedia mengorbankan kecepatan loading blog kita. Kedua pilihan tersebut harus kita sesuaikan dengan kebutuhan blog kita, akankah kita lebih butuh tampilan ataukah kecepatan loading?... Untuk lebih jelasnya bisa sobat baca penjelasan lebih lanjut dibawah ini:

Fast Loading
Dalam tipe ini para web designer lebih mengutamakan content atau isi website/blog mereka dibandingkan tampilan yang memukau. Pemakaian widget-pun juga diminimalisir dan biasanya hanya berisi widget pendukung content seperti popular post dan recent post. Website/blog berjenis berita sering memakai tipe ini dikarenakan mereka lebih memfokuskan pada content daripada tampilan, karena bagaimanapun tujuan pengunjung adalah membaca artikel yang disajikan bukan menikmati tampilannya.

Perfect Design
Kebalikan dari fast loading, dalam tipe ini para web designer lebih mengutamakan interface atau tampilan website/blog mereka dibandingkan isinya. Biasanya tipe ini lebih menonjolkan gambar dibanding tulisan. Perlu diketahui, blog dengan banyak widget yang tidak penting disana-sini sampai memenuhi tampilan itu bukan disebut perfect design. Memang mungkin kita merasa ingin sekali memasukkan semua kedalam blog kita, namun seperti yang kita ketahui apapun jika berlebihan pasti berdampak buruk, baik dalam segi loading maupun dalam segi tampilan. Gunakan saja widget yang mendukung dan memperindah tampilan pada bagian post. Website/blog seperti online shop, graphic design, dan contest biasa memakai tipe ini dikarenakan keharusan yang membuat tampilan yang memukau pengunjung.

Kedua tipe diatas sebenarnya dapat kita gabungkan tentunya sesuai kebutuhan dan dengan keseimbangan diantara keduanya. Dengan begitu kita dapat memakai tipe ketiga, yaitu Balance Design.

Balance Design
Dengan menggabungkan kedua tipe diatas kita dapat membuat keseimbangan dalam segi tampilan dan tentunya tidak terlalu memberatkan loading blog. Lalu bagaimana caranya?...

• Minimalkan dalam pemakaian script dan gambar dengan ukuran besar, jika memungkinkan gunakan gambar dengan ukuran dibawah 100kb.
• Tapi jangan lupakan content, manfaatkan sistem thumbnail pada homepage yang memuat gambar beserta cuplikan post.
• Hilangkan widget yang tidak penting seperti animasi, jam, kalender, games, dsb jika dirasa tidak dibutuhkan.

Dengan beberapa cara diatas kita dapat membuat sebuah design yang seimbang tanpa membuat loading blog kita terlalu lama.

Font awesome adalah sekumpulan font web yang berbentuk icon untuk antarmuka web. Dengan menggunakan  icon awesome kita dapat mengubah warna serta ukuran icon dengan menggunakan css tanpa harus khawatir mengurangi kualitas icon. Sampai saat artikel ini dibuat font awesome telah sampai pada versi 4.2 dan memiliki lebih dari 400 variasi icon.

Apa kelebihan menggunakan font awesome?...

• Dengan adanya font awesome kita tidak lagi repot-repot mencari atau membuat gambar sendiri, kita hanya perlu mengetik kode font-nya saja untuk mendapat icon yang kita cari.
• Pada versi 4.2 ini kita bisa memilih 479 icon yang telah tersedia, dan tentunya kita bisa memberi warna sesuka kita serta mengatur ukuran dan menambah bayangan. Semua hal tersebut dapat kita lakukan dengan mengaturnya dengan css. Dengan kata lain, selain bentuk kita dapat memodifikasi font awesome sesuai keinginan.
• Karena font awesome berupa vector kita dapat menyesuaikannya pada resolusi tinggi maupun rendah. Karena hal ini pula kita dapat mengatur ukuran icon tanpa merusak kualitas icon itu sendiri.

Berikut adalah preview dari font awesome versi 4.2

Untuk melihat lebih lengkapnya bisa mengunjungi website resminya: http://fortawesome.github.io/Font-Awesome/icons

Bagaimana cara menggunakan Icon Awesome?...
Hal pertama yang harus kita lakukan adalah memasang css font awesome dibawah ini kedalam tag <head>...</head> pada HTML template sobat.

<Link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

"Jika sobat masih memakai font awesome versi lama silahkan hapus kode yang terlihat serupa dengan kode diatas."

Setelah kode css terpasang selanjutnya adalah cara menerapkan font awesome pada blog atau website. berikut adalah contoh penerapan css font awesome:

<i class="fa fa-home"></i>

Dapat kita lihat dari contoh tersebut bahwa untuk menerapkan font awesome kita dapat menggunakan tag <i></i> lalu di ikuti class dan dilanjutkan nama font. Dengan sedikit tambahan teks kita dapat menuliskan kodenya seperti ini:

<i class="fa fa-home"></i>

Hasil dari code tersebut akan menjadi seperti ini:  fa fa-home

Untuk dasarnya seperti itu, akan tetapi kita tidak hanya dapat menggunakannya sebatas itu. Seperti yang telah saya katakan sebelumnya bahwa font awesome memiliki keunggulan yaitu selain bentuk icon kita dapat memodifikasi sesuai keinginan. Lalu modifikasi seperti apa saja yang dapat kita lakukan?...