cupidstoejam Posted September 26, 2008 Share Posted September 26, 2008 http://www.pixelbehavior.com [attachment deleted by admin] Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/ Share on other sites More sharing options...
nrg_alpha Posted September 26, 2008 Share Posted September 26, 2008 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 Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651272 Share on other sites More sharing options...
cupidstoejam Posted September 26, 2008 Author Share Posted September 26, 2008 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. Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651280 Share on other sites More sharing options...
nrg_alpha Posted September 26, 2008 Share Posted September 26, 2008 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 Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651290 Share on other sites More sharing options...
cupidstoejam Posted September 26, 2008 Author Share Posted September 26, 2008 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. Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651309 Share on other sites More sharing options...
cupidstoejam Posted September 26, 2008 Author Share Posted September 26, 2008 WOW, I was wrong on both counts. PS can create PNGs with alpha trans. Fireworks can compress PNGs. Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651317 Share on other sites More sharing options...
dropfaith Posted September 26, 2008 Share Posted September 26, 2008 i like the design of the site but as said the load time can be slow im on cable so no real issues but i can see dialup sucking on it.. Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651319 Share on other sites More sharing options...
nrg_alpha Posted September 26, 2008 Share Posted September 26, 2008 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 Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651332 Share on other sites More sharing options...
cupidstoejam Posted September 26, 2008 Author Share Posted September 26, 2008 okay, all my PNGs are reduced!! should load much faster now! Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651336 Share on other sites More sharing options...
nrg_alpha Posted September 26, 2008 Share Posted September 26, 2008 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). Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651352 Share on other sites More sharing options...
cupidstoejam Posted September 26, 2008 Author Share Posted September 26, 2008 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. Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651379 Share on other sites More sharing options...
cupidstoejam Posted September 26, 2008 Author Share Posted September 26, 2008 PNG's fixed Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651384 Share on other sites More sharing options...
nrg_alpha Posted September 26, 2008 Share Posted September 26, 2008 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 Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651407 Share on other sites More sharing options...
cupidstoejam Posted September 26, 2008 Author Share Posted September 26, 2008 Thank again! Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651459 Share on other sites More sharing options...
chordsoflife Posted September 27, 2008 Share Posted September 27, 2008 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. Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-651902 Share on other sites More sharing options...
sam_h Posted September 28, 2008 Share Posted September 28, 2008 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? Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-652505 Share on other sites More sharing options...
cupidstoejam Posted September 29, 2008 Author Share Posted September 29, 2008 Thanks guys for all the help! All are great ideas. Quote Link to comment https://forums.phpfreaks.com/topic/125948-let-me-have-the-hard-harsh-truth-about-my-design/#findComment-652917 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.