Stack Overflow page design - Revision history

Egge: /* header */

2009-06-25T11:26:02Z

header

← Older revision		Revision as of 11:26, 25 June 2009
Line 28:		Line 28:
	<geshi lang="html">		<geshi lang="html">
	<link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml">		<link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml">
	</~~code~~>		</geshi>
	* Open search is fairly popular these days. I'd expect this on any site with a search feature.		* Open search is fairly popular these days. I'd expect this on any site with a search feature.

Line 58:		Line 58:
	</script>		</script>
	</geshi>		</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.		* 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 ===		=== body ===

Egge at 04:51, 25 June 2009

2009-06-25T04:51:27Z

← Older revision		Revision as of 04:51, 25 June 2009
Line 129:		Line 129:
	</geshi>		</geshi>
	* quant serve analytics		* quant serve analytics

			[[Category:html]]

Egge at 04:46, 25 June 2009

2009-06-25T04:46:50Z

Show changes

Egge at 04:42, 25 June 2009

2009-06-25T04:42:00Z

@@ Line 77: / Line 77: @@
 <code>
 </code>
 <code>
 </code>

Egge: New page: == What do the smart people at Stack Overflow put in their HTML pages? == === header === `...`


2009-06-25T03:05:56Z
New page: == What do the smart people at Stack Overflow put in their HTML pages? ==  === header === <code> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >...
New page
== What do the smart people at Stack Overflow put in their HTML pages? ==



=== header ===

<code>

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

</code>



* 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



<code>

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

</code>



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



<code>

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

</code>



* 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



<code>

    <link rel="shortcut icon" href="/favicon.ico">

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

</code>

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



<code>

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

</code>

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



<code>

    <script type="text/javascript" src="/content/js/master.js?v=3567"></script>

    <script type="text/javascript">var imagePath = '/content/img/so/';</script>

</code>

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



<code>

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

</code>

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



<code>    

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

</code>

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



<code>

    <script type="text/javascript">

        var fkey = "4205033...3179b6";

        var isRegistered = true;

        

        $(function() {

            vote.init(1041623); 

            styleCode();

        });

    </script>

</code>

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

<code>

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

</code>

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



<code>

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

</code>

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



<code>



</code>



<code>



</code>

Stack Overflow page design - Revision history

Egge: /* header */

Egge at 04:51, 25 June 2009

Egge at 04:46, 25 June 2009

Egge at 04:42, 25 June 2009

Egge: New page: == What do the smart people at Stack Overflow put in their HTML pages? == === header === ...

Egge: New page: == What do the smart people at Stack Overflow put in their HTML pages? == === header === `...`