Soul Searching

Website navigation is a little limiting, once the website starts to build up lots and lots of varied content. This is where searching a site starts to make more sense.

But this is a very tricky area to get right.

  • From a designer’s perspective it is all about where it is and …
  • from the site owner’s perspective it is about how well it works

For the website visitor we actually need to be sensitive to both. Search results should useful and the ‘Search’ box should be accessible on different devices.

Usually the ‘Search’ box is sidelined – for installation and setup ‘efficiency’. Which is fine for a desktop view of the site – but with responsive websites, this useful feature can then get lost to the bottom of the page. Also by default the ‘Search’ box will only return titles and content of posts – which is a bit weak if you have useful content in other areas of the website.

This website has content spread over several categories and custom post-types, some of which should be found – and some which would be confusing if found. I also wanted the ‘Search’ box to be positioned in different parts of the page for desktop visitors and then re-positioned for those who visit the site using mobile devices.

To solve these two challenges I needed to do a bit of development work. The search code was customised to increase it’s scope and then tailored to remove any ‘white noise’. Then through the use of CSS and ‘media queries’ the ‘Search’ box was then manipulated, styled and displayed on different parts of the page. Of these two challenges the later was the easiest and the former needed some good old fashioned coding.

Once the coding is in place – the results can then only be appreciated once the site has built up plenty of varied content.

If giving your web visitor’s useful search results – is something you and your website needs – then give me a call.

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>