Mencetak Lewat CSS dalam Web Design

Hal yang sering terlupakan oleh web developer atau web designer adalah bahwa cukup banyak pengunjung situs yang ingin mencetak atau mem-print halaman web yang mereka kunjungi. Halaman tertentu memang akan lebih sering dicetak daripada halaman yang lain. Web designer lebih sering mengandalkan default printer setting untuk hal ini atau membuat dokumen pdf untuk didownload dan kemudian dicetak.

Dokumen pdf ini memiliki keunggulan berupa format dan keindahan web design secara keseluruhan dapat terjaga dengan sempurna, namun kelemahan utama dari sistem ini adalah diperlukan energi dan sumber daya yang cukup besar untuk memutakhirkan atau mengupdate dokumen pdf tersebut terutama untuk halaman website yang sering sekali berubah. Bahkan untuk kasus-kasus tertentu sangatlah mustahil membuat dokumen pdf tersebut.

Permasalahan ini sebenarnya dapat disederhanakan dengan teknik cetak melalui CSS, hal yang harus dibahas dan direncanakan pada saat memulai pekerjaan web design.

Hal-hal yang perlu diperhatikan dalam mencetak lewat CSS
Dalam mendesign halaman web kita sangat bergantung pada monitor untuk menampilkan warna (meskipun akan ada variasi warna dari monitor ke monitor karena mungkin tidak melalukan color management).

Pelajari Lebih Jauh Cara Mencetak Web Design lewat CSS

CSS Sprite Dalam Web Design

CSS sprites bukanlah barang baru bahkan CSS sprites adalah cara lama yang ampuh dan sudah menjadi hal yang biasa dalam web development. Meskipun CSS sprites bukanlah hal yang penting tetapi dalam situasi tertentu CSS sprites ini dapat memberikan manfaat dan keuntungan yang nyata, terutama apabila beban server menjadi salah satu pertimbangan dalam mendesign sebuah website.

Kata sprite ini berasal dari kosa kata komputer graphic yang berarti sebuah obyek grafis yang digabungkan kedalam 2d atau 3d animasi melalui prosesor graphic. Sprite ini dikembangkan karena ranah video games yang makin kompleks dan memerlukan cara pengolahan gambar berkualitas tinggi yang cerdas tanpa mengganggu pola alur permainan itu sendiri.

Seiring dengan berjalannya waktu, pada era tahun 2000-an banyak web designer yang progresif dan futuristic mulai mencari cara alternatif untuk menampilkan design menu yang menarik tanpa memakai JavaScripts, ketika inilah sprites mulai memasuki ranah web design dan development. Dengan masuknya CSS dalam arus utama web design pemakaian sprites dalam web design dimungkinkan dan semakin mudah, handal, cepat serta sederhana daripada memakai tehnik JavaScripts yang mulai ketinggalan zaman.

Pemakaian sprites dalam pendekatan CSS pada web design juga memakai metoda yang telah melegenda dalam dunia video games, dimana banyak gambar dipakai disemua website yang dijadikan satu melalui dengan apa yang disebut “master image”. Pemakaian sprite dalam mendesing web berbasis CSS hanya tinggal mengatur posisi tampilan dengan properti yang terdapat dalam CSS, begitu juga dengan penampilan hover, active atau focus. Semuanya menjadi sangat mudah melalui sprites ini.

Ketika sebuah halaman web diload, gambar tidak ditampilkan satu persatu akan tetapi seluruh master image. Sekilas hal ini tidak terlihat perbaikan apapun yang nyata, akan tetapi apabila dilihat lebih mendalam efek JavaScripts mouse rollover memerlukan dua kali HTTP request dimana akan menyebabkan terjadi kedipan pada gambar atau bahkan tidak ada gambar sama sekali apabila koneksi internet sedang buruk. Memakai tehnik CSS sprite dalam web design ini tidak akan ada sama sekali kedipan karena semua gambar telah diload ketika mengupload master image.

