Jemuran.com || Web Design and Consultancy

10 Tips on designing a fast loading web site

jemuran — Wed, 06 Feb 2008 09:22:44 +0000

Tips and tricks on effective web design

The Number 1 rule that every web designer should follow is to create a fast loading web site. You might have a great design but very few people are going to see it if it takes a long time to load. While designing a web site always think about how long it will take to load. Try out our tips to build a great looking web site that also loads fast.

Minimize the use of images – The key to a fast loading web site is to minimize the use of images. Images do enhance a page but don’t make 80% of your web site only images. Instead break it down as much as possible to simple HTML. Notice the popular sites like Yahoo, Google, Ebay, Amazon etc., they have very few images because the load time is more important. Very often simple designs are the best.
Optimize images for the web – Once you have decided on the images that you need on your site, make sure that it is optimized for the web. They should be in the gif or jpeg format. You can also minimize the size of the image by choosing the number of colors you need, from the color palette. The less the colors you choose, the less the size of the image. You can also use online tools like Gif Wizard to optimize your images or to get a recommendation on how to cut down the size of an image.
Use Tables creatively - You can get some great looking designs by using tables creatively . Tables load very fast because it is just HTML code. Tables can be used in the homepage, menus or anywhere you like. Check out our homepage and our menus to see how we have used tables in our site.
Read more on Using HTML Tables Creatively
Cut down the use of animated gifs – Don’t use animated gifs unless it is necessary. Animated gifs take a long time to load and can also be very irritating. But since they catch your attention you could use small animated gifs to draw a visitor’s attention to a particular section of your site.
Design simple icons – Instead of using big, bulky images use simple and small icons that add a little color and draw the attention of a visitor. We have used small icons in our homepage to highlight the main sections of our site.
Use background images instead of big images whenever possible - Use background images whenever possible. This is usually a very useful tip for headers and footers. Instead of using an image of width 580 which is a uniform design you can use just a part of that as a background fill. This reduces the size of the web page as the image is small. The code will look like this :
Try out CSS Styles - Have fun with CSS styles to get some cool text effects. Again, a CSS Style is simple HTML code so it loads very fast. You can create cool rollovers using CSS Styles.
Rollover the text on the right menu to see how we have used CSS Styles to get a simple but nice text effect.
Check out our CSS Styles tutorial for more cool tips on CSS Styles
Use Flash sparingly - There seems to be a lot of hype about Flash but I recommend that you minimize the use of Flash on a site. Don’t make entire sites using Flash. It may look great but it takes hours to load and can really put off visitors. If you do want to use Flash use it within an HTML site and make sure it loads fast.
Design most of your site in HTML - As much as possible try to design your site using HTML. You can create great designs by just using HTML code. Use tables, CSS Styles and simple fonts to design your site. Minimize the use of animated gifs, Flash, bulky images etc.
Keep checking your load time - Last but not least, before you decide on the final design of your web site, check its load time on NetMechanic. This site gives you a free analysis of your web site which is extremely useful. We kept using it to improve our site till we got a report that said good loading time!

We learnt these tips while building our web site. We’ve enjoyed sharing them with you and hope that you found them useful.

HTML Table Tips

jemuran — Mon, 04 Feb 2008 07:15:58 +0000

Learn how to use HTML tables creatively to design attractive and fast loading web pages.

Instead of designing graphic intensive web sites that take ages to load, you can use HTML tables creatively to get a professional looking web page that loads super fast. This article discusses many useful table tips and tricks on designing a great web page. Live examples and cut ‘n’ paste code are also provided for you to try out some great designs. You can also check out more handy tips ‘n’ tricks on designing a fast loading web site.

Tips on using Tables

Always give the width for each of the cells in a table. Make sure that the total of the cells in a row adds up to the table width. This will avoid many complications.
Try not to merge or break apart cells within a table. This again causes all kinds of problems.
When using widths or heights that are less than 10 pixels insert a shim or a transparent gif (1x 1 pixel). If you use Fireworks you will find a shim in your Fireworks file, or you can just export a 1x 1 transparent image and call it a shim. This trick is mainly for a table to work in a Netscape browser.
Netscape cannot understand height in percentages, so if you ever need to give a height for your tables, make sure it is in terms of pixels.

Let’s try out some cool designs using only tables

Tables with white borders

