Creating engaging and accessible online courses with wordpress.com

Crea%ng
Engaging
and

Accessible
Online
Courses
using

Wordpress.com

Presenta%on
delivered
at
the

Connect
2014
Conference
on
Technology

and
Learning,
Niagara
Falls
ON.

Robin
L
Po)er

School
of
English
and
Liberal
Studies

Seneca
College

INTRODUCTION

2

TRS-‐80
-‐
Wikipedia,
the
free
encyclopedia,
en.wikipedia.org
(Accessed
May
2,
2014)

The
ﬁrst
computer
I
ever
used.

3

MicrosoP
Sweden,
Apple
Computer
with
Excel
1.0
for
Macintosh
Screenshot
1985,
h)ps://www.ﬂickr.com/
photos/microsoPsweden/5395285812/,
(Accessed
May
2,
2014).

The
ﬁrst
computer
I
ever
owned.

THEN
AND
NOW

4

Steve
Jobs
image
from:
h)p://cyberculturenewbie.wordpress.com/
used
from

www.soul-‐sides.com
(Accessed
May
2,
2014).

Text-‐based
compu%ng

Visual
informa%on
experience

THE
DIGITAL
DIVIDE
FOR
MANY
OF
US

5

Jukes,
I,
&
Dosaj,
A.
(2003,
February).
The
diﬀerences
between
digital
na]ve
learners
and
digital
immigrant
teachers.
The
InfoSavvy

Group.
(Accessed
February
20,
2014)
from
h)p://edorigami.wikispaces.com/Understanding+Digital+Children+-‐+Ian+Jukes

CONSIDERATIONS
FOR
BRIDGING
THE
DIGITAL
DIVIDE

In
“Rewri]ng
the
Syllabus:
Examining
New
Hybrid
and
Online

Pedagogies,”
Jesse
Stommel
suggests:

“With
digital
pedagogy
and
online
educa]on,
our
challenge
is
not
to
merely

replace
(or
oﬀer
subs]tutes
for)
face-‐to-‐face
instruc]on,
but
to
ﬁnd
new
and

innova]ve
ways
to
engage
students
in
the
prac]ce
of
learning.
.
.

So,
hybrid
pedagogy
does
not
just
describe
an
easy
mixing
of
on-‐ground
and

online
learning,
but
is
about
bringing
the
sorts
of
learning
that
happen
in
a

physical
place
and
the
sorts
of
learning
that
happen
in
a
virtual
place
into
a
more

engaged
and
dynamic
conversa]on.”

6

DESIGN
YOUR
SITE
SO
YOUR
STUDENTS
WANT
TO
STAY

AND
COME
BACK

Consider
the
experience
of
these
kids:

Goats
balancing
on
ﬂexible
steel
ribbon

What
is
their
experience
of
“the
thing”?

Max
Mur,
Chèvres
en
équilibre
-‐
goats
balancing
on
a
ﬂexible
steel
ribbon,

h)p://youtu.be/58-‐
atNakMWw
(Accessed
February
20,
2014).

7

WHAT
MAKES
FOR
A
GOOD
WEBSITE?

“The
most
important
part
of
a

perfectly
designed
website
is

connec]ng
the
user
with
the

informa]on
they
came
to
ﬁnd.
If

your
design
is
easy
to
navigate
and

captures
the
interest
of
the
user,

you
have
likely
made
good
design

decisions.”

Douglas
Hughmanick
of
ANML,
a
web
and

content
design
ﬁrm
in
San
Jose,
California

8

Peter
Vukovic,
Experts
answer
what
makes
Websites
great?,
h)p://99designs.com/designer-‐blog/
2013/05/01/experts-‐answer-‐what-‐makes-‐websites-‐great/
May
1,
2013.
(Accessed
November
25,

2013);
Photo
from
About
Roads
&
Kingdoms,
2014,
h)p://roadsandkingdoms.com/about/,

(Accessed
February
21,
2014)

“A
website
design
needs
to
be
clean
and

simple
so
it’s
easy
for
the
user
to
quickly

ﬁnd
what
they
want.
.
.
It
just
needs
to
be

done
in
a
tasteful,
unclu)ered
manner
—

use
whitespace,
good
typography
and
be

subtle
with
rounded
corners
and
drop-‐
shadows.
.
.—
long,
responsive
websites

are
the
new
trend.”

Pat
Johnson,
award
winning

(10
AAF
awards)
web
designer

