Designing a Multi-device WordPress Course Site
Paul D Hibbitts @hibbittsdesign
A case study, presented for WordPress in Higher Ed
How many mobile devices do you use daily?
Why use WordPress for multi-device learning?
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
Options for multi-device delivery of WordPress (course) sites
Responsive Web Design (RWD)
http://www.paulolyslager.com/responsive-design-hype-solution/
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
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)
Are you currently supporting multi-device friendly WordPress course sites? If so, how?
Multi-device delivery is now (pretty) easy, but doing it well is not
Multi-device Course Site Challenges/Opportunities
! In-context learning ! Design process ! Student expectations
How Might “Mobile Learning” be Re-defined in a Multi-device World?
! Ubiquitous ! Situational ! Connected ! Personal
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
Multi-device Learner Experience Goals
! Engaging ! Organized ! Relevant ! Appealing
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
A guided tour of a multi-device WordPress course site...
http://cmpt-363-133.hibbittsdesign.com/ (built with WordPress 3.6)
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
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
Thank you! Any questions? ! Contact Info – Web: paulhibbitts.com – Email: [email protected] – Twitter: @hibbittsdesign – LinkedIn: linkedin.com/in/paulhibbitts
! CMPT-363-133 Course Companion – cmpt-363-133.hibbittsdesign.com – Google Chrome web app: bit.ly/cmpt363chrome
Chrome App Launcher
http://chrome.blogspot.ca/2013/12/a-new-breed-of-chrome-apps-now.html
