search-results-example

Search Results - Examples

This page captures common patterns in the return of search results.

The Problem

Many web sites, particularly search engines, return a partial "window" in a much larger dataset of results. We'd like to figure out the optimal way to represent that. Note that this is also the goal of the OpenSearch Response specification, but at this point they don't seem to have specified HTML encodings. In fact, such an encoding is a likely outcome of this effort.

Participants

• Dr. Ernie
• Dimitri Glazkov

Real-World Examples

Links to public web pages, either popular or insightful

Pagination Patterns

Use the [ http://www.w3.org/TR/REC-html40/types.html#type-links HTML] <link rel="prev" /> and <link rel="next" /> for navigation.

Ruby on Rails

The default list view is a table of size 10:

Header

 <table>
   <tr>
     <th>-ent</th>...

Body

  <tr class="vcard"> 
    <td class="-ent">2</td>

[only after I modified it]

Footer

  <a href="/users/list?page=2">Next page</a> 

OpenSearch

 <opensearch:searchTerms>New York City History</opensearch:searchTerms>
 <opensearch:totalResults>4230000</opensearch:totalResults>
 <opensearch:startIndex>21</opensearch:startIndex>
 <opensearch:itemsPerPage>10</opensearch:itemsPerPage>

rel="alternate" – the same page of search results, in a alternate format

Example: <link rel="alternate" type="text/html" href="http://example.com/New+York+City+History?pw=3&format=html"/>

rel="start" – the first page of search results

Note: This value is pending IETF registration. Example: <link rel="start" type="application/rss+xml" href="http://example.com/New+York+City+History?pw=1&format=rss"/>

rel="previous" – the previous page of search results

Note: This value is pending IETF registration. Example: <link rel="previous" type="application/rss+xml" href="http://example.com/New+York+City+History?pw=2&format=rss"/>

rel="self" – this page of search results

Example: <link rel="self" type="application/rss+xml" href="http://example.com/New+York+City+History?pw=3&format=rss"/>

rel="next" – the next page of search results

Note: This value is pending IETF registration. Example: <link rel="next" type="application/rss+xml" href="http://example.com/New+York+City+History?pw=4&format=rss"/>

rel="end" – the last page of search results

Note: This value is pending IETF registration. Example: <link rel="end" type="application/rss+xml" href="http://example.com/New+York+City+History?pw=42299&format=rss"/>

rel="description" – the location of the OpenSearch Description document

Note: This value is pending IETF registration. Example: <link rel="description" type="application/opensearchdescription+xml" href="http://example.com/opensearchdescription.xml"/>

Google

Header:

<font size=-1 color=>Results <b>1</b> - <b>10</b> of about <b>398,000</b> for <b><b>microformats</b></b>.
(<b>0.09</b> seconds) </font>

Item:

<!--a--><div><p class=g><!--m--><a href="http://microformats.org/"><b>microformats</b></a><br>
<font size=-1>Tantek reports about the <b>microformats</b> lab at FOOCamp, with Dave McClure <b>...</b><br>
On Friday night, Kevin and I did an impromptu talk on <b>microformats</b> at BarCamp. <b>...</b>
<br><font color=#008000><b>microformats</b>.org/ -  30k -  Oct 15, 2005 - </font><nobr>
<a class=fl href="http://66.102.7.104/search?q=cache:dKjN6x57zdYJ:microformats.org/+microformats&hl=en">Cached</a>
- <a class=fl href="/search?hl=en&lr=&q=related:microformats.org/">Similar pages</a></nobr></font><!--n-->

Footer:

<table border=0 cellpadding=0 width=1% cellspacing=0 align=center><tr align=center valign=top>
<td valign=bottom nowrap>
<font size=-1>Result Page: </font>
<td nowrap><img src=/nav_first.gif width=18 height=26 alt=""><br>
<td nowrap><img src=/nav_current.gif width=16 height=26 alt=""><br><span class=i>1</span>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=10&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0><br>2</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=20&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0><br>3</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=30&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0><br>4</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=40&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0><br>5</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=50&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0><br>6</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=60&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0><br>7</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=70&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0><br>8</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=80&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0><br>9</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=90&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0><br>10</a>
<td nowrap nowrap><a href=/search?q=microformats&hl=en&lr=&start=10&sa=N>
<img src=/nav_next.gif width=100 height=26 alt="" border=0><br><span class=b>Next</span></a></table>

[Example #2 (url)]

pre
 escaped <tags>

Existing Practices

• Summary of common patterns discovered
• Other attempts to solve The Problem

Proposal

• Early drafts
• Link to related pages as they become available
  • -brainstorming
  • - proposal
  • -microformat

See Also

• forms-examples
• rest-examples
• Other microformats
• Normative references for tags used