9

Peter
Vukovic,
Experts
answer
what
makes
Websites
great?,
h)p://99designs.com/designer-‐blog/2013/05/01/
experts-‐answer-‐what-‐makes-‐websites-‐great/
May
1,
2013.
(Accessed
November
25,
2013);
Photo
from

Thumbtack.com,

h)p://www.thumbtack.com/in/indianapolis/graphic-‐designers/award-‐winning-‐web-‐graphic-‐design
(Accessed

February
21,
2014).

“Carefully
review
the
words
on
the

websites
you
design.
Are
they
helping

or
hur]ng
your
clients?
Like
good

design,
good
content
can
clearly
tell

visitors
how
they’ll
beneﬁt
from
a

product
or
service,
provide
guidance,

and
make
it
easy
for
them
to
take

ac]on.
Quality
content
keeps
website

visitors
–
and
your
clients
–
happy,

and
coming
back
for
more.”

Rick
Sloboda,
Web
copywriter

10

Rick
Sloboda,
Good
Web
content
examples
and
what
makes
them
work."
Web
Design
Depot
June
7,
2011.

h)p://www.webdesignerdepot.com/2011/06/good-‐web-‐content-‐examples-‐and-‐what-‐makes-‐them-‐work/

(Accessed
November
25,
2013);
Photo
from
Canada
1,

h)p://www.canadaone.com/bio/rick_sloboda.html
(Accessed
February
21,
2014)

DESIGNING
FOR
ONLINE
WITH
YOUR
AUDIENCE
IN
MIND

1.  A
look
at
a
Wordpress.com
Course
(as
an
example)

2.  User
Experience

3.  Usability
101-‐-‐for
Online
Course
Design

a)  Course
mapping

b)  Portal
Guide
to
Oﬀ-‐Site
Course

c)  Unit
overview

4.  Accessibility
and
Readability

a)  Managing
Cogni]ve
Load

b)  AODA—Communica]on
and
Informa]on

c)  Page
Design

5.

Wordpress
Course
Recap

11

WORDPRESS.COM:
AN
OVERVIEW

Wordpress
is
a
blogging
plauorm
that
started
in
2003
with
“a

single
bit
of
code,”
which
evolved
into
the
open
source

blogging/website
development
site
we
know
today.

Dis]nguish
between:

-‐
wordpress.com:
work
with
templates

-‐
wordpress.org:
download
the
soPware
script

12

wordpress-‐logo1.bmp,
www.evenfromhere.org.

Crea]ve
Commons
A)ribu]on-‐ShareAlike
3.0
Unported
License.

FEATURES
OF
A
WORDPRESS.COM
COURSE

Go
to
Wordpress.com

•  Theme

•  Naviga]on

•  Site
map

•  Scaﬀolding
content

•  Blogging

•  Easy
upda]ng

•  Mul]media

•  Polling

•  Privacy

13

ELEMENTS
OF
USER
EXPERIENCE:
NEILSON
&
NORMAN

14

Neospot,
Usability
vs
User
Experience,
n.d.
h)p://www.neospot.se/usability-‐vs-‐user-‐
experience/
(Accessed
November
27,
2013).

WHAT
IS
USABILITY?

Jakob
Neilson
and
Don
Norman
(nnGroup)
define
Usability
as

follows:

1.
Learnability:
how
easily
a
user
“can
accomplish
a
task
the
first

]me
they
encounter
the
design.”

2.
Efficiency:
how
well
they
can
perform
a
task
with
informa]on

provided
within
the
design

3.
Memorability:
how
well
they
can
become
adept
at
using
the

design
aPer
not
using
is
for
a
while

15

4.
Errors:
the
number
and
severity
of
errors
in
the
design,
along

with
ease
of
recovery

5.
Sa]sfac]on:
the
degree
of
pleasure
or
sa]sfac]on
in
using
the

design

16

HANDY
PEDAGOGICAL
TOOLS
FOR
OPTIMIZING
USABILITY

1.  Course
Mapping

-‐  A
tool
for
planning
your
course,
media,
materials

-‐  A
learning
guide
for
students

-‐  Template

17

2.
Learning
Portal
(LMS)
Guide
to
Oﬀ-‐Site
Online
Course

a)  General
course
intro

b)  Addendum

c)  Learning
guide
(course
map)

d)  Student
guide

e)  Link
to
etext
site

f)  Link
to
Wordpress.com

