PDA

View Full Version : Thanks Everyone!



jenius
Feb 2nd, 2010, 05:37 AM
Hey all -

Thanks so much to everyone who helped me out with my website when I was shaky on the css. I've been working hard on it, and thanks to you guys' advice, I think it has come a long way since the beginning.

Here it is :: http://djjenius.com/testing/jenius

If anyone has additional comments or it doesnt work in some old IE or anything, by all means let me know!

Thanks so much again for your support, this never would have got as far as it is now without it. :D

Dormilich
Feb 2nd, 2010, 07:54 AM
what character encoding do you use? UTF-8, Latin 1 and Windows 1252 do not show the special characters (those out of ascii range) right.

mbaker
Feb 2nd, 2010, 02:02 PM
Jenius,

I can never remember having such enjoyment reading someone else's web sources before. In 35 years of software engineering I've rarely seen such attention to detail and elegance of layout in any source code, let alone that for a webpage.

I particularly liked the ASCII Art welcome message.

A few items you might like to consider, which are specifically related to http://djjenius.com/testing/jenius/portfolio.html . However most will apply generally.

The file unitpngfix.js references images/clear.gif and appears to need this file if it is to function correctly. However there is no images/clear.gif

You have two links to jquery.fancybox-1.2.6.css, in both the fancybox and css directories, but it is only in the former directory and not in the latter. I suggest you delete the latter link.

By placing references to tn_*.png files in your master.css stylesheet you are mixing content and presentation. It would be better to replace:


#picture1 {
float: left;
margin-left: 32px;
margin-right: 32px;
background: url(tn_model.png) no-repeat;
}

and


<a class="zoom" rel="graphic" title="Just a bit of enhancement and
lighting" href="postergirl.jpg"><div id="picture1"></div></a>

with:


.picture {
float: left;
margin-left: 32px;
margin-right: 32px;
}

and


<a class="zoom" rel="graphic" title="Just a bit of enhancement and
lighting" href="postergirl.jpg"><img src="tn_model.png" alt="model"
class="picture" /></a>

This will separate your content (in your html file) from your presentation (in your css file). It will also reduce the size of your css file, and be more flexible in the future. If you want to change the images in your gallery you only need change your html file, as your css file won't need to be changed.

In any case having a <div> inside <a> is invalid (it should be <span>), but more on that below.

Talking of invalid, a trip to http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ would be well in order.

