Do I need HTML5 ?

Internet Explorer - this is a very stupid and still popular thing. It ignores rules even created by Microsoft. IE10 causes problems, everybody knows it - this is why I (and other websites) put IE conditional comments in Doctype. Instead of these five lines I can use just one:
<meta http-equiv="X-UA-Compatible" content="IE=9" />

As you suggested:
1. Added H1 with text to LOGO DIV
2. Changed text color
3. Removed extra DIV in NAVIGATION BAR

I see you hate fixed layouts, pixels , HTML5 and Transitional.

Can you show an example of ideal website with perfect code?

 

Those do two entirely different things, and the latter one is useless in IE8/lower.

Generally speaking if you use either of those, you are sweeping problems with bad code under the rug instead of fixing much deeper rooted issues.

What I hate is sites with accessibility failings, bloated code and bad practices. Also, the WCAG exists for a reason.

Fixed width layouts by definition end up screwing SOMEBODY... responsive layouts are just the next logical step after semi-fluid and elastic design, it's by no means a new concept (look up 'mcSwtichy' some time). With the ENDLESS array of screen resolutions and render sizes, putting a fixed width on a layout isn't just shortsighted and lazy, it's outright stupid!

Same goes for px metric fonts. They are a necessary evil around image interactions like underneath gilder-levin, but should be used with an eyedropper since not everyone has the same default font size declared. I've been a large fonts/120dpi/8514 user since Windows 3.0, so any time someone declares 12px or smaller -- or even px fonts in the first place I'm left diving for the zoom or going to some other website that isn't an inaccessible mess!

As to 5 and tranny (same thing in my mind) we were told for over a decade to STOP making broken, bloated inaccessible websites in transitional. It MEANS you are in transition from 1997 to 1998 practices; HTML 5 seems to exist in part as a way for the W3C to say "You know what? Forget good practices and simpler markup, go ahead and sleaze things out any old way, who cares!" - great method of building a "specification" and why IMHO right now the W3C, and more so the re-re's at WhatWG, wouldn't know a specification if it bent them over the table and shoved a strict rule in a most uncomfortable spot.

Well, how about one of my own? http://www.ewiusb.com/

Not 'perfect', but it does have elastic semi-fluid AND responsive layout, dynamic auto-adjusting fonts, and legible color contrasts... which is why at normal fonts/96dpi/vga/16px default it looks like this on a large display:
http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal96.jpg

Whle at large fonts/120dpi/8514/20px default it looks like this:
http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal120.jpg

It can narrow to 800:
http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800Wide.jpg

It can narrow to single column at 640/smaller
http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom640Wide.jpg

right down to tiny little mobile widths:
http://www.cutcodedown.com/images/ewiUSB/ewiUsbTinyMobile.jpg

It gracefully degrades images off through using proper image replacement:
http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800WideNoImages.jpg

.. and because it was built with SEMANTIC markup FIRST (before div, span and style were added) it even gracefully degrades images off while still being useful -- particularly for screen readers, braille readers, accessibility aids, search engines, etc, etc...
http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNoCSS.jpg

That's what I'm talking about -- and it's not "hard" or "more work" -- it's easier and less work because there are clear and simple rules to follow -- and I don't need any blasted IE conditional crap, forcing the UA to behave different just because of a more up to date and LESS problematic engine, etc, etc... (seriously, IE10 CAUSING problems? I don't think so Tim...)

Have a look at the source, the ONLY reason DIV and SPAN are in there is as hooks for applying style without saying what that style is. They were added after the semantics and logical document structure was completed. Semantic markup of content (or a reasonable facsimile FIRST), bent to my will using CSS and a few extra semantically neutral wrappers, then further enhanced with presentational images and a eyedropper worth of scripting.

Which is how I end up with a main page that's a dozen times more useful than the usual 'dicking around in photoshop' "design", and comes in at a mere 98k in 22 files, 67k by the time gzip compression is applied.

