Membuat Design Web Yang Optimal

Selama 2 hari kebetulan ada waktu senggang sehingga dapat saya manfaatkan untuk mendesign ulang website ini. Tujuan utamanya ada 2: pertama, agar website ini tampil sempurna baik di FF maupun IE dan kedua agar loading time nya lebih baik. Berikut ini saya coba sharing mengenai cara membuat website yang kompatible baik di FF maupun di IE. Rancangan website sepenuhnya saya kerjakan di FF kemudian diuji coba dengan plugin IE dan IE7 di atas platform Windows XP dan juga diuji di platform Windows 2003.

  1. TABLELESS DESIGN. Apakah tableless design itu? Para developer website sudah tahu bahwa IE dan FF menampilkan hasil tabel yang berbeda meskipun coding nya sama 100%! Terutama jika anda memasang tag border=1 misalnya. Juga tampilan table di FF memberikan efek spasi 1px - 2px sedangkan di IE sangat rapat. Jika demikian apa yg harus dilakukan? Jawabannya adalah tidak menggunakan table atau istilahnya TABLELESS tadi. Jadi saya gunakan tag DIV untuk membuat "table".
  2. NESTED TABLE. Artinya, table di dalam table. Hal ini sebenarnya tidak harus dihindari, asalkan ukuran table induk dan anak tidak overlapping, tetapi sayangnya sulit memaksa table anak mengikuti ukuran tetap (fixed width). Mengapa? Sebab umumnya tabel anak memakai width=100% sehingga browser harus menghitung dahulu lebar table induk dan table anak saat proses rendering. Apalagi jika table anak itu berasal dari 3rd Party module!
  3. CSS. Dalam design web modern anda harus pisahkan antara tugas HTML dan CSS. Artinya, jangan gunakan HTML untuk tugas yg seharusnya di handle oleh CSS. HTML gunanya untuk menentukan kerangka nya sedangkan CSS adalah formatnya.
  4. EMBEDDED OBJECT. Embedded Object pada website ini juga saya hilangkan sebab mengharuskan anda mendownload plugin Quick Time jika belum tersedia.

Module tambahan yang saya gunakan pada website ini:

  1. PATHAUTO. Ini untuk mempermanis tampilan URL dan agar mudah dibaca/dimengerti.
  2. FCKEDITOR PLUS. Module ini merupakan gabungan FCKeditor biasa dengan IMCE tetapi memiliki banyak tambahan fasilitas baru. Dengan FCKEDITOR PLUS maka kebutuhan editor yang "all in one" terpenuhi.
  3. BLOGGER. Untuk menampilkan daftar penulis blog.
  4. NICE_MENUS. Untuk memudahkan navigasi dengan menampilkan menu secara dropdown.

Hasilnya kecepatan akses website ini meningkat sampai 60% lebih! Optimasi sebenarnya masih dapat dilakukan lagi namun bagian penting, yaitu CSS design, sudah diselesaikan. Satu-satunya elemen yang kontras bahkan mungkin kurang matching adalah background "gedek" atau dinding bambu, tetapi saya tidak ingin menghilangkannya karena ini menampilkan ciri khas Indonesia dengan rumah berdinding bambu nya :) dan agar tampilan agak "ndeso" begitu. Siapa tahu ketiban "wong ndeso rejeki kota".

Sukses selalu!

Benar pak admin !!!

