Skip to main content

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?
Labels:

Comments

Post a Comment

Popular posts from this blog

Minimal required code in HTML5

I've encountered this question repeatedly of late. "What are the tags required at bare minimum for a html file?" Earlier there were a bunch of mandatory tags that were required for any html file. At bare minimum, the recommended structure was: (ref: http://www.w3.org/TR/html4/struct/global.html ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML>   <HEAD>     <TITLE>A small HTML</TITLE>   </HEAD>   <BODY>     <P>Small HTML file!</P>   </BODY> </HTML> Yes, using capitals for the tags was the way to go! Those were the days of the purists and strict was the way to be. Now open your notepad and copy the above code, save the file as old.html and launch it in Chrome or Firefox. You will see only one line "Small HTML file!" shown. Now launch the developer tools in Chrome or Inspect Element in Firefox. Thi...
19 comments
Read more

Using duplicate IDs in HTML

Well today I'm being a bit controversial. Let us see what the HTML5 spec says about unique IDs in a HTML file. The  id  attribute specifies its element's  unique identifier (ID) . The value must be unique amongst all the IDs in the element's  home subtree  and must contain at least one character. The value must not contain any  space characters . An element's  unique identifier  can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS. Yes its been mentioned almost everywhere on the planet that ID must be unique. Now let us look at the below code, Launch dup.css #p2 {   background-color: yellow;  } dup-id.html <!DOCTYPE html> <html>   <head>     <title>Duplicate ID Tester</title> <link rel="stylesh...
9 comments
Read more

Fixing Date, Time and Zone on RHEL 6 command line

Had to fix all time related issues on a remote RHEL 6 server which runs without any windowing system. Plain ol' command line. Documenting steps here for future reference: Check to see if your date and timezone settings are accurate: # date # cat /etc/sysconfig/clock The server I accessed had wrong settings for both the commands. Here are the steps I used to correct: Find out your timezone from the folder /usr/share/zoneinfo # ls /usr/share/zoneinfo Mine was pointing to America/EDT instead of  Asia/Calcutta Update and save the /etc/sysconfig/clock file to # sudo vi /etc/sysconfig/clock ZONE="Asia/Calcutta" UTC=true ARC=false Remove the /etc/localtime # sudo rm /etc/localtime Create a new soft link to your time zone # cd /etc # sudo ln -s /usr/share/zoneinfo/Asia/Calcutta /etc/localtime # ls -al localtime Now it should show the link to your time zone Set your hardware clock to UTC # sudo hwclock --systohc --utc # hwclock --show Update your t...
16 comments
Read more