The key here is to use a transparent image(1×1 pixel) called a shim. The table is made of 3 rows and 3 columns. The width and height of the middle row is 1 pixel. The table will not take a height less than 5 pixels without you putting an image in it. Hence the magic shim. And there you have a striking table that can be used in your homepage to display your important navigation sections.

Services

Professional and cost effective web development

Products

Interactive Web Products – Flash Survey, Poll and more

Resources

Free web development resources

Contact Us

Cut ‘n’ Paste Code

<table width=”401″ border=”0″ cellspacing=”0″ cellpadding=”1″> <tr valign=”top”> <td bgcolor=”#980000″ height=”100″ width=”200″> Services Professional and cost effective web development </td> <td height=”100″ width=”1″></td> <td bgcolor=”#CC9900″ height=”60″ width=”200″> Products Interactive Web Products – Flash Survey, Poll and more </td> </tr> <tr valign=”top”> <td height=”1″ width=”200″></td> <td height=”1″ width=”1″></td> <td height=”1″ width=”200″></td> </tr> <tr valign=”top”> <td bgcolor=”#D09C00″ width=”200″ height=”60″> Resources Free web development resources </td> <td width=”1″ height=”100″></td> <td bgcolor=”#980000″ width=”200″ height=”100″> Contact Us Contact us for more details. </td> </tr> </table>

Web Services

Professional and cost effestive web design, development and promotion services

Web Products

Interactive Web Products – Flash Survey, Poll, Guest book, Instant Quote

Web Resources

Free web resources – articles, tutorials, tips and tricks

Contact Us

Table with a thin border

Have you ever wondered how to get a nice thin border instead of the thick border that is automatically generated using the ‘border’ property. Or have you ever wanted only the table to have a border and not all the cells. Well the answer to this is to make a table with the width you want and 1 as your cell padding. You then have to insert the actual table inside this table with width 100%. Cell spacing should be 0 for both of the tables.

Cut ‘n’ Paste Code

<table width=”250″ border=”0″ cellspacing=”0″ cellpadding=”1″ bgcolor=”#000066″ align=”left”> <tr> <td> <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”3″ bgcolor=”#FFE0E0″> <tr> <td bgcolor=”#000066″ valign=”top” width=”50%”> Web Services Professional and cost effestive web design, development and promotion services </td> <td bgcolor=”#FFFFFF” width=”50%” valign=”top”> Web Products Interactive Web Products – Flash Survey, poll, Guest book, Instant Quote </td> </tr> <tr> <td bgcolor=”#FFFFFF” valign=”top” width=”50%”> Web Resources Free web resources – articles, tutorials, tips and tricks </td> <td bgcolor=”#000068″ width=”50%” valign=”top”> Contact Us Contact us for more details – contact Us form, questionaire, review </td> </tr> </table> </td> </tr> </table>

Tables within a table – multiple tables in the same line

Here I have made a table with 2 rows and 5 columns with cell padding 2 . There are different background colors for all the alternate columns. In the first row I have written the text for the heading. In the second row I have made a table of width 100%, height 100% and cell padding 3. The whitespace between the tables is a column of width 3 pixels.
Note: You cannot make 3 different table coming one after the other in the same line. You can only make tables come one below the other. If you want many tables in the same line you have to make tables within tables.

Web Services

Web Products

Web Resources

Professional and cost effective web design, development and promotion services

Interactive Web Products – Flash Survey, Poll, Guest book, Instant Quote

Free web resources – articles, tutorials, tips and tricks.

Cut ‘n’ Paste Code

<table width=”368″ border=”0″ cellspacing=”0″ cellpadding=”2″ align=”center” height=”100″> <tr valign=”middle”> <td bgcolor=”#000066″ width=”120″ height=”20″> <div align=”center”>Web Services </div> </td> <td width=”4″ height=”20″></td> <td bgcolor=”#990000″ width=”120″ height=”20″> <div align=”center”>Web Products</div> </td> <td width=”4″ height=”20″></td> <td bgcolor=”#C89800″ width=”120″ height=”20″> <div align=”center”>Web Resources </div> </td> </tr> <tr valign=”top”> <td bgcolor=”#000066″ width=”120″> <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”3″ height=”80″> <tr bgcolor=”#FFFFFF” valign=”top”> <td> Professional and cost effective web design, development and promotion services </td> </tr> </table> </td> <td width=”4″></td> <td bgcolor=”#990000″ width=”120″> <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”3″ height=”80″> <tr bgcolor=”#FFFFFF” valign=”top”> <td> Interactive Web Products – Flash Survey, poll, Guest book, Instant Quote </td> </tr> </table> </td> <td width=”4″></td> <td bgcolor=”#C89800″ width=”120″> <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”3″ height=”80″> <tr bgcolor=”#FFFFFF” valign=”top”> <td> Free web resources – articles, tutorials, tips and tricks. </td> </tr> </table> </td> </tr> </table>

