WordPress web appstechniques and plugins for creating web-based            apps with WordPress             Rachel McCollin...
Why a web app? • Quicker • Cheaper • Platform-agnostic • Not reliant on updates • SEO-friendly                            ...
The starting point - a responsive site                  http://rachelmccollin.co.uk/carborellis/                          ...
Part One - building a web app layout • Removing unwanted content • Changing the site title or description • Change and sty...
The web app design                     • Different navigation                        structure                     • Butto...
Using a mobile theme for the web app • Switcher plugin (WordPress Mobile Pack) • Existing theme used as starting point for...
Removing unwanted content                  • CTA in the header                  • Home page content                    •  ...
Changing the site description - 1  In the main site the site name is present but hidden:  <span id="site-description"><?ph...
Changing the site description - 3  In the app the site name is replaced by static text:  <span id="site-description"><?php...
Changing the site description - 4  Alternative solutions:   • use the site name and site description, only using one in ea...
Changing the site description - the result                               !                                        rachelmc...
Web app navigation - 1  • Set up new menu in WordPress admin - save as ‘web-    app’                                      ...
Web app navigation - 2  Replace:  wp_nav_menu( array( container_class => menu-header,  theme_location => primary ) );  wit...
Web app navigation - 3  Style the buttons:  .access li {  	 	 width: 100%;  	 	 margin: 15px 0;  }  .access a {	  	 	 back...
Web app navigation - the result                            !                                  rachelmccollin.com          ...
Style remaining layout                     • Social media icons                     • Address                     • Footer...
Part Two - web app functionality • Useful plugins • E-commerce and PayPal • Map and directions (with geolocation) • Additi...
Useful web app plugins - 1  •   Events:      •   Eventbrite for WordPress - http://wordpress.org/extend/plugins/eventbrite...
Useful web app plugins - 2  •   Geolocation & maps:      •   GeoPosty (http://wordpress.org/extend/plugins/geoposty/)     ...
Ice cream sundae builder - adding a form - 1                                     !   rachelmccollin.com                   ...
Ice cream sundae builder - adding a form - 2                                                 !             !              ...
Mobile form UX                 • Size of buttons etc.                 • Use correct virtual                    keyboard   ...
PayPal integration                                                                       !   •   Full e-commerce isn’t alw...
Give the user feedback                                                   !   •   A feedback page, confirmation email or pre...
Geolocation and maps                                           !                                                          ...
Other options - accessing mobile browsercapabilities • File Upload - available with iOS6 • Local storage • Web video and a...
Summary          Web apps are the future of apps!                      (IMHO)                                             ...
And finally...                 rachelmccollin.com                    @rachelmccollin
Upcoming SlideShare
Loading in...5
×

WordPress Web Apps

4,023
-1

Published on

Slides from ym p

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,023
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • WordPress Web Apps

    1. 1. WordPress web appstechniques and plugins for creating web-based apps with WordPress Rachel McCollin rachelmccollin.com rachel@compass-design.co.uk @rachelmccollin
    2. 2. Why a web app? • Quicker • Cheaper • Platform-agnostic • Not reliant on updates • SEO-friendly rachelmccollin.com @rachelmccollin
    3. 3. The starting point - a responsive site http://rachelmccollin.co.uk/carborellis/ rachelmccollin.com @rachelmccollin
    4. 4. Part One - building a web app layout • Removing unwanted content • Changing the site title or description • Change and style the navigation • Style the layout rachelmccollin.com @rachelmccollin
    5. 5. The web app design • Different navigation structure • Buttons • No home page content • Different site title rachelmccollin.com @rachelmccollin
    6. 6. Using a mobile theme for the web app • Switcher plugin (WordPress Mobile Pack) • Existing theme used as starting point for mobile theme rachelmccollin.com @rachelmccollin
    7. 7. Removing unwanted content • CTA in the header • Home page content • new template file - home.php • remove everything in the loop ! rachelmccollin.com @rachelmccollin
    8. 8. Changing the site description - 1 In the main site the site name is present but hidden: <span id="site-description"><?php bloginfo( description ); ?> </span> #site-description, #site-name { position: absolute; left: -9999px; } rachelmccollin.com @rachelmccollin
    9. 9. Changing the site description - 3 In the app the site name is replaced by static text: <span id="site-description"><?php bloginfo( description ); ?> </span> #site-description { position: relative; float: right; width: 60%; text-align: right; left: 0; } rachelmccollin.com @rachelmccollin
    10. 10. Changing the site description - 4 Alternative solutions: • use the site name and site description, only using one in each theme • add theme options screen (probably neatest) rachelmccollin.com @rachelmccollin
    11. 11. Changing the site description - the result ! rachelmccollin.com @rachelmccollin
    12. 12. Web app navigation - 1 • Set up new menu in WordPress admin - save as ‘web- app’ rachelmccollin.com @rachelmccollin
    13. 13. Web app navigation - 2 Replace: wp_nav_menu( array( container_class => menu-header, theme_location => primary ) ); with: wp_nav_menu( array(menu => ‘web-app’, container_class => menu-header, menu-class => ‘web-app-menu )); rachelmccollin.com @rachelmccollin
    14. 14. Web app navigation - 3 Style the buttons: .access li { width: 100%; margin: 15px 0; } .access a { background: #0cf; border-radius: 5px; color: #fff; height: 50px; font-size: 1.4em; } .access ul li.current_page_item > a { color: #fff; } rachelmccollin.com @rachelmccollin
    15. 15. Web app navigation - the result ! rachelmccollin.com @rachelmccollin
    16. 16. Style remaining layout • Social media icons • Address • Footer text • Add link to switch to main (responsive) site using plugin, and style ! rachelmccollin.com @rachelmccollin
    17. 17. Part Two - web app functionality • Useful plugins • E-commerce and PayPal • Map and directions (with geolocation) • Additional options and the future rachelmccollin.com @rachelmccollin
    18. 18. Useful web app plugins - 1 • Events: • Eventbrite for WordPress - http://wordpress.org/extend/plugins/eventbrite • Events Manager - http://wordpress.org/extend/plugins/events-manager/ • E-commerce & subscriptions • WP E-commerce (http://wordpress.org/extend/plugins/wp-e-commerce/) • Jigoshop (http://wordpress.org/extend/plugins/jigoshop/) • WooCommerce (http://www.woothemes.com/woocommerce/) • s2member (http://wordpress.org/extend/plugins/s2member/) • Gravity Forms (http://www.gravityforms.com/) • WordPress Ultra Simple PayPal Shopping cart (http://wordpress.org/extend/ plugins/wp-ultra-simple-paypal-shopping-cart/) rachelmccollin.com @rachelmccollin
    19. 19. Useful web app plugins - 2 • Geolocation & maps: • GeoPosty (http://wordpress.org/extend/plugins/geoposty/) • MyGeoPosition.com (http://wordpress.org/extend/plugins/ mygeopositioncom-geotags-geometatags/) • MapPress Easy Google maps (http://wordpress.org/extend/plugins/ mappress-google-maps-for-wordpress/) • Social media • BuddyPress (http://wordpress.org/extend/plugins/buddypress/) • Simple Facebook Connect (http://wordpress.org/extend/plugins/simple- facebook-connect/screenshots/) • Photography • PhotoSmash (http://wordpress.org/extend/plugins/photosmash-galleries/) • iDump (http://wordpress.org/extend/plugins/i-dump-iphone-to-wordpress- rachelmccollin.com photo-uploader/) @rachelmccollin
    20. 20. Ice cream sundae builder - adding a form - 1 ! rachelmccollin.com @rachelmccollin
    21. 21. Ice cream sundae builder - adding a form - 2 ! ! rachelmccollin.com @rachelmccollin
    22. 22. Mobile form UX • Size of buttons etc. • Use correct virtual keyboard • Use select boxes where possible • Access Autofill • Use conditional fields ! • ...anything to reduce the amount of typing! rachelmccollin.com @rachelmccollin
    23. 23. PayPal integration ! • Full e-commerce isn’t always necessary • Gravity Forms integrates easily with PayPal (with a developer license) rachelmccollin.com @rachelmccollin
    24. 24. Give the user feedback ! • A feedback page, confirmation email or preferably both • Always important, especially when money has changed hands • GF lets you specify a popup or separate page rachelmccollin.com @rachelmccollin
    25. 25. Geolocation and maps ! ! • Use a plugin that accesses user location • Provide a map and directions • Link to native maps app (the jury is out on this one right now!) rachelmccollin.com @rachelmccollin
    26. 26. Other options - accessing mobile browsercapabilities • File Upload - available with iOS6 • Local storage • Web video and audio APIs (web audio API now available with iOS6) • Canvas • Drag and drop • Location-dependent content rachelmccollin.com @rachelmccollin
    27. 27. Summary Web apps are the future of apps! (IMHO) rachelmccollin.com @rachelmccollin
    28. 28. And finally... rachelmccollin.com @rachelmccollin
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×