1. When you have multiple css files, when a page is loading there’ll be multiple HTTP requests (for every css file), so it will slow down the loading of the web page.

2. If you have a single huge css file it’s hard to find something and make changes in the code.

I think the best solution is:

1. I have a single css file with many comments

2. Before uploading the css file to the server, I remove the comments and all unnecessary code from the file using my reduce code size tool and into the server, I upload the optimized css file.

In this way, I have a file that allows me to make changes easily and in the same time the loading speed of my site is fast, because there’s only one HTTP request for the css.

Here are some screenshots:

The design is simple, because it will make work faster and because I’m a bad designer, too

After your code is optimized, you can see a simple statistic about the result (original code length and the output code length).

You check out the Reduce Code Size Tool HERE.

P.S. I’ll be very thankful to hear your opinions about the tool (bugs, ideas for features, etc).

If you want to learn more about HTML5, here are some useful resources:

1. WHATWG (Web Hypertext Application Technology Working Group) HTML – latest working specification of HTML 5.
URL: http://whatwg.org/html5

2. The Blog of WHATWG
URL: http://blog.whatwg.org/

3. Doctor HTML5 – Articles about HTML5 that could help you implement HTML5.

URL: http://html5doctor.com/

4. Html5 Demos and Examples
URL: http://html5demos.com/

5. Html5 Gallery

URL: http://html5gallery.com/

6. HTML5 Validator – here you can check if your website passes HTML5
validation
URL: http://html5.validator.nu/

The footer is not the most important thing in a website, but if you want to create good site, all its elements should be professionally done.

Here are few ideas for your Mega Footer:

1. Add some dynamic data in your mega footer that is related to the current page.

2. Static Footer – unchangeable information, same as the Header.

3. Footer elements that urge the visitors to make some action.

4. Mix of the 1, 2 and 3

Here few site examples that have Mega Footers:

URL: http://www.andyrutledge.com/

URL: http://whoisjengordon.com/

URL: http://www.blueraydesignbuild.com/

I hope you’ll like the idea for mega footers

Here’s a list of Web Sites Against IE6:

1. STOP IE6 campaign

A campaign devoted to wiping IE6 off the web

URL: http://www.stopie6.org/

2. RIPIE6.com

RIPIE6 is the obituary notice of Internet Explorer 6′s death

URL: http://www.ripie6.com/

3. Bring Down IE 6

a campaign by .net magazine

URL: http://www.bringdownie6.com/


4. Stop IE

Rid the web of Internet Explorer

URL: http://www.stopie.com/

5. I hate IE

devoted to those who HATE IE (Internet Explorer)

URL: http://www.ihateie.com/

6. Why IE Sucks Blog

Need reasons? Read on, reader, read on …

URL: http://whyiesucks.blogspot.com/

7. Crash IE – Crash Internet Explorer

Crash Internet Explorer by Simply Visiting This Website!

URL: http://www.crashie.com/

8. IE sucks – Internet Explorer the dumb browser

Internet Explorer the dumb browser

URL: http://www.iesucks.info/

9. Stop Internet Explorer

URL: http://stopie.wordpress.com/

10. Dear IE 6,

Its been a good run, now please leave.

Sincerely,

URL: http://www.dearie6.com/

Easy Logo Maker is a web based application that allows users to create logos for free.
Generated logos are in all format files. Users can add images, text and shapes. Text, images and shapes use context ribbon UI, from where properties like (size, position, filters…) can be set for each object when it’s selected.

URL: http://easylogomaker.riaextended.com/

2. Free Logo Generator

Free Logo Generator is a web based application that allows users to create logos for free.
Generated logos are in all format files.

URL: http://www.simwebsol.com/ImageTool/

3. Logo Maker

Logo Maker is a web based application that allows users to create logos for free. Generated logos are in all format files.

URL: http://www.logomaker.com/

4. Logo Ease – Business Logo Maker

Logo Ease is a web based application that allows users to create logos for free.
Generated logos are in all format files.

URL: http://www.logoease.com/

5. AAA Logo Design Software

