Thursday, December 15, 2011

jQuery Mobile Recommendations for Page Title


In my previous two posts, I outlined how page titles are picked up in jQuery Mobile in a single-page and in a multi-page template scenario.


Read them here: 
jQuery Mobile data-title behavior with multi-page template
jQuery Mobile data-title behavior in single-page template


Though its a very trivial thing, it is important that the right titles are shown on your pages as you navigate through your mobile HTML5 app.


So we see that there are 3 options available to set the page title, 

  1. The <title> tag
  2. The data-title attribute of the page container
  3. The header text in the header container

Now the question is which one to use? 
And here are my recommendations,

  1. For the landing page for any app, use the <title> tag, that always is the primary one to use. The document.title gets populated first and use the same.
  2. For multi-page template, use data-title for every page container, including the first container in the document. After first load, every subsequent Ajax transition uses this attribute.
  3. For single-page template, do not use the data-title attribute, every individual html page will have its own <title> tag and let that take precedence by default. Lack of JavaScript support, or not using Ajax transitions (via data-ajax="false"), will still show the correct title from the <title> tag.
  4. The header container (data-role="header") text should better be used for the page header and not the title. No point in having the same title and header, its plain non-intuitive!

So what do you think?

No comments:

Post a Comment