Review Preparing HTML

HTML & CSS
1

Hi everyone,

In the past, I’ve been mostly concentrated on purely Photoshop, but now I want to try to code a Photoshop layout into a Wordpress theme. Though, I have never even converted a PSD to HTML/CSS. Currently, I’m following a tutorial on how to do that, but some things are still not totally clear and I’d really appreciate some feedback on how I prepared my HTML document.

Thanks in advance!

The layout:
Link
The code:


<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8' />
	
	<title>Buitengoed Fredeshiem</title>
	
	<link rel='stylesheet' href='css/style.css' />
	
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
	<script src='js/example.js'></script>
</head>

<body>

	<div id="page-wrap">
		
		<header>
			<div id="language"></div>
			
			<div id="social media"></div>
			
			<div id="zoekboek"></div>
			
			<div id="logo"></div>
			
			<nav>
				<ul>
				   <li><a href="#">Accommodaties</a></li>
				   <li><a href="#">Arrangementen</a></li>
				   <li><a href="#">Restaurant</a></li>
				   <li><a href="#">Recreatie</a></li>
				   <li><a href="#">Zakelijk</a></li>
				</ul>
			</nav>
			
		</header>
		
		<featured>
			Javascript banner
		</featured>
		<div id="main-content">
		<columns1>
			<ul>
				<li>
				<img src="/front-images/accommodaties.jpg" alt="accommodaties">
				<h1>Accommodaties</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<a href="#"	class="leesverder">
				</li>
				
				<li>
				<img src="/front-images/arrangementen.jpg" alt="arrangementen">
				<h1>Arrangementen</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<a href="#"	class="leesverder">
				</li>
				</ul>	
		</columns1>
		<columns2>
			<ul>
				<li>
				<img src="/front-images/restaurant.jpg" alt="restaurant">
				<h1>Restaurant</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<a href="#"	class="leesverder">
				</li>
				
				<li>
				<img src="/front-images/recreatie.jpg" alt="recreatie">
				<h1>Recreatie</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<a href="#"	class="leesverder">
				</li>
				
				<li>
				<img src="/front-images/zakelijk.jpg" alt="zakelijk">
				<h1>Zakelijk</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<a href="#"	class="leesverder">
				</li>
				</columns2>
				
			</ul>
			
	
		</div> <!-- END main-content -->
		
		<div id="footer">
			
			<div id="foto">
			<h2>Foto's</h2>
			Javascript foto thumbnail
			<h3>Stuur jouw vakantiefoto in!</h3>
			</div>
			
			<div id="about">
			<h2>Over Buitengoed Fredeshiem</h2>	
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div> <!-- END footer -->
		
		<div id="footer2">
					<ul>
					   <li><a href="#">Route</a></li>
					   <li><a href="#">Vacatures</a></li>
					   <li><a href="#">Contact</a></li>
					</ul>
		</div>
	</div> <!-- END page-wrap -->
	
	
</body>

</html>
2

Well, this isn’t what you were looking for but…

Doing PSD-to-HTML is locking puppies in refrigerators for the pleasure of others. But anyway, on to the slaughter (actually, you seem to be doing pretty good so far, except for the excessive HTML5-love going on… you do realise it’s still in DRAFT right?).

I notice you switch between single quotes and double quotes. Pick one and stick with it, or you’ll find Javascript a pain in the butt.

You probably don’t need divs for the stuff above the header. The language is a list. The social media line is likely a p with two links in it. Zoek & Boek is either a link or a search form, I can’t tell. Logo might be your h1, rather than where you have it now (in a list item).

I have no idea what <featured> is supposed to mean. Is that going to be an advertensie? Or just a prominent main thing on the site? I can’t tell. But it does look like there are 4 things I can click. If so, why hidden in Javascript? Or does it just sit there and spin through each of the four? Can I highlight the text? If so, can I just have the text and you can just throw the JS stuff over it?
Most people here will disagree with me here, but I say, if it’s Javascript-because-it-makes-sites-cool, then it’s Javascript-for-nothing. I surf with JS off simply because all that cool stuff usually prevents me from finding the information I seek or slows me down when I’m doing a task. And that’s what the people visiting this site will be doing: not ooh-aah over how it looks, but they are there to do something. They want information, or they want to book, or whatever. Build for them. Always build for them.

I’m totally not a fan of the multiple h1’s for menu items. I know HTML5 lets you throw h1’s around like the end of the world is coming so let’s all stuff ourselves with beer and Doritos and to hell with the diets, but think about what h1 means. It doesn’t mean “random header” to most devices: it still means “this is the main header”. I know the <sections> and <articles> and their nesting levels are supposed to determine the “true” level value of the header, but frankly, not a single device used by anyone outside of a browser vendor lab does this. Not one. If you think you need headers in your navigation, put them on a level under the true h1 (which should be the title of the page: what is this page (not site) about?).

The images in the nav: ask yourself if they are content or decoration. I personally would say they are decoration, and would take them out of the HTML. Certainly, seeing the alt text you have above each header means little to me. I try to keep decorations to background images in CSS. However, this is a personal observation of mine and you are free to disagree.