With AAA Logo you can create almost any type of website graphics or business graphics for high resolution printing. Logos, banners, buttons, headers and icons for your website with rich colors, gradients, shadows and reflections. Business graphics such as business cards, letterheads, posters and other business stationery can be designed and printed directly from AAA Logo or created images can be exported for use with other applications.

URL: http://www.aaa-logo.com/

1. Web Developer
last version: 1.1.6

Add a menu and a toolbar to the browser with various web developer
tools like working with css, cookie, forms, tables, frames, and edit html.

URL: https://addons.mozilla.org/en-US/firefox/addon/60

2. FireFTP
last version: 1.0.4

FireFTP is a free, secure, cross-platform FTP client for Mozilla
Firefox which provides easy and intuitive access to FTP servers.

URL: http://fireftp.mozdev.org/

3. Firebug
last version: 1.4.0b2

Firebug integrates with Firefox to put a wealth of
development tools at your fingertips while you browse.

URL: https://addons.mozilla.org/en-US/firefox/addon/1843

4. ColorZilla
last version: 2.0.2

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies…

URL: https://addons.mozilla.org/en-US/firefox/addon/271

5. IE Tab
last version: 1.5.20090525

Embedding Internet Explorer in tabs of Mozilla/Firefox…

URL: https://addons.mozilla.org/en-US/firefox/addon/1419

6. Page validator
last version: 3.0.0

Validates a page using the W3C Markup Validation Service.

URL: https://addons.mozilla.org/en-US/firefox/addon/2250

7. CSS validator
last version: 3.0.0

Validates a page using the W3C CSS Validator.

URL: https://addons.mozilla.org/en-US/firefox/addon/2289

8. Current Site IP
last version: 1.0.14

This plugin gives you an advertising-free, direct way to get a
website IP address you need when working on site development.

URL: https://addons.mozilla.org/en-US/firefox/addon/11036

9. MeasureIt
last version: 0.3.8

Draw out a ruler to get the pixel width and height of any elements.

URL: https://addons.mozilla.org/en-US/firefox/addon/539

10. Window Resizer
last version: 1.0

Resize your browser to various standard resolution sizes.

URL: https://addons.mozilla.org/en-US/firefox/addon/1985

]]> http://www.devtheweb.net/blog/2009/08/25/10-add-ons-for-firefox-you-shouldnt-miss/feed/ 0 http://www.devtheweb.net/blog/2009/08/25/general-tips-to-optimize-page-loading-when-work-with-pictures/ http://www.devtheweb.net/blog/2009/08/25/general-tips-to-optimize-page-loading-when-work-with-pictures/#comments Tue, 25 Aug 2009 09:34:52 +0000 admin http://dev-the-web.com/blog/?p=68 1. Use Browser Cache

When visit page for first time, Browser have to download all resources (aslo All images), but on second visit, why should not browser get resources from Cache (previously loaded and saved resource). For Images/CSS/JavaScripts, you’ll need to configure the web server.

2. Don’t forget height and width atteibutes in img tags

These attributes ‘helps’ the browser to layout the text before the image is 100% loaded. If you forget these attribute, browser will first download the image and after the will calculate the lay out.

3. Give correct values of height and width atteibutes in img tags

If height and width are little but the image file is large, that won’t mage the page loading faster.

4. Avoid ‘animated’ Gifs and Flash

Animated Gifs and Flash could have huge size, which’ll slow down the page loading.

5. Do you reaaly need 3D Graphics ?

Think if you really need large 3D Graphics for background, simple images could make site more friendly and also reduce the total size of bytes which browser will download when open your page, which optimize the loading

6. Choose Appropriate Formats of Images

Be carefully when choose the format of images: GIFs works best for solid colors and sharp-edged transitions from one color to other, JPEGs works best for continuous gradations of many colors or grey tones.

7. Use Image Slicing

Image slicing is a technique used to breakdown a large image into smaller pieces to make it load faster.

8. Don’t Include Too Many Images in One Page

If they’re too many separate them in different pages. Ex. you’ve photos of animalas, make one page for cats, second for dogs, third for rabbits, etc.

9. Use Thumbnails Javascript Scripts