Take that 'kitchen' page -- you've still got static style in the markup. Even in development using the STYLE tag is just a broken garbage way of coding, and the use of the STYLE attribute should be done with an eyedropper, not a firehose -- as you then have no separation of presentation from content making it harder to do things like apply responsive layout. Most of your elements aren't even in a logical document structure or even sane presentation order -- you are absolute positioning EVERYTHING instead of letting flow do it's damned job. This is REALLY true of that sidebar of which the entire markup belongs in the trash! You're using tables for NOTHING as you only have one TD per TR, meaning zero reason to even have tables in your markup (though there IS something I'd consider making a table in the sidebar for semantic reasons).

Of course, I didn't realize it had adverts -- doesn't really make sense to waste bandwidth on advertising on a page like this one that appears to be about trying to sell something. Marketing 101, if you are trying to sell a product, don't put advertisements for OTHER PEOPLE'S PRODUCTS on your product page!

Lemme put it this way, there is NO legitimate reason for the markup of your "kitchens" page to be much more than:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Valenzuela Kitchen - Photos - Wood-Furniture.biz
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Gallery
		<span>-</span>
		<small>furniture & home decor</small>
	</h1>

	<ul id="mainMenu">
		<li><a href="/">home</a></li>
		<li><a href="../companies.htm">directory</a></li>
		<li><a href="/forums/forum.php">forums</a></li>
		<li><a href="../Shop/shop.htm">shop online</a></li>
		<li><a href="../products.htm">gallery</a></li>
		<li><a href="../Video/video_presentation.htm">videos</a></li>
		<li><a href="../C/contactus.htm">contact us</a></li>
		<li><a href="/forums/blog.php">blogs</a></li>
	</ul>

	<hr />

	<div id="contentWrapper"><div id="content">

		<div class="gallery">

			<a href="../images51/Valenzuela_KITCHEN1.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN1_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN2.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN2_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN3.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN3_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN4.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN4_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN5.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN5_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN6.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN6_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN7.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN7_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN8.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN8_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN9.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN9_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN10.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN10_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN11.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN11_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN12.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN12_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN13.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN13_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN14.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN14_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN15.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN15_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN16.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN16_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN17.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN17_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN18.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN18_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN19.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN19_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN20.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN20_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN21.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN21_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN22.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN22_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN23.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN23_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

			<a href="../images51/Valenzuela_KITCHEN24.jpg">
				<img
					src="../images51/Valenzuela_KITCHEN24_thumb.jpg"
					alt="Valenzuela Kitchen"
				/>
			</a>

		<!-- .gallery --></div>

		<img
			src="../images51/Valenzuela_KITCHEN1C.jpg"
			alt="Valenzuela Kitchen"
			class="plate"
		/>

		<h2>Valenzuela Kitchen</h2>
		<p>
			There is a land where the pampas seems to stretch forever till it meets the quebracho forests, where the sea reflects the deep blue of the skies, and the waves lap the coastline scattered with olive and tamarix trees swaying in the wind. The Valenzuela model is the essence of South America where the colours of the landscape are as vibrant as its people- strong and vital... captivating... irresistible. An old sextant, a compass, an anchor, some nautical maps... memories of a land of navigators, sailors and explorers. Fishing nets, an amphora, and models of old sailing ships underline the marine theme. For those whose hearts long for the sea, who love to relax listening to the gentle creaking of fishing boats in a tiny port, gazing at the horizon, for those who are most at home in a kitchen flooded with sun and vitality.
		</p><p>
			Anyone who enjoyed the freedom of the open sea will find themselves at home when moving around a Valenzuela kitchen. Its authentic profile and polychromy created by using natural walnut wood captivate those who experience it every day. This country-style kitchen was manufactured with materials of the highest quality, such as marble and brass, subjected to treatments that enhance their value and ensure their outstanding resilience. The Valenzuela modular kitchen comes with electrical appliances of the best brands and related after-sales service.
		</p><p>
			Warm materials, stainless steel and brass shine in this kitchen, reflecting its beauty and versatility. A whiff of sea breeze and the smell of salt water: the natural stone border around the kitchen sink is supported by columns that recall ancient Corinthian capitals, while the bronzed brass handles are manufactured to the company’s exclusive design, elegant, but at the same time, ergonomic and practical. The mainstay of the Valenzuela kitchen that immediately catches the eye is the hood over the cooking hob, carved like an authentic piece of art, made from naturally seasoned old wood beams. Another beautiful element with considerable impact is the delicately etched border on the glass doors of the kitchen dresser.
		</p>

	<!-- #content, #contentWrapper --></div>

	<div id="extras">

		<form action="/search/search.php" method="get" id="search">
			<fieldset>
				<label for="searchText">Search:</label>
				<input type="text" name="query" id="searchText" />
				<input type="image" src="images/search.png" alt="search" />
				<input type="hidden" name="search" value="1" />
			</fieldset>
		</form>

		<table id="aboutManufacturer">
			<caption>About the Manufacturer</caption>
			<tr>
				<th scope="row">Name:</th>
				<td><b>Marchi Cucine</b> (Italy)</td>
			</tr><tr>
				<th scope="row">Profile:</th>
				<td><a href="http://www.marchicucine.it/">visit website</a></td>
			</tr>
		</table>

		<div class="subSection">
			You had two large boxes, no clue what goes in them!
		<!-- .subSection --></div>

		<div class="subSection">
			Which is why it's better to semantically markup ALL your content or a reasonable facsimile BEFORE you start dicking around with style!
		<!-- .subSection --></div>

		<a
			href="http://www.addthis.com/bookmark.php?v=250&amp;pubid=ra-504a1c7216d56eaf"
			class="addthis_button"
		>
			<img
				src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif"
				width="125" height="16"
				alt="Bookmark and Share"
			/>
		</a>
		<script
			type="text/javascript"
			src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-504a1c7216d56eaf"
		></script>

	<!-- #extras --></div>
	
	<hr />

	<div id="footer">
		&copy; Wood-Furniture.biz
	</div>

<!-- #pageWrapper --></div>

<script type="text/javascript" src="library.js"></script>
<script type="text/javascript"><!--
	/*
		call function to setup lightbox style effect here
	*/
--></script>

</body></html>

Code (markup):

EVERYTHING else belongs in an external stylesheet, or not on the site in the first place! Notice the properly formed form with an actual LABEL, swinging an axe at the stupid malfing TARGET attribute (that again has no business on any non-frameset website written after 1998), removal of redundant TITLE attributes and 99%+ of your "DIV for nothing"... which is why it's 9k of markup vs. the 18k you have.

Though I'm guessing a bit -- I suspect well over half the scripted stuff you have in that code isn't even running here.

 

Some of the most successful websites in the world have less than perfect markup. It's a fact. You can have the most perfectly coded website in the world but is it generating an income for you? Unless, of course, your intention is not to generate income, but perhaps just to gain visibility? It takes a lot more than perfect code to achieve that as well.

It is content or the fulfillment of a need that determines the success of the website along with traffic generation strategies - certainly not perfect code, in my humble opinion.

To the OP, you don't need HTML 5 - I think it's more important that your website serves the function that it is intended for - not what markup you use.

 

To a certain extent, you make a good point. However, site and content structure is important for a few reasons:

• Some broken HTML can cause problems with navigating or crawling the site. Some browsers might handle it better than others, but wouldn't it be better to have valid HTML? How stupid would it be if lazy coding resulted in 10% of customers not being able to complete their order at the last stage?
• Not all screen sizes are equal on laptops and desktops are equal and not everyone uses the same font sizes, so a site that displays correctly regardless of resolution means you won't lose a customer/potential customer for a silly reason.
• Importantly, smartphone and tablet traffic should not be ignored as this makes up a large amount of searches and traffic. If the site doesn't display well, then people will bounce.

There is no point in having a lot of traffic if 50% of those will bounce because the site doesn't display well on their screen, or links are broken due to crappy, invalid HTML.

Yes, Amazon is a coding mess (over 4000 lines when viewing the source of their home page, albeit some are blank ones), but I can view it fine on my tablet and phone (they made versions of their sites that work with such devices), no links are broken, etc, as a result I have made orders from both. I would otherwise have ordered elsewhere (for online shopping I prefer to use my tablet, or if I'm away from home then my phone, probably quite a few people do the same).

Whether you use HTML5, XHTML, HTML4 or whatever, the most important thing to focus on is your audience, the user experience and not to exclude any of them, ensure the site works correctly (test under as many conditions as possible). Coding it well goes a long way to helping with that.

 

I understand it. Thanks.

Can you attach a very simple css for that? Just for layouts. Thanks again.

 

Can manage more than that -- belted out a quick working example and threw my lightbox-type implementation on it. (that's due for a rewrite relating to another project soon)... Copy up live here:
http://www.cutcodedown.com/for_others/Karolwf/template.html

132k in 33 files, which is acceptable.

As with all my examples the directory:
http://www.cutcodedown.com/for_others/Karolwf/

Is wide open for easy access to the gooey bits and pieces. Feel free to have a look around.

The layout is elastic, semi-fluid AND responsive, uses flow to position elements so it can dynamically grow/shrink to whatever content you plug into it, and I fixed the color contrasts. (read the "what's wrong with your website" link in my siggy for the actual formula).

I'm expecting company over soon -- but tonight or tomorrow I'll see if I can spare the time for one of my infamous section-by-section code breakdowns to explain ALL of it.

 

Ok, lemme break down the HTML for you.

First up 99% of what I design starts from this simple baseline:
http://www.cutcodedown.com/for_others/template.html

I use XHTML 1.0 STRICT for it's stricter structural rules, which makes (me at least) less prone to making potentially disastrous mistakes. STRICT got rid of or failed to adopt a whole slew of things (CENTER, FONT, ALIGN, BORDER) that have no business in the HTML, or (TARGET) piss all over accessibility. XHTML just has clearer/cleaner rules, so mix them together, and you make the 'just sleaze it out any old way' crap of HTML 5 look outright silly by comparison.

I tend to use more newlines than most because after some three and a half decades of writing code, it's just cleaner/easier to follow, particularly with attribute/value pairs. XHTML's clear closing pattern of /> when doing this makes the code far, far clearer since you're not wondering "Is that a open or a self-closing empty".

* NOTE * -- gonna give you a boost by explaining something few if any grasp. When the HTML specification talks about an empty tag, they do NOT mean a tag that has no content, but one that cannot contain content. By the specification:

<div></div>

is NOT an 'empty element' as it CAN contain content.

<img /><hr /><br /><input />

ARE empty elements, as it is invalid to ever say <img></img> or <input></input>, which is why those are the only tags it's valid to say /> on.

Which you can quite clearly see on my META and LINK why I prefer it.

the viewport meta is in there because I actually design for mobile. Most websites aren't so mobile browsers lie about their pixel width and start out with a funky zoom to compensate for it. As we are designing with mobile in mind, we have to tell those browsers not to play with our values.

I reversed your title order to make more sense in regards to what TITLE is for. Telling you 'where' on the site you are in the title, tab, or for the search engine to use as text inside the anchor. As such what 'page' should go first, then the category, then the site title.

Notice I put <html><head>, </head><body> and </body></html> together as single lines. I do this because there should NEVER be ANY code between them -- it just acts as a reminder of that. I also feel it helps keep the code clean.

Also, see how I have MEDIA on the CSS link? It is usually quite unlikely that your for screen layout has any business being sent to print, much less braille, aural, what have you. Sending "ALL" or omitting MEDIA isn't just asking to screw over someoene on a non-screen device, it kind-of misses the entire point of CSS. I include projection and TV because some kiosks will use those instead of SCREEN, or in concert with it. That stack of values is the most reliable way to deliver CSS for screen. It's also why using STYLE in the markup... really shouldn't be done in all but the rarest of cases -- hence why IMHO STYLE should be obsolete as a tag and deprecated as an attribute!

Alright, moving on to the meat, let's look inside the BODY.

div#pageWrapper -- a simple wrapper for the application of width. Setting the outer width once lets our content auto-expand to this one wrapper. Some people say you can use BODY for this now, but I've found that to be very unreliable cross-browser.

h1 -- written with a logical document structure, an H1 is by definition (if you know ANYTHING about writing professional documents like scientific papers, medical papers, research documents, technical documents and specifications) the heading under which all other headings of the page indicate the start of subsections. That's something you'll see people screw up a lot, as they fail to grasp what numbered headings are for and what they mean.

H2 is supposed to be the start of a subsection of a H1... H3 is supposed to be the start of a subsection of the H2... so forth down the line -- and HR (horizontal rule) indicates a section/topic change when a heading is unwanted/unwarranted. Welcome to why HTML 5's "section" is pointless crap. Likewise HTML 5's useless "NAV" element is supposed to speed navigation, when that's redundant to numbered heading navigation. (Admittedly, only Opera 12/lower ever got off their ass to implement that properly).

So if EVERYTHING on the page is supposed to be a subsection of the H1, what makes the most sense for the H1? The site title!

The hypen in the SPAN inside the H1 is there as a divider for screen readers, search engines or when CSS is disabled. I put it in a span so we can also leverage it for an image replacement method when it's time to style it. The SMALL indicates that in a professional document the text WOULD be smaller indicating de-emphasis. That is a SEMANTIC use of SMALL since notice we say WOULD be, not SHOULD be. For our screen layout we could present that any number of different ways.

ul#mainMenu - a menu is a list of choices, so put it into a list. The style is SO simple there is NO reason to be wasting extra DIV around it for no good reason... if between the UL, LI and A you don't have enough styling hooks, you're probably doing something wrong.

hr -- in my code horizontal rules are section breaks, what the tag is FOR. If I don't want that line drawn in certain layouts, I hide it with CSS.

div#contentWrapper, div#content -- this double-wrapping DIV lets us set up a VERY reliable 'content first' columnar layout. I'm not wild about the extra DIV, but it serves a legitimate purpose that we'll get into more when I write up a CSS breakdown.

div#gallery - Since div wrapping a bunch of anchors and images. Any script worth using should be smart enough to attach all the onclick's it's damned self, you need much more than a single ID'd DIV around the content for something like this, the script you're using isn't worth ****.

img.plate - I use the class 'plate' in reference to print plates -- basically a large image in the middle of flow text. Simple class to say what it is, without saying how we're aligning it.

#content h2 -- the first major subsection of the page, the numbered heading indicating it's a subsection of the h1, and it's the first 'real content' on the page.

#content p -- GRAMATTICAL paragraphs, which is the proper semantic use of P. You had breaks in there, making it all one long run of text. P exists to break up literary paragraphs, use them as such.

div#extras -- the sidebar in the wide screen layout, we don't say it's a column because it might not be a single column in all layouts, it might be under the content, it might be broken into multiple columns. It's just 'extra' stuff that's on the page.

form#search -- I added a fieldset, a proper LABEL so people using non-visual layouts have some clue what it is, and swapped the submit button to a cute little image. THIS is a properly formed form containing all the tags you are SUPPOSED to have in there (in XHTML... in 4 STRICT you are also supposed to have a legend on the fieldset). FIELDSET is for grouping like tags, NOT for simply drawing a border around elements (which is what a LOT of people do). Again, if you are choosing tags based on their default appearance, you're choosing the wrong tags for all the wrong reasons.

table#aboutManufacturer -- Some woould argue this is't a table, and should be something like a definition list... but really you have a caption, and then two columns -- one column is the field name/heading, the other is the value... that SOUNDS like tabular data to me!

Pay attention to the CAPTION, saying what the table is - the TH set to row SCOPE indicating it's what that row is about, and tene the data fields. I also downgraded to B since you seemed to be using it to indicate a title, NOT that it was recieving the "More emphasis" that STRONG means. Any halfwit moron tells you not to use B and I -- ignore them, they don't know enough about HTML to be opening their ignorant yap on the subject.

hr few more HR, I added the comment about removing them because if there are H2 inisde the subsections, you don't need a HR indicating a section change.

div.subSection -- wasn't sure what you're plans were for these two boxes, so I just tossed in some questions about what are they supposed to be.

div#footer -- with a HR before it this too is it's own subsection -- and being the last subsection pretty much means semantically it's the footer. (making HTML 5's FOOTER tag redundant). There isn't enough text to warrant calling the content a paragraph from a literary standpoint, so the outer DIV is quite sufficient. Also, in your original you were saying Copyright &copy; -- since the copyright symbol MEANS copyright... uhm...

Close out #pagewrapper, and we get to our scripts. I tossed on my 'boxsir' lightbox style script, with which you just set up some variables for it to parse, then include the script. boxSir_Hooks is a comma delimited list of ID's you want to target with the script (yes, it can do multiple ones per page), boxSir_directory is the location of all the boxSir files. I'm preparing a new version of this script that will have a proper public release soon.

I call these scripts right before </body> because all they do is plug in markup and classes, so there is no need to wait for onload to fire before running it. At this point in the markup the DOM is built, so you can target any content on the page right then and there without waiting. This also kick-starts downloading the scripting before the DOM is closed, speeding up the pageload.

... and that's it for the markup. I'll do a run-down of the CSS next, though I probably won't get to it until lunchtime.

 

Now to explain the CSS -- aka "where the magic happens"

I always start out with a small and simple reset. There are smaller resets like the so-called "universal" one of * {margin:0; padding:0}, but that can cause major headaches with the sizes of form elements cross browser. Some things you REALLY don't want to send the reset at. There are larger resets like Eric Meyer's "reset reloaded" that treads into being more of a framework than a reset... really code like that is what gives resets a bad name.

What I use is a nice safe middle ground -- it targets the elements that are inconsistent across browsers for margins, paddings and borders, while leaving alone elements that resetting them does more harm than good.

I then hide all my HR since again, I use them for semantics, NOT appearance.

@media (max-width:480px) -- smaller display browsers will often fiddle with the font size in a undesired manner. Setting these two proprietary values -- much like that META[viewport] in the code tells those mobile devices that we know what we are doing, so they need to "take your stinkin' paws off me you damned dirty ape!". I use the 480px wide target since it seems any devices that need this report that as their device width -- and sending it to larger display sizes for some reason breaks the ability to zoom in Safari desktop. (But not Safari mobile which is really... screwed up)

body - I always set a default font size for which 90%+ of the text on the page will use on BODY. I also find somewhat taller line-heights improves legibility. I use %/em on font-sizes so that the fonts will automatically adjust to the user, OS or browser preferences -- that way users don't have to dive for the zoom. Likewise it's a good place to set our most commonly used text-color. Satan gray on white has sufficient contrast to have no real legibility issues, something the much lighter gray you were trying to use suffered badly from.

#pageWrapper -- First thing I do in the actual design part is set up a semi-fluid elastic layout. Elastic means that it is based on the font-size using EM's. This means that should the default font size be different, the entire layout will expand in size to fit the larger text. Semi-fluid means that it is allowed to automatically adjust between two widths -- min and max. The Min-width is there for browsers that don't recognize responsive layouts so there's a safe cutoff; letting it go narrower can result in a broken layout. The Max-width is nice as it prevents lines in the content area from getting so long they are hard to read. I include a percentage width just so that if we have a body background we can let it show through, and I pad the bottom just so there's a bit of space below the footer. Naturally, the auto-margin is there to center this DIV.

h1 -- I set the width to that of the image, and position:relative so we can absolute position the nested span to put the logo image OVER the text hiding it. Hiding text this way means it is there not just for CSS off, but also should someone end up on the page with images off or blocked. a LOT of people disable images to save bandwidth, particularly if they are on a metered connection, particularly those that charge extra for overages (see a lot of our friends in Canada and Australia). Graceful degradation, if some piece of tech is missing, try to make the page still work. Beneath an image replacement is one of the few places you should EVER use px metric fonts, as if it was allowed to dynamically enlarge it would peek out from under the image. (it still will with the outdated FF re-re zoom that only a handful of people still use -- OH WELL).

h1 span -- we can hide the hyphen in this span with a text indent, then repurpose it for our logo image. set the width, set the height, position it inside it's parent, and load the image.

h1 small -- display:block to force it to a new line, set the size, done. Gives a decent images-off appearance.

#mainMenu -- kill the bullets, set center alignment, pad it pretty, give it a background. Avoid stating width or height so it auto-expands to it's parent's width and the height of it's content.

#mainMenu li -- LI can cause problems in IE8 and some other browsers if you try to style them. With a layout this simple, just setting them to display:inlien basically strips off their formatting, we want formatting, use the anchors.

#mainMenu a -- inline-block means we can declare paddings and have them actually obeyed. From there it's just a matter of making them pretty. I also put a box-shadow on it here for the hover state. Declaring it here speeds up the hover calculation. (don't know why, but that's how it works)

#mainMenu a:psuedo -- for the hover state I chose to change the background color... combined with the inset box-shadow you get a nice subtle 'glow' effect.

#contentWrapper -- and here's where the real magic begins. The 100% width with float:left leaves 0px width on the left for another float to fit... pay attention to that, we'll get to it in a moment. The bottom padding is just to push the footer away.

#content -- some simple padding to make the content pretty, I skip bottom padding as I'll be setting that on the content. It's generally safer/more predictable to set padding than margins, so that's why I do that. The massive right margin makes a empty space into which our sidebar will be fit... then just a simple border around this element.

#content h2 and #content p -- some simple formatting. padding the bottom rather than margins on both sides prevents any margin-collapse headaches.

#extras -- and here's the other half of that magic. Know how up above I said there's 0px free for a float to fit? Well, a curious quirk of negative margins is that it shrinks how big an element is in 'flow' without shrinking how big it 'renders'... I actually refer to these as the 'flow box' and 'render box' (a gross oversimplification, but it works). As such if we set a left margin of negative 20em, and a width of 20em, it will be drawn on the screen as 20em wide, but will only be counted as 0 width for it's positioning. Since it's 0 width, poof! it will pop up next to #contentWrapper and be drawn over it... right on top of that nice empty margin on #content!

I also pad the bottom of it to push the footer away should the sidebar end up shorter than the content.

#gallery -- since all the content is inline-level, we just set text-align and bottom padding. I want 1em padding between major elements (P, UL, H2, etc -- which usually looks nice) so I add half a EM bottom padding here, so with the half a em padding I add between lines of gallery items we have that full EM after the gallery.

#gallery a -- set to inline-block so that top/bottom padding is obeyed, strip off the underscores, and pad the bottom to space them apart. Side-to-side as they are inline a space character will exist there, so we don't need to say anything extra.

#gallery img -- vertical-align these to middle since they're not the same size.

.plate -- that plate image. Block forces it to it's own line and makes it obey auto-margin. The max-width will force it to shrink as our layout does.

#extras .subSection -- padding, border, simple. "Nothing to write home about"

#search -- again, simple padding and alignment.

#search label, #search input - again, simple alignment.

#searchText -- set an elastic width to what's roughly available. I wouldn't go larger as at 120dpi/20px default it would end up too big.

#aboutManufacturer -- expand the table to full width, space it at the bottom, make border behavior predictable. Set the border most of the way around... but NOT the top. As weird as it is CAPTION is rendered before the tabe even though it is inside it in the markup, so:

#aboutManufacturer caption -- gets a flipped border.

#aboutManufacturer th -- simple alignment, padding and style.

#aboutManufacturer td -- padding and alignment...

#footer -- I clear floats just in case, pad it, set the alignment, background and style to match what you had. I skip an image here as there's no reason to waste one on it.

... and that's the entire base layout! from there It's just a matter of adding a media-query to customize it for smaller displays.

@media (max-width:48em) -- the min-width we declared on #pageWrapper was for browsers that don't know media queries. With media queries we can strip off that min-width to the narrowest size we are comfortable with supporting. Likewise we strip off the width so it goes edge to edge. Stripping the margin off #content and the float off #extras gets rid of the multi-column layout dropping that stuff under #content as a single column. I then just tweak some paddings and borders to look better for a single column design.

That's it.... semi fluid elastic dynamic responsive layout... with accessibility that puts most of the crap sleazed out by HTML5-tards to SHAME!

 

Thanks a lot. Very useful information.

And I'm almost done:

http://www.wood-furniture.biz/K/kitchen.htm

What I did :
- changed width of "Extras" and "Content"
- added a small banner in the "Head" area - but if browser is minimized - banner goes behind logo.
- added extra DIV around img.plate - this page is a Template. I will use it many times - so I have to know where to add image - I'm using Expression Web 4 .

Got one problem with "Extras" - can't put it in proper place. Can you take a look and tell me what is wrong with this layout?

Thank you.

 

	width:23.3em;
	margin-left:-20em;

Code (markup):

those need to match. Re-read the CSS where I talk about the 'flow box' and 'render box'... if you only use a 20em negative margin on a 23.3em width, the 'flow box' is 3.3em wide, so it can't fit in that 0px wide space next to #contentWrapper. You have to set that negative margin equal to the width to reduce it to 0 total width in 'flow'.

 

So just search for .plate -- avoid extra elements when you don't need them.

Well that would explain why the markup got butchered-- much like Dreamweaver, frontpage, or any of the other 'tools' out there, do yourself a HUGE favor and pitch that garbage in the trash. The ONLY thing you can learn from them is how not to build a website. Grab a flat text editor like flo's notepad2, notepad++, editplus, etc, etc,... you use anything 'fancier' and you're shooting your horse in the foot before the gate even opens.

Particularly if you try to use the idotic "page management" crap, or worse the 'preview panes' or 'live edit' asshattery.

 

For those of you who didn't understand the post right above this one, it means "I don't know jack squat about HTML and internet, and I don't care, 'cause no one can stop me from writing nonsense on a daily basis".

 

I see it. Thanks.

I got question. Is it OK to have negative (-) margin or negative layout?

Here is the new fluid page:
http://www.wood-furniture.biz/K/kitchen.htm

Passed html validation test - no errors. It also works with html5 Doctype.

So I have 3 in 1 page - for desktop, tablet and mobile. Really good idea.

It looks OK on Desktop/Laptop.

But on Tablet (android Samsung Tab2 10.1) - page is vertically squeezed. Big image in img.plate - original size -600 x 600 on tablet looks like 400 x600 (WxH). Same thing with thumbs.

Page is not proportional like should be.

Your page http://www.ewiusb.com/
is squeezed as well.


Can you take a look?
Thanks for you help.

 

Not sure what you mean by 'squeezed', unless you are referring to exactly what responsive layout is supposed to do, strip off the columns when the display is too narrow to have columns. A screencap of what you mean might help.

... though that image being screwed up is because you (or was it that steaming pile of *** known as Expression - I know Frontpage used to do that breaking perfectly good code all the time...) added width and height in the markup, preventing the image from being able to auto-size properly. You MIGHT be able to fix that by declaring "height:auto;" on .plate in the CSS, but really 'width' and 'height' on responsive layouts are REALLY BAD IDEAS in the markup. That's why my code didn't have them!

Of course, that steaming pile known as AjaxLightbox isn't helping -- gah the markup for that alone is horrifying.

 

Here is your page on Samsung Tab 2, it has different proportions.



and here is same image on Laptop



Also - on Tablet - space between pageWrapper and Tablet screen edge (left and right) is bigger than on Laptop. I mean - I can see more background image and less pageWrapper on Tablet. PageWrapper is narrower than should be.

Best Regards

 

That looks like the same garbage those two vendor prefixed properties in the @media max-width 480 is supposed to stop... Hmm... Is the Galaxy using blink without prefixes already? (thought we had another six months on that).

That the text is also squished is very unusual, though it reeks of that same "For **** sake leave the damned site alone" garbage that mobile browser makers LOVE to add. I'm unable to recreate that on any android devices I have here... Almost makes me think it's shrinking one axis to force a fit to width, but isn't scaling the other.

I'd say it's the browsers fault, not the page. Are you able to do this in some other browser on the same platform -- like say Opera mobile? Is it doing that in landscape, portrait or both? I'd like to track this one down or at least narrow down what/where the problem is as that's VERY bizarre behavior -- it's even screwing up the blasted fonts. Could you pull a full size screencap instead of the chopped off snippet? Is that zoomed in or anything strange like that? Is that real android browser or some stupid butchered version Samsung put on it? (you know that whole thing that's pissing off Google when it comes to Samsung in the first place?) -- is the text that goofy ratio on all websites? (I can't think of anything in my code that would cause that!)... Did you... no... that's not... did you somehow set the tab into a non-standard resolution?

 

I'm using Samsung Tab2 10.1. Android version 4.2.2. - came with device and was upgraded to a latest version
Don't have any ratio problems on other websites. Even my old pages are displayed correctly - no problems with images. Static (fixed) pages are scaled to screen size with real ratio. Even creepy VBulletin forum looks normal on this Tablet.

 

What's REALLY confusing me is even the text is jacked up in terms of aspect ratio. Tried replicating that on my 7" ICOO (android 2.2) and 10" Meiying (android 4.2), and neither of them is doing that to the page. Admittedly, those are sub $200 devices (probably why they work)...

Wondering what the devil would cause the even the text to be screwed up like that... unless it's... wow, lying about device HEIGHT?

Though you mention it resizing fixed site layouts... so it could be whatever auto-scaling crap is involved not liking an actual mobile layout. (though at that resolution it should be getting a desktop one)

Hmm. I'll play with some different resolutions on my cubieboard (android 4.2.2) and see if I can't make it trip that behavior.

 

HTML 5 is best but use just HTML. you can do it by using just HTML.

 

I got one problem. On mobile width -there is a conflict between h1, h1 span and banner. You can see this problem here:



and here is that page:
http://www.wood-furniture.biz/K/kitchen.htm


Can you take a look and tell me what's wrong? Thanks