SlideShare ist ein Scribd-Unternehmen logo
1 von 38
Downloaden Sie, um offline zu lesen
Making CMSes go mobile
Harnessing WordPress for mobile development
            standards next, 3 March 2012




              Rachel McCollin
                   compass-design.co.uk
               rachel@compass-design.co.uk
                      @rachelmccollin
Mobile development - the power of WordPress

                                                                           How WordPress
     Option              What it involves                  Uses
                                                                              can help

                      Combination of fluid layout and   For a consistent
  Responsive web                                                            Responsive themes
                        media queries to define          design across
      design                                                                  Media queries
                              breakpoints                  devices


                                                        For a different
                        Different site or theme for                           Mobile plugins
Device-based design                                    mobile experience
                              mobile devices                                 Mobile switchers
                                                         or for speed

                                                       Gives consistent
                                                                                Plugins
                                                       design with UX
Reactive Web Design      Combination of the two                              Conditional tags
                                                          and speed
                                                                                Images
                                                       enhancements




                                                                                        compass-design.co.uk
                                                                                             @rachelmccollin
Responsive Web Design with WordPress




                 Option 1 - use CSS




                                       compass-design.co.uk
                                            @rachelmccollin
Responsive Web Design with WordPress




              Option 2 - responsive themes




                                             compass-design.co.uk
                                                  @rachelmccollin
Responsive Web Design with WordPress




                Option 2 - responsive themes




Twenty eleven

                                               compass-design.co.uk
                                                    @rachelmccollin
Responsive Web Design with WordPress




                    Option 2 - responsive themes




Twenty eleven   Scherzo

                                                   compass-design.co.uk
                                                        @rachelmccollin
Responsive Web Design with WordPress




                    Option 2 - responsive themes




Twenty eleven   Scherzo         Codium extend

                                                   compass-design.co.uk
                                                        @rachelmccollin
Responsive Web Design with WordPress




                    Option 2 - responsive themes




Twenty eleven   Scherzo         Codium extend      Ari

                                                         compass-design.co.uk
                                                              @rachelmccollin
Device experience with WordPress
                Option 1 - mobile plugins




                                            compass-design.co.uk
                                                 @rachelmccollin
Device experience with WordPress
                     Option 1 - mobile plugins




•   Working in minutes

•   Minimal configuration
•   Cross-platform

•   No coding required




                                                 compass-design.co.uk
                                                      @rachelmccollin
Device experience with WordPress
                     Option 1 - mobile plugins




                                     •   One size fits all
•   Working in minutes
                                     •   Less control
•   Minimal configuration
                                     •   Problems with widgets &
•   Cross-platform
                                         media
•   No coding required
                                     •   Lose branding/design



                                                            compass-design.co.uk
                                                                 @rachelmccollin
Device experience with WordPress
                          Option 1 - mobile plugins




                                              •    One size fits all
•   Working in minutes
                                              •    Less control
•   Minimal configuration
                                              •    Problems with widgets &
•   Cross-platform
                                                   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
                                                                          compass-design.co.uk
                                                                               @rachelmccollin
Mobile plugins




                 compass-design.co.uk
                      @rachelmccollin
Mobile plugins   WPTouch
                 •   Hugely popular and looks slick
                 •   Slow - particularly images
                 •   No widgets
                 •   Identikit




                                                  compass-design.co.uk
                                                       @rachelmccollin
Mobile plugins   WPTouch
                 •   Hugely popular and looks slick
                 •   Slow - particularly images
                 •   No widgets
                 •   Identikit


                 WordPress Mobile Pack
                 •   More options, resizes image files
                 •   Displays widgets
                 •   No logo or branding




                                                  compass-design.co.uk
                                                       @rachelmccollin
Mobile plugins   WPTouch
                 •   Hugely popular and looks slick
                 •   Slow - particularly images
                 •   No widgets
                 •   Identikit


                 WordPress Mobile Pack
                 •   More options, resizes image files
                 •   Displays widgets
                 •   No logo or branding

                 MobilePosty
                 •   Very fast
                 •   No home page content
                 •   Takes work to get it looking good
                                                  compass-design.co.uk
                                                       @rachelmccollin
