Natural Solutions: Designing And Generating Favicon

Created a 256 pixel square image for Natural Solutions for various iconic uses. The first purpose I had in mind was the website's favicon. The flowing hair does not show up against the background colors in the original icon when sized down to 16 pixels. So I created another favicon with a transparent background because the flowing hair is the more important visual to my client. AS I have already encountered, the flowing tresses just do not lend themselves to square layouts. Its chose to clip them rather than reduce the overall size to squeeze into a square. The original can be use as a social networking avatar.

NOTE: Favicon have to be 16 pixel square image in the .ico format. The original image may be created larger then scaled down by an online favicon generator; but original size must be a multiple of 16. I chose 256 as a manageable size to design in photoshop. Watch this TutVid for complete instruction on creation and code placement in web pages.

Error Fix | Adjust DIV dimensions for Padding

Can't figure out why dimensions aren't working out. Check your padding! adding padding adds to the overall dimensions of your DIV. For example you have set div width to 900 to match an image width of 900px, but the DIV comes out wider. It could because your set your padding: 30 (that 30 for all sides). This means that the left and right padding = 30 each. This adds 60px to the overall width of the DIV (360px).

Resolve by removing padding or add 60 px to the DIV width to adjust for the right and left padding.

Errot Fix | Zero Padding to Rid Unwanted Space

Working on subpages for the NS project, I decided to build my own html page with divs instead of a Photoshop generated table layout. But I couldn't get rid of this unwanted top space, even after setting the margins to zero. (didn't have this problem with table layout)

Padding the body at zero solved my problem. To be on safe side by default zero your margins & padding to avoid undesirable spaces that you didn't specify. The following code sets my layout to "zero" by getting rid of any unwanted spaces brought about by the browser. Note the auto margin in the outer div also centers the layout (see previous post). Need to start every new web page with this basic code to avoid headaches!

body {
padding: 0; 

margin: 0;
background-color: #D66D29;
}
#wrapper {
padding: 0;
margin: 0 auto;
width: 1200px;
}

Note To Self: Centering Web Page

1. WARNING: If exporting web page from Photoshop don't forget to take into consideration which SETTINGS to choose greatly affects your centering options.
2. The DEFAULT - TABLE based layout - allows you to easily center the web page in DW by right clicking in the white space, the choosing "center" in the drop down menu of the "Edit Tag - Table" dialog box. (You can also add the background color by editing the background of the table.)
3. Choosing a CUSTOM - CSS based layout - will produced nicely named DIVs but the CSS will include ABSOLUTE Positions which can't easily be centered by normal CSS methods. You will have RE-LAYOUT the slices using new CSS. A real pain for any complex layout.
4. Now to center webpage using CSS, you must use AUTO MARGINS for a DIV that wraps the entire layout which I usually enclose in MAIN or CONTENT DIV ( "text-align: center" is the fix needed for IE ) See this example used for my designables.net web site:

/** center web page in IE6 add text_align:center;

re-align left in wrapper **/

body {
color: #CCC;
padding: 0;
text-align: center;font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
}

/*** center web page: add auto margins outermost div; 

but re-align text center to make up for IE fix  ***/

#wrapper {
width: 670px; 
text-align: left;
border: 0px; 
padding: 0;  
margin: 0 auto; 
}

Reduce Page Weight and Improve Web Site Performance

According to a August 2007 survey performed by Nielsen//NetRatings, 83% of home users in the USA are now using high-speed broadband Internet connections. While that number is growing and the news is good, it still leaves 17% of home Internet users in the USA on 56k or slower dial-up connections. If you have a business that caters to the rural community in the USA, you may want to take notice of the fact that many homes in rural areas still do not have access to high speed Internet connections.

Numerous surveys have indicated that the average threshold or patience level with Internet users is about ten seconds. For every five-second increment over that, larger and larger percentages of users begin to abandon a Web site.

The practical limit if you want a Web page to download and render in a user’s browser in ten seconds or less is 60,000 (60k) bytes. Meeting the ten second mark for a dial-up connection also requires that a user have a good 56k connection, which most users do not have. I have personally seen PCs in farming and rural areas where the conection speed does not exceed 14.4k.

Most e-commerce sites will have a very difficult time keeping page weight below 60k. If you display a lot of product images on your Web pages, consider using thumbnails and make sure that each is properly optimized using a good image editing tool. I find that you can stretch the page weight limit for e-commerce sites to about 100k (100,000 bytes), but you will experience significant user abandonment when you venture past this point.

http://www.tech-evangelist.com/2007/09/02/page-weight/