SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 40 of 40
  1. #26
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. My point is that if the content is first you typically don't even need that. If you want one you can add one.

    Here's the thing, text browsers, keyboard users, and adaptive techonology all three typically tab through page structure. Now if you have a lot of tab points in your content there's a benefit to it (lots of inpage links, form elements, etc.) But for many webpages, you tab twice and you've moved through all the text content no matter how verbose and you're in the navigation at the end of the code.

    So when content comes first, there's really no barrier to getting to the navigation. It's very easy and natural.

    That's not true the other way around. When navigation comes first, the user has no idea how many times to tab to get to the content. I've seen blind users go to a website hit tab, wait, it's another nav link, tab, wait, it's another nav link, tab, wait... I've seen people in classes walk through 50+ links that way, trying to find content. That's insane. Content should come first.
    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.

  2. #27
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And how many of those pages included appropriate skip links? I'll bet none of them did.

  3. #28
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have to be honest, I've never heard of anyone browsing a web site using their tab key. I use my mouse wheel to be honest.

    Either way, I've learned a lot from this thread. For kicks, I went to some of your web sites in your signatures. I came across this web site: http://www.autisticcuckoo.net/blog.php Typical blog, yes? Well, after reading the post from the owner, who says he tabs through his content, I decided to hit the tab key. A "jump to navigation" link popped up in the upper left hand corner on the very first tab press. Very nice.

    Anyway.. just something interesting I thought I'd throw out there for the conversation.

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

    OK content first it is , no floats , 2 columns follow center, 3 real columns, free standing with borders, usable in IE 6
    and yes maybe you can bring all your designs to the scrap heap because this has potention and is more what the wc3 had in mind
    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{
    	background:#ccccff;
    	font-size:.76em;
    	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
    	}
    	
    	div,h1,h2{font-size:1em;}
    	
    	.ab,.left,.right{position:absolute;top:0;}
    	
    	.ab{
    	left:0;
    	width:100%;
    	background:#ccccff;
    	}
    	
    	.header,.footer{height:94px;}
    	
    	.header{background:#ffcccc;text-align:right;border:1px solid #000000;margin:1em;}
    	
    	.middle{
    	position:relative;
    	background:#ffccff;
    	text-align:right;
    	min-height:100%;
    	margin:-10.2em 12em 0 12em;
    	border:1px solid #000000;border-top:none;
    	}
    	
    	.left,.right{width:9.8em;border:1px solid #000000;border-top:none;top:11em;bottom:0;}
    	
    	.left{
    	background:#ffcc99;
    	left:-11em;
    	}
    	
    	.right{
    	background:#cccc99;
    	right:-11em;
    	}
    	
    	.footer{
    	background:#cccccc;
    	margin:1em 1em 0 1em;
    	border:1px solid #000000;
    	}
    	
    	p{padding:.2em .5em .2em .5em;}
    	
    	.middle h1{padding:.2em .5em .2em .5em;border-top:245px solid #000000;}
    	.left h2,.right h2{padding:.2em .5em .2em .5em;border-top:112px solid #000000;}
    	
    	.x{height:1em;font-size:.5em;line-height:.5em;}
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	* html .middle{height:100%;}
    	* html .left,* html .right{height:60%;}
    	* html .footer,* html .header,* html .middle{position:relative;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    
    <div class="middle">
    <h1>content</h1>
    <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 class="left">
    <h2>content</h2>
    <p>left end</p>
    </div>
    <div class="right">
    <h2>content</h2>
    <p>right end</p>
    </div>
    </div>
    
    <div class="footer"><p>footer</p></div>
    <p class="x">&nbsp;</p>
    
    <!-- -->
    <div class="ab">
    <div class="header"><p>header</p>
    </div>
    </div>
    
    
    </body>
    </html>

  5. #30
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    until now i think the best way maybe is to put navigation first (not exagerately long) so the search engine can follow all of our site pages, and then put a "skip to content" link for screen readers etc. What do ya think?

  6. #31
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's what I've been doing ever since I started using CSS and semantic markup.

  7. #32
    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
    That's what I've been doing ever since I started using CSS and semantic markup.

    Hello

    Content first we want, with maybe the main links left right or on top in the content box ? with semantic clean simple A Tags with br after them

  8. #33
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which completely ignores proper source code order.

  9. #34
    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 completely ignores proper source code order.
    No, it's not, you are looking at names left right header footer , you can do pages without any names like my demo's, how do you know were they should be ? only by a name ? mine is in source order ! content first !
    I use the container I want at the top in source order how you can move away from it needs no menu terror, just a few links
    And like my little any container first demo, you can have it to your needs if you think a link set is more SEO then content ?

    PS I trash code ? were is everybody's else code ?

    Content first or any other container in the source order, no more no less ! no ID nor Class name what so ever, got you ! did i not
    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" />
    	<!--[if lt IE 7]><script src="../../../IE6-7/IE7_0_9/IE7_0_9/ie7-standard-p.js" type="text/javascript"></script><![endif]-->
    	<style type="text/css">
    	html,body{height:100%;}
    	
    	*{padding:0;margin:0;}
    	
    	body{
    	padding:0 12em;
    	background:#ffccff;
    	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;
    	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;
    	z-index:100;
    	}
    	</style>
    </head>
    <body>
    
    <div><h1>vvvv</h1></div>
    
    <div><p>xxxx</p></div>
    
    <ul><li>yyyyy</li></ul>
    
    <ul><li>zzzzz</li></ul>
    
    <div><p>wwwww</p></div>
    
    </body>
    </html>
    Last edited by all4nerds; Sep 2, 2007 at 19:40.

  10. #35
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You know what? I give up. I'm not going to engage in a debate where tempers flare and people start getting emotional and personal.

    Next time it happens, I'm dragging an Advisor in to clean things up.

  11. #36
    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
    Next time it happens, I'm dragging an Advisor in to clean things up.
    Hello

    Please Do clean up ? i only showed how you can do it , i stay out of any discussions why and why not, and I can have my own views on things or not ?
    Last edited by all4nerds; Sep 2, 2007 at 04:20.

  12. #37
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I'm going to side with Tommy on this, his voice should be the most authoritive of any here about accessibility.
    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.
    For a screen-reader user Content First is best, also it does have some effect in SEO. This post in the SEO or Accessibility Forums would turn up different answers perhaps...

  13. #38
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The SEO benefit would be minimal.

  14. #39
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I'm going to side with Tommy on this, his voice should be the most authoritive of any here about accessibility.
    Thanks for the vote of confidence, Mark.

    However, in this case I'm only conveying my personal preference. Accessibility-wise, I don't think it matters – at least not as long as you have a skip link.

    Studies and questionnaires show that there's approximately a 50/50 distribution when it comes to this preference, and that includes screen reader users.
    Birnam wood is come to Dunsinane

  15. #40
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    me too.

    If for some reason you choose to put navigation first, you can certainly use one. In fact I would say that it's absolutely critical that you do.

    I simply was saying that I can't think of any reason why you would benefit by having the navigation first in code. Whereas, content first has a couple accessibility related benefits. And the tab order of most browsers automatically delivers a more intuitive user interface when content comes first. Ergo, that's how I structure my HTML.
    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.


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
  •