Jump to content

Let me have the hard harsh truth about my design


cupidstoejam

Recommended Posts

Ask and thou shalt receive :)

 

The biggest issue was speed. When loading your home page on my dial up, it was ssssssllllllooooooooooooooooooooooowwwwwwwwww. The initial panels and thumbnails came in quick enough.. then everything just crawled! So slow in fact, I didn't have the patience to completely finish the download.

When I have more time to stomach sitting through the download, I'll check it out with Firefox 3 using Firebug and Yslow.

 

As for what I did manage to see:

I don't like how the bottom of the central panel has right-angled corners while the very bottom panel has rounded corners.. I would either make these sets all right-angled or all round cornered.. just seems awkward.

 

I'm not fussy about the background (but this is a minor thing).

 

When I scaled up the font size, I noticed the content pokes out of panels (which hints to explicit heights set to your divs) In either case, setting explicit heights is generally not recommended, otherwise upscaled font sizes damages the layout. Having no heights set allows for vertical divs to dynamically scale with the content.

 

Other than that, the speed was atrocious. I would be curious to know what is so heavy for dial up to down load. It seems like the page should come in at a respectable speed even on dial up.. but it doesn't. Sorry.. until I have more time to sit through a completely successful download, I can't offer much more advice at the moment. More to come later.. ( but something tells me there are definitely issues ).

 

Cheers,

 

NRG

Link to comment
Share on other sites

Dial-up? wow, dude im so sorry :( This design makes use of alot of .PNG files for use of alpha transparency, and are never small in size.

 

So does my website. My homepage clocks in at roughly 69k in total size (code and graphics). pngs are not excusable.

I managed to successfully download your hompage. Here is what I found with your png files.

 

the file BG-UL.png is a monstrous 391k!!!! (this image along is heavier than any complete page on my website!) I saved this image onto my computer, then in photoshop, I used 'Save For Web' (instead of simply 'Save As', and when I saved it as a png-24 with transparency checked, it looked just as good, yet I managed to squeeze this file down to 16.65k!

 

Further digging, I found services_border.png, which came in at a heafty 380k! Again, in Photoshop, using 'Save For Web' instead of just 'Save As', I managed to bring this file down to 21.01k.

 

The file called recentwork_border.png came in at 369k. Again, using 'Save For Web', I managed to bring this png down to 11.4k!

 

So lets look at before and after figures:

BG-UL                     before: 391k    after: 16.65k     savings: 374.35k!!

services_border        before: 380k    after: 21.01k     savings: 358.99k!!

recentwork_border    before: 369k    after: 11.40k     savings: 357.60k!!

                                       -----            -------                ----------

grand total:             before: 1140k  after:  49.06k     savings: 1090.94k!!

 

Man, the figures are pretty telling, aren't they? If you save files using 'Save For Web' instead of 'Save-As' (I am assuming you used photoshop here...correct me if I'm wrong), you will have shaved off an impressive 1090.94k on homepage alone on a non-primed cache (nothing from your site cached by the browser). This is a savings of over 1 meg!!

 

With the issue of fixed heights, I noticed that your entire service_border and recentwork_border is complete graphics.. This is not wise from a design standpoint, as this does not offer variable height flexability. By having tilable graphics with perhaps a separate top and side and bottom graphic, you can make your divs more dynamic. As it stands, this really restricts your layout.

 

The closest thing I can refer you to is this article. It gives insight into what I am trying to get at.

You can also view other 'sliding door techniques here. I'm not good at explaining these sort of things.. if other members have other links that they can offer with regards to what I am trying to get at, hopefully they will provide other links for you as well.

 

Sorry for sounding harsh. Just trying to offer some more sound solutions.

 

Hope this all helps out.

 

Cheers,

 

NRG

Link to comment
Share on other sites

I always use "save for Web" with PS. I'm not using Photoshop with my .PNG files cause it doesnt support PNG's alpha trans, or does it? I am using Fireworks for PNG files. I was very impressed with how you had PS compress the PNGs. I didnt know they could be compressed. I'll have to research and play with this further! I am very happy with the compression of PNGs. I knew the files were HUGE, but didnt know how to get around it without using GIFs. GIFs dont handle gradients very well. Fireworks ( that I know of ) doesnt allow this compression.

 

As far as sliding doors, that is something I was planning on doing from the start, but for one reason or another, didnt. Maybe I'll re-visit that option.

 

You are correct with the fixed sizes VS using EMs. I was planning to go back and convert everything after I got the design down.

 

Thank you very much for your constructive criticism. I feel its very important for every website to get feedback on al issues.

Link to comment
Share on other sites

WOW, I was wrong on both counts. PS can create PNGs with alpha trans. Fireworks can compress PNGs.

 

Absolutely. PS can create and optimize .png files extremely well. I never used Fireworks, so I cannot comment on that one.

 

Another good reason for getting those .png files down in size is bandwidth. While that extra 1090k is not such a big deal for broadband internet access, it is an extra 1090k that every new visitor must download to successfully view your site. Imagine if your website becomes popular with plenty of traffic. Can you imagine how fast those bloated k's will add up? I'm not sure how much allowable bandwidth your service provider offers as part of your monthly package before charging extra for going over this limit.. but it is always good sound web design to reduce sizes as much as possible. In the end, this results in much snappier response times (for both broadband AND dial-up), and it saves on bandwidth as well. :)

 

Cheers,

 

NRG

Link to comment
Share on other sites

okay, all my PNGs are reduced!! should load much faster now!

 

I revisited your site after clearing my browser's cache. Same old speed.. same old file sizes... are you sure you uploaded the correct files?

Also, since it loads slow, I can see the elements as they come in.. With regards to your header (the complete top graphic that has 'Where every pixel has Personality'), I noticed you are using two graphics there. That base image, and a file called logo.png (which is 83k... this alone could be compressed down to 17.27k). I ask why use two graphics? Why not make that entire top part a single .gif file? You eliminate the need to two images (use only one), and if you make it a gif, the file size will be smaller and look about as good with enough colours in your gif (I did a test gif (using 64 colours) using your top graphics (both combined)) and it came in at 17.23k -  MUCH smaller than what you currently have). Since the rounded corners are not anti-aliased (which is ok in this case), you can use that to your advantage and simply have space outside those rounded corners empty (see-through).

Link to comment
Share on other sites

I'm using two images for css reasons. I have the header image placed as a background for the header div. I wanted the entire header to link back to the home page. So I added the logo into the XHTML as a link that takes up the size of the header.

 

But if you made the whole thing a .gif and put it into an <a href> tag, this would make the whole graphic a link (and you save on one graphic and on file size). At the very least, I would reduce logo.png in file size (as it is sitting at 82.4k (pretty heavy for a small graphic like that)). But by principal, the current setup is not as light as it can be)

 

And yep, much faster now :) With the header optimizations (and possibly the adoption of smaller tiling graphics with small top and bottom graphics for your services_border.png and recentwork_border.png (a la sliding doors), your site would be even more light weight and faster! :)

 

Good improvements though!

 

Cheers,

 

NRG

Link to comment
Share on other sites

If you're still looking to cut down on size, you can also chop up those faded underlines.

 

BG-h3.png was initially 23px @ 445 bytes. Cutting it down and repeating along the y axis would put it at 1px @ 261 bytes. You can do that for the nav one too.

 

Obviously it doesn't save to much, but if the statistics about page load time compared to a viewer sticking around is accurate, I would consider it. I try to keep my sites as minimalistic as possible unless the client/design requires it.

Link to comment
Share on other sites

any speed issues aside (loading a lot quicker now btw!), I am a big fan of the general layout. It's well organised and the structure is clear.

From purely a design perpective, one of my main issues was with the 'readability' of the handwriting font you use in your header and in you subheadings. It's a nice font, but it took me a little while to work out what the site was called!

 

Maybe something a little easier to read and that stands out a lot more for the header?

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.