Salah satu cara populer adalah dengan mengembangkan design master yang kemudian dikeluarkan secara selektif ketika dibutuhkan oleh sebuah code yang dipetakan kedalam posisi unik dari masing-masing design untuk kemudian ditampilkan dalam layar. Sprites ini banyak digunakan untuk gambar statis maupun dinamis dimana posisi dari masing-masing gambar design ditentukan oleh hardware controller. Contoh gambar dibawah ini adalah design sprites untuk Pokemon.

Pelajari Lebih Jauh: CSS Sprite dalam Web Design

CSS Quotation dari Web Designer

CSS walaupun telah lama berkembang dalam web design tetapi selalu menarik untuk dicermati maupun dipelajari karena standar dari CSS selalu berkembang dan adaptasi atau intepretasi dari masing-masing browser terhadap CSS ini selalu tidak sama sehingga apabila tidak hati-hati maka design yang telah kita buat akan terlihat berantakan. Dalam hal ini Internet Explorer adalah raja dari ketidakmampuan beradaptasi dengan CSS, mungkin karena terbiasa memakai tabel seperti excel.

Dibawah ini adalah kumpulan CSS quotation ringan dan menarik dalam dunia web design:

CSS adalah seperti melukis dan menggambar, saya selalu mendapatkan hasil sesuai yang saya inginkan

CSS adalah seperti sungai yang selalu mengalir, anda tidak dapat melawan tetapi harus mengikutinya

Apabila tubuh anda seperti HTML, maka CSS adalah pakaian anda, seberapapun kerennya tubuh anda tanpa pakaian yang tepat selalu akan terlihat tidak pantas.

HTML dan CSS ibarat baju dan celana, anda selalu dapat memilih untuk tidak memakainya tetapi tanpa celana anda akan terlihat memalukan.

CSS seperti bermain dengan kubus Rubik, terkadang anda dapat dapat membuat satu warna segaris tetapi merusak harmoni yang lain. Diperlukan ketrampilan tinggi untuk membuatnya sempurna.

Lihat semua CSS Quotation: CSS Web Design Quotation

Pemakaian Div dan Tabel Dalam Web Design

Dalam mendesign sebuah web site, seringkali terjadi argumentasi tentang mana yang lebih baik memakai mark up div atau table. Apabila kita mendesign website dari awal dengan menggunakan software maka hampir pasti layout yang dibuat akan menggunakan table yang tentu saja sudah ketinggalan zaman dan sangat tidak serach engine friendly, bahkan Adobe Dreamwever CS3 masih menggunakan layout berdasarkan table.

Dalam praktek web design saat ini, banyak kecendrungan terjadi untuk mengganti semua table tag dengan div tags. Dalam banyak hal, memakai table tag akan menghasilkan lebih sedikit tags daripada menggunakan div. Dalam mendesign layout sebuah website, pemakaian div akan sangat lebih baik daripada table. Tidak ada satu search engine pun yang menghukum sebuah halaman karena terlalu banyak menggunakan div tags, ini bertolak belakang dengan pemakaian HTML tabel tags untuk layout.

Banyak sekali kekurangan dari pemakaian table tag untuk layout seperti kesulitan untuk mencetak halaman web, tidak bersahabat untuk dilihat dengan mobile device hingga sulitnya bernavigasi dalam halaman web yang menggunakan table bagi pengguna screen reader. Para pengguna screen reader seringkali harus berhadapan dengan mesin yang menyebutkan “tabel dengan 5 kolom dan lima baris etc etc” yang tentu saja sangat mengganggu dan tidak mudah dimengerti. Tetapi apabila menggunakan div tags, hal tersebut dapat dihindari karena secara default screen reader tidak membaca div tags hingga isi dari table tersebut dapat didesign sedemikian rupa sehingga dapat dimengerti oleh para pemakai screen reader.

