| This 32 message thread spans 2 pages: 32 (  2 ) > > || |
|SOC - Source Ordered Content|
What is it? How does it work? What benefits are there?
SOC - Source Ordered Content - A phrase that we don't see used to frequently around here in the SEP Forum. You are more apt to find discussion about SOC in the CSS Forums. But, in this instance, it definitely belongs in the SEP Forum. Now, why is that? :)
- Are you familiar with SOC?
- Do you utilize SOC?
- What are the benefits of using SOC?
- What are the drawbacks of using SOC?
- Does SOC affect how the page is interpreted by bots?
- What are the primary reasons for using SOC?
For many, SOC is a pipe dream. The designs they are working with may not allow them the flexibility to work within an SOC environment.
For some, it is fully understanding and working with the concepts of Source Ordered Content and "how to make it happen".
For others, they just don't feel that it is worth the changes required to move into an SOC environment.
What's your take on Source Ordered Content?
I think keeping the source as simple as possible is just as, if not more important.
The other problem is the crossover with accessibility. I can't recall the exact study, but I believe I did read of a preference for 'skip to content' as opposed to 'skip to navigation', which would make putting navigational links first in the source an obvious choice. But that's probably a debate in itself!
I'm going to add a few more topics for reference to add a bit more fuel to the "smoldering fire". ;)
Developing Effective META Description Elements
The importance of this element has never diminished!
Inverted Pyramid Writing
What is it and how does it influence a site's relevance?
How Do Search Engine Robots Work?
Questions and Answers
SOC can also be classified as "Front-Loading" from HTML and Accessibility/Usability perspectives. :)
I've seen nothing but great results with source ordered content. The first good thing is never seeing a stupid set of menu labels being shown as a snippet in the search results! The next good thing is seeing a lower bounce rate from slow page loads - usable and informative content just bombs into the user's window almost instantly.
And a third good thing, it certainly seems like SOC URLs tend to rank well. So well that I would not consider any kind of split run test - why mess with success?
Downside - there's a downside? Can't think of one.
Still can't think of a downside - but I did think of another plus. With source ordered content you can get a nicer first screen on a small screen browser, such as a mobile phone or handheld. This advantage may fade away in the coming era of full-fledged browser phones, such as the iPhone, but for a few years now, it's been an additional advantage.
The first site where I used SOC had the traditional "inverted L" structure, flush left, and it was so easy to use aboulte positioning and place the content at the top of the <body>. Next was a centered layout, and it took almost no change to do the same thing. The client in this case had used all graphic images - and their marketing dept would not budge. But they finally gave me the concession of using some text content below the fold. I just used SOC on that content, and the rest is happy history.
Takes me back to the pre-CSS days, when (with a table format) you'd make the first <td> a blank cell, the 2nd your important content, and tuck the left navbar into the first TD of the second row.
Is SOC a term known well in the web design community?
For example, I'm thinking of reskinning a web site using talent from one of the rentacoder like sites and would like a SOC design - would most potential bidders for the work understand?
SOC all the way - and I have rankings to prove it :)
(Ok, it's not all SOC but I firmly believe that it's implementation considerably helped my new site)
|SOC can also be classified as "Front-Loading" from HTML |
Well, what's SOC? How "Front-Loading" from HTML is different to standard HTML loading?
|Well, what's SOC? How "Front-Loading" from HTML is different to standard HTML loading? |
Place content as close to the beginning of your file as possible. Navigation and other "fluff" comes later.
Then use CSS to display navigation and evertyhing else that pleases your designer where it "belongs".
I always try to get along with some "floats" and without absolute positioning, because they will break e.g. in Google Previews.
Thanks, nerd. Although I just learned this was the name -- SOC, I'm using this approach to build SEO-ed pages for years! :)
Is SOC a term known well in the web design community?
No it is not known. If you explain it in detail they might understand but will not understand. They will look at you like you just asked them to do it the hard way for no reason. Be very careful with cheap labor they will always say they can do it regardless if they understand you or not. They tend to just nod their head and go back and do it the way they always do. They will pick up on the general idea and skip anything they don't understand or sometimes they won't do it because they think it is stupid. It is very hard to convince these type of people to do something non standard. This is very non standard.
SOC is great but the vast majority of the time you will have an uphill battle trying to convince a developer to do it. Web designers don't get SEO. Most of the time they are looking for the fastest way to get something done.
One of the tasks of an SEO is to spend a lot of time trying to convince people to do non standard stuff. When I say non standard I mean what they are used to. Most of the time your lucky to get some sort of compromise.
|Is SOC a term known well in the web design community? |
For some it is, for others it may be a new Initialism. It has also been referred to as Source Ordered HTML, AP (Absolute Positioning), etc.
|What are the benefits of using SOC? |
One of the top benefits I've realized from using SOC is refined snippet generation by the SEs, particularly Google. Yahoo!, Live and Ask also display similar behavior but they tend to utilize a piece of your meta description and then a piece of that first content after the <body> element.
There are a few tools online that allow you to see what is left on your page after all the markup is stripped, like Brett's Search Engine Spider Simulator. What you see after all the html is stripped is what you are working with. Now tell me, what do you have for those first 200-500 characters of content?
For many, they will most likely have a bunch of navigation content. For some, that is all they may have for the first 1,000 lines of code. From my perspective, that is not optimal based on how the search engine spiders, crawlers, robots work. I've seen priority given to that content that resides directly after the <body> element. And, it only makes natural sense to do it that way. Of course the bot will find your content starting all the way down there at line 3,000 in your HTML code. But, by the time it gets there, how diluted has the meaning of the page become?
Thanks ogletree, that's not what I hoped to hear, but its good to know.
This emphasises the need to check out past work when outsourcing.
theboyduck anytime you use a service like that you are going to have to spend a lot of time and effort to get quality control. Always split it into phases so that you can see how it is progressing. Never just let them finish the whole thing without you checking for quality. I have had them return some real bad stuff and at that point they think they are done. Any money you save using that kind of talent you spend in your time trying to get it done right. You have to baby sit every little step to get it done right and even then sometime you have to start over again with somebody new.
I love SOC, and when I've done it, I've had pretty good success. But I can't seem to do it quickly, and that's a major issue (specially trying to get everything looking and operating the same in IE, Firefox and Safari)
|But I can't seem to do it quickly, and that's a major issue. |
This is where a good WYSIWYG Editor comes into play. Believe it or not, I use FP for all final design manipulation. It allows me to work in a drag and drop interface using layers which can be moved easily on the canvas. As the layers move, the inline CSS that FP generates also changes to reflect the new position on the canvas. Its all cross browser compatible as you are dealing with CSS and absolutes.
I found one of the easiest ways to help someone understand SOC is to have them build a page in FP or DW or whatever WYSIWYG they are using. I believe most allow you the ability to work with layers and absolute positioning.
Once you build the page, usually 4 containing elements; center, left, top, right, usually in that order, you can then grab those elements and start sizing, dragging, styling, etc. When you are finished, switch to HTML view and rename the classes/IDs that were generated to be more in tune with your naming conventions. Now, take the inline CSS and move it to an external file. That becomes the working template for the rest of the site. Those 4 elements become includes which are the foundation of the site. Think of them as APUs or Absolutely Positioned Units. Those Units can be positioned in any order in the HTML. Each Unit is being absolutely positioned in the viewport using CSS top, right, bottom or left coordinates.
For example, and I'm going to do this in order, your center element (the primary content) is absolutely positioned 120px from the top and 210px from the left. Note: My footer elements are usually contained within the center element. They are the last include in that primary content div.
Then we have either the left or top element depending on the link architecture, usually the left element. It is absolutely positioned 120px from the top and 10px from the left.
Next comes the top element and it is absolutely positioned 10px from the top and 10px from the left.
And finally the right element which is absolutely positioned 120px from the top and foo from the left. Depends on your target resolution. All 4 elements will have widths assigned to them. Some may have heights but I prefer to let the vertical flow freely.
So here we have these four APUs that we can easily size, resize, reposition, basically do anything we want with them. I like SOC and have been using it for years. Many have looked at that source code with a glazed look in their eyes wondering "how the hell did they do that?" The code usually looks like this...
It doesn't get any simpler than that and that is what really counts in SOC, simplicity. ;)
I should mention that my starting canvas is a new page with a full size background image of the design. I'm using my WYSIWYG drawing and editing tools to develop the APUs which makes for a very streamlined design environment. I'll give my <divs> a border of 1px so I can see what is going on and take it from there.
I'm very mad at all of you for teaching me this new concept. Now I have so much more work to do ;)
pageoneresults, I have had issues in the past using AP and now opt for stacked/floated layouts instead which would not allow for SOC.
Although I have not played around with AP for a while the main problem I remember having were overlapping content, especially if designing fluid layouts, and footers, which I notice your example layout did not have.
Have you encountered any such problems with AP layouts and can you offer any handy tips for overcoming these?
I have no affiliation, but if you'd like a good overview and some examples of SOC, I absolutely recommend the book "Transcending CSS" by Andy Clarke.
EDIT: I've been coding sites for over 10 years, the last 2 or 3 of those using full CSS-based layouts to the extent of my knowledge. This book really introduced me to a new way of creating sites, and it just really makes sense.
A word of warning, I did find a couple of mistakes missed by the editors of the book, but if you have any experience with CSS you'll be able to work around them easily.
I've written my last 2 websites using his approach and I am very satisfied with the results. Total cross-browser compatibility, and great control of SOC. My pages also show up perfectly in rendering apps like Google Analytics Site Overlay, etc.
Plus, he covers in detail ways to not only SOC your site, but also semantics and naming containers. For example using "content_sub" instead of "sidebar" and using "branding" instead of "header" simply for the reason you never really know where you want that content to appear on your page. CSS Zen Garden is a prime example of his approach, naming containers based on what they are, not where they should appear (except they do use "header" ;)
Not only that, but it feels good to be laying the groundwork for a site that is accessible to screen readers and the like.
Hope that helps!
[edited by: trnelson at 4:05 pm (utc) on Sep. 4, 2007]
|I have had issues in the past using AP and now opt for stacked/floated layouts which would not allow for SOC. |
As I mentioned in the beginning, some are going to be restricted based on the complexity of their design.
|Although I have not played around with AP for a while the main problem I remember having were overlapping content, especially if designing fluid layouts here... |
Fluid layouts are usually the more difficult ones to work with in an AP environment. SuzyUK, our resident CSS Guru has some nice fluid AP layouts.
Tanfa CSS Layouts Index
|And footers, which I notice your example layout did not have. |
In the beginning, I realized that trying to position a footer at the bottom of the page was a problem based on my limited knowledge of CSS then, and even now. So, I just changed design strategies and started including the footer within the main content div, that solved all the problems based on my design architectures.
Agreed that SOC maybe good for SEO but from an accessibility point of view the majority of screen reader users EXPECT navigation to be presented before the content.
There is a very detailed study at
[usability.com.au...] with some startling conclusions!
Come to think of it I haven't seen any data on the benefits of SOC for SEO either, although my own experience points to having some benefits.
Have you ever checked out Inman positioning for footers of AP sites? It's a bit of a hassle to grasp the concept and technically it could be called a "hack" but it works great. The technique is suggested in Transcending CSS for absolute positioning.
Not ideal but works in my browsers of preference.
Yannis, that's an excellent study, very informative. If you get a chance, watch this video by Victor Tsaran from Yahoo!
Introduction to Screen Readers
A Yahoo UI Blog Video
Now, on to some key points in the above study titled Source Order, Skip links and Structural labels...
|This paper proposes that when it comes to accessibility, the quality of the actual code on a web page is much more important than the ordering of the page content. Meaningful and appropriately marked up headings, descriptive link text and the clear identification of different levels of navigation, allow screen reader users to most effectively use their technologies when visiting a website. |
Emphasis mine. Put the two together and I think you've got a winning combination. ;)
|With some startling conclusions! |
The startling conclusion I came to is that most Screen Readers are expecting to see an antiquated tabled layout. They came to that conclusion too but not in the same words I used. ;)
|The 18 screen reader and 5 text browser respondents all appear to have very similar expectations about how the content of web pages will be ordered. All 23 participants believe that when they visit a site, the main site navigation will be presented before the informational content of the page. |
And then this...
|Furthermore, it appears that 20 of the participants expect both the main site and the local navigation to be presented before the content. |
Also, during the study you have comments like this which contradict other comments. :)
|Interestingly, during these follow up discussions, four screen reader users volunteered the opinion that although navigation is usually presented before the page content, they felt that they would probably find that pages which present the content first easier to use. |
One of the survey questions and one that has major importance in page structure.
|Did you find the headings identifying the different levels of navigation on the sites useful? |
I really like this part. If you are following the core guidelines for accessibility, source ordering should not present any major issues.
|It is worth noting however, most of these screen reader shortcuts, such as obtaining lists of links or headings depend to a large extent on the use of well structured code, which conforms to the Web Content Accessibility Guidelines. |
And here we have another contradictory comment, what gives?
|It is probably desirable however, to present the content of the page before extraneous information, such as advertisements and related links, as well as the page footer. |
Oh, and here is the real "Startling Conclusion"...
|Finally, the importance of adhering to the Web Content Accessibility Guidelines cannot be overstated. The use of semantically correct and valid code, meaningful and appropriately marked up headings and descriptive link text will enable screen reader users to make the most effective use of their technologies when visiting a website. |
And, from the task based survey, all respondents said yes to this question.
|Were you able to complete the tasks on both sites? |
|Have you ever checked out Inman positioning for footers of AP sites? |
I haven't. But, I've seen other implementations which I'm sure are similar and I still don't fully understand them. My CSS knowledge is somewhat limited in scope and when it comes to some of the "hardcore" stuff, I tend to back off and do something different. Or, I find someone at WebmasterWorld with the knowledge to assist. ;)
I believe there is another benefit to this design approach.
If you are an AdSense publisher, I think you'll see better targeting of ads to your content. For new pages, it takes a little less time for AdSense to figure out what its all about.
Seems that way to me, looking at both SOC and non-SOC pages I have.
Actually I can agree with that, or at least that's what I'm seeing. I could be wrong, but I did find that my AdSense relevance was spot-on immediately, where before it took a few days to really catch on. Could be a lack of experience though. I really only have a few sites with AdSense and haven't done any real "testing".
I've been coding with this basic semantic structure and I've found it best for my needs. It takes into account some solid semantics and usability:
EDIT: Posting stripped out some spaces that make the following a bit hard to understand, added in dashes.
-- Title (h1)
-- Mission/Position Statement if Necessary (p)
Primary Navigation (div)
-- Main Navigation (ul)
-- Sub Navigation (ul)
-- Main Content (most important) (div)
-- Sub Content (somewhat important) (div)
-- Supplementary Content (least importance) (div)
Secondary Navigation (div)
-- Main Navigation (ul)
-- Sub Navigation (ul)
Site Information (div)
-- Copyright (p)
Other Miscellaneous Items (no container)
-- Ads (divs)
-- Floating/Placed Images Not Relevant to Content (design elements)
-- Tracking Code and Scripts Which Can Work Down Here (scripts, etc.)
Maybe that will be of some use to someone.
The burden of accessibilty is being placed on the wrong entity. It shouldn't be the job of the webmaster but rather of the protocol, in an ideal world. A well defined protocol would allow you to use markup, done easily, to identify navigation, branding, footer, sidebar etc... that the browser understands natively. Then additional features to move things around and allow artistic creativity should be afterthoughts. At least that's my take.
Question to whoever said they put the footer at the bottom of the content section. How do you make it the full width of the layout? And for dynamic content, if the sidebar is longer than the content section, won't the footer appear too high on the page, if you understand my quesiton?
I've been using some of the free WordPress themes lately, and I'm glad to revisit this topic in assessing the SEO implications of a particular theme.
I see that some are in keeping with SOC, but others are not. I'm going to keep this in mind in analyzing potential themes.
Kind of late to this party, but I can echo the comments of the previous poster.
I was an early adopter of SOC and a late adopter of CMS and looking for at least one more TLA for this sentence (TLA = three-letter acronym of course).
Anyway, I like to use Wordpress, Drupal and so forth now because it makes it so fast to get a site up and going (in theory anyway), but I've had trouble with finding good SOC templates. I've finally built one I like for WP. Still haven't gotten around to it for Drupal and another CMS I use.
I've found that this definitely hurts with the search engines. When I was building sites from scratch, using SOC, the snippets in the search engines were almost always excellent. Now I find that it is hit or miss and sometimes it misses by a huge amount.
A question: does anyone bother to cloak so that the skip navigation is not served up to the big three SEs?
That should be "good cloaking" because it would normally be hidden for anyone using a standard browser, so it's actually cloaking in order to give Google more precisely what a typical human user gets.
Any point at all to that? I wouldn't have thought so but I have had a site where the SE snippet consisted of the skip navigation so that every page said
My great page
Jump to site navigation
I should say that this was back in the twentieth century (remember that?) when G was not nearly so good at parsing pages. Has anyone seen that with a recent site?
| This 32 message thread spans 2 pages: 32 (  2 ) > > |