Device experience with WordPress
                 Option 2 - switchers




                                        compass-design.co.uk
                                             @rachelmccollin
Device experience with WordPress
                        Option 2 - switchers




•   Mobile-specific experience

•   Code mobile theme from
    scratch
•   Option of combining with
    RWD




                                               compass-design.co.uk
                                                    @rachelmccollin
Device experience with WordPress
                        Option 2 - switchers




•   Mobile-specific experience

•   Code mobile theme from           •   Needs a clear strategy
    scratch
                                     •   More resource-intensive
•   Option of combining with
    RWD




                                                           compass-design.co.uk
                                                                @rachelmccollin
Device experience with WordPress
                             Option 2 - switchers




•   Mobile-specific experience

•   Code mobile theme from                    •    Needs a clear strategy
    scratch
                                              •    More resource-intensive
•   Option of combining with
    RWD


          Great for sites which will be used very differently by mobile users

                                                                            compass-design.co.uk
                                                                                 @rachelmccollin
Device experience with WordPress
              Option 3 - redirection plugins




                                               compass-design.co.uk
                                                    @rachelmccollin
Device experience with WordPress
                     Option 3 - redirection plugins




•   VERY mobile-specific
    experience

•   Add extra functionality not
    needed on desktop

•   Can be much faster




                                                      compass-design.co.uk
                                                           @rachelmccollin
Device experience with WordPress
                     Option 3 - redirection plugins




                                       •       Two sites to maintain
•   VERY mobile-specific                    •    theme files
    experience                             •    content
•   Add extra functionality not        •       Expensive
    needed on desktop
                                       •       SEO / links issues
•   Can be much faster
                                       •       Confusing for users


                                                                    compass-design.co.uk
                                                                         @rachelmccollin
Device experience with WordPress
                         Option 3 - redirection plugins




                                                •       Two sites to maintain
•   VERY mobile-specific                             •    theme files
    experience                                      •    content
•   Add extra functionality not                 •       Expensive
    needed on desktop
                                                •       SEO / links issues
•   Can be much faster
                                                •       Confusing for users

Useful for sites with a COMPLETELY different mobile interface, content etc. (e.g. web apps)

                                                                             compass-design.co.uk
                                                                                  @rachelmccollin
Device experience - possibilities



 •   Mapping and geolocation

 •   Social - BuddyPress etc.

 •   E-commerce - Jigoshop, WP E-commerce

 •   Media

 •   Interactivity

 •   Accelerometer




                                            compass-design.co.uk
                                                 @rachelmccollin
Device experience - plugins / themes
 •   Theme switchers
     •   WordPress Mobile Pack
     •   WPtap
     •   Mobile Smart

 •   Redirection
     •   WordPress Mobile Re-direct
     •   Mobile detector (with an edit to functions.php)

 •   UX
     •   Geolocation plugin
     •   BuddyPress Mobile theme
     •   Jigoshop - plugin with premium responsive themes
     •   Media - WordPress apps, i-Dump (limited right now)
     •   Offline - WP Cache Manifest, Cache Manifest for WordPress themes
     •   Accelerometer, Drag & drop, Canvas - yet to come
     •   Or if you’re clever, use HTML5 and Javascript!
                                                                       compass-design.co.uk
                                                                            @rachelmccollin
Reactive Web Design with WordPress




                                     compass-design.co.uk
                                          @rachelmccollin
Reactive Web Design with WordPress




•   Consistent design / brand

•   Speeds up mobile site

•   Responds to context
    (although beware
    assumptions)




                                     compass-design.co.uk
                                          @rachelmccollin
Reactive Web Design with WordPress




•   Consistent design / brand
                                •   Can take longer to
•   Speeds up mobile site           develop
•   Responds to context         •   Requires familiarity with
    (although beware                CSS and PHP
    assumptions)




                                                         compass-design.co.uk
                                                              @rachelmccollin
