Stack Overflow page design

What do the smart people at Stack Overflow put in their HTML pages?

header

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >

Strict html4 - this should make the page look good on all modern browsers. Strict can be a bit difficult to achieve - especially if your pulling in third party content

<title>Develop iPhone app without a Mac? - Stack Overflow</title>

For title, they put the most important bit first, and also include the site name at the end.

<link rel="stylesheet" href="/content/all.css?v=3706">

CSS - they put everything into one big file and specify a version. I'm not sure if the version number is auto-incremented or manual

   <link rel="shortcut icon" href="/favicon.ico">
   <link rel="apple-itouch-icon" href="/apple-touch-icon.png">

The favicon I expected - but I had to read about the Apple Touch icon.

   <link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml">

Open search is fairly popular these days. I'd expect this on any site with a search feature.

   <script type="text/javascript" src="/content/js/master.js?v=3567"></script>
   <script type="text/javascript">var imagePath = '/content/img/so/';</script>

All the JavaScript is in one file - just like the CSS. The image path variable is interesting. With this you could easily repoint your images to a CDN - but why not just include it in the master.js file itself?

   <link rel="alternate" type="application/atom+xml" title="RSS" href="/feeds/question/1041623">

About every page has an RSS feed associated with it these days. I'm not sure how useful feeds on item pages are, but maybe people want to know when questions they've asked are updated.

   <script src="/content/js/question.js?v=3591" type="text/javascript"></script>

More JavaScript. I assume master applied to the entire site, and this file only applies to question pages.

   <script type="text/javascript">
       var fkey = "4205033...3179b6";
       var isRegistered = true;
       
       $(function() {
           vote.init(1041623); 
           styleCode();
       });
   </script>

Since I'm logged in, I can vote. This minimal JavaScript tells the scripts on the page who I am (I think), and what the question number is.

body

<a href="/questions/1041623/develop-iphone-app-without-a-mac" class="question-hyperlink" rel="canonical">Develop iPhone app without a Mac?</a>

The use of rel="canonical" is interesting. This is good SEO practice.

<script src="/Content/Js/editor.js?v=3656" type="text/javascript"></script> <script src="/Content/Js/wmd.js?v=3297" type="text/javascript"></script>

<script type="text/javascript">

   $(function() { editorReady(1); });

</script>

load the WMD script when/where it's needed. This should help the page load speed

<img src="/posts/1041623/increment-view-count/bfb6" style="display:none" alt="">

this is an interesting way to do a page counter. It makes the write somewhat asynchronous, and prevents robots from incrementing the page view.

<script type="text/javascript"> document.write('<s'+'cript lang' + 'uage="jav' + 'ascript" src="http://ads.stackoverflow.com/a.aspx?ZoneID=' + 4 + '&Task=Get&IFR=False&PageID=52405&SiteID=' + 1 + '&Random=' + (new Date()).getTime() + '&Keywords=iphone,ruby,sinatra">'); document.write('</'+'scr'+'ipt>'); </script>

they run their own ad selection. A bit of code to help prevent ad block.

footer

               <a href="mailto:team@stackoverflow.com">contact us</a> |
               <a href="http://stackoverflow.uservoice.com">feedback always welcome</a>

user voice is cool, a real email address is surprising

svn revision: 3707

visible svn revision on each page

   <noscript>

Stack Overflow works best with JavaScript enabled

   </noscript>

no script warning

   <script type="text/javascript">
       document.write(unescape("%3Cscript src='http://www.google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
   </script>
   <script type="text/javascript">
       var pageTracker = _gat._getTracker("UA-5620270-1");
       pageTracker._trackPageview();
   </script>

Google analytics

   <script type="text/javascript">
   _qoptions = { qacct : "p-c1rF4kxgLUzNc" };
   </script>
   <script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
   <noscript>

<img src="" alt="">

   </noscript>

quant serve analytics