How To Design a Clean CSS Web Page Layout

March 5, 2010

Using CSS to convert your graphic design from Fireworks/Photoshop into a full-blown web page is an art in its own right. It takes some time to master that craft but you can achieve clean CSS layouts with a lots of practice  or quickly learn the tricks-of-the-trade from an expert.

Read more…

Share

Optimizing Pictures For The Web With Adobe Fireworks

February 20, 2010

Fireworks Image OptimizationOptimizing pictures for the web is a must to get fast loading web pages and reduce your website bounce rate while displaying high quality images. You certainly heard the “buzz”  about Google considering speed as a important factor in determining the quality of a website.
Of course Google doesn’t YET  include the page download speed as a site ranking factor. But with all of us praying for a faster web, I would not be surprised if the page speed becomes a variable in the Google PageRank equation.

Read more…

Share

Choosing The Right Image File Format For The Web

February 10, 2010

In a previous post I mentioned choosing the right file format as one of the 6 key factors in optimizing images for the web. I’m now going to give you more pointers to help you decide which file format is the best choice depending on the graphic you are dealing with. I will focus only on the three most common graphic file formats used in web design:  JPEG, GIF and PNG. Read more…

Share

Use HTML Comments To Solve CSS Layout Issues

February 2, 2010

If you are not inclined to use HTML comments in your web page markup you certainly never spent hours trying to fix a messed up CSS layout. That’s a loss of productivity and money that could have been avoided with just a simple preventive measure: using HTML comments.  It takes less than 20 seconds to write one that could save you an hour of layout troubleshooting.

Read more…

Share

6 Key Factors in Optimizing Images For The Web

January 24, 2010

The 6 key factors to consider when optimizing images for the web are:

  1. Always start with picture dimensions (w, h) greater than your target size
  2. Set the image resolution between 72 and 96 pixels/inch
  3. Crop the image to only keep the area needed to convey your message
  4. Resize the cropped image to reduce the dimensions to the minimum while maintaining the proportion between width and height
  5. Choose the appropriate export file format: PNG, JPEG or GIF
  6. Select the right compression ratio/color range

Read more…

Share

CSS Body Background Color and Background Image

January 15, 2010

You certainly know the HTML ”<body>” tag is the topmost container box that wraps your web page design elements and content. Of course we can all agree that the <html>” tag is the topmost parent element of the HTML DOM.  So let me reformulate my previous statement to satisfy the geek within you: the body is the closest parent to HTML elements in  your web page content. You can use the body tag to change your web page background color from the default “white”.

Read more…

Share

CSS Background Color and Background Image

January 7, 2010
  • Applying a background color to an HTML element in a web page  fills that container with the specified color.
  • It enhances your web page visual appeal and makes the container stand out.
  • It can also add contrast between the content of that block with its surrounding.
  • A background image allows you to get more graphic design and creative effect to the HTML block it’s applied to.
  • A background image comes particularly handy for creating round corners rectangles without adding too much HTML markup.
  • Using a background image is almost unavoidable for achieving  gradient effects applied to web page  blocks such as the navigation bar.

Read more…

Share

Using Dreamweaver CSS Layout Templates

November 9, 2009

dreamweaver_css_layouts Dreamweaver CS4 is shipped with a load of pre-designed CSS layouts you can use to position the main blocks of your website/blog design with just a few clicks. Read more…

Share