I have code reference site ( QueryPosts.com ) that is largely search-centric and has prominent search form in sticky top bar.

It has been suggested (and I considered it myself before) that search form should be auto-focused on load. This seems to be common for search engines (Google and company) but I think this is uncommon outside of them.

As I see it, pro:

  • faster workflow if visitor came to site to search (which is likely for repeated visits in my case)


  • unexpected focus after load, I am not sure if it has (m)any negative implications - keyboard navigation in browser comes to mind.
  • some browsers blank placeholder text on focus and visitor has no chance to see and read it (there is no place to have it as label in terse location like sticky bar)

Does automatic search focus on load makes sense (outside of search engines) for site that is largely (but not completely) search-centric?

  • 1
    Speaking from own preference, I think you should always auto focus on the search field. I can even from the top of my head mention IMDB which doesn't use auto focus on their search field, and that has always annoyed me... Nov 5, 2012 at 15:18
  • 1
    @AndroidHustle always feels overly radical to me. For example every blog out there has a search form, but it is hardly main/important feature for every single visitor.
    – Rarst
    Nov 5, 2012 at 15:24
  • Over radical or not, that the search input isn't focused on IMDB has always annoyed me. I'm not speaking in general, I'm talking about IMDB because when I use it I use it for looking up a specific film/act(or)(ress) I already know the name off. Of course it doesn't annoy me on every single site this strategy isn't utilized, that would make me mental. It all depends on what the usage pattern of the site you create looks like, what is the most common initial action a visitor to your site does. Nov 5, 2012 at 15:30
  • 1
    But as always, different strokes for different folks, point 5. Nov 5, 2012 at 15:30
  • @AndroidHustle exactly point of my question - how to make decision if such behavior is wanted from site (like IMDB for you) or unwanted (random blog out there).
    – Rarst
    Nov 5, 2012 at 15:33

2 Answers 2


Auto-focus makes sense as its the primary action to be performed, but its not a requisite.

An alternative to auto-focus, is to use other keyboard shortcuts, such as Tab to,

  • first Tab auto-focus on the search box
  • second Tab focus on first content box (hot) Enter to follow hyperlink
  • third Tab focus on second content box (functions) Enter to follow hyperlink
  • etc...

Looking more closely at auto-focus on the search box, you can still couple that with Tab functionality as mentioned above as a nicety however with regards to your concern I would consider using a placeholder that "dims" (reduces its opacity) on focus instead of entirely removing it on focus but when a user makes his/her first "keypress" (i.e. keydown) the placeholder is removed.

But how else can you tackle this issue?

Here are some alternative layouts using media queries as well as fixed placed labels that won't interfere with auto-focus cursors.

enter image description here


enter image description here

However I would personally use a placeholder text with auto-focus, because BOTH can be used at the same time and that which degrade gracefully with the proper use of JavaScript/jQuery. Either something you code yourself or via the many libraries that already exist as a result. In conjunction with your media queries and fallback <noscript> CSS, you really can't go wrong while maintaining efficient functionality.


As I use your site quite often, I already have a (mind)set of keys to press:

  • Ctrl + T New Tab
  • Type que.. wait for autocomplete
  • Enter to load page
  • Tab to enter Search field
  • Type function_... wait for autocomplte
  • Enter to load requested page

To be honest, I never understood, why the search field was in the nav bar on the main site. I'd rather expect no nav bar on the start page and have a pretty large, full width search field in the middle of the page/monitor. At least this is where the eye focus/position is, when loading a page. Everything outside of that forces eye movement/scanning/searching.

Example MockUp directly from your page.

enter image description here

Point is, that you have 2 navigation points (and 2 coming later very prominent), that target about 10% of your visitors (or less). So why hide the most important thing for your visitors on top and make the less important thing so prominent in the middle of the page?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.