Also, watch out for “lees verder” (read more, and just as bad, “click here”). Why?

(imagine those said “lees meer”… same thing)

Example 1. I don’t want to read more or click here

Example 2. Do not click here

Basically:

  • It sucks for screen readers or Opera users or whoever calls up the links on a page, looking for something. Grabbing a list of site links is a shortcut for many.
  • It sucks for SEO if you’re into that kind of dirty search-engine-sycophantery.
  • Usability research shows that people don’t actually read, and “read more” basically makes the link’s meaning rely on all that context around it. Likely sighted folks are used to skimming the header and then assuming correctly what the Read More is about. But that’s asking more from them than you need to (asking users to read is like asking a man to ask for directions… painful).

Of course, Smashing Magazine had to have a whole post on how to style them as if they were totally ok to have just to show that Design always seems to mean more to Designers than actual Users… so again you get to ask yourself, are you building this for other Designers to go “oh wow” or are you building this so real human beings can use it?

But since you’re using HTML5 to the extreme anyway, check this out:
In HTML5 you can wrap anchors around blocks
Or at the very least, if you keep “lees meer” make it something like
“lees meer over accommodaties”…
“lees meer over restauranten”…
in fact, if you do that you can even shorten it to
“meer over restauranten”

But I like the link-around-block thing… most older browsers seem to be used to that from back when people who didn’t know what they were doing did that (which is illegal in HTML4).

If <footer> is going to have headers, why randomly starting at h2, h3? That does assume they are “under” an h1 somewhere.

Personally I’d do h1 around the site name on the main page, since the whole page is indeed about this establishment, then h2’s for the Accommodaties and Restaurant etc, then the footer’s h2 headers make sense.

The h3 “Stuur jouw vakantiefoto in!” is likely going to be a link, not a header. Headers head stuff. It means there’s M0ar Information under them, and they are “heading” (naming) the topic of that information. It is indeed perfect link text: it’s what marketers call “action text” or “call to action”. It tells people to do something clearly. I assume it would go to a page with an upload form or something.

You might want to add some ARIA roles to this page. Yeah, HTML5 + ARIA roles are so totally not ready for Prime Time, but then, neither is HTML5, not if you really care about a lean, working site for ALL users. Not until IE8 dies out and all browsers actually understand the semantics of HTML5 the way the writers of that spec intend. And of course, after you change/add/remove whatever they change/add/remove in the spec, since it’s still in Draft. Which means they are still editing it as we speak.

HTML5 plans on having browsers see “native” roles on elements. However, these roles are not set yet (many are being discussed still, like the elements themselves) and you shouldn’t add any that conflict with the native roles, but I’m saying you could safely add a few Landmark roles in. They’re just a nice bit of extra navigation for screen reader users. Basically yours would have “banner” on your <header>, “navigation” on your <nav> (yeah even NVDA screen reader chokes on this: it sees both the added role and the native role and calls out 2 navs, lawlz… they’ll fix this), “main” on either the feature or at the beginning of your coloumns, and either “complementary” or “contentinfo” on the <footer> (or maybe the first one on the first footer and the second one on the second).

This thread is totally perfect as a “code review”.

3

Thanks a lot for the time you took to reply on my thread.

I’m not totally sure what you meant with the locking puppies in fridges, I thought it would be good practice to do that first and then code my html/css to a Wordpress Theme. This was also recommended by the tutorial I am following (Lynda.com, tutorial on how to make a theme in the new WP)

The part about the fact that I don’t need a div for the stuff above the header, you are totally right about that. I changed the social media and zoek & boek stuff to respectively a paragraph and a link. I’m not totally sure about the ‘list’ thing for the languages. Would I pick an unordered list for it, or a regular list? I’m not totally sure with what you mean with the following:
“Logo might be your h1, rather than where you have it now (in a list item)” - I currently have it as a div, but your suggestion is to put them between h1 brackets? If so, why do you recommend me to do so?

I left the <featured> section like that, because these will just be 4 featured ‘posts’ that the company is wanting to display (for example new special offers), and I’m going to make use of an existing plugin for WordPress, so therefore I thought I would just leave it like that, and then later on implement the plug-in when it’s time to do so.

As I’m quite a beginner, I didn’t fully understand the part about the headers for the menu items, are you referring to the 5 blocks with the different sections on the site? What exactly would I change for that? The images for those, they are kind of decorative, but they also need to give the people a quick feel of what the section is about. So I think I’ll stay with that as they’re also informative.

Talking about the ‘lees meer’/‘read more’ thing, I really liked the links you posted and they provided me some insight in why it’s not a good habit to do so. However, I still want to include ‘that kind of link’, so I will use your advice on ‘meer over restauranten’ etc., so that people with screen readers etc. have no problems and also for SEO purposes, as this is a part that I would focus on aswell with developing the site.

The ‘stuur jouw vakantiefoto in’ thing is indeed a link and not a header. I’m not sure why I thought like that, you’re right. On the ARIA thing, I think I’ll look at that after I coded it into a WordPress theme.