Dengan memakai HTML table tags, search engine akan selalu mendapatkan struktur yang benar karena tiap kolom akan berelasi secara benar dengan kolom yang lain dan hal ini tidak terjadi dengan memakai div tags. Hal in menyebabkan table tags sangat tidak efesien untuk menjabarkan design layout sebuah website.

Lebih Jauh tentang pemakain div dan table dalam web design

26 Windows Font Untuk Typography Bagi Web Designer

Satu hal yang sering membuat web designer merasa frustasi adalah memilih jenis font (typography). Pada design graphic, kita dapat memilih semua font yang tersedia didunia ini, baik yang gratisan maupun yang berbayar, selama dapat memenuhi sisi estetika dari design kita karena font yang dipakai bersifat lokal dan bisa diubah menjadi vektor ataupun diraster menjadi bentuk gambar sebelum dipindahkan ke komputer lain.

Tetapi dalam web design, font lebih bersifat umum karena font diambil dari sistem operasi masing-masing para pengunjung situs. Penting sekali bagi seorang web designer untuk memastikan bahwa font yang kita pakai selalu tersedia pada mayoritas komputer pengunjung. Dalam CSS ini dilakukan dengan memberikan 3 pilihan font sebagai alternatif apabila font utama tidak tersedia. Hal ini tentu saja tidak berlaku untuk font yang bersifat statis seperti pada header, menu atau navigasi.

Sebuah survey dari Code Style dengan menggunakan applet khusus yang dilaksanakan sejak tahun 2004 menemukan bahwa untuk sistem operasi Windows font Microsoft Sans Serif dilaporkan terdapat pada hampir OS Windows, ditempat kedua adalah font san serif kelas berat Arial Black dengan nilai 98 persen, kemudian berturut-turut Palatino Linotype, Mathew Carter’s Verdana sans serif font, dan Franklin Gothic Medium melengkapi 5 besar font pada Windows platform dengan nilai 97 persen.

Dibawah ini adalah daftar font per 2007 pada Sistem Operasi Windows dengan nilai diatas 50 persen. Untuk nilai dibawah 50 persen tidak dimasukan karena nilai 50 persen berarti dimiliki oleh 1 dari 2 komputer dan font dengan nilai ini tidak cukup baik untuk dipakai dalam web design.

Lihat Lebih Lengkap Semua Typography Web Design:

26 Windows Font Untuk Typography Bagi Web Designer

Perbedaan Bold Strong Italic dan Emphasis Dalam Web Design

Dalam presentasi visual yang disajikan oleh kebanyakan web browser pasangan elemen mark up html bold <b> dan strong <strong> maupun italic <i> dan emphasis <em> tidak memiliki perbedaan sama sekali. Perbedaan yang mendasar bukan karena yang pertama lebih singkat untuk ditulis melainkan terletak kepada struktur halaman web itu sendiri. Elemen mark up html bold dan italic adalah elemen format, jadi hanya untuk presentasi visual sedangkan elemen mark up em dan strong memiliki fungsi dan arti struktural.

Bagi setiap orang yang sudah terjun kedalam web design sejak 10 tahun yang lalu, dimana pada masa itu web design masih didominasi oleh tabel dalam strukturnya, tidak seperti saat ini dimana penggunaan tabel dalam mendesign sudah ketinggalan zaman dan sangat tidak search engine friendly. Para web designer awal ini tentu akan ingat elemen mark up html seperti untuk <b> bold dan untuk <i> italic yang singkat untuk ditulis.

Namun akhir-akhir ini banyak sekali orang yang menyarankan agar seorang web designer tidak lagi menggunakan mark up <b> untuk bold dan <i> untuk italic dengan berbagai macam alasan, salah satu yang paling populer disebutkan adalah kedua elemen mark up <b> dan <i> sudah tidak akan ada lagi dalam xhtml karena digantikan oleh <strong> dan <emphasis>. Pada kenyataannya alasan tersebut jelas sangat salah.

