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

BEFORE WE START

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

WHY YOUR SITE?

HOW TO APPROACHBandwidth Objectives Time Resources Users The site YouPlatform Context Design Budget

THE OPTIONS@med

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 presentGreat for site owners who want to focus on content not code or dont have the necessary time or skills

MOBILE THEMES - EXAMPLES responsive twenty ten theme by Todd Halfpenny http://gingerbreaddesign.co.uk/todd/

MOBILE THEMES - EXAMPLEShttp://wordpress.org/extend/themes/twentyeleven#

MOBILE THEMES - EXAMPLES Smooci mobile-only themehttp://wordpress.org/extend/themes/smooci-2

MOBILE THEMES - EXAMPLES http://carringtontheme.com

MOBILE THEMES - EXAMPLEShttp://www.mobilizetoday.com/wordpress-themes/mobius/

MOBILE THEMES - EXAMPLES http://jigoshop.com/

MOBILE THEMES - EXAMPLES 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/designGreat for simple text-focused sites and blogs where content is more important than design and budget is limited

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

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

PLUGINS - EXAMPLES WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/ http://www.stephenfry.com/

PLUGINS - EXAMPLES WordPress mobile packhttp://wordpress.org/extend/plugins/wordpress-mobile-pack/

PLUGINS - EXAMPLES BuddyPress mobilehttp://buddypress.org/groups/buddypress-mobile/

OTHER PLUGINSMobilise by mippin - renders your site using their servicehttp://wordpress.org/extend/plugins/mobilize-by-mippin-wordpress-plugin/BAAP mobile version - switcher with conﬁgurable themeshttp://wordpress.org/extend/plugins/baap-mobile-version/Wapple architect - delivers a version of your theme tomobiles - 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 - CODEin 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 inlandscape@media screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) - iPad in portraitNotes:• iPad queries can also work on small desktop browser screens• style wider screens ﬁrst unless using (min-width)

MEDIA QUERIES - USEFUL CSSdisplay: 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 thetheme 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/

BESPOKE MOBILE SITES -http://www.telegraph.co.uk/comment/blogs

BESPOKE MOBILE SITES - http://theaa.com

BESPOKE MOBILE SITES - http://expedia.co.uk

BESPOKE MOBILE SITES - http://tripadvisor.co.uk

BESPOKE MOBILE SITES - http://bbc.co.uk

IN CONCLUSIONDeﬁ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 RESOURCEShttp://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 MarcotteFlexible Web Design and Stunning CSS3 by Zoe MickleyGillenwaterhttp://compass-design.co.uk/blog/wordpress-for-mobile@rachelmccollin

http://compass-design.co.uk	279
http://lanyrd.com	10
http://translate.googleusercontent.com	2

WordPress for mobile

by rachel_mccollin on Jul 14, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 291

Statistics

WordPress for mobile — Presentation Transcript