Table using the border property

Here’s the simplest way to make a table with a border. Use the border property to give a border for all the cells. Neat and clean, this is the easiest way to create a table with a border. Note: The border has a grayish tinge when viewed in Netscape.

Web Services

Professional and cost effective web design, development and promotion services

Web Products

Interactive Web Products – Flash Survey, Poll, Guest book and more.

Cut ‘n’ Paste Code

<table width=”300″ border=”1″ cellspacing=”0″ cellpadding=”3″ bordercolor=”#980000″> <tr> <td bgcolor=”#FFF4F4″ width=”50%”> Web Services Professional and cost effestive web design, development and promotion services </td> <td width=”50%”> Web Products Interactive Web Products – Flash Survey, poll, Guest book, Instant Quote </td> </tr> <tr> <td width=”50%”> Web Resources Free web resources – articles, tutorials, tips and tricks </td> <td bgcolor=”#FFF7F7″ width=”50%”> Contact Us Contact us for more details – contact Us form, questionaire, review </td> </tr> </table>

Merging Cells in a table – Try out a jazzy table like this in your homepage.

You can also try merging and breaking apart cells to get some really cool designs. Be careful when trying out this method, as you can lose control over the table. Merging and breaking apart cells make use of the ‘rowspan’ and ‘columnspan’ properties of HTML.


		Web Services Professional and cost effective web design, development and promotion services
Web Products Interactive Web Products – Flash animation, Flash programming, Instant Quote
	Entheos Your key to a powerful Net presence

Web Resources Free web resources – articles, tutorials, tips and tricks
			Contact Us Contact us for more details through our contact us form, questionnaire or email.

Cut ‘n’ Paste Code

<table cellspacing=0 cellpadding=5 width=400 border=0 align=”center”> <tbody> <tr valign=top> <td colspan=5></td> <td bgcolor=#ffcccc width=”54″> </td> <td colspan=2></td> </tr> <tr valign=top> <td width=”6″></td> <td bgcolor=#88bbbb width=”56″> </td> <td colspan=2></td> <td bgcolor=#cc3333 colspan=2 rowspan=2> Web Services Professional and cost effective web design, development and promotion services </td> <td bgcolor=#ddaaaa width=”3″> </td> <td></td> </tr> <tr valign=top> <td bgcolor=#99cccc width=”6″> </td> <td bgcolor=#006666 colspan=2 rowspan=2> Web Products Interactive Web Products – Flash Survey, poll, Guest book, Instant Quote </td> <td width=”20″></td> <td colspan=2 rowspan=2> </td> </tr> <tr valign=top> <td width=”6″></td> <td bgcolor=#254D78 colspan=3 rowspan=3> Entheos Your key to a powerful Net presence </td> </tr> <tr valign=top> <td colspan=2></td> <td bgcolor=#77aaaa width=”54″> </td> <td bgcolor=#B9D3EC colspan=2 rowspan=2> </td> </tr> <tr valign=top> <td width=”6″> </td> <td bgcolor=#FFCF63 colspan=2 rowspan=4> Web Resources Free web resources – articles, tutorials, tips and tricks </td> </tr> <tr valign=top> <td bgcolor=#FFE3AD width=”6″ rowspan=”3″> </td> <td rowspan=3 width=”20″> </td> <td width=”10″ bgcolor=#BDD3EF></td> <td colspan=3 bgcolor=#357CC4 rowspan=3>Contact Us Contact us for more details through our contact us form, questionnaire, review </td> </tr> <tr valign=top> <td width=”1″ bgcolor=”#BDD3EF”> </td> </tr> <tr valign=top> <td width=”1″> </td> </tr> </tbody> </table>

Using tables to design lines