g)  Learn.Wordpress.com
(tutorials)

18

3.
Unit
Overview

-‐
Orients
students
to
unit

-‐  Topics

-‐  Outcomes

-‐  Readings
and
ac]vi]es

-‐  Focus

19

BASIC
PRINCIPLES
OF
ACCESSIBILITY

1.  Keep
your
reader’s
needs,
abili]es,
and
experience
in
mind

2.  Familiarize
yourself
with
the
Accessibility
Ontario
Disability
Act

(AODA)

3.  Use
mul]media

4.  Think
about
devices

5.  Be
consistent
and
predictable

6.  Write
concisely
and
clearly

20

MANAGE
THE
COGNITIVE
LOAD

Avoid
overloading
the
learning
units
with
too
many
shiPs

between:

•  content

•  visuals

•  styles

•  dynamics

Plan
the
combina]on
of
media
elements
with
care

21

AODA
REQUIREMENTS

22

Image
from
Panorama,
Abili]y
in
Disability,

h)p://www.]gweb.org/youth-‐media/panorama/ar]cle.html?ContentID=6688
(Accessed
February
23,

2014)

The
Accessibility
for
Ontarians
with
Disabili]es
Act

(AODA)
provides
guidelines
for
informa]on
and

communica]on
that
are
based
on
the

World
Wide
Web
Consor]um
Accessibility
Guidelines–
highlights
are
linked
here.

BASIC
ACCESSIBILITY
PRINCIPLES
FOR
ONLINE
COURSES

A.
Create
Unclucered
Pages

1.  Use
sans
serif
fonts
e.g.,
Calibri,
Verdana,
Arial

2.  Place
important
informa]on,
headings,
visual
aids
at

the
leP
margin
for
leP-‐to-‐right
reading
languages

(Neilson,
2011)

-‐same
rule
applies
to
right-‐to-‐leP
reading
languages

F-‐Shaped
Design
Rule
(Neilson,
2006)

•  F-‐shaped
reading
pa)ern

23

3.
Use
short
paragraphs
and
lis]ng
(chunk
informa]on)

-‐
paragraphs—10
lines
max

4.
Allow
for
white
space

-‐
rests
the
eye

-‐
makes
informa]on
easy
to
ﬁnd

-‐
improves
reten]on

24

25

Jon
Phillips,
“5
Things
for
Improving
Readability
on
Your
Website,”
2011,

h)p://spyrestudios.com/5-‐]ps-‐for-‐improving-‐readability-‐on-‐your-‐website/,
(Accessed
February
24,
2014).

B.
Organize
Informa%on
Consistently
and
Predictably

1.  Use
descrip]ve
headings
and
sub-‐headings

consistently

-‐  Verb
tenses

-‐  Placement

-‐  Font
style

2.
Organize
informa]on
in
predictable
ways
and
place
it
in

similar
loca]ons
on
each
page

-‐
reveal
informa]on
progressively

-‐
use
parent,
child,
grandchild
pages
logically

26

27

Divyat
Rawat,
“How
to
Improve
Website
Usability
by
Improving
Content,”
2014,

h)p://www.paulolyslager.com/how-‐to-‐improve-‐website-‐usability-‐by-‐improving-‐content/,
(Accessed
February
24,
2014).

C.
Write
Clearly
Using
Straight-‐forward
Language

1.  Write
concisely;
brevity
is
key
in
all
web
wri]ng

-‐
Applies
to
all
languages
despite
diﬀerences
in

nuances/length
(Neilson,
2011)

2.
Use
the
ac]ve
voice
in
20-‐25-‐word
length
sentences.

-‐subject
+
ac]ve
verb
+
object

3.
Use
the
“you
a{tude”:

-‐
necessary
informa]on
ﬁrst;
you-‐oriented

28

D.
Support
Complex
Informa%on
with
Visual
Aids

1.  An]cipate
when
the
learner
would
benefit
from

mul]media
support
and
provide
it
as
needed

a)  Logical
placement

b)  Compa]ble
with
content:
clarifica]on,
illustra]on,

explana]on,
etc.

c)  Easy
to
find

2.
Accompany
audio
and
video
informa]on
with
a
transcript

or
sub]tles
(AODA
requirement)

-‐
Many
Youtube
videos
have
closed
cap]ons

29

REMEMBER

“Quality
Design
is
an
Indicator
of
Credibility”

30