Currently portfolio.html (http://djjenius.com/testing/jenius/portfolio.html) has 43 errors at the W3C Validator (http://validator.w3.org/check?uri=http://djjenius.com/testing/jenius/portfolio.html&charset=(detect+automatically)&doctype=Inline&group=0)

These can easily be fixed in 4 steps:

Replace & with &amp; in 9 URLs (& is assumed to be the start of an HTML Entity (http://www.html-tags-guide.com/html-entities.html) - if it is really just an & you need to use the ampersand entity &amp;. The web browser will understand and convert it from &amp; back to & before using it.)
Replace <div id="pictureX"></div> with <span id="pictureX"></span> or better yet <img src="tn_xxx.png" alt="xxx" class="picture" /> as discussed above - 24 times.
Also add missing </a> for id="picture22"
Replace the two occurrences of id="requestmore" (id's should be unique) with class="requestmore" and change #requestmore to .requestmore in master.css

As to your CSS, provided you validate at CSS level 3, you have just 4 errors, one of which (a missing source file) is mentioned above. To validate at CSS level 3 you need to select "More Options" then CSS level 3 from the Profile dropdown list on the W3C CSS Validator.

One final point, while I am impressed with your design, I was not impressed by the time it took for the larger images to load in your fancybox. I initially put this down to fancybox causing the problem, but having looked at the size of the files that are being downloaded - between 167kb and 7Mb for the first 8 images, I'm sure that the problem is file size. I'd be very surprised if you could not reduce the filesizes to 100kb without significant loss of quality.

All in all very good, and with a bit more work, it will be excellent.

jenius
Feb 3rd, 2010, 06:40 AM
@Dormilich - I'm not using actualy text, I use cufon text replacement for this site, which is very complicated, but as a quick overview it converts the characters to vector images. So what you see is not true "text". Btw, speaking of cool text things, go to http://www.unicodesnowmanforyou.com - it's so wonderful.

@mbaker - Wow, thanks so much for the amazing and detailed response. This is exactly what I needed. I'm so glad you enjoyed my source (I put much love into it :D), and all the fixes you suggest are really true and accurate. Is there any way I can quote your first sentence somewhere? I'm so very flattered by this (especially considering that I just starting learning how to code a website about a month ago) and think it would serve as an awesome testimonial if one is ever needed.

As for the png fix thing, I think I'm going to change the png fix I use anyway, I'm not a big fan of that one, and it's really random. I know there are a lot of them out there, do you have a favorite or suggested one?

Good call on the background image thing - I got caught up in the "putting as little code into the html as possible" thing, but you're right, that does make more sense, and I'll change those over to html and post again when it's done.

Sounds good, working through the validation stuff was on my to-do list, but I was so exhausted after finishing those code for this that I wanted to take a break for a bit. I will definitely get on this though.

As for the image size, I noticed this too pretty quickly (it froze my browser for like 2 minutes haha) - I made a couple of my images extremely huge and high resolution while I was designing them (which is almost always a good idea for designers), but I did not convert them over to a more web friendly format before I posted them. I'll definitely do this and replace.

Again, thank you so much for this response, it could not have been more nice or helpful :)

Dormilich
Feb 3rd, 2010, 06:45 AM
@Dormilich - I'm not using actualy text, I use cufon text replacement for this site, which is very complicated, but as a quick overview it converts the characters to vector images. So what you see is not true "text". Btw, speaking of cool text things, go to http://www.unicodesnowmanforyou.com - it's so wonderful.

JavaScript disabled? and after I enabled JavaScript, the special characters all were missing.

funny – an empty page ;)

jenius
Feb 3rd, 2010, 06:48 AM
That's weird... disabling javascript will severely break the page, but with it enabled it should work. So you're seeing nothing? What browser and OS are you using?

Dormilich
Feb 3rd, 2010, 08:22 AM
So you're seeing nothing? What browser and OS are you using?

unicodesnowmanforyou has really no content (not even a fallback) and I didn’t bother to allow more than it’s own scripts.

FF 3.6/NoScript, Mac OS 10.5

your page shows fine without JS (ok, only one page), despite the character encoding problem.

mbaker
Feb 3rd, 2010, 08:37 AM
I'm so glad you enjoyed my source ... Is there any way I can quote your first sentence somewhere? ...

As for the png fix thing, I think I'm going to change the png fix I use anyway, I'm not a big fan of that one, and it's really random. I know there are a lot of them out there, do you have a favorite or suggested one?

Jenius,

Happy to help.

Sure you can quote my first sentence, its not like it was said in private, the whole world can view this conversation after all.

I have no suggestions on any png fix solutions. Websites I work with are either very simple and don't use PNG, or use images, but not PNG, or if they do use PNG, the PNG are not central to the functioning of the site. In all cases not bothering with older browsers that need "fixing" is not a problem. However for your website I can see that you might want to make the effort.

I'm sure a focused question on the subject in a new thread would elicit an answer or three.

jenius
Feb 3rd, 2010, 10:53 PM
Ok, after mbaker's wonderful suggestions, here is the new and improved version of my site, slimmed down to a lean, mean 7.6MB total while still retaining high quality images.

http://djjenius.com/testing/jenius

The CSS looks good, but I think the html validator has a problem with my code for carriage return (%0D%0A) - is this a disaster? It works in reality...

mbaker
Feb 3rd, 2010, 11:23 PM
http://djjenius.com/testing/jenius

The CSS looks good, but I think the html validator has a problem with my code for carriage return (%0D%0A) - is this a disaster? It works in reality...

Jenius, the problem that the W3C Validator reports when I try to validate your home page is not about a carriage return. It is about a character on line 104. When I look at the source it is:

Oh, the name - �JE� is my initials and I like brains : )<br /><br />

The problem looks like you pasted something from Word perhaps into your source code.

On line 100 you have problems with I�m Jeff and I�m a big fan

Fix those and it should validate, or at least tell you that you have a problem with: <a href="portfolio.html"><div class="see-more"></div></a>. That should be something like: <a href="portfolio.html"><span class="see-more"></span></a>.

jenius
Feb 3rd, 2010, 11:29 PM
This didn't work for some strange reason, but found another way to do it, and now I'm valid! Whoo!

http://validator.w3.org/check?uri=http%3A%2F%2Fdjjenius.com%2Ftesting%2Fjenius%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654