PDA

View Full Version : Dreamweaver Site Load times


eugenecrous
01-11-2011, 04:09 AM
Good day

I optimized my images in photoshop after I sliced them, then I used dreamweaver to create the site, but it still takes long to load, I am a joomla user and really new to dreamweaver.

Could Someone please advise, what my best option would be.

Below is te site.

www.pixelsmiths.co.za/test

Regards
E

edbr
01-11-2011, 04:31 AM
images are around 100k hence the delay. i see that your design is image heavy in that it is the main point but could they not nbe optimisedalso using text in the image will add to delay and will give you no benefit in search engine advantage use images as background and text over it

eugenecrous
01-11-2011, 04:42 AM
Hi there, yes the point of the site is to show the images and the quality of them.

edbr
01-11-2011, 05:33 AM
so you will have slower loading times, but not that bad i would still advise using text not as part of the image though

eugenecrous
01-11-2011, 06:15 AM
thanks, will look up the css now thn for that

Ricky55
01-11-2011, 09:52 AM
All of that design should have real text and just use the image for your main picture.

The navigation could be real text the logo should be done as an h1 and the replaced with CSS even those quotes. These should be block quotes you can still use that font or one similar. Using @font face or one of the many web font companies or google fonts.

If a user or indeed a search engine came to your site as it is currently they'd see pretty much nothing.

This is a shame as the photography looks excellent and I like your design. Build it properly and get the most out of it.

If you need any further help with any of the above just post back.

Ricky55
01-11-2011, 09:53 AM
Sorry I meant to say if a user with a screen reader or indeed a search engine came to your site in it's present guise theyd see very little.

eugenecrous
01-11-2011, 10:40 AM
Hi there,, ok I am using css now with it but can seem to get the image above the menu, could you assist please?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sprite Menu</title>
<link rel="stylesheet" href="menu_style.css" type="text/css" media="all" />

</head>
<body>
<div>
<ul id='menu'>
<li class="button"><a class='current' href='http://' >Home</a></li>
<li class="button"><a href='http://' >Products</a></li>
<li class="button"><a href='http://' >Support</a></li>
<li class="button"><a href='http://' >Contact</a></li>
</ul>
</div><!-- End of Nav Div -->
</body>
</html>


ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:1024px;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(images/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

ul#menu li
{
display:block;
float:right;
margin:0;
padding:0;
}

ul#menu li a
{
display:block;
float:right:
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}

ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}


ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}

Ricky55
01-11-2011, 03:32 PM
This should get you started mate I've made the main image a background image so you can place text on top of it. The quote is not in the right font but it will get you started.

Not got time to do any more.

The logo also should be removed from the image this will then be coded as an <h1>Your logo</h1> and replaced with CSS.

Keep us posted.

http://dl.dropbox.com/u/508261/site.zip

Ricky55
01-11-2011, 03:43 PM
Couldn't resist adding the logo for you too, same link.

These want taking off properly though, the logo should be a transparent gif or png, a gif would actually do you. Obviously I've just removed these from the image ruff arse as I don't have the layered file that you will have.

Cheers

Ricky55
01-11-2011, 03:44 PM
The mark up now makes sense,


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Enter your title here</title>

<link rel="stylesheet" href="css/resets.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
</head>

<body>

<div id="wrapper">

<h1 id="logo"><a href="http://www.pixelsmiths.co.za" title="Return to the Home Page">Digital Darkroom Creations DDC</a></h1>

<blockquote>
<p>Use the light to return to the light. Then you can die yet be ever living.</p>
<cite><p>Lao Tzu</p></cite>
</blockquote>

<ul>
<li><a href="#">Links</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
</ul>

</div><!-- wrapper -->

</body>
</html>

eugenecrous
01-12-2011, 03:26 AM
Thanks Ricky55, I have since added to the css and the site is loading much quicker, you have shown me the way forward.

thanks

Ricky55
01-12-2011, 03:05 PM
Not a problem mate.