search-results-example

Jump to: navigation, search

Contents

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

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

Proposal

See Also

search-results-example was last modified: Saturday, June 23rd, 2007

Views