Step 3: Search Results Design - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

With our search box now designed, we need to turn our attention to how the results page (the actual information returned to the visitor in response to their search) will be laid out.

 

For many, the default results page styling will be absolutely fine, but for those wishing to completely tailor the look and feel of the data returned, the settings on this tab give that control to you.

 

You may want to change some of the text colors, for example, to better tie the results page content into your overall site design, and differentiate your site from those using lesser-quality solutions, via third-party plug-ins.

 

 

Instructions:

 

When you arrive at the Step 3 tab, you will see the following settings:

 

window_site_search_tab3

 

 

Once again, on the left side of the window you will see the settings available to you. On the right side, you will see a preview showing exactly what the search results will look like, using the current settings.

 

To better understand the settings that we are customizing, using these controls, examine the illustration below, it shows the following components of a set of search results:

 

1.

Search Results Heading Text

2.

Page Title Text

3.

Description Text

4.

URL Text

5.

Prev / Next navigation text

 

window_site_search_results

 

We can edit the settings for each of these text elements, as explained below:

 

 

Heading Settings:

 

Text (Heading Text) – In this text-box you can enter the text that you would like to appear at the very top of your search results. One really intuitive feature here is that by using a special piece of text: #Search# you can include the actual term that the visitor searched for. The actual search term used is substituted for this special piece of text.

 

To illustrate this point, below are a few examples of headings, and the resultant text displayed at the top of our results page.

 

In these examples, we will assume the search term is “Golf Holidays”.

 

Results for #Search# ... becomes... Results for Golf Holidays

 

Results of your search for #Search# ... becomes... Results of your search for Golf Holidays

 

#Search# search results ... becomes... Golf Holiday search results

 

and so on. This gives the user instant feedback on the search term they used, along with the results themselves, listed below the heading text.

 

 

Font (Heading Text Font) – Using this control you can choose a specific font in which you would like your heading text displayed. Click the button_site_search_font drop-down selector to make your selection.

 

 

Size – Specify a size for your heading text using this font-size drop-down. Click the button_site_search_font_size drop-down selector to make your choice from the available font sizes (6pt to 72pt).

 

 

Style – If you would like to make your heading text bold, italic or underlined simply click the appropriate button.

 

button_site_search_font_styles

 

 

Color (Heading Text Color) – Set the color of your heading text using this color control. Enter the name of the color in the text box, or click the button_application_image_browse button, to the right of the color text-box, to launch the Color Picker tool.

 

 

Alignment (Heading Text Alignment) – By clicking the appropriate radio button you may align your heading text to the left, center or right of your page content. Simply click on the preferred option and the selection will be applied.

 

 

Page Title Settings:

 

The Page Title settings refer to the titles of those pages listed in the returned search results (when a visitor searches your site). So if the visitor searches for the word “widgets” and that term is featured on a page in your site entitled “Products” then the page title “Products” will appear in the list of pages (along with that page’s description and URL, more on which below).

 

example_site_search_results_page_title

 

 

Font (Page Title Font) – From the options available, choose the font in which you would like your Page Title text displayed. Click the button_site_search_font drop-down selector to make your selection.

 

 

Size – Specify a size for your page heading text using this font-size drop-down. Click the button_site_search_font_sizedrop-down selector to make your choice from the available font sizes (6pt to 72pt).

 

 

Style – If you would like to make your page title text bold, italic or underlined simply click the appropriate button.

 

button_site_search_font_styles

 

 

Color (Page Title Text Color) – The color of your heading text can be set using this color control. Enter the name of the color in the text box, or click the button_application_image_browse button, to the right of the color text-box, to launch the Color Picker tool.

 

 

Hover (Page Title Text Color on ‘Hover’) – Because the Page Title text, in our list of search results, is actually clickable (and will take the visitor to the page in question, on being clicked) the text changes color when the visitor’s mouse hovers over it. This is to help the user identify this text as a link.

 

To specify the hover text color, just like the standard text color selection process, enter the name of the color in the text box, or click the button_application_image_browse button, to the right of the color text-box, to launch the Color Picker tool.

 

 

Alignment (Page Title Text Alignment) – By clicking the appropriate radio button you may align the page title text to the left, center or right of the results list. Simply click on the preferred option and the selection will be applied.

 

 

Page Description Text Settings:

 

As was illustrated earlier in this section, the search results feature the descriptions of all those pages returned in the results list. This description text is displayed immediately below the respective page title, in the search results list.

 

example_site_search_results_description

 

 

This description text is automatically grabbed from the page description entered in your Page Settings tab. This of course assumes you entered a page description – if you did not enter a description, none will appear - so it pays to take a moment to enter some relative descriptive text for your pages when you have time.

 

Font (Page Description Font) – From the options available, choose the font in which you would like your Page Description text displayed. Click the button_site_search_font drop-down selector to make your selection.

 

 

