| Posted in Website Designing » Website Reviews - Wednesday 26th September 2007 at 6:46PM | |
|
Joe  Joined April 2007 |
Hey everyone, just wanted some opinions on my new design for my site, which at current has a terrible, terrible design. __________________________________ |
- Subscribe to this
- Search this thread
- Rate this thread
New Layout for my site
Pages
You are on page 1 of 2, displaying a maximum of 20 replies starting from 0.
Pages: 1 » 2
Replies (26)
| Replied - Wednesday 26th September 2007 at 7:30PM [Post Link] | |
|
Alec  Joined April 2007 |
Joe that kicks ass. Seriously.
Perhaps: - Loose the "Brand New 3.0" badge, not only these things lame, it looks a little out of place. - Make the "Web Design & Development" pixel text under your logo slightly darker (a little hard to read) - Make line-height:20px to give a little more spacing between the lines. - Increase the font size slightly of the navigation text. That's about it. I love it. __________________________________ |
| Replied - Wednesday 26th September 2007 at 7:34PM [Post Link] | |
|
Tubby  Joined July 2007 |
Same as Alec but I tihnk the pink bits of the navigation are a little hard to read, perhaps make them a bit darker.
__________________________________ |
| Replied - Wednesday 26th September 2007 at 8:08PM [Post Link] | |
|
Joe Joined April 2007 |
Taken most advice, made the pink darker and added some line-height, forgot about that!
Wanna keep the badge for a bit I think after going to the trouble of making it! But I am going to code it so it will be really easy to remove. I think it adds a bit of contrast for now. Didn't increase the font size on the nav as it makes it look less cute, haha, on the main site I'll tinker with font sizes, and if need be the user can always increase the font size. How's this? http://imageho.st/image/47242design1copy.jpg Cheers for all the praise guys :) Never been that good at design so pretty proud of this..! __________________________________ |
| Replied - Wednesday 26th September 2007 at 9:50PM [Post Link] | |
|
Brad  Joined April 2007 |
Wow, that's great. Original, nice colours, etc.
Just one suggestion: Make the pink in the navigation the same colour as the heading colour. __________________________________ |
| Replied - Wednesday 26th September 2007 at 9:54PM [Post Link] | |
|
Joe Joined April 2007 |
It should already be :). Started coding the layout, footer needs some work, but how's this?
http://www.joeholdcroft.com/new/ Ignore the bad copy, it needs rewriting :P __________________________________ |
| Replied - Wednesday 26th September 2007 at 10:02PM [Post Link] | |
|
Alec Joined April 2007 |
Haven't actually looked at the code but:
- Its 'companies' not 'companys' in that context. - Change the anchor colour of normal content links. - A bit too much space between lines I would say. - You need to preload the navigation rounded bit. - Where is your use of .png? __________________________________ |
| Sponsored Link | |
| Replied - Wednesday 26th September 2007 at 10:11PM [Post Link] | |
|
Joe Joined April 2007 |
As I just (lately) noted, that copy is really old, only used it to see some text in there that was english and in context.
Am making changes to the link colours and line height now, I have added preloading of that image. Where would you suggest I use PNG? If you mean for any sort of transparency, for this layout it's not needed, and in such case I try to avoid it for a bit of backwards compatibility. __________________________________ |
| Replied - Wednesday 26th September 2007 at 11:17PM [Post Link] | |
|
Alec Joined April 2007 |
No I most definitely don't mean for transparency. I would still steer clear of using .png transparency until at least the beginning of next year if you can.
However, non transparent .png's are still better than .gif. For example your logo should be a .png. You will find it has lower size and better quality. Basically when there is many colours, use .jpeg (like a photo or something). The quality of 9 in Photoshop is sufficient for web use. Images with less colours it was the norm a while ago to use .gif's. Now there is nothing better about .gif's whatsoever apart from their ability for animation. Everywhere where you use .gif on your site, change it to .png. Potential clients who know about this stuff will think that you are up-to-date with the current techniques. More more about .png on the Digital Web Magazine Article but as I say, I would ignore the transparency for them, at least for the time being. __________________________________ |
| Replied - Thursday 27th September 2007 at 1:57AM [Post Link] | |
|
Brad Joined April 2007 |
[QUOTE] Alec said (26th September @ 22:17pm): No I most definitely don't mean for transparency. I would still steer clear of using .png transparency until at least the beginning of next year if you can. Why until the beginning of next year? : Just curious... __________________________________ |
| Replied - Thursday 27th September 2007 at 8:00AM [Post Link] | |
|
Tubby Joined July 2007 |
I think thats when everyone who uses IE6 is expected to of upgraded to IE7
__________________________________ |
| Replied - Thursday 27th September 2007 at 9:17AM [Post Link] | |
|
Alec Joined April 2007 |
For the transparency yes. Microsoft released an 'Alpha Transparency Filter' (read more here) but I would still steer clear of using JavaScript hacks for stuff like this until more people have upgraded.
But, even in IE 6, non-transparent .png still works better than non-transparent .gif. What I said still stands about everywhere you have used gif in this site, change it to .png. If you do need a bit of transparency, use .gif though to avoid the use of JavaScript. __________________________________ |
| Replied - Thursday 27th September 2007 at 10:01AM [Post Link] | |
|
Will  Joined October 2005 |
Actually, this method is better since it uses pure CSS and can be used for background images.
__________________________________ |
| Sponsored Link | |
| Replied - Thursday 27th September 2007 at 10:17AM [Post Link] | |
|
Alec Joined April 2007 |
Yes there are various different hacks. But I would still say use .gif for transparency until the end of this year. What about the people with JavaScript disabled? Those hacks add to load-time also. Nothing wrong with the odd slightly larger file size transparent .gif.
[QUOTE] Brad said (27th September @ 0:57am): Why until the beginning of next year? : Because by that time more people will have upgraded to IE7. Still the majority of users use IE 6. I remember when I was doing all my interviews every single company (even the web design ones) were on IE 6 because of the amount of time it would take to change to IE 7 and various other reasons. __________________________________ |
| Replied - Thursday 27th September 2007 at 11:38AM [Post Link] | |
|
adam2z  Joined October 2005 |
end of the day: do you want to maximize accesibility? then dont use or try to use transparent png images. are you happy delivering your best only to those with modern browsers? then do use them.
i dislike the use of these hacks because of the bloat they cause for little gain. Joe: in my humble opinion, the design is good but the badge is out of place. also, try using css background repositioning instead of image replacement onhover, as it will remove the flicker. __________________________________ |
| Replied - Thursday 27th September 2007 at 12:13PM [Post Link] | |
|
Alec Joined April 2007 |
[QUOTE] adam2z said: Joe: in my humble opinion, the design is good but the badge is out of place. also, try using css background repositioning instead of image replacement onhover, as it will remove the flicker. So true. Most pre loaders don't work in Opera anyway because Opera doesn't load anything with display:none; when all other browsers do. Joe do background repositioning. __________________________________ |
| Replied - Thursday 27th September 2007 at 4:17PM [Post Link] | |
|
Joe Joined April 2007 |
Okay, have a look now. I've changed to using a background positioning technique for rollovers, using PNGs (strangely the logo was larger as a PNG even though I cropped it slightly, and the quality was exactly the same to eye, contrary to what you said, but nevermind), added some access keys and a skip navigation link.
Hoping to make this one apply to Priority 3 Accessibility, which it is already (except missing a sitemap, afaik). http://www.joeholdcroft.com/new __________________________________ |
| Replied - Thursday 27th September 2007 at 4:48PM [Post Link] | |
|
Alec Joined April 2007 |
That's better. Interesting about the .png file size.
Quoting from it's Wikipedia Article [QUOTE] Wikipedia said: Generally, PNG files without unnecessary metadata should have a smaller file size than the identical image encoded in GIF format. PNG gives the image creator far more flexibility than GIF, but care must be taken to avoid PNG files that are needlessly large. That is what probably happened. Try flattening the image then turning it into a .png. Now that you have finished coding, I can go into detail: - Where is your most important heading, the <h1>? Have it as your logo if you wish, like I have on my site.- Since it is XHTML you should also be declaring the xml language. Change it to: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">- You should have information for robots in your meta tags. Your also missing author (less important) and revisit-after (also not vital) but you should put in <meta name="robots" content="index,follow" />- Your <title> tag is not the first in the <head> section. Come on.- Not important, but you have a random space before finishing most </p>s.- Why not use © instead of (c)?- Your XHTML and CSS validation check links only check your home page, they should check the referring page, whatever that may be on your site. Change it to: XHTML - <a href="http://validator.w3.org/check?uri=referer">XHTML</a>CSS - <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>- Try to eliminate as many of your CSS errors as you can. - Way to many keywords, you can't hope to compete with those anyway. - Dude you used border="0" in an image tag. Cardinal sin! Just add img{border:0;} to your stylesheet. Your currently using depreciated markup there.I think that should cover everything, really. __________________________________ |
| Replied - Thursday 27th September 2007 at 5:04PM [Post Link] | |
|
Joe Joined April 2007 |
Ah, I was sure I'd h1'd the logo. My mistake. Cheers for the tip about xml:lang, using that now and the revisit-after and robots meta tags. I was already using the author tag, perhaps you missed it. Surely you are missing something, of course my title is in the head, what made you think it wasnt?
The spaces before the closing p tag will be because it was a c p from the current site, and perhaps there was something like that on there. I am was using (c) as it was a temporary thing, thought that was implied but nevermind. Good point about the validator links. The keywords are also needing revision, also taken from the old site. border="0" is something Dreamweaver inputs automatically when you link an image using the interface, which I did for ease, but failed to remember to get rid of it. All css warnings have been resolved. Been pretty busy lately and yesterday I had an awful lot to do, so that might be why some things appear rushed, but I was going to give it revision later today. __________________________________ |
| Replied - Thursday 27th September 2007 at 5:15PM [Post Link] | |
|
Alec Joined April 2007 |
[QUOTE] Silly Joe said: Read what I said. It must be the first tag in your Surely you are missing something, of course my title is in the head, what made you think it wasnt? <head> section.I don't think it appears rushed. Looks good. __________________________________ |
| Replied - Thursday 27th September 2007 at 5:18PM [Post Link] | |
|
Joe Joined April 2007 |
[QUOTE] Alec said (27th September @ 16:15pm): [quote=Silly Joe]Read what I said. It must be the first tag in your Oh right, yeah misread that, cheers =] __________________________________ |
Pages
You are on page 1 of 2, displaying a maximum of 20 replies starting from 0.
Pages: 1 » 2