Again, thanks a lot for your help and taking your time!

4

I’m not totally sure what you meant with the locking puppies in fridges, I thought it would be good practice to do that first and then code my html/css to a Wordpress Theme. This was also recommended by the tutorial I am following (Lynda.com, tutorial on how to make a theme in the new WP)

PSD-to-HTML suggests “coding an image”. It’s difficult to choose the correct (or best) semantic element because what truly should determine a site’s markup is its content, rather than a picture of its content (though that’s better than a picture with Lorem Ipsum). Though your attempt so far doesn’t seem bad.

I’m not totally sure about the ‘list’ thing for the languages. Would I pick an unordered list for it, or a regular list?

If I have more than 2 languages, I use a ul. Obviously it’s not an ordered list: the order doesn’t matter. Users just choose one of the many. Like a shopping list, they belong together in that they are all language choices… similar to the site menu is also a list of choices (possible destinations).

“Logo might be your h1, rather than where you have it now (in a list item)” - I currently have it as a div, but your suggestion is to put them between h1 brackets? If so, why do you recommend me to do so?

Well, it’s content, and on the main page, it’s basically saying what the whole page is about: this establishment. Like, “You are on CompanyX’s page”. I don’t do h1’s around logos on other pages, though you can… usually other pages have more specific content (on contact pages, usually the h1 is “contact”).

Currently, your code doesn’t have a single, overreaching header (by header I mean hx tag, not <header>) that names/explains the page. Some web pages really don’t have one, but this page is very clearly about one thing (this business and what it offers). So to me, it’s a good idea to have a single h1 about the page.

I left the <featured> section like that, because these will just be 4 featured ‘posts’ that the company is wanting to display (for example new special offers), and I’m going to make use of an existing plugin for WordPress, so therefore I thought I would just leave it like that, and then later on implement the plug-in when it’s time to do so.

I’m not really familiar enough with the feature tag to know what it’s best for, so I’ll leave it at that.

As I’m quite a beginner, I didn’t fully understand the part about the headers for the menu items, are you referring to the 5 blocks with the different sections on the site? What exactly would I change for that?

You’ve set each one as an h1. HTML5 allows this: the idea is that the sections you put the headers in actually determine their “level” on the page, regardless of which level you choose. I think this can make a lot of sense in, say, a blog page where there are multiple, separate articles, each with their own title. If a browser actually truly understood the document structure of an HTML5 page (and currently, none of them do), those h1’s within those articles and sections would never be confused with the Main Page H1, because they’re nested inside sections/articles.

On your page you have an h1 for every list item. They look like sub-list-items, so in combination with a single main h1 header for the main page, I would drop those headers down to <h2>.

The images for those, they are kind of decorative, but they also need to give the people a quick feel of what the section is about. So I think I’ll stay with that as they’re also informative.

I’m not saying take the images out, but I am saying that IF they don’t mean anything more than “accommodaties” or “restaurant” (you have alt text like alt=“accommodaties”), then they’re definitely not saying anything useful… you already have a header saying the exact same thing.

With content images, they should be “saying” something, otherwise they are decoration. Which is fine: if they are decoration, it means instead of using <img> tags in the HTML, you give an id or class to your div where you want the image in, add enough padding to make room for it, and use CSS to add it as a background image.

If you believe they are “informative” then that same information needs to be available to users who either don’t load images or are blind or whatever, meaning, you’ll need much better alt text. Or a longdesc (this has been removed and fought over in the HTML5 groups for like ever now… so just do a link that lets everyone see what the images are “saying” then).

The whole point is, don’t lock up valuable information in an image. This is what alt text is for: an image is “saying” something, and the alt offers this to whomever doesn’t load or see the image, so that everyone has access to the same information. If the image is just adding context as decoration, it’s still decoration, and since it’s only truly useful to people who can see images, just load them in the CSS.
(my opinion anyway)

Talking about the ‘lees meer’/‘read more’ thing, I really liked the links you posted and they provided me some insight in why it’s not a good habit to do so. However, I still want to include ‘that kind of link’, so I will use your advice on ‘meer over restauranten’ etc., so that people with screen readers etc. have no problems and also for SEO purposes, as this is a part that I would focus on aswell with developing the site.

Sounds good. “meer over restauranten” is distinct enough that it can be pinpointed in a list of links.
This may be interesting to you though:
[noparse]http://www.useit.com/alertbox/nanocontent.html[/noparse]
(again, less important for read-more type links, but something for you to bring with you in future projects)

Mostly, so long as you’re aware of the issues, when you make a design decision (even if you keep the original setup), you’re at least making it informed and you know the drawbacks. This is I think the most important thing about web development and knowledge. Informed decisions are better than uninformed even if the end result is the same, I believe.

Anyway, good luck.

5

Thanks a lot, it’s all totally clear what you mean and I’ll incorporate that advice into my work, and I also learned some things I didn’t know yet! Thanks again and Happy Easter =)

6


Vrolijk Pasen!