Size – Specify a size for your page heading text using this font-size drop-down. Click the button_site_search_font_sizedrop-down selector to make your choice from the available font sizes (6pt to 72pt).

 

 

Style – If you would like to make your page description text bold, italic or underlined simply click the appropriate button.

 

button_site_search_font_styles

 

 

Color (Page Description Text Color) – Your description text color can be set using this color control. Enter the name of the color in the text box, or click the button_application_image_browse button, to the right of the color text-box, to launch the Color Picker tool.

 

 

Alignment (Page Description Text Alignment) – To align the page description text to the left, center or right of the results list, simply click on the preferred option and the text will be aligned accordingly.

 

 

URL Text Settings:

 

The URL for the pages listed in the search results is displayed below the Title and Description text, as shown below:

 

example_site_search_results_url

 

We can change the appearance of this text using the controls described below.

 

 

Font (URL Font) – From the options available, choose the font in which you would like your URL text displayed. Click the button_site_search_font drop-down selector to make your selection.

 

 

Size – Specify a size for your URL text using this font-size drop-down. Click the button_site_search_font_size drop-down selector to make your choice from the available font sizes (6pt to 72pt).

 

 

Style – If you would like to make your URL text bold, italic or underlined simply click the appropriate button.

 

button_site_search_font_styles

 

 

Color (URL Text Color) – Your URL text color can be set using this color control. Enter the name of the color in the text box, or click the button_application_image_browse button, to the right of the color text-box, to launch the Color Picker tool.

 

 

Alignment (URL Alignment) – To align the URL text to the left, center or right of the results list, simply click on the preferred option and the text will be aligned accordingly.

 

 

Search Result Page Settings:

 

The search results page will list all pages upon which a given search term is found. This may end up being quite a lot of results (depending on how general the search term was).

 

To make things more manageable to the user, the option in this section of the screen allows us to set up some pagination preferences.

 

Pagination options allow us to spread out a potentially long list of search results over several pages. To do this, all we need to do is set up some parameters for the maximum results-per-page, and then to specify how we want the multiple-page navigation to appear.

 

Most search engines operate a similar system of spreading results over multiple pages:

 

Google:

example_pagination_google

 

Yahoo:

example_pagination_yahoo

 

MSN:

example_pagination_msn

 

 

We can set up our pagination preferences using the settings below.

 

Maximum results per page – Using this control we can set the maximum number of results that we would like displaying on a single page. Once this limit is reached, the search results will break onto a new page, navigated to using simple navigation controls (see below).

 

 

<<Prev ¦Next>> (navigation control labels) – In order to access subsequent results pages (where your maximum results-per-page limit is reached) XSitePro’s site search results page automatically inserts simple textual navigation links at the top and bottom of your search results list. This is a standard navigation method used by all major search engines.

 

What’s neat here is that you can actually customize the text labels themselves. By default these values are ‘Prev’ and ‘Next’ but there is nothing to stop you from using any of your own navigation text, including:

 

Back / Forward

Last / Next

Return / More Results

Previous / Show Next 10

And so on...

 

Setting your own labels for these navigational controls is easy. Simply over-type the default text labels with your own desired text.

 

You will notice that between the two labels is a third box. This is the ‘divider’ and can be any alphanumeric character you want. It separates the labels on your Web page, so should be something simple, so that it helps the user distinguish between the navigation links.

 

 

Font (Navigation label text font) – You can choose the font in which you would like your Navigation label text displayed simply by clicking the button_site_search_font drop-down selector, and making a selection from the list of fonts that appear.

 

 

Size – Specify a size for your Navigation label text using this font-size drop-down. Click the button_site_search_font_size drop-down selector to make your choice from the available font sizes (6pt to 72pt).

 

 

Style – If you would like to make your Navigation label text bold, italic or underlined simply click the appropriate button.

 

button_site_search_font_styles

 

 

Tip: It’s a good idea to differentiate your navigation text (both in terms of style and color, below) from the main search results text. This ensures that the navigation links stand out clearly amongst all of the other information in the search results page. This makes it easier for the site visitor to navigate multiple pages of search results if necessary.

 

 

Color (URL Text Color) – Your Navigation label text color may be changed using this color control. Enter the name of the color in the text box, or click the button_application_image_browse button, to the right of the color text-box, to launch the Color Picker tool.

 

 

Hover (Navigation label text Color, on ‘Hover’) – The Navigation label text is a link that will take the visitor to additional search results pages (where the number of found results warrants) and as such, this link text can be set to change when the visitor’s mouse ‘hovers’ over it. This helps visitors identify this navigation link as a ‘clickable’ object on the page.

 

 

Alignment (URL Alignment) – To align the Navigation label text to the left, center or right of the results list, simply click on the preferred option and the text will be aligned accordingly.

 

 

Now that we have completed both our Search Box and Results Page modifications, we can proceed to the final step in the process. To move onto the final tab, click the button_application_next button.

Home  Previous  Next