mobile themes, qr codes, and shorturls
DESCRIPTION
"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.TRANSCRIPT
Chris TraganosHarvard Public Affairs & Communications
Mobile Themes, QR codes, and shortURLs
5/12/10
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.
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
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)
GazetteMobileUsers
Windows1%
SymbianOS2%iPad
8%
Android9%
Blackberry11%
iPhone70%
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.
• 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 functions: get_header()get_footer() get_featured_posts()wp_title()etc
• Each template page draws from the master design to a degree
Building mobile theme
index.phpstyle.css
&
<title> Building on Tradition | Harvard Gazette Online</title>
<title> <?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?></title>
Example
header.php<?php/** * @package WordPress * @subpackage GZ_mobile */?><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" />
style.css
header.php <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>
continued
http://snipplr.com/view/8784/hide-iphone-address-bar-once-page-is-loaded/
header.php <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 -‐-‐>
continued
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 -‐-‐>
footer.php <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-‐-‐>
continued
footer.php<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>
continued
QR Codes
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
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
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.
QR & Mobile sitesImportant 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.
shortURLs
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
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.
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 OnRewriteRule ^([0-‐9]+)$ http://news.harvard.edu/gazette/?p=$1 [QSA,R=301]
• This allows for parameters to be passed (?src=QR&pg=3)
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/
Resources
