Mobile themes, QR codes, and shortURLs

5,551 views

Published on

"Mobile themes for Wordpress, QR codes, and custom shortURLs". Delivered by Chris Traganos, Web Developer at Harvard Public Affairs & Communications, on May 18th, 2010 at Lamont Library, Forum Room.

Published in: Design

Mobile themes, QR codes, and shortURLs

  1. 1. Mobile Themes, QR codes, and shortURLs Chris Traganos Harvard Public Affairs & Communications 5/12/10
  2. 2. Overview • The Harvard Gazette is Harvard's official newspaper, published in print and online. • Writers, photographers, and editors create the online version which has fresh content delivered daily. • Editorial workflow is used for both creating print and online content.
  3. 3. Online • Harvard Gazette is powered by Wordpress • Wordpress is an open source content management system with a solid admin interface (aka the "dashboard") and a workflow crucial for a news site. • Online, the theme is using straight php functions and minimal amount of plugins. The site lives straight on the WP core and auto-updates
  4. 4. Deciding to build theme • Could use functions from regular site with minor alterations like the homepage featured stories rotator. • Mobile site from scratch would have minimal overhead and could use wp-core functions for speed considerations. • Launching a web based solution mean we could introduce new features over time without needing app stores on the various mobile devices. • Can tailor fit to our site through custom theme using mobile detection in the WP plugins directory (wp-mobile.php by Crowd Favorite)
  5. 5. Gazette SymbianOS Mobile iPad 8% 2% Windows 1% Users Android 9% Blackberry 11% iPhone 70%
  6. 6. Design stage • Create sketch & photoshop mockup • Create style.css, index_static.php and article_static.php for design comp. • Sample home and sample story are the basis for the theme and having a familiarity to the full site on a desktop. • Build out Wordpress theme for mobile devices.
  7. 7. Building mobile theme • To build a new theme for wordpress, all is required to begin: style.css and index.php • Once the page is built and visual & design is approved - replace static content with Wordpress style.css index.php functions: get_header() Example get_footer()   <title> get_featured_posts()    Building  on  Tradition  |  Harvard  Gazette  Online </title> wp_title() etc <title>    <?php  wp_title('|',  true,  'right');  ?>      <?php  bloginfo('name');  ?> • Each template page draws from </title> the master design to a degree
  8. 8. header.php <?php /**  *  @package  WordPress  *  @subpackage  GZ_mobile  */ ?> style.css <html>        <head>                <title><?php  wp_title('|',  true,  'right');  bloginfo('name');  ?> </title>     <link  rel="stylesheet"  href="<?php  bloginfo ('stylesheet_directory');  ?>/css/style.css"  />              <link  rel="shortcut  icon"  href="<?php  bloginfo ('stylesheet_directory');  ?>/images/favicon.ico"  type="image/x-­‐icon"  />              <link  rel="apple-­‐touch-­‐icon-­‐precomposed"  href="<?php  bloginfo ('stylesheet_directory');  ?>/images/apple-­‐touch-­‐icon-­‐precomposed.png"  />        
  9. 9. header.php continued            <meta  name="viewport"  content="user-­‐scalable=no,   width=device-­‐width,  minimum-­‐scale=1.0,  maximum-­‐scale=1.0"  />            <script  type="text/javascript"  charset="utf-­‐8">              addEventListener('load',  function()  {              setTimeout(hideAddressBar,  0);              },  false);              function  hideAddressBar()  {              window.scrollTo(0,  1);              }            </script>      </head> http://snipplr.com/view/8784/hide-iphone-address-bar-once-page-is-loaded/
  10. 10. header.php continued   <body  class="home">     <div  class="header">       <a  class="logotype"  name="top"  href=" <?php  echo  get_option('home');  ?>/"> <img  src="<?php  bloginfo('stylesheet_directory');  ?>/ images/gazette_logotype.png"  alt="Harvard  Gazette"   height="27"  width="211"  /> </a>     </div><!-­‐-­‐  exit  header  -­‐-­‐>     <div  class="masthead">       <p> <?php  echo  date("l  n/j/y");  ?>  <span  class="conditions"> <?php  gz_display_weather();  ?></span> <a  href="#search"  class="search">Search</a> </p>     </div><!-­‐-­‐  exit  mastmav  -­‐-­‐>
  11. 11. footer.php <?php /**  *  @package  WordPress  *  @subpackage  GZ_mobile  */ ?> <div  class="categories"  id="nav"> <ul>          <?php  wp_list_categories ('orderby=id&include=4,11,3,10,9&title_li=');   ?> </ul>     </div><!-­‐-­‐  exit  categories  -­‐-­‐>
  12. 12. footer.php continued   <div  class="search">                    <a  name="search"></a>       <form  role="search"  method="get"  id="searchform"  action="<? php  echo  get_option('home')  ?>/"  >       <fieldset>         <label  for="search-­‐gazette-­‐input">Search</label>         <p  class="input-­‐button">         <input  type="text"  value=" <?php  esc_attr(apply_filters('the_search_query',   get_search_query()));  ?>"  name="s"  id="search-­‐gazette-­‐ input"  />         <input  type="submit"  value="Go"   id="search-­‐gazette-­‐submit"  />         </p>       </fieldset>       </form>   </div><!-­‐-­‐exit  search-­‐-­‐>
  13. 13. footer.php continued <div  class="footer">  <div  id="copyright"><p>©   <?php  echo  date("Y",time());  ?>  The  President  and  Fellows  of  Harvard   College.</p>   <ul>     <li><a  href="#top">Top</a>  <span  class="divider">/</span></li>     <li><a  href="<?php  echo  get_permalink(PRIVACYHPAC_PAGE_ID);  ? >">Privacy</a>  </li>     <li><a  href="http://www.trademark.harvard.edu/ trademark_protection/notice.php"  >Trademark</a>  </li>     <li><a  href="<?php  echo  get_permalink(CONTACT_PAGE_ID);  ? >">Contact  us</a>  </li>     <li><a  href="<?php  echo  get_permalink(NEWS_HOME_PAGE_ID);  ? >">HPAC</a></li>   </ul> </div><!-­‐-­‐  exit  copyright  -­‐-­‐> </div><!-­‐-­‐  exit  footer  -­‐-­‐>   <?php  if(function_exists('cfmobi_mobile_exit'))  {       cfmobi_mobile_exit();}    ?>   </body>   </html>
  14. 14. QR Codes
  15. 15. QR Codes • A QR Code is a 2D bar code created by Denso-Wave Co. in 1994. • Designed for quick response scanning on assembly lines, QR codes have played a role in mobile tagging • Contains up to 7089 characters in a single QR • Can accept multiple formats (URLs, Geo data, SMS, vCards, and more) source: http://en.wikipedia.org/wiki/QR_Code
  16. 16. QR Codes • The ability to link printed materials and online content has opened new possibilities for traditional publications to expand their reach online. • Quote: "This year, 89% of new mobile phones shipped to the U.S. will have cameras" • Numerous sites allow users to generator QR codes on the fly. source: http://bit.ly/bpEEEj
  17. 17. QR Codes in the Gazette • The Harvard Gazette began incorporating QR codes into the print newspaper in April 2010. • Readers who are curious and want to access additional features online scan the QR code with their smartphone.
  18. 18. QR & Mobile sites Important to note that QR codes are best used in conjunction with mobile friendly sites. Having a QR code access a fast-loading site enhances the users experience with the print and web.
  19. 19. shortURLs
  20. 20. shortURLs • By default, Wordpress follows an ID based URL structure: http://news.harvard.edu/gazette/?p=33273 • Wordpress allows for flexible and custom URL patterns: /story/%year%/%monthnum%/%postname%/ would translate to: http://news.harvard.edu/gazette/story/2009/12/web-­‐wizardry/ • Great for search engines and easy to decipher
  21. 21. Building • Since the editors are dealing with story ID’s in the dashboard, they see the stories in shorthand form. Additional consideration was the QR scan better with less characters. • Prototyped and launched a 3 character shortURL for the Harvard Gazette: http://hvd.gs • The editors could share links quickly with the short hand equivalent: http://hvd.gs/33273 • Advantage was that if title of story every changed, these URLs would still be intact.
  22. 22. How-to • Accomplished this by purchasing the domain and using a simple htaccess rule for redirecting. • In root html directory, created an htaccess rule: RedirectMatch  permanent  ^/$  http://news.harvard.edu/gazette/ RewriteEngine  On RewriteRule  ^([0-­‐9]+)$  http://news.harvard.edu/gazette/?p=$1   [QSA,R=301] • This allows for parameters to be passed (?src=QR&pg=3)
  23. 23. Resources http://codex.wordpress.org/Theme_Development http://carringtontheme.com/2009/03/carrington-mobile-10/ Detecting Mobile devices: http://detectmobilebrowsers.mobi/ Development for the New Mobile Web: http://www.slideshare.net/harvardwww/development-for-the-new- mobile-web Mobile Strategy: http://www.jeremyjohnsononline.com/2010/04/26/the-mobile-question-lessons-in- design-and-strategy-for-your-mobile-experience/#more-182 PSD for Motorola Droid: http://www.officialpsds.com/Verizon-Droid-without-keypad-PSD39240.html PSD for iPhone prototyping: http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/ QR write up http://bits.blogs.nytimes.com/2009/12/07/putting-a-bar-code-on-places-not-just-products/ http://qrcode.kaywa.com/
  24. 24. Thank you. @ctraganos christopher_traganos@harvard.edu

×