WordPress for mobile

WORDPRESS FOR MOBILE
USING WORDPRESS TO BUILD
MOBILE-OPTIMISED WEBSITES

Rachel McCollin
WordCamp Portsmouth 2011

rachel@compass-design.co.uk
@rachelmccollin
http://compass-design.co.uk

IN THIS SESSION

• why go mobile?

• considerations

• methods and examples

• some code

• resources and links

WHY MOBILE?

source: http://www.digitalbuzzblog.com/2011-mobile-statistics-stats-facts-marketing-infographic/

HOW TO APPROACH

Bandwidth
Objectives
Time Resources
Users The site
You

Platform Context Design
Budget

MOBILE THEMES

• Instant • Limitedcontrol over user
experience
• Very quick and easy
• Need to test thoroughly
• Consistencybetween
desktop and mobile • Less individual design

• Browser compatibility • Limited choice at present
Great for site owners who want to focus on content not code
or don't have the necessary time or skills

MOBILE THEMES - EXAMPLES

responsive twenty ten
theme by Todd
Halfpenny

http://gingerbreaddesign.co.uk/todd/


http://wordpress.org/extend/themes/twentyeleven#


Smooci mobile-only
theme

http://wordpress.org/extend/themes/smooci-2


http://carringtontheme.com


http://www.mobilizetoday.com/wordpress-themes/mobius/


http://jigoshop.com/


http://leonpaternoster.com/wp-themes/

PLUGINS

• Working in minutes • One size ﬁts all

• Minimal conﬁguration • Less control

• Cross-platform • Problems with widgets &
media
• No coding required
• Lose branding/design
Great for simple text-focused sites and blogs where content is
more important than design and budget is limited

PLUGINS - EXAMPLES
WP Touch - http://wordpress.org/extend/plugins/wptouch/

PLUGINS - EXAMPLES

http://www.socialmediaexaminer.com/

PLUGINS - EXAMPLES

http://www.socialmediaexaminer.com/ http://www.stephenfry.com/

PLUGINS - EXAMPLES
WordPress mobile pack

http://wordpress.org/extend/plugins/wordpress-mobile-pack/

PLUGINS - EXAMPLES
BuddyPress mobile

http://buddypress.org/groups/buddypress-mobile/

OTHER PLUGINS
Mobilise by mippin - renders your site using their service
http://wordpress.org/extend/plugins/mobilize-by-mippin-
wordpress-plugin/

BAAP mobile version - switcher with conﬁgurable themes
http://wordpress.org/extend/plugins/baap-mobile-version/

Wapple architect - delivers a version of your theme to
mobiles - http://wordpress.org/extend/plugins/wapple-
architect/

MEDIA QUERIES

• Retain existing design
• Not reliable on all
• Can be templated
platforms (e.g.
• Very ﬂexible Blackberry)

• More resource-intensive
• Canadd or remove
content, images, menus etc.
Great for sites where the design and brand are important and
the user experience is similar to the desktop site.

MEDIA QUERIES -

http://compass-design.co.uk

MEDIA QUERIES -

http://centenarylounge.com

MEDIA QUERIES -

http://retreats4geeks.com

MEDIA QUERIES - CODE
in the <head>: <meta name="viewport" content="width=device-width">

at the end of the stylesheet:

@media screen and (max-width: 480px) { [styles] } - iPhone and Android in portrait & landscape

@media screen and (max-width: 320px) - iPhone and Android in portrait only

@media screen and (min-width: 768px) and (max-width: 1024px) - iPad in portrait and landscape

@media screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) - iPad in
landscape

@media screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) - iPad in portrait

Notes:

• iPad queries can also work on small desktop browser screens

• style wider screens ﬁrst unless using (min-width)

MEDIA QUERIES - USEFUL CSS

display: none;

img {max-width: 100%;}

ﬂoat: none;

width: 100%;

BESPOKE MOBILE SITES

• Mobile-speciﬁc experience • Needs a clear strategy

• Make use of APIs • More resource-intensive

• Looks great • one site or two?

• Plugins can make it easier • one theme or two?

Great for sites which will be used very differently by mobile
users and have a user base who are big app users

BESPOKE MOBILE SITES -

WpTap mobile detector - spots mobiles & enables the
theme you choose - http://wordpress.org/extend/plugins/
wptap-mobile-detector/

WPTouch Pro - http://www.bravenewcode.com/store/
plugins/wptouch-pro/

WordPress mobile pack - http://wordpress.org/extend/
plugins/wordpress-mobile-pack/


http://www.telegraph.co.uk/comment/blogs


http://theaa.com


http://expedia.co.uk


http://tripadvisor.co.uk


http://bbc.co.uk

IN CONCLUSION
Deﬁne:

• Who your audience or target audience is

• What platforms and devices they use

• What you want them to use your site for

• How the user expectations will differ on a mobile

• What your content is

• What budget, resources and time you have

• Which method you will use

• How you will monitor use and conversions

LINKS AND RESOURCES
http://www.alistapart.com/articles/responsive-web-design/

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/

http://www.smashingmagazine.com/2011/07/11/picking-a-mobile-support-strategy-for-
your-website/

Responsive Web Design by Ethan Marcotte

Flexible Web Design and Stunning CSS3 by Zoe Mickley
Gillenwater

http://compass-design.co.uk/blog/wordpress-for-mobile

@rachelmccollin

WordPress for mobile

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (18)

Similar to WordPress for mobile

Similar to WordPress for mobile (20)

More from rachel_mccollin

More from rachel_mccollin (8)

Recently uploaded

Recently uploaded (20)

WordPress for mobile

Editor's Notes