January 12, 2011

Friendlier “Search SF State” pages

In my opinion, the SFSU Google search result pages could benefit from a few layout adjustments.
In the interest of a motivating some attention to this critical area, I created a small stylesheet patch. To test, add the stylesheet to your browser then visit SFSU Google.


Current SFSU Google page

SF State search - Original

issues

  • Table borders around empty elements.
  • Page title links could be more visible.
  • Spacing between items needs to be increased.
  • Search form at top of page appears cluttered.

Google result page

Google Chrome

SFSU Google Revised

SF State search - Revised

Changes

  • Emphasis on search box at top of page.
  • Increased margins between items.
  • Removed instructions and messages that added to visual clutter.


CSS patch

googleglobal-patch.css
/*-- o CSS-fix: SERP --*/

#main hr.z {display:none;}
#main p.g {margin:1.625em 0 0 0;padding:0;}
#main span.l {font-weight:normal;font-size:17px;}
#main span.s {display:none;}

#main div.n {margin:3em 0 0 0;width:563px;}
#main div.n table td {display:inline;padding:0;margin:0;}

#main table td {border-width:0!important;}
#main table td a {font-size:12px;}
#main table td font:first-child {display:none;}

#main table td.s {font-size:12px;color:#666;display:inline!important;}
#main table td.s b:first-child {display:none;}
#main table td.s font {font-size:13px;}

#main table form {display:none!important;}
#main table form:first-child {display:table-cell!important;}
#main table form #googlesearch {margin-top:.825em;font-size:14px;padding:4px!important;}

#main table td form table td table td font {display:inline!important;}

#main form table tbody table tbody td #googlesearch {width:375px;}
#main form table tbody table tbody td font input {margin:0;padding:0;}

/*-- x CSS-fix: SERP --*/

Disqus for Passing the Word