Successfully reported this slideshow.

WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study

868 views

Published on

Regardless of the device ― smartphone, desktop, tablet ―today’s networked learners deserve a great user experience. Based on his first-hand experience of creating multi-device course companions for both his university and continuing studies courses, Paul will guide you through some of his key learner experience design insights and approaches. During the session he will also provide a guided tour of a multi-device WordPress 3.6 implementation for his university course on user interface design at Simon Fraser University, publicly available at http://cmpt-363-133.hibbittsdesign.com/

Published in: Education, Technology, Business
  • Be the first to comment

WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study

  1. 1. Designing a Multi-device WordPress Course Site Paul D Hibbitts @hibbittsdesign A case study, presented for WordPress in Higher Ed
  2. 2. How many mobile devices do you use daily?
  3. 3. Why useWordPress for multi-device learning?
  4. 4. Strengths of WordPress (to me) !  Learning – Discussions (Commenting and add-on Forums) – Networked learning (Blogs + RSS,Twitter, etc.) – Collaborative (Ratings, User Levels, etc.) – Mix of public and private (via log-in and shortcodes) !  Platform/UI – Huge, and welcoming, community – Support for a wide range of plug-ins – Embedding of third-party objects, via HTML – The easy “hackability”of PHP
  5. 5. Options for multi-device delivery of WordPress (course) sites
  6. 6. Responsive Web Design (RWD) http://www.paulolyslager.com/responsive-design-hype-solution/
  7. 7. Responsive Web Design !  Content/interface universal for all devices !  One source of content, presented differently !  Key elements – CSS media queries – Fluid grid layouts – Flexible images and media
  8. 8. My Favorite Framework for WordPress – (Twitter) Bootstrap !  Grid-based layout !  Support for responsive design !  Interface components (e.g. tabs) !  Javascript snippets (e.g. dialog boxes)
  9. 9. Are you currently supporting multi-device friendlyWordPress course sites? If so, how?
  10. 10. Multi-device delivery is now (pretty) easy, but doing it well is not
  11. 11. Multi-device Course Site Challenges/Opportunities !  In-context learning !  Design process !  Student expectations
  12. 12. How Might “Mobile Learning” be Re-defined in a Multi-device World? !  Ubiquitous !  Situational !  Connected !  Personal
  13. 13. Multi-device Experience Goals !  Conceptual and visual consistency !  Content and functionality parity !  Seamless task transferability !  Think ecosystem, not isolated devices !  Optimize physical interactions on every device
  14. 14. Multi-device Learner Experience Goals !  Engaging !  Organized !  Relevant !  Appealing
  15. 15. Time for Questions or Comments !  What we’ve covered so far – Why use WordPress for multi-device learning? – Multi-device support is now easy, but doing it well is not – Multi-device course site challenges/opportunities – “Mobile Learning” in a multi-device world – Multi-device experience goals – Multi-device learner experience goals !  Coming up – A guided tour of a multi-device WordPress site
  16. 16. A guided tour of a multi-deviceWordPress course site... http://cmpt-363-133.hibbittsdesign.com/ (built withWordPress 3.6)
  17. 17. Next Steps !  Try out a free responsive WordPress theme – github.com/olefredrik/foundationpress – 320press.com/wpbs/ !  Learn more about the Bootstrap Framework – getbootstrap.com/2.3.2/ (version 2.x) – getbootstrap.com/ (version 3.x) !  Learn more about multi-device design – lukew.com/presos/preso.asp?28 – blog.teamtreehouse.com/beginners-guide-to- responsive-web-design
  18. 18. Plug-ins That Might be Helpful !  Broken Link Checker !  Browser Specific CSS !  Category - RSS widget menu !  Countdown Timer !  Dave's WordPress Live Search !  Floating Menu !  Hide Admin Bar From Non-admins !  Logged in User Shortcode !  Multi Rating !  My Calendar !  Remove Dashboard Access !  Sidebar Login !  Simple:Press !  User Specific Content
  19. 19. Thank you! Any questions? !  Contact Info – Web: paulhibbitts.com – Email: paul@paulhibbitts.com – Twitter: @hibbittsdesign – LinkedIn: linkedin.com/in/paulhibbitts !  CMPT-363-133 Course Companion – cmpt-363-133.hibbittsdesign.com – Google Chrome web app: bit.ly/cmpt363chrome
  20. 20. Chrome App Launcher http://chrome.blogspot.ca/2013/12/a-new-breed-of-chrome-apps-now.html

×