MMMM ini dia yang ku maksyut, tableless cuman sedikit nambahin postingannya pak admin:
dengan tableless format kita jadi leluasa mengontrol tampilan web, karena kendali total ada di CSS yg terpisah, bagi para UI web designer segeralah migrasi ke format ini, karena :

  1. Penulisan code html menjadi lebih singkat, dengan CSS maka property seperti layout tables, spacer images, decorative images, fonts, colors, widths, heights, and background images bisa dihilangkan dan akan mengurangi ukuran file dan direpresentasikan dengan struktur yang lebih rapi, artinya loading page akan jauh lebih cepat.
  2. Mudah di maintain, satu dokumen CSS mampu mengontrol multi html page, dengan mengganti satu dokumen CSS saja kita sudah bisa mengganti tampilan keseluruhan halaman web.
  3. Kemungkinan eksplore grafis lebih luas, karena CSS memiliki property yang komplit dan control total yang mampu menghandle berbagai macam pola design.
  4. Media berbeda, dengan CSS kita mampu mengontrol tampilan yang berbeda di media yang berbeda seperti browser, printers, dan handheld devices.
  5. Pada system aplikasi web model baru berbasis OOP (Object Oriented Programing), dimana coding telah dibagi menjadi modul-modul terpisah, maka dengan penggunaan CSS maka property dari Html bisa benar-benar terpisah, sehingga penggantian layout design bisa diaplikasikan dengan lebih cepat dan sangat mudah.

Jadi CSS adalah total solusi bagi kita untuk mengeksplore web baik dari sisi design maupun dari sisi code, yang akan memberi kita benefit bagi pengembangan web itu sendiri dan yang paling penting kepada mereka yang menjadi visiters.

MASALAH CSS!!!
CSS telah menjadi seperti tanah perjanjian bagi para web designer, dia berjanji akan membuat tampilan web lebih baik dan efisien ini berarti  membuat design lebih terkendali, tetapi ternyata sekarang masih memungkinkan terjadinya kendala, janji itu belum sepenuhnya terpenuhi, yah benar CSS memang bermasalah, walaupun rekomendasi langsung dari W3C, tetapi di lapangan para produsen Internet Browser memiliki cara sendiri-sendiri dalam menampilkan property CSS di media browser mereka.
Browser . . . ! itulah masalah sebenarnya, perbedaan algoritma render engine browser yang membuat tampilan CSS terkadang beda antara browser satu dan lainnya, ini yang akan membuat web designer kadang kehilangan akal bahkan kehilangan pekerjaanya. Bagaimana tidak? Jika anda memperbaiki tampilan di browser satu itu berarti anda sedang merusak tampilan di browser lain, kebayang kan repotnya?

The Answer??
Dengan menggunakan CSS Hack and filter, yaitu sedikit modifikasi pada code CSS atau Html maka kita bisa mengatasi hampir semua masalah ketidakkonsistenan tampilan di browser.
mmmm mending di bahas di forum ajah yah soalnya ini issue yang sangat kencang bagi para designer/programer yg baru migrasi ke full CSS formating, oke coy

Ganbarimasoo ganbate kudasai ....

dont_cry

 

Review

The first web pages were written as text files, because HTML (Hypertext Markup Language), which is used to dress up the text and place pictures amongst it, uses simple text codes. Web pages are still created using this text based system, but now you can create web sites in a more natural, visual way and let a software program do the work of translating your designs into HTML.
Here are some other great resources:640-802 exam 650-621 exam 70-293 exam.

Hosting Terbaik di Indonesia

Web Hosting Terbaik di kelasnya!

  • Server dengan 8 buah CPU Intel Xeon @ 2 GHz!
  • DDR 8 GB! HDD 1 TB RAID 1! Koneksi Internet Gigabit!

Paket Shared Hosting:

  • 1GB - Unlimited Space!
  • 100 GB - Unlimited Bandwidth!
  • Unlimited: domain, email, database, ftp!
  • Rp 100.000 /tahun (sekitar Rp 8.300 per bulan!)

Open now: www.kotakomputer.com !!!

100% Drupal friendly !!!

Anggota Drupal Indonesia

  • mamad
  • Programmer
  • shedtya
  • jamirawan
  • mx_patang

Ada 12 users dan 129 guests online.

  • Site Counter: 1,002,403
  • Unique Visitor: 63,341
  • Registered Users: 4,348
  • Unregistered Users: 100
  • Blocked Users: 0
  • Published Nodes: 1,519
  • Unpublished Nodes: 3
  • Server IP: 202.78.195.116
  • Your IP: 38.107.191.94
  • Since: 2009-01-25