Mobile website with jQuery Mobile

In my previous post I've described how to add support of mobile version of website using django. In this post I'm going to stop on front-end side of mobile website.

From the beginning, I wanted to create a simple mobile version from scratch and use a similar to original website look. But, after some investigation, I've changed my plans. I decided to use some framework to create a mobile website. So I found two popular such frameworks: Sencha Touch and jQuery Mobile. Whilst Sencha Touch looks awesome and production ready, while jQuery Mobile is still in release candidate stage, I stopped on the second one. This choice was very simple for me: jQuery products usually are qualitative, there is a strong community behind them and they introduce new versions very quick. Nevertheless Sencha Touch is a good product too.

I'm not going to describe how I used jQuery Mobile step by step, but only list of some facts and tips. First of all, I was using jQuery Mobile version 1.0 RC2, and that means, it wasn't a production-ready version yet. Even so, I found a few bugs or maybe just a things that need an improvement.

I just love such structures as lists. So will list a fact using a list =).

• You should read a manual first and follow a standard layout mechanism, like declare header, content and footer sections. This will save you a lot of time.
  
  
  

  <div data-role="page">
             <div data-role="header">
                 <a href="{% url m_home %}" data-icon="home" class="ui-btn-left">Home</a>
                 <a href="{% url m_help %}" data-icon="help" class="ui-btn-right">Help</a>
                {% block header %} <h1>[App Name]</h1>{% endblock %}
             </div>
  
             <div data-role="content">
              {% block content %}{% endblock %}
             </div>
  
             <div id="footer" data-role="footer">  Copyright © 2011 ... </div>
         </div>
  

  
  It's a good practice to add Home/Back and Help buttons to the header or footer panel. The navigation bar can be also added to the header, where it looks very natural:
  
  
  

  <div data-role="header">
     <a href="{% url m_home %}" data-icon="home" class="ui-btn-left">Home</a>
     <a href="{% url m_help %}" data-icon="help" class="ui-btn-right">Help</a>
     {% block header %}<h1>[AppName]</h1>{% endblock %}
  
     <div data-role="navbar">
        <ul>
           <li><a href="{% url m_download %}">Download</a></li>
           <li><a href="{% url m_contact %}">Contact</a></li>
           ...
        </ul>
     </div>
  </div>
  

• Fixed position of header and footer isn't working as it's expected. Well, expected it to be fixed always, while content is scrolling. But currently it just disappears when user starts scrolling and shows back after a second or so scrolling is ended.
• Hash anchor links (#something) aren't working yet.
• Can't show an image as a page, instead shows an "undefined" text. If you have a links that reference images, you must specify rel="external" for them.
• Use header to specify page title, rather than do it in the h1 element in the content section.
• Use collapsible blocks for long pages. For instance, I've found them very helpful to organize a help page with many different topics.
  
  You may also want to embrace collapsible blocks using collapsible set.
• For large image, don't show original version of it on page, but prefer thumbnail image as a link to the original version of image.
• Use list view where possible. For instance, a main help page contains a list of articles which are references to the appropriate pages.
• Buttons should be with icons where possible. You can easily add icon to the button with the data-icon="[icon]" attribute. The list of available icons is on jQuery Mobile website.
• Make website as simple as possible: structure should be simple, navigation bar should contain only the most used links. Remember, that it's still hard to work fully with websites on mobiles.

Well, that's all as for now. Hope that would be helpful.