This is a nice design because it has a lot of white space. Remember that white space really makes a site looks clean and readable. Again I have made tables within a table to get the best effect. Try to do this one yourself using the techniques I have describe above. Don’t use any images. Only use HTML code. Remember to use a shim. Have fun.

Web Services

Professional and cost effective web design, development and promotion services

Web Products

Interactive Web Products – Flash animation, Flash programming, Instant Quote

Web Services

Professional and cost effective web design, development and promotion services

Cut ‘n’ Paste Code

<table width=”362″ border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td width=”120″ valign=”top”> <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”5″> <tr valign=”top”> <td> Web Services Professional and cost effestive web design, development and promotion services </td> </tr> </table> </td> <td width=”1″ bgcolor=”#FFCF63″></td> <td width=”120″ valign=”top”> <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”5″> <tr valign=”top”> <td> Web Products Interactive Web Products – Flash Survey, poll, Guest book, Instant Quote </td> </tr> </table> </td> <td width=”1″ bgcolor=”#FFCF63″></td> <td width=”120″ valign=”top”> <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”5″> <tr valign=”top”> <td> Web Services Professional and cost effestive web design, development and promotion services </td> </tr> </table> </td> </tr> <tr> <td height=”10″></td> <td height=”10″></td> <td height=”10″></td> <td height=”10″></td> <td height=”10″></td> </tr> <tr> <td height=”1″ bgcolor=”FFCF63″></td> <td height=”1″ bgcolor=”FFCF63″></td> <td height=”1″ bgcolor=”#FFCF63″></td> <td height=”1″ bgcolor=”#FFCF63″></td> <td height=”1″ bgcolor=”#FFCF63″></td> </tr> </table>

Bikin Blog Itu Mudah!

jemuran — Fri, 04 Jan 2008 08:35:45 +0000

Wah gak gaul deh rasanya kalau di jaman sekarang ini kamu nggak punya blog. Selain bisa mengekspresikan diri lewat dunia tulis menulis di dunia maya, blog bisa menjadi semacam diary buat kamu. Lewat blog kamu bisa juga tuh nambah teman dan bahkan bisa promosi gratis usaha kamu.

Bikin, blog itu nggak susah lho!! Nah berikut ini ada beberapa tips membuat blog:
1. Kamu daftar lewat http://blogspot.com, lewat blog siapa saja juga sama kok, hanya ini cara yang paling mudah menurutku. Jadi silakan ketik misalnya “taufik.blogspot.com” dan tunggu sampai website tampil sepenuhnya..
2. Setelah itu liat di pojok kanan atas ada tulisan Buat Blog, kamu klik dan akan muncul beberapa item yang harus kamu isi. Lalu seperti kamu membuat e-mail, isikan data-data yang diminta sesuai kehendakmu..
3. Setelah itu klik anak panah bertulis “continue” di pojok kanan bawah, jika gagal, ikuti petunjuk yang ada, barangkali pengisian nama ada yang kurang atau kamu nulisnya pakai spasi.
4. Namai blogmu sesukamu, bisa pakai namamu sendiri, nama yang aneh-aneh atau apa saja, tapi ingat, nama ini yang akan dipakai untuk mengakses blogmu, misalnya nama kamu robby, kamu bisa pakai robby.blogspot.com, mudah-mudahan nama tersebut belum diambil orang lain. Kalau sudah, silahkan cari nama lain.
5. Setelah itu lanjutkan dengan klik anak panah continue.
6. Pilih desain blog sesukamu, tapi karena ini gratisan maka pilihan hanya tersedia sebagaimana ditampilkan di layar, arahkan mouse ke bawah untuk melihat warna dan desain web yang tersedia, trus pilih [kamu bisa klik "preview" untuk melihat pilihan desain blogmu dalam ukuran lebih besar], jika sudah mantap dengan pilihan desainmu sendiri, lanjutkan klik anak panah continue.
7. Jika semua pendaftaran beres akan muncul keterangan “your blog has been created”… lalu jika kamu mau masukkan data secara langsung tinggal klik “start posting”. Lalu akan tampil desain mirip di email kita kalau kita mau ketik email. Nah pada tahap ini mudah kok, kamu bisa langsung tulis artikel mu dan judul pada kotak yang telah disediakan, lalu kalau mau tambah dengan gambar tinggal klik di bagian “add image” dengan ikon kotak biru, letaknya ada di kanan atas di bawah tulisan “edit html” di sebelah kanan tanda centang dengan huruf abc, selanjutnya ikuti petunjuk yang ada seperti kamu kirim attachment file di email
10. Jika sudah yakin dengan artikel yang hendak kamu tampilkan di blog, jangan lupa klik “preview” dulu agar yakin bagaimana format tampilan nantinya, trus klik “publish” dengan terlebih dulu memasukkan kata sandi yang telah disediakan. Atau jika kamu ketik langsung di layar blog dan tulisan belum selesai, bisa kamu klik “save as a draft”. Biasanya perlu waktu beberapa menit sampai desain dan artikel keluar pada layar utama.
11. Jika kamu ingin masuk lagi, coba klik nama blogmu, misalnya taufik.blogspot.com, nah jika sudah tampil layar berisi nama blogmu, silakan masukkan username dan password yang telah kamu pilih untuk blogmu di bagian atas pojok kanan [biasanya], kalau udah masuk, kamu klik “new post” untuk membuat dan menampilkan artikel atau tulisan-tulisanmu atau “change setting” untuk memperbaiki setting atau tampilan blogmu atau “edit profile” untuk mengisi data-data baru tentang dirimu… laen-laennya silakan bereksperimen sendiri.. mudah kok..