You can use a java script to display a thumbnail and load the larger image only when the user clicks or rolls his mouse over the thumbnail.

10. Optimize Your Images

Optimizing your images is a great way to reduce the load time, but be careful because it will often make your colors look washed-out and you may lose some of the fine details.

1. CssMenuMaker.com – Generator and Download  CSS Menus

URL: http://www.cssmenumaker.com/

2. MyCssMenu.com – CSS Menu Generator

URL: http://www.mycssmenu.com/

3. CssMenuBuilder.com – Create a standard compliant xhtml/css
menu for your website for free via the online navigation generator.

URL: http://cssmenubuilder.com/home

4. CssPortal.com/generators/menu.htm – create a horizontal
menu with as many as 10 tabs.

URL: http://www.cssportal.com/generators/menu.htm

5. PureCssMenu.com – Horizontal css menu & Vertical css menu.

URL: http://purecssmenu.com/

x. TabsGenerator.com – create navigation tabs with border, gradient,
orientation, and much more.

URL: http://www.tabsgenerator.com/

1. Use Browser Cache

When visit page for first time, Browser have to download all resources, but on second visit, why should not browser get resources from Cache (previously loaded and saved resource). For Images/CSS/JavaScripts, you’ll need to configure the web server.

2. call css/javascript files ‘style_v1.0.1.css’ ‘script_v1.0.1.js’

When you make changes to existing css/javascript files of your page and you’re worry that browsers could use older version of these files – just change their names.

3. Place css and javascript in external files

External files would ‘help’ Browser to cache for next use and is good for multiple visits

4. Avoid using <table>

Tables loads slower than other content – First to work out their structure and once to determine their content. So, as alternative of tables you can layout with css.

5. Avoid using images when it’s possible.

Ex. if you need to display some text, instead of creating image with that text, add the text suitable formatted with css.

6. Reduce ‘<!– … –>’, ‘ ’, ‘<br />’

Adding of even one character increases the size of the page. As bigger is the page size as slower will be the loading time. So to decrease the page size reduce comments and white spacing.

7. Reduce Cookie Size

it’s important to keep the size of cookies as low as possible to minimize the impact on the user’s response time.

8. Put ‘/’ at the end of every href (if it’s possible).

Ex. href=”http://www.aspnetsource.com/”.

When you add ‘/’, the server ‘knows’ that the url is a directory and doesn’t spend any time to work it out.

9. Write compact css

Ex. border: 1px black solid;

is better than:

border-width: 1px;
border-color: black;
border-style: solid;

10. Reduce < … class=”class_name” … >

Ex.

<div>
<p> … </p>
<p> … </p>
<p> … </p>
</div>

.class_name { color: #ff0000; }

can be optimized to:

<div>
<p> … </p>
<p> … </p>
<p> … </p>
</div>

.class_name p { color: #ff0000; }

11. avoid ‘animated’ Gifs and Flash

Animated Gifs and Flash could have huge size, which’ll slow down the page loading.

12. Choose appropriate formats of images

Be carefully when choose the format of images: GIFs works best for solid colors and sharp-edged transitions from one color to other, JPEGs works best for continuous gradations of many colors or grey tones.

13. Place css inside head

When place css inside head, then browser’ll ‘know’ in the start about how to style and display content before having all content.

14. Place javascript at the bottom of the page (if it’s possible)

Place javascript at the bottom of page as much possible, because Browser may block rendering during downloading, becausedocument.write() may induce HTML.

15. Avoid the use of query params in image URLs, etc.

Browsers refuses to cache any URL containing a question mark by default.

16. use short style names

By using short style names you can save space, especially when you refer to multiple styles.

17. Specify the height and width attributes for < img>s

When specify the heigth and width attributes for <img>s, but it allow the browser to map the layout of your page while the images are being loaded.

18. Choose <link> over @import

In IE @import behaves the same as using <link> at the bottom of the page, so it’s best not to use it.

19. Make favicon.ico Small and Cacheable

If you don’t care about it the browser will still request it, so it’s better not to respond with a 404 Not Found.

20. Minimize DOM Access

Accessing DOM elements with JavaScript is slow