Mobile Themes, QR Codes, and ShortURLs for News Sites

Mobile Themes, QR codes, and shortURLs

Chris Traganos
Harvard Public Affairs & Communications 5/12/10

Overview
• The Harvard Gazette is
Harvard's ofﬁcial newspaper,
published in print and online.

• Writers, photographers, and
editors create the online
version which has fresh
content delivered daily.

• Editorial workﬂow 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
workﬂow 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 ﬁt to our site through
custom theme using mobile
detection in the WP plugins directory
(wp-mobile.php by Crowd Favorite)

Gazette SymbianOS

Mobile iPad
8%
2%
Windows
1%
Users Android
9%

Blackberry
11%

iPhone
70%

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.

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

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
?>/images/favicon.ico"
type="image/x-‐icon"
/>

<link
rel="apple-‐touch-‐icon-‐precomposed"
href="<?php
bloginfo
?>/images/apple-‐touch-‐icon-‐precomposed.png"
/>

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/

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
-‐-‐>

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 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-‐-‐>

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>

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 ﬂy.

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 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.

shortURLs
• By default, Wordpress follows an ID based URL structure:
http://news.harvard.edu/gazette/?p=33273

• Wordpress allows for ﬂexible 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
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)

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.ofﬁcialpsds.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/

Thank you.

@ctraganos
christopher_traganos@harvard.edu

Mobile Themes, QR Codes, and ShortURLs for News Sites

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Mobile Themes, QR Codes, and ShortURLs for News Sites

Similar to Mobile Themes, QR Codes, and ShortURLs for News Sites (20)

More from Harvard Web Working Group

More from Harvard Web Working Group (19)

Recently uploaded

Recently uploaded (20)

Mobile Themes, QR Codes, and ShortURLs for News Sites