Reactive Web Design with WordPress




•   Consistent design / brand
                                              •   Can take longer to
•   Speeds up mobile site                         develop
•   Responds to context                       •   Requires familiarity with
    (although beware                              CSS and PHP
    assumptions)

      Great for sites where the design is important and the mobile experience is
                     different but not too different from the desktop
                                                                           compass-design.co.uk
                                                                                @rachelmccollin
Reactive techniques

 •   Responsive design using media queries PLUS server-side
     processing to send some different content

 •   Plugins:
     •   mobble, Mobile detector

     •   Dropdown Menus

     •   Mobile First Content Images

 •   Conditional tags

 •   Featured images

 •   WordPress custom menus


                                                          compass-design.co.uk
                                                               @rachelmccollin
Examples of Reactive Design using WordPress




                                              compass-design.co.uk
                                                   @rachelmccollin
Examples of Reactive Design using WordPress




                                              compass-design.co.uk
                                                   @rachelmccollin
Examples of Reactive Design using WordPress




                                              compass-design.co.uk
                                                   @rachelmccollin
Examples of Reactive Design using WordPress




                                              compass-design.co.uk
                                                   @rachelmccollin
Summary

 •   There are options for making your site mobile
     •   Responsive Web Design

     •   Device experiences

     •   Reactive Web Design

 •   WordPress can help with them all
     •   plugins

     •   themes

     •   inbuilt functionality

 •   How you do it depends on the site, the budget and the skills of
     the development team

                                                              compass-design.co.uk
                                                                   @rachelmccollin
Links and resources

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

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

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

http://dev.opera.com/articles/view/wordpress-goes-mobile-responsive-design-
comes-to-cmses/

Responsive Web Design by Ethan Marcotte

Mobile First by Luke Wroblewski

Flexible Web Design and Stunning CSS3 by Zoe Mickley Gillenwater

Mobile WordPress Development by Rachel McCollin (out in the autumn!)


                                                                          compass-design.co.uk
                                                                               @rachelmccollin
Slides and links




                   http://compass-design.co.uk/?p=1810


                                                         compass-design.co.uk
                                                              @rachelmccollin

Weitere ähnliche Inhalte

Ähnlich wie CMSes go mobile - Harness the power of WordPress

Build a responsive website with drupal
Build a responsive website with drupalBuild a responsive website with drupal
Build a responsive website with drupalTechday7
 
Build a responsive website with drupal
Build a responsive website with drupalBuild a responsive website with drupal
Build a responsive website with drupalShyamala Rajaram
 
Mobile and Responsive Design with Sass
Mobile and Responsive Design with SassMobile and Responsive Design with Sass
Mobile and Responsive Design with Sassnyccamp
 
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...uxpa-dc
 
Kentico Technical Learning - Responsive Design with Kentico CMS 7
Kentico Technical Learning - Responsive Design with Kentico CMS 7Kentico Technical Learning - Responsive Design with Kentico CMS 7
Kentico Technical Learning - Responsive Design with Kentico CMS 7Thomas Robbins
 
Secrets of WordPress Success - BlueGlass LA
Secrets of WordPress Success - BlueGlass LASecrets of WordPress Success - BlueGlass LA
Secrets of WordPress Success - BlueGlass LAAndrew Norcross
 
Mobilize your website and web applications
Mobilize your website and web applicationsMobilize your website and web applications
Mobilize your website and web applicationsAmplexor
 
Makersbay Overview
Makersbay OverviewMakersbay Overview
Makersbay Overviewslodha
 
Adobe illustrator cs6
Adobe illustrator cs6Adobe illustrator cs6
Adobe illustrator cs6Rodmossulkin
 
Kentico Technical Learning: Exploring jQuery Mobile
Kentico Technical Learning: Exploring jQuery MobileKentico Technical Learning: Exploring jQuery Mobile
Kentico Technical Learning: Exploring jQuery MobileThomas Robbins
 
