Athenites mobile site

screenshot

Athenites is optimized for use with smartphones. It's main feauture is a directory of live music venues in downtown Athens, Georgia. The page for each venue provides general information as well as their twitter and facebook status updates, and a Google maps widget.

You can see Athenites at athenites.com.

Right now the site is powered by Drupal, although I am thinking it would have less overhead if I re-did it in plain HTML, since most of the bells and whistles are provided by jQuery, not by Drupal.

In the screenshot you can see an example page with an active "i" (info) tab showing basic contact information. You can also see tabs for twitter, facebook, google maps, and a help tab.

Clicks on the tabs are handled by jQuery and javascript.

Mobility

Although it is made for mobile, it will work in desktop browsers. The stylesheet specifies a max-width of 480 pixels which is plenty of horizontal room for the single column layout.

There are several things to consider when designing for smartphones. One is the device width. The iPhone will assume that a web page is 960 pixels wide unless the following is specified in the head of the web page:


<meta name="viewport" content="width=device-width" />

Another issue is the width of images. So that the images behave similarly no matter the width of the viewing area, I used percentages to specify their widths. Here is the CSS for the image that appears on the venue pages (often the logo):


body.node-type-article img  { 
	width: 40%;
	height: auto;
	float: left;
	margin: 4px 8px 2px 0;
	border: solid 1px #000;
 }

The percent refers to the portion of the parent container that the image takes up. So if this is viewed in portrait view on a smartphone (320 pixels wide) the image will be about 140 pixels wide, but in landscape mode it will be about 300 pixels wide. In either case the layout stays similar with the text wrapping to the right of the image.

Big Buttons

Another facet of the smartphone is the touch-screen. Links need to be "clickable" by fat fingers. I styled the links with plenty of padding (8 to 16 pixels-worth) on all sides.

A slight disgression. In this case when I say "links" I'm referring to the <li>s because jQuery handles the clicks on them. (Virtually all smartphones handle javascript well.) The <a> tags are inside the <li>s which is important for graceful degradation and even more important for SEO - never forget: spiders follow links.

JQuery handles the tabs

The tabs across the top of the page (i t f g ?) are clicked to load different content on to the page. The clicks and the Ajax loading and showing and hiding of various divs is handled by jQuery.



jQuery(function(){  //or $(document.ready function() {

  // hide the divs
  $('#loadarea').hide();
  $('#loadarea').empty();
  $('#twitter').hide(); 
  $('#faq').hide(); 

// hide twitter and/or facebook icons if no ID available
var atwitterid = $('.field-field-twitter').text();
var btwitterid = atwitterid.replace(/^\s+|\s+$/g,"");
if (btwitterid == "") { $('img.twitter').hide(); }

var afacebookid = $('.field-field-facebook').text();
var bfacebookid = afacebookid.replace(/^\s+|\s+$/g,"");
if (bfacebookid == "") { $('img.facebook').hide(); }


  
  //function that runs when user clicks on icon img
  $('#icons img').click(function() {
     $('#loadarea').slideUp('fast');
     $('#twitter').slideUp('fast');
     $('#faq').slideUp('fast');
     $('div.node').slideUp('fast');
     $('#icons img').removeClass('active');

      //capture the class of the img
      var which = $(this).attr('class');
      $(this).addClass('active');

       if (which == 'faq') {
          $('#faq').slideDown('slow');
       } else if (which == 'info')  {
          $('div.node').slideDown('slow');
       } else {
       var thepath = '/sites/all/themes/bars/';

     // append class to the path
      var thescript = (thepath + which + '.js'); 

      $.getScript(thescript);

     };

  });

});


There are 3 parts to this script. The first part hides various divs. This may be redundant since they're hidden by the CSS as well, but when you start Ajaxing stuff around you want to make sure the right stuff is showing and the other stuff is hidden.

The second block has two nearly identical blocks - one for twitter and one for facebook. The first line in the first block gets the text in the div that holds the twitter ID. The next line uses regular expressions to remove any extraneous spaces that may surround the ID - different browser will do this differently. The third line checks ID and, if it is empty, it hides the twitter button.

The third block of code is the click handler for the tabs. Depending on which tab is clicked - the if/else stuff - different things happen.

For the i and ? tabs, pre-loaded divs are revealed. The other tabs invoke some custom external scripts which do whatever is required.

The Google map button calls "gmap.js" which uses code provided by Google (with a few variables changed) that loads an iframe into the page with a map for the particular location.

The facebook and twitter buttons call facebook.js or twitter.js. These scripts grab the ID from the page (as above) and try to get the feed for that ID from the service using its API using the jQuery .getJason method.


$.getJSON('http://twitter.com/status/user_timeline/' + twitterid ...

I say "try" because right now the facebook feed works for some venues and not for others for reasons I haven't yet figured out. Oh, well. It's just one puzzle after another in this business!

Other than the feed problem another thing I want to track down: How to get the window to scroll up slightly to hide the browser's address bar and reclaim a little screen real estate.

I'll keep you posted.