This document discusses designing a multi-device WordPress course site. It outlines the strengths of using WordPress, including its learning and platform capabilities. It then covers options for delivering WordPress sites across multiple devices, particularly responsive web design. The document discusses challenges and goals in building a high-quality multi-device learner experience, and provides a guided tour of a sample responsive WordPress course site designed for this purpose. It concludes by recommending plugins and next steps for developing multi-device WordPress sites.

1. Designing a Multi-device
WordPress Course Site
Paul D Hibbitts
@hibbittsdesign
A case study, presented for WordPress in Higher Ed

2. How many mobile devices
do you use daily?

3. Why useWordPress for
multi-device learning?

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. Options for multi-device delivery of
WordPress (course) sites

8. Responsive Web Design (RWD)
http://www.paulolyslager.com/responsive-design-hype-solution/

9. 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

12. 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)

13. Are you currently supporting
multi-device friendlyWordPress
course sites? If so, how?

14. Multi-device delivery is now (pretty)
easy, but doing it well is not

15. Multi-device Course Site
Challenges/Opportunities
! In-context learning
! Design process
! Student expectations

16. How Might “Mobile Learning” be
Re-defined in a Multi-device World?
! Ubiquitous
! Situational
! Connected
! Personal

17. 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

18. Multi-device
Learner Experience Goals
! Engaging
! Organized
! Relevant
! Appealing

19. 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

20. A guided tour of a
multi-deviceWordPress course site...
http://cmpt-363-133.hibbittsdesign.com/ (built withWordPress 3.6)

38. 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

39. 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

40. 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

42. Chrome App Launcher
http://chrome.blogspot.ca/2013/12/a-new-breed-of-chrome-apps-now.html