| Author |
Designing a website for slow connections
|
|
| Alana MCIA 2004-08-21, 11:14 pm |
| I'm new to Dreamweaver MX 2004 and web design in general. I am trying to fix
up my company's existing website www.mncia.org . Most of its visitors are
using extremely slow connections and our pages take too long to load. Any tips
for saving space and designing for faster loads? In particular, I'm concerned
that our existing drop down menu buttons appear to be JPEG images, and take up
several K each. I read somewhere that a good page size is under 50K, ours are
WAY over that with all these JPEGs. I guess I'm asking a pretty general
question here, so even if someone could refer me to a good site or manual for
learning Dreamweaver, that would be wonderful.
| |
| Murray *TMM* 2004-08-21, 11:14 pm |
| Replace all those menu graphics with text. See the Uberlink tutorial here
for a great way to do that.
http://www.projectseven.com/tutoria...links/index.htm
That 50K target is still the best way to go!
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Alana MCIA" <webforumsuser@macromedia.com> wrote in message
news:cg8hh2$gf0$1@forums.macromedia.com...
> I'm new to Dreamweaver MX 2004 and web design in general. I am trying to
> fix
> up my company's existing website www.mncia.org . Most of its visitors are
> using extremely slow connections and our pages take too long to load. Any
> tips
> for saving space and designing for faster loads? In particular, I'm
> concerned
> that our existing drop down menu buttons appear to be JPEG images, and
> take up
> several K each. I read somewhere that a good page size is under 50K, ours
> are
> WAY over that with all these JPEGs. I guess I'm asking a pretty general
> question here, so even if someone could refer me to a good site or manual
> for
> learning Dreamweaver, that would be wonderful.
>
| |
| T.Pastrana - 4Level 2004-08-21, 11:14 pm |
| Alan,
Forget the uberlinks tutorial, that's not where the problem lies and it
won't solve your problem. Your nav images are only about 2k and you only
have 4 of them. The real problem lies in the nature photos on the pages.
They are really bloated.
Soybeans_against_sky.jpg = 34k
Prarie_grass_scene.jpg = 39k
Apples_on_Branch.jpg = 41k
Forb_Pink_Flowers.jpg = 40k
Storage_Facility.jpg = 40k
Corn_on_cob.jpg = 42k
MCIA_logo_450px.jpg = 25k
This totals 261k of images.
What you need to do is run these images through a graphics program for
better optimization to bring thier file size down as much as possible. The
rest of your pages are comprised mostly of text so take care of these images
and your page(s) will certainly load much faster.
--
Regards,
...Trent Pastrana
www.fourlevel.com
-----------------------------
"Alana MCIA" <webforumsuser@macromedia.com> wrote in message
news:cg8hh2$gf0$1@forums.macromedia.com...
> I'm new to Dreamweaver MX 2004 and web design in general. I am trying to
fix
> up my company's existing website www.mncia.org . Most of its visitors are
> using extremely slow connections and our pages take too long to load. Any
tips
> for saving space and designing for faster loads? In particular, I'm
concerned
> that our existing drop down menu buttons appear to be JPEG images, and
take up
> several K each. I read somewhere that a good page size is under 50K, ours
are
> WAY over that with all these JPEGs. I guess I'm asking a pretty general
> question here, so even if someone could refer me to a good site or manual
for
> learning Dreamweaver, that would be wonderful.
>
| |
| John Waller 2004-08-22, 4:15 am |
| Your nav images are only about 2k and
> you only have 4 of them.
The purple rollover images are 2K each.
However the 4 original-state green nav images weigh in at 16.5K each = 66K.
These should be optimised to 2K each as well.
The real problem lies in the nature photos
> on the pages. They are really bloated.
Agreed
--
Regards
John Waller
| |
| T.Pastrana - 4Level 2004-08-22, 4:15 am |
| Good point ...
--
Regards,
...Trent Pastrana
www.fourlevel.com
-----------------------------
"John Waller" <johnw@REMOVETHISpinnacleweb.com.au> wrote in message
news:cg9bfd$dg2$1@forums.macromedia.com...
> Your nav images are only about 2k and
>
> The purple rollover images are 2K each.
> However the 4 original-state green nav images weigh in at 16.5K each =
66K.
> These should be optimised to 2K each as well.
>
> The real problem lies in the nature photos
>
> Agreed
>
> --
> Regards
>
> John Waller
>
>
| |
| Murray *TMM* 2004-08-22, 12:14 pm |
| Argh. Should'a looked....
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"T.Pastrana - 4Level" <aaaa@aaaa.com> wrote in message
news:cg8se5$n6d$1@forums.macromedia.com...
> Alan,
>
> Forget the uberlinks tutorial, that's not where the problem lies and it
> won't solve your problem. Your nav images are only about 2k and you only
> have 4 of them. The real problem lies in the nature photos on the pages.
> They are really bloated.
>
> Soybeans_against_sky.jpg = 34k
> Prarie_grass_scene.jpg = 39k
> Apples_on_Branch.jpg = 41k
> Forb_Pink_Flowers.jpg = 40k
> Storage_Facility.jpg = 40k
> Corn_on_cob.jpg = 42k
> MCIA_logo_450px.jpg = 25k
>
> This totals 261k of images.
>
>
> What you need to do is run these images through a graphics program for
> better optimization to bring thier file size down as much as possible. The
> rest of your pages are comprised mostly of text so take care of these
> images
> and your page(s) will certainly load much faster.
>
>
> --
> Regards,
> ..Trent Pastrana
> www.fourlevel.com
>
> -----------------------------
>
>
>
>
>
>
>
>
> "Alana MCIA" <webforumsuser@macromedia.com> wrote in message
> news:cg8hh2$gf0$1@forums.macromedia.com...
> fix
> tips
> concerned
> take up
> are
> for
>
>
| |
|
|
|
|
| Charles Angelich 2004-08-23, 4:15 am |
| On Sun, 22 Aug 2004 18:43:31 -0400, "Murray *TMM*"
<forums@HAHAgreat-web-sights.com> wrote:
> 10 seconds is the target number I have seen - perhaps from Neilsen. At 10
> seconds, a 56k dialup will have downloaded approximately 40-45K of content.
> If that content is *engaging* then you are home free.... If not, then your
> click-through rate will climb significantly.
I have never found a 10 second recommendation for total time to
download a webpage to appease user appetites. I would split the
difference and say 15 seconds is a good target but I hold to my
original statement that 20 seconds is not too slow to be useable.
Charles.Angelich
MP3/WMA streaming:
http://www.undercoverdesign.com/dosghost/samples.asp
DOS & W31:
http://www.undercoverdesign.com/dosghost/
Entertainment:
http://www.undercoverdesign.com/dosghost/faf
| |
| John Waller 2004-08-23, 7:14 am |
| >but I hold to my
> original statement that 20 seconds is not too slow to be useable.
Most people I know on dialups (including me up to a couple of years ago til
I discovered broadband) get impatient with a webpage still loading after 10
seconds. Most click the Back button and move on by then esp. if they're
researching something.
--
Regards
John Waller
| |
|
|
|
|
|
|
| Gary White 2004-08-23, 7:15 pm |
| Murray *TMM* wrote:
>Thanks - that about covers it, then.
You're welcome.
Gary
| |
| Michael Fesser 2004-08-23, 7:16 pm |
| .oO(Charles Angelich)
>I have never found a 10 second recommendation for total time to
>download a webpage to appease user appetites. I would split the
>difference and say 15 seconds is a good target but I hold to my
>original statement that 20 seconds is not too slow to be useable.
Who really counts seconds? A webpage should load as fast as possible,
that's the point. Proper and reasonable markup, CSS, text instead of
images, highly compressed images, etc. helps a lot.
Micha
| |
| Michael Fesser 2004-08-23, 7:16 pm |
| .oO(T.Pastrana - 4Level)
>Forget the uberlinks tutorial, that's not where the problem lies and it
>won't solve your problem. Your nav images are only about 2k and you only
>have 4 of them.
They are still unnecessary and should be replaced with plain text. Each
image requires another connection to the server, which causes additional
overhead.
Micha
| |
| John Waller 2004-08-23, 7:16 pm |
| > They are still unnecessary and should be replaced with plain text.
Why?
--
Regards
John Waller
| |
| Michael Fesser 2004-08-23, 11:14 pm |
| .oO(John Waller)
>
>Why?
Button images are a waste of resources (webspace and bandwidth). You can
create faster loading and more accessible buttons with CSS.
OK, maybe I shouldn't have written "plain text" ...
Micha
| |
| T.Pastrana - 4Level 2004-08-23, 11:15 pm |
| A waste of bandwith is having 7 small images adding up to 261k. That is a
waste. Choosing on whether to use images or CSS buttons is a designers ( or
clients ) choice but not a waste as long as proper optimization is used.
--
Regards,
...Trent Pastrana
www.fourlevel.com
-----------------------------
"Michael Fesser" <netizen@gmx.net> wrote in message
news:tt1li0t5qaffj4gc461oi20rej8nvlodi9@4ax.com...
> .oO(John Waller)
>
>
> Button images are a waste of resources (webspace and bandwidth). You can
> create faster loading and more accessible buttons with CSS.
>
> OK, maybe I shouldn't have written "plain text" ...
>
> Micha
| |
|
|
| John Waller 2004-08-24, 7:14 am |
| > Button images are a waste of resources (webspace and bandwidth). You
> can create faster loading and more accessible buttons with CSS.
This is a designer's choice to me. Well-optimised graphics with alt tags
shouldn't add too much overhead to the filesize but may contribute
enormously to the look and feel of a site.
--
Regards
John Waller
| |
| Murray *TMM* 2004-08-26, 12:17 pm |
| That page is not a great example of the 10 second rule. You will find many
high-profile sites that are not.
As I undertand it, the 10 second thing applies to *ENGAGING* content. If
you can engage your visitor within 10 seconds you are probably OK. This
would be particularly true on an interior page, where images may have
already been cached, or where the visitor has alread made an intellectual
committment to the site.
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Charles Angelich" <charles_angelich@hotmail.com> wrote in message
news:paali05efi0bqbmehs3ebl04648tulah02@4ax.com...
> On Mon, 23 Aug 2004 08:50:17 -0400, "Murray *TMM*"
> <forums@HAHAgreat-web-sights.com> wrote:
>
>
> I won't belabor the point here but I _am_ on dialup and this URL:
> http://www.macromedia.com/support/search/
> is _not_ a 10 second load/display webpage (one of the links in your
> signature). Looks more like 20 seconds here on my system using
> Mozilla v1.7 browser.
>
> Charles.Angelich
>
> MP3/WMA streaming:
> http://www.undercoverdesign.com/dosghost/samples.asp
>
> DOS & W31:
> http://www.undercoverdesign.com/dosghost/
>
> Entertainment:
> http://www.undercoverdesign.com/dosghost/faf
>
>
| |
| Michael Fesser 2004-08-26, 12:18 pm |
| .oO(T.Pastrana - 4Level)
>A waste of bandwith is having 7 small images adding up to 261k. That is a
>waste.
Agreed, but a huge amount of simultaneous connections to the server may
also slow down the transfer.
>Choosing on whether to use images or CSS buttons is a designers ( or
>clients ) choice but not a waste as long as proper optimization is used.
A CSS solution will always be smaller with less connection overhead.
There's only one image per button state required. Assuming three states
'up', 'down' and 'active' you'll have 3 images with CSS, but 3*n images
for n buttons without CSS. For 5 buttons it's 3 vs. 15, I consider that
a big difference. Even if each image is optimized and compressed as much
as possible it's still the pure number of images that counts, assuming
2KB per image it's 6KB vs. 30KB just for the menu.
"Many a little makes a mickle." (or something like that ;-)
Additionally CSS saves development time, since you don't have to create
new images for new or changed menu items.
But I agree that it's a designer's choice.
Micha
| |
| Murray *TMM* 2004-08-26, 12:19 pm |
| Yeah - in some cases you have little choice - like with horizontal menus....
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Michael Fesser" <netizen@gmx.net> wrote in message
news:h9pmi0tagpn666ecal0j85q0j4pl9ru958@4ax.com...
> .oO(T.Pastrana - 4Level)
>
>
> Agreed, but a huge amount of simultaneous connections to the server may
> also slow down the transfer.
>
>
> A CSS solution will always be smaller with less connection overhead.
> There's only one image per button state required. Assuming three states
> 'up', 'down' and 'active' you'll have 3 images with CSS, but 3*n images
> for n buttons without CSS. For 5 buttons it's 3 vs. 15, I consider that
> a big difference. Even if each image is optimized and compressed as much
> as possible it's still the pure number of images that counts, assuming
> 2KB per image it's 6KB vs. 30KB just for the menu.
>
> "Many a little makes a mickle." (or something like that ;-)
>
> Additionally CSS saves development time, since you don't have to create
> new images for new or changed menu items.
>
> But I agree that it's a designer's choice.
>
> Micha
| |
| Al Sparber- PVII 2004-08-26, 12:19 pm |
|
"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:cgfnsv$rev$1@forums.macromedia.com...
> Yeah - in some cases you have little choice - like with horizontal
> menus....
Why "horizontal"?
| |
| Murray *TMM* 2004-08-26, 12:19 pm |
| You mean why horizontal as opposed to vertical? Or why do you have little
choice with horizontal?
If you have a layout that needs a horizontal menu, how do you control the
text sizing issue?
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Al Sparber- PVII" <adSTRApmin@projectseven.com> wrote in message
news:cgfolj$7u$1@forums.macromedia.com...
>
> "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> news:cgfnsv$rev$1@forums.macromedia.com...
>
> Why "horizontal"?
| |
|
|
| Al Sparber- PVII 2004-08-26, 12:19 pm |
|
"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:cgfp51$sc$1@forums.macromedia.com...
> You mean why horizontal as opposed to vertical? Or why do you have
> little choice with horizontal?
>
> If you have a layout that needs a horizontal menu, how do you control
> the text sizing issue?
It depends on the layout. You can have the layout be scalable so that
resizing text is not an issue, like this
:
http://www.projectseven.com/simplevii2/
Or there are various other methods, depending on the design goals and
the author's CSS savvy.
--
Al Sparber - PVII
http://www.projectseven.com
DW Extensions - Menu Systems - Tutorials - CSS FastPacks
---------------------------------------------------------
Webdev Newsgroup: news://forums.projectseven.com/pviiwebdev/
CSS Newsgroup: news://forums.projectseven.com/css/
RSS/XML Feeds: http://www.projectseven.com/xml/
| |
|
|
| Al Sparber- PVII 2004-08-26, 12:19 pm |
|
"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:cgfra5$4ai$1@forums.macromedia.com...
> Perhaps I should have said in a fixed width layout....
http://www.projectseven.com/testing/temp/tricknavbar/
It's a trick - but it is plain text.
--
Al Sparber
PVII
http://www.projectseven.com
"Designing with CSS is sometimes like barreling down a crumbling
mountain road at 90 miles per hour secure in the knowledge that repairs
are scheduled for next Tuesday".
| |
| Murray *TMM* 2004-08-26, 12:19 pm |
| OK - so - the text is indented off the left side, and that's why you don't
see Navbar1, Navbar2, Navbar3, etc. So, you can put your SE relevant
content there, and it will resize as much as the viewer wants without
affecting the layout? Then the menu's human readable links are just CSS
background rollovers.
Crafty dood....
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Al Sparber- PVII" <adSTRApmin@projectseven.com> wrote in message
news:cgfrf3$4li$1@forums.macromedia.com...
>
> "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> news:cgfra5$4ai$1@forums.macromedia.com...
>
> http://www.projectseven.com/testing/temp/tricknavbar/
>
> It's a trick - but it is plain text.
>
>
> --
> Al Sparber
> PVII
> http://www.projectseven.com
>
> "Designing with CSS is sometimes like barreling down a crumbling mountain
> road at 90 miles per hour secure in the knowledge that repairs are
> scheduled for next Tuesday".
>
>
| |
| Murray *TMM* 2004-08-26, 12:19 pm |
| Nice. I'm going to use it too!
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Al Sparber- PVII" <adSTRApmin@projectseven.com> wrote in message
news:cgft9h$7ae$1@forums.macromedia.com...
>
> "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> news:cgfsfv$6fo$1@forums.macromedia.com...
>
> We've been using variations of this technique on our web site for years.
> And if you look at Zeldman's personal site, you will see that he uses this
> trick for his navbar - with a slightly different approach to markup and
> CSS hacking.
>
> --
> Al
| |
| Al Sparber- PVII 2004-08-26, 12:19 pm |
|
"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:cgfsfv$6fo$1@forums.macromedia.com...
> OK - so - the text is indented off the left side, and that's why you
> don't see Navbar1, Navbar2, Navbar3, etc. So, you can put your SE
> relevant content there, and it will resize as much as the viewer wants
> without affecting the layout? Then the menu's human readable links
> are just CSS background rollovers.
>
> Crafty dood....
We've been using variations of this technique on our web site for years.
And if you look at Zeldman's personal site, you will see that he uses
this trick for his navbar - with a slightly different approach to markup
and CSS hacking.
--
Al
| |
| Al Sparber- PVII 2004-08-26, 12:19 pm |
| > "Donna Casey" <infoREMOVETHIS@n2dreamweaver.com> wrote in message[color=darkred]
> news:cgfvkv$aio$2@forums.macromedia.com...
I'm sorry Donna. I think I misread your post. You wanted to know more
about how the technique works to take a text menu and have it frozen in
size?
| |
| Donna Casey 2004-08-26, 12:19 pm |
| Al Sparber- PVII wrote:
>
> "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> news:cgfra5$4ai$1@forums.macromedia.com...
>
>
>
> http://www.projectseven.com/testing/temp/tricknavbar/
>
> It's a trick - but it is plain text.
>
>
but it doesn't appear to scale using text zoom...so what is the trick?
--
Donna Casey | Web Designer/Developer/Instructor
Team Macromedia Dreamweaver & Fireworks | www.macromedia.com/go/team
--------------------------------------------------------------------------
Co-Author | Macromedia Studio MX Bible
Contributor | Dreamweaver MX Magic
Contributor | Fireworks MX Magic
| |
| Al Sparber- PVII 2004-08-26, 12:19 pm |
| "Donna Casey" <infoREMOVETHIS@n2dreamweaver.com> wrote in message
news:cgfvkv$aio$2@forums.macromedia.com...
> Al Sparber- PVII wrote:
>
> but it doesn't appear to scale using text zoom...so what is the trick?
LOL - that is the trick :-)
The objective is to have a text menu in an unordered list that will not
destroy a fixed-width layout and the tricknavbar page provides a
solution. The previous post I made, linked to an example that used no
sleight of hand - but did use some advanced CSS and mathematics to
create a navbar in a layout designed for scaling.
Does that clear it up for you?
--
Al Sparber
PVII
http://www.projectseven.com
"Designing with CSS is sometimes like barreling down a crumbling
mountain road at 90 miles per hour secure in the knowledge that repairs
are scheduled for next Tuesday".
| |
| Donna Casey 2004-08-26, 12:20 pm |
| Al Sparber- PVII wrote:
>
>
> I'm sorry Donna. I think I misread your post. You wanted to know more
> about how the technique works to take a text menu and have it frozen in
> size?
Actually, the posts after the initial one cleared it up for me, but thanks
--
Donna Casey | Web Designer/Developer/Instructor
Team Macromedia Dreamweaver & Fireworks | www.macromedia.com/go/team
--------------------------------------------------------------------------
Co-Author | Macromedia Studio MX Bible
Contributor | Dreamweaver MX Magic
Contributor | Fireworks MX Magic
|
|
|
|
| Copyright 2003 - 2009 forum4designers.com Software forum Computer Hardware reviews |