Dimitri
Fedeyev,
10
Useful
Usability
Findings
and
Guidelines,
2009,

h)p://uxdesign.smashingmagazine.com/2009/09/24/10-‐useful-‐usability-‐ﬁndings-‐and-‐guidelines/
(Accessed
February
23,
2014);

Alicia
David,
Payton
Glore,

The
Impact
of
Design
and
Aesthe]cs
on
Usability,
Credibility,
and
Learning
in
an
Online
Environment,
in

Online
Journal
of
Distance
Learning
Administra]on,
Winter
2010,

h)p://www.westga.edu/~distance/ojdla/winter134/david_glore134.html
(Accessed
February
23,
2014).
Image
from
locosol,
2013,

h)p://locsolu]ons.biz/about/
(Accessed
February
23,
2014).

ENGAGEMENT

31

Karen
Robert,
Yukon
Public
Schools,
from

North
Ins]tute
of
Teaching
and
Learning,

March
4,
2011,

h)p://ni.oc.edu/2011/03/what-‐does-‐student-‐engagement-‐mean-‐to-‐you/
(Accessed
February
20,
2014).

WHAT
IS
A
RESPONSIVE
SITE?

Responsive
web
design
is
usually
understood
in
terms
of

•  page
structure,

•  typography,
and

•  coding.

We
are
concerned
about
web
page
elements
that
connect

faculty
with
students—and
students
with
faculty
and

peers.

32

Kyla
Wright,
Responsive
Website
Design:
What
It
Is
and
How
to
Use
It.
January
12,
2011.
h)p://coding.smashingmagazine.com/
2011/01/12/guidelines-‐for-‐responsive-‐web-‐design/
(Accessed
November
26,
2013).

ELEMENTS
FOR
CREATING
A
RESPONSIVE
WEBSITE

1.  Easy
to
update/modify

2.  Blogging-‐-‐Comments

3.  Polls

4.  Contact
form

5.  Email
feed

6.  Media-‐enriched
elements

(for
diﬀerent
learning
styles)

7.

Seamless
design

33

White
African,
Blogging
Tools:
IZEAFest
Talk.
September
13,
2008.
h)p://whiteafrican.com/
2008/09/13/blogging-‐tools-‐izeafest-‐talk/
(Accessed
December
1,
2013).November
26,
2013)

Works Cited and Consulted
Alicia
David,
Payton
Glore,

The
Impact
of
Design
and
Aesthe]cs
on
Usability,
Credibility,
and
Learning
in
an
Online

Environment,
in
Online
Journal
of
Distance
Learning
Administra]on,
Winter
2010,

h)p://www.westga.edu/~distance/ojdla/winter134/david_glore134.html
(Accessed
February
23,
2014).

Dimitri
Fedeyev,
10
Useful
Usability
Findings
and
Guidelines,
2009,

h)p://uxdesign.smashingmagazine.com/2009/09/24/10-‐useful-‐usability-‐ﬁndings-‐and-‐guidelines/
(Accessed
February

23,
2014).

Douglas
Hughmanick
Photo,
About
Roads
&
Kingdoms,
2014,
h)p://roadsandkingdoms.com/about/,
Accessed

February
21,
2014).

Steve
Jobs
image
from:
h)p://cyberculturenewbie.wordpress.com/
used
from
www.soul-‐sides.com
(Accessed
May
2,

2014).

Hanna
Lee,
Culture
Interfaces:
The
Blackberry
Project.
n.d.
The
Royal
College
of
Art.

h)p://ied.rca.ac.uk/uncategorized/culture-‐interfaces-‐the-‐blackberry-‐project
(Accessed
November
26,
2013).

Pat
Johnson
Photo,
Thumbtack.com,

h)p://www.thumbtack.com/in/indianapolis/graphic-‐designers/award-‐winning-‐web-‐graphic-‐design
(Accessed

February
21,
2014).

Jukes,
I,
&
Dosaj,
A.
(2003,
February).
The
diﬀerences
between
digital
na]ve
learners
and
digital
immigrant
teachers.

The
InfoSavvy
Group.
Retrieved
February
23,
2009
from
h)p://edorigami.wikispaces.com/

Understanding+Digital+Children+-‐+Ian+Jukes

34

Max
Mur,
Chèvres
en
équilibre
-‐
goats
balancing
on
a
flexible
steel
ribbon,
h)p://youtu.be/58-‐atNakMWw
(Accessed

February
20,
2014).

