Stack Overflow page design

From EggeWiki
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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

header

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

  • 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

<geshi lang="html"> <title>Develop iPhone app without a Mac? - Stack Overflow</title> </geshi>

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

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

  • 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

<geshi lang="html"> 

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

</geshi>

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

<geshi lang="html"> 

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

</geshi>

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

<geshi lang="html"> 

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

</geshi>

  • 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?

<geshi lang="html"> 

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

</geshi>

  • 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.

<geshi lang="html"> 

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

</geshi>

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

<geshi lang="html"> 

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

</geshi>

  • 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

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

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

<geshi lang="html"> <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> </geshi>

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

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

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

<geshi lang="html"> <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> </geshi>

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

footer

<geshi lang="html"> 

               <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

<geshi lang="html">

svn revision: 3707

</geshi>

  • visible svn revision on each page

<geshi lang="html"> 

   <noscript>
Stack Overflow works best with JavaScript enabled
   </noscript>

</geshi>

  • no script warning

<geshi lang="html"> 

   <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>

</geshi>

  • Google analytics

<geshi lang="html"> 

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

</geshi>

  • quant serve analytics
Retrieved from "https://www.theeggeadventure.com/wikimedia/wikimedia/index.php?title=Stack_Overflow_page_design&oldid=2102"