Design and Layout Tips

Read these 6 Design and Layout Tips tips to make your life smarter, better, faster and wiser. Each tip is approved by our Editors and created by expert writers so great we call them Gurus. LifeTips is the place to go when you need to know about Html tips and hundreds of other topics.

Design and Layout Tips has been rated 3.0 out of 5 based on 452 ratings and 1 user reviews.
How do I convert Hex values to RGB values?

Convert Hex to RGB

This is a problem that plagued me for months. My graphic program accepts colors as RGB (red, green, blue) values, however, the color that I wanted as a background, I only knew as a hexidecimal value. After months of guessing at RGB values and searching the web for a utility that converts it for you, I found the solution.

For RGB and Hex values, all colors are made from combinations of the standard colors red, green, and blue, with each color's value between 0 and 255.

Hex values are (simple version to follow) codes used to represent the same values as RGB, and look like this FFCC00. First, break it into 3 equal parts, which are the values of red, green, and blue, respectively. Our sample now looks like this:
red=FF, green=CC, blue=00.

Now the conversion:
1) Open Windows calculator. Click on the "view" menu and select "scientific"
2) Ensure that the box beside "Hex" is checked
3) Enter the first value, FF. Then check the box that says "Dec", and record the value, 255
4) Repeat the same procedure for the second value, resulting in 204
5) The last value is easy and needs no converting because zero is zero. This is also true if you come across a value such as "0A", where you just need to enter "A". However, if it were "A0", you would need to enter the "0" as well.

So, our end result, FFCC00, is equal to 255, 204, and 0 in decimals (and RGB values). This also works for converting from RGB to Hex!

How can I make my pages load faster?

Define Your Images

Troubled by slow-loading pages? Here's a tip that will give the appearance of faster loading pages. Define the height and width of the images on your webpage, like this:

< IMG SRC="mypic.gif" HEIGHT="120" WIDTH="60" >

By doing this, you create a placeholder for the image which allows the browser to continue loading the page's text before the image has been completely downloaded. The appearance of the text gives the illusion that the page is loading faster, and that makes a difference to your users.

How do I make webpages load faster?

Compress Your Graphics

Using graphic images on your webpage enhances the user's experience and makes plain pages pleasing to the eye. However, the average surfer will wait no more than 25 seconds for a page to load, even when the slowdown is caused by their connection, not your page.

To make sure that your page loads fast enough to keep the surfer and still allow a great amount of freedom to use the graphics you want, I highly recommend the use of a graphic compression tool. This tool will compress your .gif or .jpg files without sacrificing much in the way of image quality.

How do I make a mouse over text description for an image?

Provide Alternate Text

You've just spent countless hours creating an extraordinary webpage loaded with beautiful graphics and effects. Now comes the surfer who has turned off graphics in their browser to help speed up downloads. They are completely lost on your site and can't even find your navigation buttons. AAARRRGGGHHH!

Don't let this happen to you. After all, you spent hours upon hours creating pages that convey your message to the world; make sure that they can all see it. Simply use the ALT attribute of the < IMG > tag, like so:

< IMG SRC="mypic.gif" ALT="A picture of me" >

How do I keep up with the latest HTML enhancements?

Provide Quality

The best way to establish a name for yourself and your website is to provide quality content, whether it's in the form of information, or a product or service. Don't be fooled into thinking that just because XYZ browser comes out with a new enhancement, you have to use it to prove that you're up with the times. Instead, distinguish yourself by the
quality of content that you present.

How do I control image placement?

Control Position with a Single Pixel

Have you ever wanted more control over where your graphics appear on the page? HTML provides adequate formatting for most people and websites. However, if you're like me, it's not enough.

This simple trick will provide you with pixel level control of the placement of images (although you can also use it for text, tables, etc.). The first step is to create a 1 pixel by 1 pixel gif image (transparent background works best, or make several different colored gifs) with your favorite software. Next, just use the image in your code expanding its width (and/or height) to meet your needs.

Not finding the advice and tips you need on this Html Tip Site? Request a Tip Now!

Guru Spotlight
Jolyn Wells-Moran