Download LESS IS MORE

6/6/08
Presenters:
WHAT
NOT
TO
WEAR
ON
THE
WEB
• Nikki
Massaro
Kauffman,
Department
of
Informa>on
Technologies,
University
Libraries
• Andrew
Calvin,
Department
of
Informa>on
Technologies,
University
Libraries
• Robin
Smail,
Instruc>onal
Design
&
Development,
World
Campus
• Natalie
Harp,
Instruc>onal
Design
&
Development,
World
Campus
LESS
IS
MORE
How
to
“Strip”
Your
Content
Down
to
the
What
Visitors
Really
Want:
LESS
IS
MORE
• Adap>ng
Content
to
the
Web
• “Travel‐Sized”
Content
• How
to
Write
for
the
Web
• Breaking
Up
Your
Content
1
6/6/08
LESS
IS
MORE
Adap-ng
Content
for
the
Web
• Who
reads
the
Web
like
a
book?
• Who
searches
Web,
then
reads
what
they
find?
• Who
searches
the
Web,
prints,
then
reads?
LESS
IS
MORE
How
to
Write
for
the
Web
1. Answer
the
5W/H
immediately.
2. Use
inverted
pyramid
method.
3. Cut
word
count
in
half.
LESS
IS
MORE
“Travel‐Sized”
Content
• A
Web
page
is
the
"travel‐sized",
more
portable
version
of
your
content.
• 1‐2
ver>cal
scrolls
(4
max)
LESS
IS
MORE
Using
5W/H
Answer
the
following
in
the
few
lines:
1. Who?
2. What?
3. When?
4. Where?
5. Why?
6. How?
2
6/6/08
LESS
IS
MORE
Inverted
Pyramid
LESS
IS
MORE
Cut
Word
Count
in
Half
5W/H
and
Most
Important
Content
1. Eliminate
meaningless
phrases.
2. Trade
larger
words/phrases
with
smaller
ones.
3. Make
sure
your
nouns
and
verbs
are
close
to
each
other.
4. Give
the
ac>on
to
your
verb,
not
your
noun.
Less
Important
Informa>on
Least
Important
Informa>on
(Details)
LESS
IS
MORE
Breaking
Up
Your
Content
• Chunking
• Lists
• Highligh>ng
"Get
rid
of
half
the
words
on
each
page,
then
get
rid
of
half
of
what's
lec.“‐Steve
Krug
LESS
IS
MORE
Chunking
Your
Content
1. Upper‐level
pages
should
be
shorter.
2. Lower‐level
pages
can
be
longer,
using
subheadings
and
white
space.
3. Keep
like
items
together
in
folder
hierarchy.
Home
Page
Pathway
Page
Content
3
6/6/08
LESS
IS
MORE
Using
Subheadings
1. Use
heading
tags
(3
levels
max).
2. Consider
passive
voice
for
headings.
3. Add
an
anchor
to
each
heading,
and
put
a
menu
on
the
top
linking
to
them.
4. Add
a
back‐to‐top
link
at
the
end
of
each
sec>on.
(Example)
LESS
IS
MORE
Using
Lists
1. Replace
longer
content
with
lists
for
more
white
space.
2. Create
links
from
list
items
to
more
detailed
pages.
3. Make
sequenced
or
counted
items
ordered
lists;
make
all
others
unordered.
4. Use
parallel
structure
for
list
items.
LESS
IS
MORE
Using
White
Space
1. Use
white
space
to
take
a
long
pause
between
concepts.
2. Use
white
space
before
new
subheadings.
3. Use
whitespace
acer
lists
and
graphics
to
separate
them
from
unrelated
material
that
will
follow.
4. Avoid
"false
boeoms"
(too
much
white
space
that
looks
like
the
end
of
a
page).
LESS
IS
MORE
Highligh-ng
Key
Words
&
Phrases
1. Use
strong
(Bold)
font
for
key
words.
2. Use
strong
(Bold)
and/or
Emphasized
(Italicized)
font
for
key
phrases
or
sentences.
3. Do
not
use
underlines.
Viewers
think
they
are
hyperlinks.
4. DO
NOT
USE
ALL
CAPITAL
LETTERS.
They
are
harder
to
read,
readers
skip
over
them,
and
they
can
be
perceived
as
angry
text
(flames).
4
6/6/08
IT’S
ALL
ABOUT
THE
LABEL
How
to
“Dress
Up”
Your
Content
with
a
Professional,
Credible
Appearance:
IT’S
ALL
ABOUT
THE
LABEL
IT’S
ALL
ABOUT
THE
LABEL
Making
Good
Language
Choices
1. Use
professional,
thoroughly‐proofread
language.
2. Avoid
slang
and
regional
language.
3. Avoid
jargon,
acronyms
and
abbrevia>ons.
4. Avoid
"marketese".
• • • • Good
Language
Choice
Valuable
Informa>on
Quality
Sources
Consistency
IT’S
ALL
ABOUT
THE
LABEL
Avoiding
Slang
&
Regional
Language
1. Web
sites
have
a
world‐wide
audience.
2. Penn
State
has
a
diverse
student,
staff,
and
faculty
popula>on.
3. Using
slang
and
regional
language
in
your
sites
may
alienate
your
audience.
5
6/6/08
IT’S
ALL
ABOUT
THE
LABEL
Avoiding
Jargon,
Acronyms
&
Abbrevia-ons
IT’S
ALL
ABOUT
THE
LABEL
Providing
Valuable
Informa-on
1. Jargon‐heavy
content
may
be
passed
over
for
simpler
content
elsewhere.
2. Use
jargon,
acronyms,
and
abbrevia>ons
sparingly.
1. Avoid
duplicate
content.
2. Eliminate
outdated
content.
3. If
you
must
use
them,
define
them
once
per
sec>on
before
using.
IT’S
ALL
ABOUT
THE
LABEL
Avoiding
Duplicate
Content
1. Coordinate
informa>on
efforts
to
avoid
duplicates
(including
interdepartmental).
2. Give
preference
to
the
source
that
is
closest
to
your
control:
DepartmentPSUExternal
IT’S
ALL
ABOUT
THE
LABEL
Elimina-ng
Outdated
Content
1. Never
use
outdated
content
as
a
placeholder.
2. When
removing
an
outdated
page,
update
all
links
to
it.
3. Inform
other
departments
when
your
content
changes
or
is
removed
in
case
they
need
to
make
changes
in
their
references
to
it.
6
6/6/08
IT’S
ALL
ABOUT
THE
LABEL
Using
Quality
Sources
1. Select
valid
sources.
2. Check
for
updated
sources.
3. Use
balanced
sources.
4. Cite
your
sources.
IT’S
ALL
ABOUT
THE
LABEL
Maintaining
Consistency
1. If
you
have
a
Content
Management
System
(CMS),
don't
hack
it.
2. Use
consistent
fonts,
colors,
and
layout
throughout.
3. Use
consistent
headings
and
keyword
formamng.
4. Use
parallel
structure
on
lists,
links,
etc.
5. Use
PSU,
college/department
branding.
IT’S
ALL
ABOUT
THE
LABEL
Avoiding
CMS
Hacks
1. A
CMS
provides
a
consistent
look
despite
different
authors/departments.
2. A
CMS
enables
authors
focus
on
content.
3. A
CMS
allows
one
author
to
transi>on
a
page
to
another
without
knowledge
of
CSS,
JavaScript,
etc.
4. A
CMS
provides
dynamic
automated
features.
HOW
TO
ACCESSORIZE
7
6/6/08
HOW
TO
ACCESSORIZE
HOW
TO
ACCESSORIZE
Following
the
“Rule
of
Three”
• No
more
than
three…
How
to
“Complement”
Your
Content
by:
• Replacing
Verbiage
with
Visuals
• Matching
Your
Graphics
&
Color
Paleee
• Following
the
“Rule
of
Three”
HOW
TO
ACCESSORIZE
Matching
Your
Graphics
&
Color
Palebe
1. Consider
limi>ng
color
choices
for
backgrounds,
images,
graphics,
logos
and
naviga>on
to
a
predefined
paleee.
2. Limit
text
and
headers
to
your
color
paleee.
3. Consider
those
with
limited
color
percep>on
(grayscale
print
test).
– Headings
– Fonts
– Colors
• Know
when
this
rule
can
be
strategically
broken.
(ex:
Google
logo
breaks
rule
but
rest
of
page
is
simple)
HOW
TO
ACCESSORIZE
Replacing
Verbiage
with
Visuals
• Tables
• Charts,
Graphs
and
Diagrams
• Screenshots,
Images
and
Mul>media
8
6/6/08
HOW
TO
ACCESSORIZE
Using
Tables
HOW
TO
ACCESSORIZE
Using
Charts,
Graphs
and
Diagrams
1. Make
it
a
quick,
simple
reference
(comparisons,
not
complex
data).
(Examples
1,
2,
3)
2. Use
the
top
and/or
lec
columns
as
headers.
3. Format
and
align
for
easy
reading.
(lec‐align)
4. Use
table
headers
and
summaries
for
accessibility.
5. Avoid
using
tables
for
layouts.
1. Use
to
summarize
complex
data,
structures
or
processes.
(Examples
1,
2,
3)
2. Allow
enough
contrast
to
dis>nguish
between
bordering
areas
(test
in
grayscale).
3. Choose
the
most
no>ceable
color
for
your
most
important
piece
of
data.
4. Use
the
alt
aeribute
and
a
descrip>ve
cap>on.
HOW
TO
ACCESSORIZE
Using
Screenshots,
Images,
and
Mul-media
1. Use
ALT+
Print
Screen
and
paste
screenshot
into
an
applica>on
where
you
can
crop
it.
2. Use
the
alt
aeribute
as
well
as
a
descrip>ve
cap>on
for
each
item
that
is
more
than
just
decora>ve.
3. Consider
accommoda>ons
for
viewers
with
disabili>es.
(Example)
COMFORT
MEETS
STYLE
9
6/6/08
COMFORT
MEETS
STYLE
COMFORT
MEETS
STYLE
Usability
and
Accessibility
The
terms
are
different
but
similar…
How
to
Provide
a
“Comfortable”
Experience
for
All
for
Visitors:
• Usability
‐
op>mum
design
for:
• Usability
and
Accessibility
• “Drive‐Thru”
Naviga>on
• “One‐Size‐Fits‐All”
Design
• Accessibility
COMFORT
MEETS
STYLE
“Drive‐Thru”
Naviga-on
1. Use
simple
file
and
folder
names
(for
simpler
URLs).
2. Follow
the
best
prac>ce
linking
conven>ons.
3. Provide
mul>ple
routes
to
high‐traffic
pages.
4. Consider
print
CSS
for
HTML
pages.
– findability
– minimizing
distrac>ons
– designing
to
accommodate
users
with
disabili>es
– ocen
legally
mandated
COMFORT
MEETS
STYLE
Using
Simple
File
&
Folder
Names
1. Use
descrip>ve,
one‐word
names.
2. Use
all
lowercase
leeers.
3. Don't
use
special
characters.
10
6/6/08
COMFORT
MEETS
STYLE
Following
Linking
Conven-ons
1. Target
anchors
for
same
window.
2. Target
internal
links
for
same
window.
3. Target
external
links
for
new
window
(note
this
in
link
text).
4. Avoid
mixing
anchors,
internal
and
external
links
in
same
list.
5. Make
link
text
very
descrip>ve
(no
"click
here"
or
"tools").
6. Use
descrip>ve
>tle
aeributes
(e.g.
>tle="This
link
goes
to
the
Penn
State
home
page.").
COMFORT
MEETS
STYLE
Considering
a
Print
CSS
for
HTML
Pages
1. Same
data;
no
mul>ple
print/Web
versions.
2. Web
pages
can
be
searched.
3. Saves
viewer
from
downloading
and
opening.
4. Only
a
browser
is
required.
COMFORT
MEETS
STYLE
Providing
Mul-ple
Routes
to
High‐Traffic
Pages
1. Think
of
these
pages
as
major
ci>es
with
mul>ple
routes
in
and
out
of
them.
2. Include
high‐traffic
pages
in
your
site
index.
3. Add
links
to
high‐traffic
pages
on
the
lec
or
top
menu.
4. Add
breadcrumb
naviga>on
to
your
pages.
5. Link
to
these
high‐traffic
pages
from
related
content.
COMFORT
MEETS
STYLE
Using
“One‐Size‐Fits‐All”
Design
1. The
Basics:
alt
tags
for
images/>tle
tags
for
links
11
6/6/08
COMFORT
MEETS
STYLE
Using
“One‐Size‐Fits‐All”
Design
2. Considering
Color:
sharply
contras>ng
colors
to
differen>ate
plus
cues
other
than
color
alone
COMFORT
MEETS
STYLE
Using
“One‐Size‐Fits‐All”
Design
4. Using
Tables:
use
the
summary
aeribute,
as
well
as
the
cap>on
and
table
header
tags;
never
use
tables
for
layout!
COMFORT
MEETS
STYLE
Using
“One‐Size‐Fits‐All”
Design
3. All
About
Fonts:
normal,
rela>ve‐
sized
(e.g.
medium,
large),
easy‐to‐read
(e.g.
Lucida,
Helve>ca,
Georgia)
fonts
COMFORT
MEETS
STYLE
Using
“One‐Size‐Fits‐All”
Design
5. Finally,
Validate!:
validate
your
html
and
Sec>on
508
(W3C,
Cynthia
says,
Bobby)
12
6/6/08
ASK
US!
13