Menurut W3C, sebuah badan yang berwenang dalam urusan web standar, disebutkan bahwa pada awalnya terdapat sepasang elemen html untuk menunjukan bahwa bagian tertentu dari kalimat perlu penekanan atau emphasis dan pasangan elemen html ini memungkinkan untuk dilakukan emphasis dalam dua level. Elemen mark up yang dimaksud adalah elemen mark up <em> dan <strong>. Pada perkembangan selanjutnya elemen italic dan bold ditambahkan dan elemen ini adalah mark up <i> dan <b>. Berikut adalah contoh pemakaiannya:

Lebih Lanjut: Perbedaan Bold Strong Italic dan Emphasis Dalam Web Design

Informasi Trend Warna Design Tahun 2009

Trend dari warna dari tahun ke tahun selalu dipengaruhi oleh faktor ekonomi. Krisis ekonomi dan keuangan global dengan sendirinya akan sangat berpengaruh terhadap trend warna design. Kita mungkin tidak akan lagi melihat beberapa merek internasional yang sangat dominan pada tahun sebelumnya karena krisis membuat mereka menghilang dari radar bisnis, sehingga untuk memprediksi trend warna design pada tahun 2009, kita juga harus memperhatikan kondisi ekonomi global

Selamat Tahun Baru 2009 … sekarang adalah waktu yang tepat untuk mengucapkan selamat tinggal tahun 2008 dan selamat datang trend baru tahun 2009.

Warna ada disekitar kita, mulai dari tanah hingga langit maupun tembok dan pakaian didalam lemari kita semuanya memiliki warna yang tidak bisa dipisahkan lagi dari hidup keseharian. Keadaan ekonomi global yang sedang turun akan memaksa orang untuk lebih kreatif dalam segala hal. Dimana-mana akan ada penurunan daya beli sehingga orang tidak akan berbelanja sebanyak sebelumnya, pergeseran ini akan tampak dengan munculnya warna-warna cerah dan bergaya etnik kearah belahan timur dunia.

Untuk melihat warna-warna yang akan menjadi trend pada design tahun 2009 klik disini:

Design Blog: Informasi Trend Warna Design Tahun 2009

Elemen Blockquote Dalam Web Design

Blockquote merupakan elemen dari html yang telah lama ada dan masih tetap banyak digunakan meskipun efek penampilan visual dari elemen pada web browser terkini tidak banyak berubah sejak pertama kali diperkenalkan pada web browser generasi awal tetapi bagaimana web designer memakainya telah jauh berkembang dari maksud awal penggunaannya.

Secara harafiah blockquote dimaksudkan untuk menyajikan ulang secara utuh sebagian isi dari halaman web yang diterbitkan atau disajikan tempat lain entah dari situs yang berbeda, halaman web yang berbeda pada situs yang sama maupun pada halaman web yang sama dalam bentuk “block” yang terpisah secara visual dari isi halaman tersebut.

Berpedoman pada fungsinya yang sederhana ini, hampir semua web browser mempresentasikannya secara sederhana pula yaitu dengan memberikan jarak sebesar 36 pixel disebelah kiri dan kanan pada teks yang diberikan elemen Pada awal perkembangan internet, penggunaan elemen ini banyak diabaikan karena penampakan visualnya.

Seiring dengan hingar bingarnya visual efek dari halaman web maka elemen ini secara ironis mulai banyak digunakan bahkan dipandang sama dengan elemen hanya karena semata-mata mereka berdua memiliki tampilan visual yang sama dan bahkan lebih populer untuk digunakan karena lebih singkat dan cepat untuk ditulis.

