"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.
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Mobile Themes, QR Codes, and ShortURLs for News Sites
1. Mobile Themes, QR codes, and shortURLs
Chris Traganos
Harvard Public Affairs & Communications 5/12/10
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. 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. 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. Gazette SymbianOS
Mobile iPad
8%
2%
Windows
1%
Users Android
9%
Blackberry
11%
iPhone
70%
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. 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
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. 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. 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. 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.
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. 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. 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. 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/