MicrosoP
Sweden,
Apple
Computer
with
Excel
1.0
for
Macintosh
Screenshot
1985,
h)ps://www.flickr.com/photos/
microsoPsweden/5395285812/,
(Accessed
May
2,
2014)

Neilson,
Jakob.
F-‐shaped
PaEern
for
Reading
Web
Content.
April
17,
2006.
h)p://www.nngroup.com/ar]cles/f-‐
shaped-‐pa)ern-‐reading-‐web-‐content/
(Accessed
November
14,
2013).

Neilson,
Jakob.
Interna]onal
Usability:
Big
Stuff
the
Same,
Details
Differ.
June
6,
2011.
h)p://www.nngroup.com/
ar]cles/interna]onal-‐usability-‐details-‐differ/
(Accessed
November
26,
2013).

Neospot,
Usability
vs
User
Experience,
n.d.
h)p://www.neospot.se/usability-‐vs-‐user-‐experience/
(Accessed

November
27,
2013).

Jon
Phillips,
“5
Things
for
Improving
Readability
on
Your
Website,”
2011,

h)p://spyrestudios.com/5-‐]ps-‐for-‐improving-‐readability-‐on-‐your-‐website/,
(Accessed
February
24,
2014).

D i v y a t
R a w a t ,
“ H o w
t o
I m p r o v e
W e b s i t e
U s a b i l i t y
b y
I m p r o v i n g
C o n t e n t , ”
2 0 1 4 ,

h)p://www.paulolyslager.com/how-‐to-‐improve-‐website-‐usability-‐by-‐improving-‐content/,
(Accessed
February
24,

2014).

35

Karen
Robert,
Yukon
Public
Schools,
“Engagement
Word
Cloud,”
from

North
Ins]tute
of
Teaching
and

Learning,
“What
does
student
engagement
mean
to
you?”
by
Berlin
Fang

March
4,
2011,

h)p://ni.oc.edu/2011/03/what-‐does-‐student-‐engagement-‐mean-‐to-‐you/
(Accessed
February
20,

2014).

Rick
Sloboda,
Good
Web
content
examples
and
what
makes
them
work."
Web
Design
Depot
June
7,

2011.

h)p://www.webdesignerdepot.com/2011/06/good-‐web-‐content-‐examples-‐and-‐what-‐makes-‐them-‐
work/
(Accessed
November
25,
2013).

Rick
Sloboda
Photo,
Canada
1,
h)p://www.canadaone.com/bio/rick_sloboda.html
(Accessed
February

21,
2014).

Tom
Springer,
Domenico
Azzarello,
Jeﬀ
Melton,
Bain
Consul]ng,
“What
it
takes
to
win
with
customer

experience,”
July
8,
2011,

h)p://www.bain.com/publica]ons/ar]cles/what-‐it-‐takes-‐to-‐win-‐with-‐customer-‐experience.aspx

(Accessed
February
20,
2014).

36

Jesse
Stommel,
“Rewri]ng
the
Syllabus:
Examining
New
Hybrid
and
Online
Pedagogies,”
presented
at

the
ASSETT
Teaching
with
Technology
Symposium,
April
28,
2014,

h)ps://docs.google.com/document/d/1jaIbXUXKPujMIrpySEgwyGokOKXV34C2iF4I2M9WjD4/
mobilebasic?pli=1
(Accessed
May
2,
2014).

Peter
Vukovic,
Experts
answer
what
makes
Websites
great?,
h)p://99designs.com/designer-‐blog/
2013/05/01/experts-‐answer-‐what-‐makes-‐websites-‐great/
May
1,
2013.
(Accessed
November
25,

2013).

Wikipedia,
TRS-‐80
-‐
Wikipedia,
the
free
encyclopedia,
en.wikipedia.org
(Accessed
May
2,
2014)

Website
Design
Canberra,
“Customer
Experience
Design,”
technowand.com.au,
(Accessed
February
20,

2014).

37

This
presenta%on
has
been
created
by

Robin
L
Pocer

Robin.Pocer@senecacollege.ca

Tw:
@newbuscom

Registered
under
a
Crea%ve
Commons
license:

38

Creating engaging and accessible online courses with wordpress.com

More Related Content

What's hot (20)

Similar to Creating engaging and accessible online courses with wordpress.com (20)

Recently uploaded (20)

Creating engaging and accessible online courses with wordpress.com