Tetapi bagi web designer yang sangat menjaga dengan kualitas coding html menemukan bahwa HTML validation seperti W3C menganggap penggunaan elemen ini salah karena sebenarnya ini dimaksudkan untuk berada didalam elemen atau definition list. Tidak seperti kembaran visualnya, elemen dapat digunakan dimana saja sehingga secara lambat laun menjadi pilihan bagi para web designer untuk menampilkan efek visual yang diinginkan.

Dominasi dari elemen ini semakin populer dengan munculnya CSS (cassading style sheet), dimana akhirnya designer dapat dengan mudah merubah presentasi visual dari ini dan menampilkannya dimana saja dengan format yang sama.

Lebih lanjut mengenai fungsi tambahan blockquote: Elemen Blockqoute Yang Dulu Diabaikan

Service - Pensil Warna Design

Pensil Warna Design adalah rumah design dengan konsep butik design sehingga anda dapat memilih service yang pensil warna design sajikan berdasarkan keperluan perusahaan anda saat ini. Pensil Warna Design menyajikan design berkualitas yang bermain dengan ide-ide innovative dan segar serta menciptakan informasi yang komunikatif secara visual untuk meningkatkan penjualan dan brand recognition.

Design service Pensil Warna Design mencakup antara lain:

1. Animasi dan Visual Presentasi
   Animasi maupun Visual presentasi sangatlah berguna dalam memudahkan mencerna sesuatu yang kompleks dan rumit seperti liteatur ilmiah atau makalah. Kami, Pensil Warna Design dapat membantu dalam membuat animasi, flash maupun 3d, atau presentasi visual yang memukau.
   
   
2. Design Logo dan Visual Identitas
   Design logo kami yang mampu menunjukan karakter dari klien kami atau kesan yang ingin disampaikan karena di Pensil Warna Design, kami mengerti bahwa logo klien kami adalah kristalisasi dari identitas, kepribadian, visi, misi dan segala keunikan sebuah perusahaan yang akan diingat selama puluhan tahun mendatang.
   
   
3. Web Design
   Kami juga melayani pembuatan design website yang selain berpenampilan indah juga sistematis dan efisien hingga mudah digunakan. Web Design kami selain mengutamkan keindahan, selalu berbasis pada kemudahan penggunaan, praktis, kesesuaian dengan standar web dari W3C dan search engine mulai dari web dengan mengkodean tangan, CMS (Content Management System) hingga e commerce atau toko online.
   
   
4. Graphic Design
   Design graphic kami mencangkup design kemasan, brosur, leaflet, cover buku, company profile, hanging mobile , store display, tradeshow display serta sarana promosi cetak lainnya


5. Search Engine Optimization
   Search Engine Optimization bertujuan untuk memaksimalkan ranking sebuah situs dalam hasil pencarian serach engine, karena dengan bertumbuh pesatnya dunia internet maka sangatlah tidak mungkin untuk melihat satu persatu setiap situs yang ada yang berjumlah milyaran dan tumbuh dengan angka puluhan juta perhari. Kami membantu anda dalam mengoptimasi website yang telah diluncurkan dengan keahlian kami dalam Search Engine Optimization (SEO). Pensil Warna Design menyediakan pelatihan search engine optimization dalam membantu klien kami memperoleh peringkat lebih baik dalam hasil pencarian di search engine sehingga mampu menghasilkan lebih banyak traffic serta meningkatkan penjualan.


6. 3d Visualization & Arsitektur
   3D visualisasi merupakan pemvisualisasi dari ide atau konsep kedalam bentuk yang nyata dan menyenangkan untuk dilihat dengan biaya lebih murah daripada harus membuat prototype dari ide atau konsep tersebut. 3d Visualisasi ini banyak digunakan pada arsitektur, interior design maupun visualisasi suatu proyek atau produk untuk dianalisa sebelum diproduksi secara masal, sarana pendidikan mapun materi marketing.

Even the best idea need design help, dan kami, Pensil Warna Design sangat bangga menjadi partner anda dalam melakukan hal-hal luar biasa untuk membantu anda maju dan berkembang.