SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 40
  1. #1
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    html with "content first" discussion...

    I learned that for SEO purposes it is better to code html so that the real important content is first in the html source code and that 'cause for example google gives more importance to the content at the top of the html source. So i always used to code with css layouts that puts the center column (where the main stuff goes) first in the code source. Then i read some discussions about it that said that it is not so crucial to have the content first. What is your point of view and why? Is it still relevant to put the main content first in the html code?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Two words. Unlearn it.

    I'm having problems with my brother's internet connection so I'll get back to you on how to REALLY code a Web page when this problem either clears up or I get back home later today.

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Don't care , if it's SEO or no SEO, if thats the requirement content first , I get it don !!!!!!! (whatever they want from me i try to get it going !) , I take it that the guy/girl requesting it has made up his mind to have it that way, it's his/her responsibility, a more pragmatic view in live solves a lot of problems

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,595
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Which part of the page do you want people listening via a web reader to have read out to them first? That is the part that needs to come first in the HTML. Design your page correctly for your visitors and most of the SEO will be taken care of automatically.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Which part of the page do you want people listening via a web reader to have read out to them first? That is the part that needs to come first in the HTML. Design your page correctly for your visitors and most of the SEO will be taken care of automatically.
    ok so the content first is important to screen readers as it is for SEO.....so it is better to do so?

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still not home yet, and my brother's computer's still acting up, but here's what I do.

    Header (IMG element wrapped around a DIV)

    Menu (unordered list - should be standard)

    Content (main page content)

    Sidebar(s - if applicable)

    Footer

    I'll also include skip links where appropriate as well. The most appropriate location typically depends on the design, placement and type of content on the site.

  7. #7
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Still not home yet, and my brother's computer's still acting up, but here's what I do.

    Header (IMG element wrapped around a DIV)

    Menu (unordered list - should be standard)

    Content (main page content)

    Sidebar(s - if applicable)

    Footer

    I'll also include skip links where appropriate as well. The most appropriate location typically depends on the design, placement and type of content on the site.
    So it is not necessary that the main content (center column) is the very first code?

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Dan. Menu first with a "skip to content" link so that a screen reader wouldn't have to read through the links on every single page.

    Having the navigation second may also have some disadvantages to search engines. If the content was really long for example then the spiders may never reach your navigation and therefore only your index page would be indexed.

    With the other scenario where your navigation is really long then at least the spiders would reach all your pages with the navigation first whilst it may cut off the end of your content which whilst isn't ideal is the better option.

    Personally, I'd ensure that your navigation isn't too long by breaking it down into sub-sections and ensuring that the information architecture is right for the site so that the navigation isn't too long so that all pages and all the content where possible is indexed.

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Skyblaze View Post
    So it is not necessary that the main content (center column) is the very first code?
    Exactly, personally I'd say that the opposite is true and the navigation should always come first.

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As long as you have a skip link to the second part, it's not a big deal what comes first.

    I personally put the content first, because that's what I prefer to encounter. I go to a web page to read the content, not to go somewhere else immediately.

    Navigation first is a legacy from table layouts, where you didn't have much choice if you wanted the menu on the left-hand side. My guess is that those who say they prefer navigation first do so because it's what they are used to, not necessarily because it's the best solution.

    For users who have graphic browsers and use a mouse or similar, it doesn't matter all that much. People like me, who prefer to navigate by keyboard, it does matter, but as long as there's a 'skip navigation' link it's not the end of the world.

    Dan and Dave, what are your rationales for putting the navigation first?
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Dan and Dave, what are your rationales for putting the navigation first?
    Quote Originally Posted by csswiz
    Having the navigation second may also have some disadvantages to search engines. If the content was really long for example then the spiders may never reach your navigation and therefore only your index page would be indexed.

    With the other scenario where your navigation is really long then at least the spiders would reach all your pages with the navigation first whilst it may cut off the end of your content which whilst isn't ideal is the better option.

    Personally, I'd ensure that your navigation isn't too long by breaking it down into sub-sections and ensuring that the information architecture is right for the site so that the navigation isn't too long so that all pages and all the content where possible is indexed.
    I presume you missed this one

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I must have missed that. However, I don't design my pages for search engine 'bots, but for human visitors. The SE problem should be possible to fix, at least for Google, by having an XML site map for it to digest.

    I personally prefer SEs to index my content, rather than following my navigation. What's the point of them indexing a page where they don't see any content? You won't get any hits anyway, will you?
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't treat it as one or the other gets indexed though.

    If your navigation is that long that it's likely to stop your content from getting indexed then I'd say there's a problem with the length of your navigation. However, it's probably more likely that lengthly content will stop the bots from reaching your navigation.

    I do agree with you though, as I obviously design my site for human visitors but it's something that I'd always consider when designing a site in the same way that I'll consider usability and accessibility. It's not something that I'd think about separately as a site can be both usable and accessible to a human as well as being equally accessible to a bot.

  14. #14
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tommy, I keep everything short, sweet, and to the point. If either my menu or content are too long, I seriously look at either shortening them up or breaking them into separate pages or splitting the menu into two menus, putting the second part after the content (I have one site where I'm literally going to have to do this).

    Also as an occasional mobile user, I prefer to have the menu first when I get to a site. My cell phone is old (by American standards - which is a laughingstock compared to the Web enabled cell phones in Europe) and I don't want to have to chew up minutes (my cell's pre-paid) going from the top of the page to the bottom just to read the menu and figure out where I want to go.

    Granted skip links can help with that, but I'd rather skip a small menu than a lot of content just to find my way around and read what's on the page.

  15. #15
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    The request for clean code content first is rather high
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{height:100&#37;;}
    	
    	*{padding:0;margin:0;}
    	
    	body{
    	padding:0 12em;
    	background:#ffccff;
    	/* background:#ccffcc; */
    	font-size:.75em;
    	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
    	}
    	div,ul,li,h1,p{font-size:1em;font-weight:100;}
    	
    	ul{list-style:none;}
    	
    	div,div+div,div+ul{min-height:100%;margin-top:-8em;}
    	
    	div+ul{float:right;}
    	
    	div,div+div{float:left;}
    	
    	body>div{
    	background:#ccccff;
    	width:100%;
    	margin-right:-100%;
    	text-align:right;
    	}
    	
    	div+div{margin-left:-12em;background:transparent;text-align:left;}
    	
    	div+div,div+ul{width:12em;}
    	
    	div+ul{float:right;margin-right:-12em;}
    	
    	div+ul+ul{
    	min-height:8em;
    	clear:both;
    	background:#cccccc;
    	margin:0 -12em 0 -12em;
    	text-align:left;
    	position:relative;
    	}
    	
    	p,li{padding:.2em .5em .2em .5em;min-height:1%;}
    	
    	div+div p,h1,div+ul li{padding:16.2em .5em .2em .5em;}
    	
    	ul+ul+div{
    	position:absolute;
    	left:0;
    	top:0;
    	width:100%;
    	background:#ffcccc;
    	text-align:right;
    	min-height:8em;
    	height:8em;
    	margin:0;
    	}
    	</style>
    </head>
    <body>
    
    
    <div>
    <h1>
    middle
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </h1>
    </div>
    
    <div><p>left end</p></div>
    
    <ul><li>right end</li></ul>
    
    <ul><li>footer</li></ul>
    
    <div><p>logo</p></div>
    
    
    </body>
    </html>
    The above code was developed from this model , and it's not that difficult to do, it just needs adjusting to, a little teaser for two gentleman
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{height:100%;}
    	
    	*{padding:0;margin:0;}
    	
    	body{
    	padding:0 12em;
    	background:#ccccff;
    	/* background:#ccffcc; */
    	font-size:.75em;
    	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
    	}
    	div{font-size:1em; }
    	
    	.ab{
    	position:absolute;
    	left:0;
    	top:0;
    	width:100%;
    	}
    	
    	.header,.footer{height:8em;}
    	
    	.header{background:#ffcccc;text-align:right;}
    	
    	.left,.middle,.right{min-height:100%;margin-top:-8em;}
    	
    	.left,.right{width:12em;background:#ffffcc;}
    	
    	.left,.middle{float:left;}
    	
    	.left{
    	background:#ccccff;
    	margin-left:-12em;
    	position:relative;
    	left:-1%;
    	}
    	html:first-child .left{left:0;}
    	
    	.middle{
    	background:#ffccff;
    	width:100%;
    	margin-right:-99%;
    	text-align:right;
    	}
    	html:first-child .middle{margin-right:-100%;}
    	
    	.right{
    	float:right; 
    	background:#ccccff;
    	margin-right:-12em;
    	}
    	
    	.footer{
    	clear:both;
    	background:#cccccc;
    	margin:0 -12em;
    	}
    	
    	p{padding:.2em .5em .2em .5em;}
    	
    	.left p,.middle p,.right p{padding:16.2em .5em .2em .5em;}
    	
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	.middle{margin-right:-100%;left:0;}
    	.left{left:0;}
    	* html .left,* html .middle,* html .right{height:100%;display:inline;}
    	* html .right,* html .left,* html .footer{position:relative;}
    	* html .header{margin-right:-24em;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    
    <div class="middle">
    <p>
    middle
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </div>
    
    
    <div class="left"><p>left end</p></div>
    
    <div class="right"><p>right end</p></div>
    
    <div class="footer"><p>footer</p></div>
    
    <!--  -->
    <div class="ab">
    <div class="header"><p>header</p>
    </div>
    </div>
    
    
    </body>
    </html>
    Last edited by all4nerds; Aug 22, 2007 at 14:00.

  16. #16
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which loses all semantic meaning. What is a header? What is a footer? Where do they belong?

  17. #17
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Which loses all semantic meaning. What is a header? What is a footer? Where do they belong?
    Hello

    Yeah , well you can't have two things fist in the HTML or can you I can also change the word header in something else if that's bothering you logo is maybe good

  18. #18
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And where does the logo usually go?

  19. #19
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Also as an occasional mobile user, I prefer to have the menu first when I get to a site. My cell phone is old (by American standards - which is a laughingstock compared to the Web enabled cell phones in Europe) and I don't want to have to chew up minutes (my cell's pre-paid) going from the top of the page to the bottom just to read the menu and figure out where I want to go.
    As I said, it depends on what you expect to do once you arrive on a particular page. Me, I expect to read the content on that page, which is why I prefer to have the content first. Then, once I'm done with that, I may consider going to other pages on that site, and by then I've arrived neatly at the menu.

    If you expect to go somewhere else first thing after loading a page, why are you loading that page at all? Why not load the one you're going to instead of chewing up minutes by loading a page you intend to leave immediately?
    Birnam wood is come to Dunsinane

  20. #20
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Technically they are interesting models, you can learn a lot, SEO wise they might be a hype, phones to speak to people, pc's to surf the www , hammers to hit nails, but you can do the same if needed with a screwdriver

    separated in what the css is needed for
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Title of web site</title>
    	<!--[if IE]>
    	<style type="text/css">
    	* html .fc{height:1&#37;;} /* haslayout IE 5 5.5 6 */
    	.fc{min-height:1%;} /* haslayout IE 7 */
    	</style>
    	<![endif]-->
    	<style type="text/css">
    	<!--
    	html,body{height:100%;}
    	
    	*{padding:0;margin:0;}
    	
    	/* em control */
    	body{
    	background:#a2a2a2;
    	font-size:75%;/* em control */
    	font-family:verdana,sans-serif;
    	text-align:center; /* IE 5 */
    	}
    	div,p,h3{font-size:1em;/* em control */text-align:left; /* IE 5 */}
    	
    	/* special */
    	head+/**/body .fc:after{ /* float clearing, min-height browser but not IE 7 */
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}	
    	
    	/* eXtended columns */
    	.ex{padding-bottom:32767px;margin-bottom:-32767px;}
    	
    	/* structure */
    	.wra{background:#ffffcc;}
    	* html .wra{height:100%;} /* IE 5 5.5 6 */
    	head+body .wra{min-height:100%;overflow:hidden;} /* min-height browsers */
    	
    	.ab{
    	position:absolute;
    	left:0;
    	top:0;
    	width:100%;
    	text-align:center;
    	}
    	.he{background:#ff8c00;}
    	
    	* html .r,* html .l,* html .ll{display:inline;}
    	
    	.r{ /* margin box */
    	float:left;
    	margin-right:-200%;
    	width:100%;
    	background:#c6c6c6;
    	}
    	.l{float:left;background:#d8d8d8;} /* left column */
    	.ll{float:right;background:#b4b4b4;} /* right column */
    	
    	/* text */
    	.he p,.na p,.wra p,.fo p,.wra h3{padding:.5em .8em .2em .8em;}
    	.r h3{border-left:1px solid #ffffff;border-right:1px solid #ffffff;}
    	.r p{text-align:right}
    	
    	/* parameter block */
    	
    	/* header footer control */
    	html .wra{margin-top:-3em; /* margin for footer */}
    	.ab{height:10em;} /* height header + height nav*/
    	.he{height:7em;} /* height header */
    	.na{height:3em;background:#fbfbfb;} /* height nav */
    	.fo{height:3em;background:#fbfbfb;} /* height footer */
    	html .l,html .ll,html .r{border-top:13em solid #ffffff;} /* height header + (margin footer=height footer) + height nav */
    	
    	/* column parameters */
    	.wx{width:84em;margin:0 auto;} /* class w page width */
    	.w{width:64em;margin:0 auto;}
    	.l{width:18em;} /* Left column */
    	.ll{width:12em;} /* Right column */
    	.r{margin-left:18em;} /* width L column  */
    	.r p,.r h3{margin-right:30em;} /* L w column  + R w  column */
    	-->
    	</style>
    
    </head>
    <body>
    
    <div class="wra w fc">
    
    <div class="r ex">
    <p>
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    content area content area content area content area content area content area content area 
    <!-- 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     -->
    content area<br>
    </p>
    <h3>width check</h3>
    </div>
    
    
    <div class="ll ex">
    <p>
    
    right pane area<br>
    right pane area<br>
    right pane area<br>
    right pane area<br>
    right pane area<br>
    right pane area<br>
    right pane area<br>
    right pane area<br>
    right pane area<br>
    
    </p>
    </div>
    
    
    <div class="l ex">
    <p>
    left pane area<br>
    left pane area<br>
    left pane area<br>
    left pane area<br>
    left pane area<br>
    left pane area<br>
    left pane area<br>
    left pane area<br>
    <!-- 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     -->
    left pane area<br>
    </p>
    </div>
    
    
    </div>
    
    <div class="fo w"><p>footer</p></div>
    
    <div class="ab">
    
    <div class="he"><p>header</p></div>
    <div class="na w"><p>nav</p></div>
    
    </div>
    
    </body>
    </html>

  21. #21
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the HTML, my navigation is dead last on the page. The only thing that comes later is the <script> tag to my unobtrusive javascript file. I've heard the SEO argument, and the actual page length you need to reach that cut off level (much less exceed it) is pretty obscene. I don't really care about that.

    I do it because the content is the most important part of each page. You shouldn't have to search the page for it. That and I've seen seniors and the blind with screen readers and braille displays struggling through the 5 million links in a poorly designed 3 column layout (Yeah, I'm talking to you Yahoo!) and after each link they have to stop to see if FINALLY there is text for them to read... and if they tab once too far... then they're into the footer links. And naturally there's no indication that you're looking through footer instead of header links.

    It's so easy to get lost in a text browser or navigating by keyboard even in a great layout. My experience has been that the first thing after the body tag is <h1> followed by your content. Otherwise, it's really hard to be truly accessible (as opposed to just checking off all the WCAG checkpoints for your AAA site ...which is not actually accessible to anyone... but don't get me started on that).

    Now Visually... That's a completely different story. By UI conventions, I expect to see the navigation above the fold, so I always design either a horizontal navbar that's part of the header or a vertical navbar right underneath it. I simply do that with absolute positioning.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  22. #22
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    In the HTML, my navigation is dead last on the page. The only thing that comes later is the <script> tag to my unobtrusive javascript file. I've heard the SEO argument, and the actual page length you need to reach that cut off level (much less exceed it) is pretty obscene. I don't really care about that.

    I do it because the content is the most important part of each page. You shouldn't have to search the page for it. That and I've seen seniors and the blind with screen readers and braille displays struggling through the 5 million links in a poorly designed 3 column layout (Yeah, I'm talking to you Yahoo!) and after each link they have to stop to see if FINALLY there is text for them to read... and if they tab once too far... then they're into the footer links. And naturally there's no indication that you're looking through footer instead of header links.

    It's so easy to get lost in a text browser or navigating by keyboard even in a great layout. My experience has been that the first thing after the body tag is <h1> followed by your content. Otherwise, it's really hard to be truly accessible (as opposed to just checking off all the WCAG checkpoints for your AAA site ...which is not actually accessible to anyone... but don't get me started on that).

    Now Visually... That's a completely different story. By UI conventions, I expect to see the navigation above the fold, so I always design either a horizontal navbar that's part of the header or a vertical navbar right underneath it. I simply do that with absolute positioning.
    Anyway you can put any navigation first and then put a link "skip to content" no?

  23. #23
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Whatever you want first basic demo
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	body{font-size:75&#37;;padding:0 12em;}
    	
    	div,p{font-size:1em;}
    	
    	.l,.q{float:left;}
    	
    	.l,.ll{width:12em;display:inline;}
    	
    	.l{margin-left:-12em;background:#cccccc;}
    	
    	.ll{
    	margin-right:-12em;
    	float:right;
    	background:#ffccff;
    	}
    	
    	.q{
    	width:100%;
    	background:#ccccff;
    	display:inline;
    	text-align:right;
    	margin-right:-100%;
    	}
    	
    	.x{clear:both;background:#ffffcc;margin:0 -12em;/* text-align:right; */}
    	
    	.y{position:relative;}
    	</style>
    </head>
    <body>
    
    <p class="x">1 left center right<br /></p>
    
    <div class="l"><p>left</p></div>
    
    <div class="q"><p>center</p></div>
    
    <div class="ll"><p>right<br /><br /><br /></p></div>
    
    <p class="x y">2 center left right SEO<br /></p>
    
    <div class="q"><p>center fist left right</p></div>
    
    <div class="l"><p>left</p></div>
    
    <div class="ll"><p>right<br /><br /><br /></p></div>
    
    <p class="x">3 center right left SEO</p>
    
    <div class="q"><p>center first right left</p></div>
    
    <div class="ll"><p>right<br /><br /><br /></p></div>
    
    <div class="l"><p>left</p></div>
    
    <p class="x">4 right left center<br /></p>
    
    <div class="ll"><p>right<br /><br /><br /></p></div>
    
    <div class="l"><p>left</p></div>
    
    <div class="q"><p>right left first</p></div>
    
    <p class="x">5 left right center<br /></p>
    
    <div class="l"><p>left</p></div>
    
    <div class="ll"><p>right<br /><br /><br /></p></div>
    
    <div class="q"><p>left right first</p></div>
    
    <p class="x">6 right center left<br /></p>
    
    <div class="ll"><p>right<br /><br /><br /></p></div>
    
    <div class="q"><p>right center left</p></div>
    
    <div class="l"><p>left</p></div>
    
    <p class="x">&nbsp;</p>
    
    </body>
    </html>

  24. #24
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Skyblaze View Post
    Anyway you can put any navigation first and then put a link "skip to content" no?
    To be more precise, what actually comes immediately after my level one heading is a toc div with inpage links to the different sections. So you can choose where you go, but the emphasis is on content... I have a content heavy site.

    What I've found is that putting content first is no drawback to people with text browsers or who navigate by keyboard. They are move from link to link, so they automatically skip over even massive amounts of content. Providing a skip link is usually gratuitous though there's certainly no reason you can't have one.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  25. #25
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    To be more precise, what actually comes immediately after my level one heading is a toc div with inpage links to the different sections. So you can choose where you go, but the emphasis is on content... I have a content heavy site.

    What I've found is that putting content first is no drawback to people with text browsers or who navigate by keyboard. They are move from link to link, so they automatically skip over even massive amounts of content. Providing a skip link is usually gratuitous though there's certainly no reason you can't have one.
    i meant a skip link at the top of the code before the content and before the navigation that come first in the source.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •