Presentation on Building a Mobile Drupal Site

Mark Jarrell's picture
Submitted by Mark Jarrell on Thu, 05/05/2011 - 07:07

I was lucky enough to be able to give another presentation at this year's excellent DrupalCamp Nashville, sponsored by Music City Networks, 7 Sudos, Tropo, The Tennessean, and a number of other splendid companies. This year, I decided to present on the Austin Peay State University mobile website that I've been building for the past few months along with the help of interns Jason Bell, Brian Barbour, APSU staff Rollow Welch, Terry Damron, Bill Persinger, and Ryan Forsythe. The site was originally begun in Drupal 6 with a traditional mobile theme, but I decided earlier this year, after seeing a great presentation at DrupalCon Chicago by Treehouse Agency that I wanted to convert the site to use the jQuery Mobile library to make the interface more touch/finger oriented. I think the outcome is a great example of what you can do with Drupal 7, HTML5, some CSS3, and jQuery Mobile.

My slides are shown below and attached to this post in PDF format. I'm hoping to be able to post a video of the session as soon as I have that in hand.

Building a Mobile Drupal Site

Building a Mobile Drupal Site - Presentation Transcript

  1. Building a Mobile Drupal SitePresented by Mark W. Jarrell mark@fleetthought.com Twitter: attheshowApril 30, 2011DrupalCamp Nashville
  2. Overview✤ Showcasing the new Austin Peay State University mobile site (m.apsu.edu)✤ Talking about development process✤ How it works
  3. Demo
  4. Why is this site important?✤ APSU already has native iPhone and Android apps. Needed something that would work for other devices too✤ Since most administrators are using touch screen devices, still focused primarily on optimizing interface for iPhone/Android✤ This site is more likely to be used by people who arent currently part of the university e.g., potential students, community members, potential employees
  5. Going Mobile - Methods✤ A) Keep current site theme same, use separate theme for mobile browsers. Only one URL.
  6. Going Mobile - Methods✤ B) Keep current site same, add a new mobile site with a separate URL and redirect users to that.
  7. Going Mobile - Methods✤ C) Restyle current site such that it works better on mobile browsers (CSS3 Media Queries) - See http://bit.ly/dWqtGm
  8. Going Mobile - Methods✤ We chose: B) Keep current site same, add a new mobile site with a separate URL and redirect users to that.
  9. What was the process?(Executive Summary)✤ Worked with Public Relations and Admissions to come up with a feature list✤ Designed initial theme✤ Originally started building this site in Drupal 6
  10. What was the process?(Executive Summary)✤ Upgraded content to D7 in January/February✤ Upgraded theme and custom modules to D7 in February/March✤ Converted existing theme to be a subtheme of "jQM" theme in April✤ Added in jQuery Mobile module/library in April✤ Site officially launched this week
  11. Content - What goes into the site?✤ Whats do we include here in mobile version thats not on the main site? ✤ Focus: on-the-go users ✤ Prepared for quick actions (e.g., Request Info, Campus Map, Schedule Campus Tour, etc.) ✤ Keep everything as "slim" as you can. Try to make it bite-sized. Less text unless it’s a news article or blog post ✤ Make your forms as short as you possibly can or youll lose them
  12. Whats jQuery Mobile?✤ http://jquerymobile.com/✤ "Touch-Optimized Web Framework for Smartphones & Tablets"✤ Basically gives you ways to stylize your HTML5 content and page elements such that they are easier for fingers (as opposed to point & click) to interact with
  13. HTML5✤ <!DOCTYPE html> (Way simpler than doctypes in HTML4!)✤ jQuery Mobile only works with HTML5 <section> <article> etc. not necessary to get it up and running.✤ jQuery Mobile elements are initialized when "data-role" attributes exist in your HTML code✤ Example: Radio buttons add <fieldset data-role="controlgroup"></ fieldset> around your buttons ✤ Demo: http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms- radiobuttons.html
  14. Page Refreshes✤ Page loads are done via AJAX-style requests. Browser doesn’t refresh the page when it changes.✤ Have to add HTML5 elements like <div data-role="content"></div> ...into your page.tpl.php file✤ Allows you to do smartphone style transitions such as wipes from one page to another.✤ Note: The page refresh method of jQuery Mobile makes interacting with the admin interface tricky. Usually have to type in /admin to get to admin theme.
  15. What are jQM and the jQueryMobile module?✤ These are developed by Tree House Agency (NJ Drupal shop)✤ “jQM” is a base theme like Zen, etc.✤ It modifies your form elements so that they have necessary data-role information. Also adds some useful classes to your page that you can use in your CSS✤ Modify these template files and drop them into your subtheme
  16. What are jQM and the jQueryMobile module?✤ jQuery Mobile module - Adds the JS library into your pages ✤ Also currently includes a patch to make the basic library work with Drupal better ✤ Get the one at Drupal.org called “jquerymobile” not “jquery_mobile”
  17. Mobile Tools Module✤ This goes on your main site and controls who sees what✤ Includes a lot of functionality like: ✤ Built in mobile browser detection capability ✤ Theme switching ✤ Redirection ✤ Use of external libraries for browser detection such as WURFL and Browscap
  18. Recap✤ How it works: User comes to www.apsu.edu using a mobile device, gets redirect to mobile site✤ m.apsu.edu has much lighter content, focused on a user who is on-the-go✤ Get to use a touch-oriented UI (if their smartphone supports HTML5, JS, etc.). Otherwise, they see more basic HTML version of content.
  19. Recap✤ Modules & Themes Used ✤ jQM - base theme ✤ jQuery Mobile - module & JS library ✤ Mobile Tools - module for detection and redirection
  20. Further Reading Links✤ “Mobile Marketing: Strategy challenges for advancement and enrollment” session with Bob Johnson http://www.slideshare.net/bestbob/mobile-marketing-strategy- challenges-for-advancement-and-enrollment✤ DrupalCon Chicago Presentation from Treehouse Agency: http://chicago2011.drupal.org/sessions/drupal-go-jquery-mobile✤ Metal Toad article on CSS3 Media Queries (if you’re going that route): http://bit.ly/dWqtGm
  21. Building a Mobile Drupal SitePresented by Mark W. Jarrell mark@fleetthought.com Twitter: attheshowApril 30, 2011DrupalCamp Nashville
  22. Need Help?✤ Consulting✤ Theming mark@fleetthought.com✤ Module Development✤ Training✤ Migrating a legacy system to Drupal
File: 
application/pdf iconbuilding-mobile-drupal-site.pdf

Commenting on this Blog entry is closed.

Tags:

Comments

Thu, 05/12/2011 - 07:08 — Alientyc (not verified)

Thanks

Thanks for the great intro to use jquery mobile in Drupal :)

Mon, 05/09/2011 - 14:13 — Anonymous (not verified)

Wonderful Presentation

This was a wonderful presentation. Thanks so much for bringing this to DrupalCamp Nashville. I'll be using some of this on my upcoming mobile site build.