Академический Документы
Профессиональный Документы
Культура Документы
T A B L E
O F
C O N T E N T S
Overview................................................................................................................................ 3
Developer ...................................................................................................................................................................................... 4
Site.................................................................................................................................................................................................... 4
Purpose
/
Goals .......................................................................................................................................................................... 4
Purpose ...........................................................................................................................................................................................4
Goals .................................................................................................................................................................................................4
The
site
will
contain ..................................................................................................................................................................4
Audience .........................................................................................................................................................................................4
Technical
Specifications ..........................................................................................................................................................5
Design ..............................................................................................................................................................................................5
Limiting
Factors..........................................................................................................................................................................5
Competitors...................................................................................................................................................................................5
Accessibility...................................................................................................................................................................................6
Testing.............................................................................................................................................................................................6
Style
Guide ............................................................................................................................. 7
Elements ........................................................................................................................................................................................ 8
Colors .............................................................................................................................................................................................. 9
Imagery .......................................................................................................................................................................................... 9
Planning ............................................................................................................................... 10
Information
Architecture .................................................................................................................................................... 11
Wireframes................................................................................................................................................................................ 12
Homepage ................................................................................................................................................................................... 12
Bio .................................................................................................................................................................................................. 13
Using
WordPress .................................................................................................................. 14
Login
to
WordPress ............................................................................................................................................................... 15
Blog
Posts
and
Pages ............................................................................................................................................................. 17
Blog
Posts:
New
Posts ............................................................................................................................................................ 17
Blog
Posts:
Editing/Viewing
Exiting
Posts ................................................................................................................... 19
Best
Practices
for
Posting .................................................................................................................................................... 20
Visual
Versus
HTML
Editor ................................................................................................................................................. 22
Pages ............................................................................................................................................................................................. 23
Pages:
Blog
Links ..................................................................................................................................................................... 24
Proof
Galleries.......................................................................................................................................................................... 25
Accessing
the
Proof
Galleries.............................................................................................................................................. 25
View
List
of
Existing
Proof
Galleries................................................................................................................................ 25
Edit
an
Existing
Proof
Gallery ............................................................................................................................................ 26
Add
a
New
Proof
Gallery....................................................................................................................................................... 28
Photo
Galleries ......................................................................................................................................................................... 31
Accessing
the
Photo
Galleries............................................................................................................................................. 31
View
List
of
Existing
Galleries ............................................................................................................................................ 32
Edit
an
Existing
Gallery ........................................................................................................................................................ 33
Adding/Uploading
Images
to
an
Existing
Gallery
and
Creating
a
New
Gallery .......................................... 36
Updating
Plugins ..................................................................................................................................................................... 38
Backing
Up
Your
Site ............................................................................................................................................................. 40
Back
up
your
database.......................................................................................................................................................... 40
Back
up
your
site
files
and
folders.................................................................................................................................... 40
2
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
O V E R V I E W
3
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Developer
Rick Garrett Design
Site
Jodi Richfield Photography
Purpose
/
Goals
Purpose
Redesign current site.
To increase traffic to the site in order to gain new clients.
Goals
To increase traffic by using relevant and useful content.
To increase traffic by making the site more visually appealing.
To increase sales of prints by creating a user-friendly interactive design.
Audience
Age range: 25-50, mostly women
Entertainment & design professionals (actors, models, etc.)
4
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Technical
Specifications
Domain: jodirichfieldphoto.com
Domain Registrar: xxxx
Hosting Company: xxxx
FTP and Control Panel:
Host: xxxx
Username: xxxx
Password: xxxx
Protosite/Template: constructed using XHTML/CSS
Actual Site: Protosite/template migrated into WordPress
Requirements for WordPress: PHP, MySQL (requirements met by fatcow.com)
WordPress Dashboard
Username: xxxx
Password: xxxx
WordPress Theme: Created using the protosite/template
Design
The design will be minimalist and secondary to the aesthetics of the photography.
Dark shades of gray will be used for the background to make the photos stand out.
Navigation design will be simple and intuitive to increase traffic and user experience.
The clients logo will be in the header and discreet courtesy links in the footer.
Limiting
Factors
The process of purchasing prints must be simple and intuitive. The clients choice for
conducting payment is PayPal.
=> Research will be made to find the best solution for designing with PayPal.
The photo galleries must be fun and sleek without intruding on the art itself. Flash will be
avoided for SEO and accessibility reasons.
=> Research will be made to find a good alternative script.
My clients existing blog will need to be part of the site.
=> Research will be made to see if it can be incorporated in to the new site now, or if it
will be linked-to from the new site to be incorporated at a later date.
Competitors
Many competitors utilize Flash to build their sites, which looks pretty and cool, but falls short on
accessibility and SEO. I wanted my clients site to be as accessible as possible and to be as
optimized as possible for search engines, so the site was built without using Flash and the
following SEO practices were put in place:
Alt & title tags
Keywords researched & targeted
Title tag properly constructed using keywords
Header tags properly constructed using keywords
Keywords used on every page
5
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Accessibility
Alt & title tags on every image
Relative font sizes to allow users to resize fonts
Separating the design from the HTML markup using CSS
Testing
The site validates for XHTML transitional and CSS per W3C.
It validates against W3C Web content accessibility guidelines.
It tested compatible with the following browsers/systems:
o Safari Mac & PC
o Firefox Mac & PC
o Opera Mac & PC
o Chrome Mac & PC
o IE 6 + PC
6
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
S T Y L E G U I D E
7
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Elements
Font
Family:
Century
Gothic,
Sans-serif
Heading
1
(HTML
code
places
h1
above
main
content
of
each
page;
CSS
code
places
h1
in
the
header
as
a
result,
h1
will
be
smaller
than
h2):
font-size
1.2
em
font-weight
normal
letter-spacing
2px
color
#999
Heading
2:
font-size
2em
font-weight
normal
color
#D0D0D0
letter-spacing
.02
em
Heading
3:
font-size
1.4em
letter-spacing
.02em
Heading
4:
font-size
1.2em
Heading
5:
font-sir5ze
.97em
Paragraph:
.85em/1.5em
letter-spacing
.07em
word-spacing
.015em
color
#999
Links:
color
#A5C2D5
(main
navigation
color
#777)
text-decoration
none
Links
Hover:
color
#777
(main
navigation
color
#A5C2D5)
text-decoration
underline
(main
navigation
text-decoration
none)
Ordered
&
Unordered
Lists:
list-style-type
square
8
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Colors
Background:
#333
with
textured
image
applied
to
html
tag,
bg-html.gif,
set
to
repeat
fixed
Image,
bg-body.png,
applied
to
body
tag
set
to
no-repeat
top
(for
IE
6,
this
image
is
styled
out
with
IEstyles.css)
Colors
Swatches:
#333333
#A5C2D5
#999999
#777777
#D0D0D0
Imagery
Imagery
will
be
mostly
limited
to
the
photo
galleries
themselves.
There
will
be
a
large
slideshow
on
the
homepage
and
smaller
slide
shows
on
the
gallery
pages
of
the
portfolio.
There
will
also
be
a
960x200
spotlight
image
on
the
Bio
and
Contact
pages.
There
will
be
a
thumbnail
picture
of
the
client
in
the
footer
in
the
Bio
column.
The
background
will
be
a
gray
textured,
repeated
image
with
non-intrusive
graphics
in
the
header
and
footer.
9
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
P L A N N I N G
10
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Information Architecture
11
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Wireframes
Homepage
12
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Bio
13
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
U S I N G W O R D P R E S S
14
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Login
to
WordPress
In
order
to
make
edits
to
the
pages
of
your
site,
to
upload
photos
to
your
galleries,
add
client
proof
accounts,
etc.,
open
any
Web
browser
and
go
to:
http://jodirichfieldphoto.com/wp-login.php
Username:
xxxx
Password:
xxxx
Once
logged
in,
youll
be
at
the
WordPress
Dashboard
as
seen
below
The
dashboard
is
the
starting
point
for
the
backend
of
your
Web
site.
In
the
main
content
area,
youll
see
a
section
that
summarizes
the
number
posts
and
pages
in
your
site,
whether
you
have
any
posts
or
comments
pending,
and
if
any
spam
comments
have
been
detected.
Theres
also
a
section
where
you
can
write
a
post
if
you
dont
want
to
go
into
the
main
post
area
(accessed
via
the
left
menu
bar)
and
sections
for
recent
drafts
and
recent
comments.
15
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
On
the
left
side
of
the
page
youll
see
the
main
menu
bar.
The
items
on
this
bar
that
youll
be
most
interested
in
are
the
following:
Posts
Hover
over
Posts
and
youll
see
options
for
the
following:
o Posts
lists
all
published
posts
o Add
New
write
a
new
post
Media
Hover
over
Media
and
youll
see
the
following
options:
o Library
lists
all
media
posted
via
your
blog
o Add
New
add
media
Pages
Hover
over
Pages
and
youll
see
the
following:
o Pages
lists
all
pages
in
the
site
o Add
New
add
new
page
Galleries
this
is
where
you
create
and
manage
your
client
proof
galleries
(this
will
be
explained
in
more
detail
later
in
this
document)
Tools
has
an
option
to
backup
the
database
that
holds
the
data
for
your
site
(this
will
be
explained
in
more
detail
later
in
this
document)
Gallery
where
you
upload
and
manage
photos
to
your
portfolio
galleries
(this
will
be
explained
in
more
detail
later
in
this
document)
16
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
This
method
of
posting
is
good
for
quick
text
posts
without
photos
even
though
you
can
add
media
using
this
method,
Id
suggest
just
using
it
for
text
only
and
then
using
the
second
method
(discussed
below)
for
posts
with
media.
17
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
2. From
the
left
menu
bar:
On
the
left
menu
bar,
go
to
Posts
>
Add
New,
youll
be
taken
to
the
following:
With
this
method
of
posting,
youll
see
the
following
tabs
just
above
the
editing
area:
These
tabs
allow
you
to
switch
between
writing
your
post
with
HTML
or
writing
your
post
using
Word-like
tools.
Use
whichever
you
feel
most
comfortable
with;
however,
if
you
float
a
picture
to
the
left
or
to
the
right
of
text,
and
then
add
another
picture
below
them,
youll
need
to
add
the
below
code
on
the
HTML
tab
youll
add
the
code
directly
below
the
picture
and
the
block
of
text
that
the
picture
is
floated
with.
The
code
is:
<br
class=clear
/>
Also,
if
your
post
ends
with
a
picture,
the
bottom
picture
needs
to
have
its
float
set
to
none.
Youll
see
float
options
when
you
add
a
photo
by
clicking
on
the
image
icon
described
in
the
next
paragraph.
18
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
With
both
methods,
adding
media
is
done
through
the
icons
to
the
right
of
the
words
UPLOAD/INSERT
as
seen
below.
The
first
icon
is
for
pictures,
the
second
is
for
video,
the
third
is
for
audio,
and
the
fourth
is
for
other
media.
Hovering
over
the
icons
will
display
their
function.
For
every
post
you
write
that
has
pictures,
you
need
to
set
the
Featured
image
option
seen
in
the
lower
right
corner
of
the
Post
editing
page
as
seen
below.
Setting
this
will
ensure
that
the
thumbnail
to
the
left
of
your
blog
post
excerpt
on
your
site
will
be
set
to
the
correct
size.
If
you
dont
set
this,
WordPress
will
pick
a
photo
at
random
and
it
might
not
be
sized
or
proportioned
correctly.
If
youre
post
doesnt
have
a
picture,
your
post
excerpt
will
just
show
text.
19
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Notice
the
Bulk
Actions
drop-down
at
the
top.
This
menu
allows
you
to
perform
actions
on
checked
posts
such
as
editing
or
moving
to
the
trash.
You
can
also
perform
these
actions
by
hovering
over
the
title
of
a
single
post
notice
how
the
blue
links
are
showing
under
the
first
post
above.
One
important
thing
to
remember
about
choosing
the
Trash
option
is
that
this
wont
permanently
delete
a
post
(same
thing
for
pages),
it
will
just
move
it
to
the
trash
can.
This
is
the
same
idea
of
moving
a
file
on
your
desktop
to
the
trashcan
its
not
gone
until
you
empty
the
trashcan.
For
WordPress
posts,
you
can
see
the
Trash
icon
at
the
top
of
the
page,
just
above
and
to
the
right
of
the
Bulk
Actions
menu.
Click
on
the
Trash
icon
to
permanently
delete
a
post
(this
works
exactly
the
same
for
pages).
To
edit
a
post,
just
click
on
the
blue
edit
link
when
you
hover
over
a
post
title.
Youll
see
the
same
options
you
saw
when
creating
a
new
post.
22
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
link
-
<a
href="http://example.com"></a>
HTML
tag
to
create
a
hyperlink.
ins
-
<ins></ins>
HTML
tag
to
label
text
considered
inserted
into
a
post.
Most
browsers
display
as
underlined
text.
(Assigns
datetime
attribute
with
offset
from
GMT
(UTC))
ul
-
<ul></ul>
HTML
tag
will
insert
an
unordered
list,
or
wrap
the
selected
text
in
same.
An
unordered
list
will
typically
be
a
bulleted
list
of
items.
ol
-
<ol></ol>
HTML
tag
will
insert
a
numbered
list,
or
wrap
the
selected
text
in
same.
Each
item
in
an
ordered
list
are
typically
numbered.
li
-
<li></li>
HTML
tag
will
insert
or
make
the
selected
text
a
list
item.
Used
in
conjunction
with
the
ul
or
ol
tag.
code
-
<code></code>
HTML
tag
for
preformatted
styling
of
text.
Generally
sets
text
in
a
monospaced font, such as Courier.
more
-
<!--more-->
WordPress
tag
that
breaks
a
post
into
"teaser"
and
content
sections.
Type
a
few
paragraphs,
insert
this
tag,
then
compose
the
rest
of
your
post.
On
your
blog's
home
page
you'll
see
only
those
first
paragraphs
with
a
hyperlink
((more...)),
which
when
followed
displays
the
rest
of
the
post's
content.
page
-
<!--nextpage-->
WordPress
tag
similar
to
the
more
tag,
except
it
can
be
used
any
number
of
times
in
a
post,
and
each
insert
will
"break"
and
paginate
the
post
at
that
location.
Hyperlinks
to
the
paginated
sections
of
the
post
are
then
generated
in
combination
with
the
wp_link_pages()
or
link_pages()
template
tag.
lookup
-
Opens
a
JavaScript
dialogue
box
that
prompts
for
a
word
to
search
for
through
the
online
dictionary
at
answers.com.
You
can
use
this
to
check
spelling
on
individual
words.
Close
Tags
-
Closes
any
open
HTML
tags
left
open--but
pay
attention
to
the
closing
tags.
WordPress
is
not
a
mind
reader
(!),
so
make
sure
the
tags
enclose
what
you
want,
and
in
the
proper
way.
Pages
Creating
and
editing
pages
is
very
similar
to
creating
and
editing
posts.
To
edit
a
page,
go
to
the
left
menu
bar
and
click
Pages
>
Pages.
When
the
list
of
pages
appears,
hover
over
the
title
of
a
page
and
click
the
Edit
link
when
it
appears.
Most
of
what
is
described
in
Best
Practices
for
Posting
and
Visual
Versus
HTML
Editor
in
the
previous
several
pages
can
be
applied
to
pages.
Be
extremely
careful
when
editing
your
pages
always
copy
and
paste
the
content
into
a
text
editor
to
save
as
a
back-up
before
you
start
editing.
The
content
of
some
pages
is
in
the
template
files
themselves,
so
editing
that
content
will
take
more
effort
and
more
advanced
knowledge
of
html
and
php.
The
content
in
the
header
and
footer
is
also
in
template
files
and
requires
more
effort
and
skill
as
well.
23
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
24
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Proof
Galleries
Accessing
the
Proof
Galleries
In
the
left
menu
bar,
youll
see
a
link
called
Galleries
(dont
confuse
this
link
with
Gallery
or
Gallery
(Smooth)).
Hover
over
Galleries
and
the
sub-menu
will
appear
as
seen
below.
25
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Hover
over
the
bolded
name
of
a
gallery
to
get
the
option
to
edit
the
gallery.
In
the
image
above,
the
mouse
is
hovered
over
the
bolded
title
Rick
Garrett
which
has
brought
up
the
edit
option
in
blue.
Clicking
on
edit
will
bring
up
that
gallerys
editing
options.
2. Delete
images
(found
below
Import
Images)
26
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
3. Set
a
password
for
the
gallery
(found
in
right
column
click
on
edit
to
the
right
of
Visibility:
Password
protected.
4. Change
the
gallery
ID
(found
just
above
Import
Images)
27
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Once
you
have
finished
editing
the
gallery,
click
on
Update
in
the
upper
right
corner
as
seen
below.
Add
a
New
Proof
Gallery
To
add
a
new
proof
gallery,
go
to
the
left
menu
bar
and
click
on
Galleries
>
Add
New
You
will
be
taken
to
the
screen
seen
below.
Enter
the
name
of
the
new
proof
gallery
in
the
top
box.
28
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
In
the
right
column,
under
Publish,
click
on
the
edit
link
next
to
Visibility:
Password
protected
this
is
where
youll
set
the
password
for
this
gallery
as
seen
below.
In
the
middle
of
the
page,
youll
see
a
heading
called
Gallery
Information
which
is
where
youll
change
the
Gallery
ID
to
something
that
you
can
remember.
An
ID
is
automatically
generated;
however,
you
can
change
it.
As
seen
below,
the
Gallery
ID
was
changed
to
test.
29
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Around
the
bottom
of
the
page,
youll
see
a
heading
called
Import
Images
which
is
where
youll
add
the
clients
proof
images.
30
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Photo
Galleries
31
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
32
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
33
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
From
this
page,
you
can
do
the
following:
1. Sort
images
Click
on
the
Sort
gallery
button
When
you
click
the
Sort
gallery
button,
youll
be
taken
to
a
view
where
youll
be
able
to
move
the
photos
to
the
desired
location
as
seen
below.
When
youre
done,
click
Back
to
gallery
34
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
2. Delete
Images,
Set
Watermark,
Resize,
Other
Options
After
clicking
Back
to
gallery,
youll
return
to
the
gallerys
editing
options
page.
Above
the
images
area
of
the
page,
youll
see
a
drop-down
list
with
the
words
Bulk
actions
as
the
label.
Check
the
box
to
the
left
of
the
image(s)
that
you
want
to
make
editing
changes
to,
then
click
on
the
drop-down
box
to
see
the
editing
options
as
seen
in
the
image
below.
Once
youve
made
your
editing
selection,
click
Apply,
then
Save
Changes.
35
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Youll
be
taken
to
a
page
where
you
can
perform
these
actions
as
seen
below.
Uploading
Images:
36
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Add
new
gallery:
37
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Updating
Plugins
Plugins
are
applications
that
are
downloaded
to
your
WordPress
installation
that
perform
specific
functions.
For
example,
your
proof
galleries
and
your
photo
galleries
are
controlled
by
plugins.
You
contact
form
is
also
controlled
by
a
plugin.
At
least
once
a
week,
youll
discover
that
one
or
more
of
your
plugins
will
need
to
be
updated.
This
is
a
simple
process
and
only
takes
minutes.
Youll
know
that
there
are
updates
when
you
login
to
WordPress
and
see
the
red
circle
with
a
number
in
as
in
the
image
below
look
to
the
left
of
the
Plugins
link.
The
easiest
way
to
get
to
the
list
of
plugins
that
need
updating
is
not
to
click
on
Plugins,
but
to
hover
over
the
Dashboard
link
youll
see
the
fly-out
menu
below
with
the
Updates
option.
38
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
Click
on
Updates
and
youll
be
taken
to
the
screen
you
see
below.
Check
Select
All
under
the
Plugins
section
in
the
middle
of
the
main
content
area.
Then
click
on
the
Update
Plugins
button
above
it
all
of
the
plugins
listed
will
automatically
update.
Youll
see
a
message
telling
you
that
all
plugins
have
been
updated
once
the
process
is
complete.
It
should
only
take
a
minute
or
two,
depending
on
how
many
updates
you
have.
Occasionally,
WordPress
itself
will
need
to
be
update.
Updating
WordPress
is
the
exact
same
process
as
updating
the
plugins.
Just
follow
the
same
steps.
39
Site Specification Document for Jodi Richfield Photography | Version 1.0 | 03-09-2011
40