Titiw Inside

Responsive Web, Titiw.com New Design

Sunday, 17 June 2012

Titiw.com sekarang memakai template baru. Dibangun menggunakan framework foundation dari zurb, titiw.com sekarang support banyak browser termasuk modern mobile browser, tapi tidak termasuk IE6, IE7, dan sedikit fitur mungkin kurang ok di IE8. Well, nobody cares about IE, I personally use IE to download better browser. Seperti yang bisa dilihat, foundation adalah framework untuk membangun website responsive. Website responsive adalah website yang tampilannya menyesuaikan dengan browser. Tapi penyesuaian tidak dilakukan di sisi server melainkan di sisi client. Atau saya lebih suka menyebutnya one load for all. Tidak ada lagi m.something.com. One domain, one load, one design for all device.

Titiw.com Responsive Preview

Untung disainernya mas Eko, mantab dan tidak sombong, disainnya cukup sederhana untuk mobile, namun meriah di desktop. Pembagian layoutnya yang pas sesuai dengan semangat responsive web design. Karena semangat berbagi “Sekedar Share kita kan Care” harus dijunjung tinggi disini, maka saya akan memberikan sedikit resep membuat website ini:

  1. Front end atau template dibuat menggunakan Framework Foundation, mudah dipelajari dan sangat cepat untuk membuat prototype.
  2. Font dari google web fonts, koleksi font open source yang bebas digunakan siapa saja tanpa limitasi hak cipta. Font di seluruh body titiw.com menggunakan Ubuntu font dan header berisi link page diatas menggunakan Gloria Hallelujah. Ubuntu font does look nice here.
  3. Banyak elemen transparan. Di template lama, elemen transparan menggunakan file png yang di repeat via CSS. Keuntungannya adalah kompatibilitas hingga ke browser tua (IE6, hueek) sekalipun. But hey, we have to move on and use CSS3 right? Jadi PNG diganti dengan properti rgba untuk membuat efek box transparan.
  4. Karena disini banyak menulis tentang travel, jadi saya menambahkan shortcode untuk youtube dan googlemap supaya sekalian bisa posting peta biar ga nyasar.

Hmm why youtube shortcode? kenapa nggak langsung aja paste embed share nya? Karena website ini responsive, shortcode youtube sebetulnya berisi class .flex-video supaya ukuran video bisa otomatis menyesuaikan di berbagai browser.

""

Begitu juga dengan googlemap, walaupun kecil juga kalo dilihat di telepon yg layarnya kecit.

Untuk gambar karena jika ditambahkan caption akan secara otomatis menambah width dan height yang mengganggu proses automatic scaling di responsive web, terpaksa saya strip via jquery. Jadi, bagaimana menurut kamu tampilan website titiw.com di layar besar maupun mobile? :)

14 thoughts on “Responsive Web, Titiw.com New Design

  1. efahmi says:

    wah, canggih! mantap… :D

    1. titiw says:

      Thank you! Thanks to mas Anggit the master! :)

  2. @zizydmk says:

    Wah keren deh Ti. Kalo dulu kebuka kayak web, tp sekarang versi mobile web. Keren, keren. Beda banget ama WP-Mobile yang so standard.

    1. titiw says:

      Hehe.. Terima kasih mbak Zee.. ;)

    2. anggit says:

      WP-Mobile sebetulnya bisa di-custom juga tampilannya jadi ga plain gitu. Bikin aja template mobile baru (bisa bikin pake foundation juga), terus taro wp-content/themes/[namatemplate].

      1. titiw says:

        Thanks mas anggit. :)

  3. budiono says:

    wah canggih…. *kayak iklan maudi nunjukin ke anaknya pabrik teh botol sorsor*

    1. titiw says:

      Heh! OOT mulu dari dulu! *jitak combo*

  4. emfajar says:

    wah keren, jadi ga perlu pake plugin lagi buat tampilan mobile.. ini berbayar ya templatenya?

    1. titiw says:

      Berbayar. Bayar pizza doang sama yang bikin.. *lirik mas anggit* x)

  5. zam says:

    weits! canggih! udah layak disebut sebagai blog developer!! yaayy!!

    1. titiw says:

      Hamdalah kakaak! ;D

  6. Wah keren, punya tutorial zurb foundation ngga? Barusan nyoba masih bingung stylingnya nih :)

    1. apy says:

      ah senang ada juga yg membangun website pake foundation. tutorial super basicnya ada di: http://www.netmagazine.com/tutorials/quickly-build-prototype-test-any-device
      tapi itu masih pake foundation 2, foundation 3 agak beda, class container dah nggak dipake, tapi kolom2nya masih sama. untuk style2 lainnya seperti forms, tabs, buttons, dsb ada di website resminya, makenya juga super gampang.

Leave a Reply

Your email address will not be published.

Latest

Travel Blogger Indonesia

About Titiw

Female, double (hamdallah sudah laku), berkacamata minus satu setengah yang dipake kalo mau liat nomor angkutan umum doang.

Pic of Life

Subscribe Now