Evalotta lamm
Evalotta lammEvalotta lamm
Evalotta lammClayTrain
 
Webxpress Home Delivery Solution
Webxpress Home Delivery SolutionWebxpress Home Delivery Solution
Webxpress Home Delivery SolutionWebXpress
 
2 minutes intro to Capgemini's Drupal Factory
2 minutes intro to Capgemini's Drupal Factory2 minutes intro to Capgemini's Drupal Factory
2 minutes intro to Capgemini's Drupal FactoryDenis Lafont-Trevisan
 
Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native codeJoakim Kemeny
 
Rethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageRethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageshwetank
 
Responsive Design And You
Responsive Design And YouResponsive Design And You
Responsive Design And YouJoe Hass
 
Introduction to Accessibility Best Practices
Introduction to Accessibility Best PracticesIntroduction to Accessibility Best Practices
Introduction to Accessibility Best Practicesshawtrusta11y
 

Ähnlich wie CMSes go mobile - Harness the power of WordPress (20)

MODULAR COMICS 2.0
MODULAR COMICS 2.0MODULAR COMICS 2.0
MODULAR COMICS 2.0
 
Build a responsive website with drupal
Build a responsive website with drupalBuild a responsive website with drupal
Build a responsive website with drupal
 
Build a responsive website with drupal
Build a responsive website with drupalBuild a responsive website with drupal
Build a responsive website with drupal
 
Mobile and Responsive Design with Sass
Mobile and Responsive Design with SassMobile and Responsive Design with Sass
Mobile and Responsive Design with Sass
 
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
 
Kentico Technical Learning - Responsive Design with Kentico CMS 7
Kentico Technical Learning - Responsive Design with Kentico CMS 7Kentico Technical Learning - Responsive Design with Kentico CMS 7
Kentico Technical Learning - Responsive Design with Kentico CMS 7
 
Secrets of WordPress Success - BlueGlass LA
Secrets of WordPress Success - BlueGlass LASecrets of WordPress Success - BlueGlass LA
Secrets of WordPress Success - BlueGlass LA
 
Mobilize your website and web applications
Mobilize your website and web applicationsMobilize your website and web applications
Mobilize your website and web applications
 
Makersbay Overview
Makersbay OverviewMakersbay Overview
Makersbay Overview
 
Adobe illustrator cs6
Adobe illustrator cs6Adobe illustrator cs6
Adobe illustrator cs6
 
Adobe illustrator cs6
Adobe illustrator cs6Adobe illustrator cs6
Adobe illustrator cs6
 
Kentico Technical Learning: Exploring jQuery Mobile
Kentico Technical Learning: Exploring jQuery MobileKentico Technical Learning: Exploring jQuery Mobile
Kentico Technical Learning: Exploring jQuery Mobile
 
Evalotta lamm
Evalotta lammEvalotta lamm
Evalotta lamm
 
WordPress for mobile
WordPress for mobileWordPress for mobile
WordPress for mobile
 
Webxpress Home Delivery Solution
Webxpress Home Delivery SolutionWebxpress Home Delivery Solution
Webxpress Home Delivery Solution
 
2 minutes intro to Capgemini's Drupal Factory
2 minutes intro to Capgemini's Drupal Factory2 minutes intro to Capgemini's Drupal Factory
2 minutes intro to Capgemini's Drupal Factory
 
Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native code
 
Rethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageRethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern age
 
Responsive Design And You
Responsive Design And YouResponsive Design And You
Responsive Design And You
 
Introduction to Accessibility Best Practices
Introduction to Accessibility Best PracticesIntroduction to Accessibility Best Practices
Introduction to Accessibility Best Practices
 

Kürzlich hochgeladen

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 

Kürzlich hochgeladen (20)

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 