Memilih Hosting yang baik

jemuran — Tue, 04 Dec 2007 11:26:01 +0000

Ternyata hal yang sulit menentukan hosting (shared hosting, tepatnya) yang baik. Googling sana-sini, malah semakin bingung untuk memilih. Baca review hosting, isinya campuran antara yang frustasi dan yang puas. Hal ini terjadi pada saya hari ini. Blog ini kebetulan di server lokal IIX yang sedang kehabisan bandwidth International. Mau tidak mau, ya terpaksa mencari ke luar, karena beberapa free wordpress theme saya jadi sulit diakses dari luar negeri.

Mengapa situs kita lambat diakses?

Hampir di semua perusahaan hosting yang menengah sampai besar, mereka tidak hanya meiliki 1 shared server, namun beberapa server. Nah jika kita kebagian salah satu server yang sibuk, tentu saja situs kita jadi lelet dan lansgung marah-marahin customer servicesnya. Apalagi kalau servernya down untuk beberapa jam.

Berdasarkan pengalaman saya membangun 2 tempat hosting, hal-hal penyebab utama yang menyebabkan server jadi lelet adalah:

Yang paling utama yang menyebabkan situs kita lambat di share hosting adalah kehabisan resource. Resource (processing time, bandwidth) yang dimakan oleh tetangga kita yang rakus (yang juga hosting di server yang sama), tentunya akan secara langsung memperlambat web kita. Itu sebabnya juga, hosting berbayar tidak pernah mengijinkan content yang illegal serta situs dewasa, karena penggunaan bandwidth yang keterlaluan. Jadi kalau anda kebetulan kebagian hosting yang satu server dengan situs yang sibuk, maka anda akan kena getahnya, situs anda ikut lambat.
Update pada server web tempat kita hosting (OS, control panel, aplikasi) kadang tidak berlangsung mulus. Kadang-kadang menyebabkan kelambatan server. Biasanya ini baru bisa diperbaiki sampai mereka mendapatkan update berikutnya
Tetangga hacker yang kurang ajar. Di antara tetangga kita dalam satu server ada hacker yang suka ngusilin tetangganya. Control panel yang jelek (versi lama dsb) akan kebobolan dalam menjaga sekuriti setiap situs didalamnya. Dengan sistem keamanan yang buruk (permission dll), kita dapat dengan mudah mengakses penuh situs-situs tetangga dalam satu server, hanya dengan script sederhana.
Masih ada beberapa yang lain, namun panjang nantinya

Bersiap untuk audit server tempat hosting kita?

Untuk mengetahui tetangga kita satu server, gunakan MyIPNeigbors.com. Cek siapa saja yang ada bersama kita dalam satu server.

Jika target situs anda bukan lokal (Indonesia) dan terletak di luar IIX, maka gunakan Internet Supervision untuk mengetahui performace situs kita di beberapa belahan dunia.

Jika situs anda bertarget pengguna Indonesia dan tempat hosting kita ada di IIX, maka jangan khawatir karena jaringan IIX saat ini masih cukup baik.

http://www.sunaryohadi.info/memilih-hosting-yang-baik.htm