CMSes go mobile - Harness the power of WordPress

  • 1. Making CMSes go mobile Harnessing WordPress for mobile development standards next, 3 March 2012 Rachel McCollin compass-design.co.uk rachel@compass-design.co.uk @rachelmccollin
  • 2. Mobile development - the power of WordPress How WordPress Option What it involves Uses can help Combination of fluid layout and For a consistent Responsive web Responsive themes media queries to define design across design Media queries breakpoints devices For a different Different site or theme for Mobile plugins Device-based design mobile experience mobile devices Mobile switchers or for speed Gives consistent Plugins design with UX Reactive Web Design Combination of the two Conditional tags and speed Images enhancements compass-design.co.uk @rachelmccollin
  • 3. Responsive Web Design with WordPress Option 1 - use CSS compass-design.co.uk @rachelmccollin
  • 4. Responsive Web Design with WordPress Option 2 - responsive themes compass-design.co.uk @rachelmccollin
  • 5. Responsive Web Design with WordPress Option 2 - responsive themes Twenty eleven compass-design.co.uk @rachelmccollin
  • 6. Responsive Web Design with WordPress Option 2 - responsive themes Twenty eleven Scherzo compass-design.co.uk @rachelmccollin
  • 7. Responsive Web Design with WordPress Option 2 - responsive themes Twenty eleven Scherzo Codium extend compass-design.co.uk @rachelmccollin
  • 8. Responsive Web Design with WordPress Option 2 - responsive themes Twenty eleven Scherzo Codium extend Ari compass-design.co.uk @rachelmccollin
  • 9. Device experience with WordPress Option 1 - mobile plugins compass-design.co.uk @rachelmccollin
  • 10. Device experience with WordPress Option 1 - mobile plugins • Working in minutes • Minimal configuration • Cross-platform • No coding required compass-design.co.uk @rachelmccollin
  • 11. Device experience with WordPress Option 1 - mobile plugins • One size fits all • Working in minutes • Less control • Minimal configuration • Problems with widgets & • Cross-platform media • No coding required • Lose branding/design compass-design.co.uk @rachelmccollin
  • 12. Device experience with WordPress Option 1 - mobile plugins • One size fits all • Working in minutes • Less control • Minimal configuration • Problems with widgets & • Cross-platform 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 compass-design.co.uk @rachelmccollin
  • 13. Mobile plugins compass-design.co.uk @rachelmccollin
  • 14. Mobile plugins WPTouch • Hugely popular and looks slick • Slow - particularly images • No widgets • Identikit compass-design.co.uk @rachelmccollin
  • 15. Mobile plugins WPTouch • Hugely popular and looks slick • Slow - particularly images • No widgets • Identikit WordPress Mobile Pack • More options, resizes image files • Displays widgets • No logo or branding compass-design.co.uk @rachelmccollin
  • 16. Mobile plugins WPTouch • Hugely popular and looks slick • Slow - particularly images • No widgets • Identikit WordPress Mobile Pack • More options, resizes image files • Displays widgets • No logo or branding MobilePosty • Very fast • No home page content • Takes work to get it looking good compass-design.co.uk @rachelmccollin
  • 17. Device experience with WordPress Option 2 - switchers compass-design.co.uk @rachelmccollin
  • 18. Device experience with WordPress Option 2 - switchers • Mobile-specific experience • Code mobile theme from scratch • Option of combining with RWD compass-design.co.uk @rachelmccollin
  • 19. Device experience with WordPress Option 2 - switchers • Mobile-specific experience • Code mobile theme from • Needs a clear strategy scratch • More resource-intensive • Option of combining with RWD compass-design.co.uk @rachelmccollin
  • 20. Device experience with WordPress Option 2 - switchers • Mobile-specific experience • Code mobile theme from • Needs a clear strategy scratch • More resource-intensive • Option of combining with RWD Great for sites which will be used very differently by mobile users compass-design.co.uk @rachelmccollin
  • 21. Device experience with WordPress Option 3 - redirection plugins compass-design.co.uk @rachelmccollin
  • 22. Device experience with WordPress Option 3 - redirection plugins • VERY mobile-specific experience • Add extra functionality not needed on desktop • Can be much faster compass-design.co.uk @rachelmccollin
  • 23. Device experience with WordPress Option 3 - redirection plugins • Two sites to maintain • VERY mobile-specific • theme files experience • content • Add extra functionality not • Expensive needed on desktop • SEO / links issues • Can be much faster • Confusing for users compass-design.co.uk @rachelmccollin
  • 24. Device experience with WordPress Option 3 - redirection plugins • Two sites to maintain • VERY mobile-specific • theme files experience • content • Add extra functionality not • Expensive needed on desktop • SEO / links issues • Can be much faster • Confusing for users Useful for sites with a COMPLETELY different mobile interface, content etc. (e.g. web apps) compass-design.co.uk @rachelmccollin
  • 25. Device experience - possibilities • Mapping and geolocation • Social - BuddyPress etc. • E-commerce - Jigoshop, WP E-commerce • Media • Interactivity • Accelerometer compass-design.co.uk @rachelmccollin
  • 26. Device experience - plugins / themes • Theme switchers • WordPress Mobile Pack • WPtap • Mobile Smart • Redirection • WordPress Mobile Re-direct • Mobile detector (with an edit to functions.php) • UX • Geolocation plugin • BuddyPress Mobile theme • Jigoshop - plugin with premium responsive themes • Media - WordPress apps, i-Dump (limited right now) • Offline - WP Cache Manifest, Cache Manifest for WordPress themes • Accelerometer, Drag & drop, Canvas - yet to come • Or if you’re clever, use HTML5 and Javascript! compass-design.co.uk @rachelmccollin
  • 27. Reactive Web Design with WordPress compass-design.co.uk @rachelmccollin
  • 28. Reactive Web Design with WordPress • Consistent design / brand • Speeds up mobile site • Responds to context (although beware assumptions) compass-design.co.uk @rachelmccollin
  • 29. Reactive Web Design with WordPress • Consistent design / brand • Can take longer to • Speeds up mobile site develop • Responds to context • Requires familiarity with (although beware CSS and PHP assumptions) compass-design.co.uk @rachelmccollin
  • 30. Reactive Web Design with WordPress • Consistent design / brand • Can take longer to • Speeds up mobile site develop • Responds to context • Requires familiarity with (although beware CSS and PHP assumptions) Great for sites where the design is important and the mobile experience is different but not too different from the desktop compass-design.co.uk @rachelmccollin
  • 31. Reactive techniques • Responsive design using media queries PLUS server-side processing to send some different content • Plugins: • mobble, Mobile detector • Dropdown Menus • Mobile First Content Images • Conditional tags • Featured images • WordPress custom menus compass-design.co.uk @rachelmccollin
  • 32. Examples of Reactive Design using WordPress compass-design.co.uk @rachelmccollin
  • 33. Examples of Reactive Design using WordPress compass-design.co.uk @rachelmccollin
  • 34. Examples of Reactive Design using WordPress compass-design.co.uk @rachelmccollin
  • 35. Examples of Reactive Design using WordPress compass-design.co.uk @rachelmccollin
  • 36. Summary • There are options for making your site mobile • Responsive Web Design • Device experiences • Reactive Web Design • WordPress can help with them all • plugins • themes • inbuilt functionality • How you do it depends on the site, the budget and the skills of the development team compass-design.co.uk @rachelmccollin
  • 38. Slides and links http://compass-design.co.uk/?p=1810 compass-design.co.uk @rachelmccollin

Hinweis der Redaktion

  1. \n\n
  2. \n\n
  3. \n\n
  4. \n\n
  5. \n\n
  6. \n\n
  7. \n\n
  8. \n\n
  9. \n\n
  10. \n\n
  11. \n\n
  12. \n\n
  13. \n\n
  14. \n\n
  15. \n\n
  16. \n\n
  17. \n\n
  18. \n\n
  19. \n\n
  20. \n\n
  21. \n\n
  22. \n\n
  23. \n\n
  24. \n\n
  25. \n\n
  26. \n\n
  27. \n\n
  28. \n\n
  29. \n\n
  30. \n\n
  31. \n\n