We're starting off right now
with our web design process
slide up here on the screen. So
this is the one that's going to
guide us through our semester.
Just keep us on track. And so
we're going to talk about
Sitemaps in just a moment. Okay,
so we're up here in our planning
stage right now. However, before
we get there, I should point out
that of course, we have this one
step above it. So we always need
to start with a client meeting.
If you're going to work on a
website, you're building it for
somebody, occasionally, you're
building it for yourself, but
not all that often. So starting
off the client meeting, you have
been introduced to you have met
this potential client somewhere.
They obviously want a website
and so you need to sit down and
have a conversation with them.
This can be an interesting
meeting. Because you're trying
to draw information out from
them. In other words, they have
an idea of what they want. But
you have certain questions you
have to ask of them as well. And
so you're trying to get a feel
for what they're looking for.
What's the purpose of this
website? What are they trying to
accomplish? Who their clients or
their users are, what they're
trying to communicate to them.
Then there is the whole design
aspect of it, which is partially
the visual of it, but an awful
lot of it is the organization of
your content. What are you
presenting there? How's the best
way to present that and they
will have ideas on how to
organize it and you get to bring
ideas to the table as well. And
then of course, the visual
portion of it. And sometimes
clients have the hardest time
explaining this. Sometimes they
will come to you and they will
say, I want you to build me a
site exactly like this one. You
know, if you kind of go well,
no, I can't do that. But usually
the best thing to do is to go to
them and say, Hey, what is it
you like about this site? Why do
you like this site? Let's try
and address that. And, in fact,
a lot of times easiest thing to
do is to ask them to give you
samples of what they like. And
then you can start asking them,
what do they like? Is it just a
matter of color? is its
structure is the use of
photography? Is it the
organization? Is it the
functionality of the site,
things like that? So these are
all the types of things that you
need to try and draw out of this
potential client and this
initial meeting. Once you have
had that meeting, you need to go
back and do some planning and
get some things put together. It
is not unusual for the client to
ask you right then and there,
you know, well, what's this
going to cost me and I usually
put that off. You know, I don't
like to give any kind of price
idea at that point because I
want to sit down and go through
my notes and work analyze it and
make sure that I'm quoting
everything that they need done.
And so that brings us up here to
our second stage here. And the
sitemap is part of our planning
process. And it would be part of
the quote and proposal that you
do for the client. So obviously,
you know, you need to give them
a price. And that price is
usually established by, in my
case, determining how long it
would take me to do this work
for them, and how much I want to
get paid. If I figure it out on
an hourly basis, and then
actually put a quote together.
It's pretty typical for quotes
to be a bid price and you're
saying I will do this much work
for this much money. It's not
usually hourly. I don't publish
my hourly rates that much. And
so you, you know, you bring the
quote together or to them to
explain what the cost is. And
that's part of the proposal. In
that proposal is the sitemap.
And the sitemap has to do with
the structure of the site. Okay?
In this case, this part of
sitemap has to do with the
structure of the site. Now, the
interesting thing about Sitemaps
is there are three different
things all around web design
that are called sitemap. They're
closely related to each other.
But I want to work through those
three things with you right now.
This one that is a part of our
process here is the third one
we're going to look at as it's
the structural sitemap part of
the planning.
So let's flip over to our other
slides right now. And we can
start going through all three
types of Sitemaps. So three
different kinds, they can be
created for people or users, or
they can also be created for
software. So the three types
we're going to look at the first
one are Sitemaps that exists on
a webpage, okay. So when site
can have a page called a
sitemap. It lists all of the
pages on the site, it can be
useful in assisting people
finding pages or subjects on the
site. Our second type is an XML
sitemap. This one is used by
search engines and other web
crawlers. And this shows
webpages with a priority and
update frequency on it. And our
third one is the planning
sitemap that we were just
talking about a moment ago. And
it is created by the web
designer shows proposed site
structure to the client or the
website owner. Okay, so let's go
walk through each of these. So
again, our first type is a web
page that is a sitemap. And the
purpose of this might not be
obvious right away because we're
accustomed to websites having
navigation running across the
top. And it's important for us
to spend time on that getting
that organized and creating in
such a way that Doesn't
overwhelm the user. In other
words, we like to have, you
know, three to five different
menu items up at the top. And
really not many more than that,
because it starts to become too
much for the person. And so then
you want to start working with
categories underneath that are
those things if you categories
and you click through to get to
underlying pages. However, there
are still times that it's hard
to find what you're looking for
on a website. And that's where
the sitemap comes in. So it is a
page that just lists all of the
pages within the site. And even
if you have a really good
navigation, sometimes it's hard
to find something maybe you're
just not familiar enough with
the subject, or it's organized
differently than you would
expect it to be. So you go to
the sitemap, and you can read
through it and find the page
you're looking for. Or one of my
favorite things about Sitemaps
is that it's a web page. And on
webpages, you can do a command F
and you can find a word And so
you can always go search for
something on that page. And that
works out well. So Sitemaps tend
to be broken into these five
different categories here, or
different types. So categorical,
extended categorical,
hierarchial, graphical. And
alphabetical, I'll give you
examples of each. So the first
one is just where you break your
pages out into categories. So in
this case, you see they have a
sitemap. And then there's
general information and pages
that go there. Then there's
Sacramento County grand jury,
there's pages of go there. And
then excuse me, and then it
keeps going from there. I only
showed you the beginning of this
page. This is Sacramento County
courts, I believe. And so this
one goes on and on. But this
one, you would basically go find
the category that you're looking
for and then look for the page
within that. And this one, I
like to compare To like a table
of contents that you would find
in the front of a book, because
your chapters are usually, you
know, like categories and you
can find things that way. Our
next one has categories, but
it's extended meaning I have
like I have this category called
sign on here. And that has
subcategories personal and
business banking or corporate
banking or private banking, and
then pages listed under them. So
basically, this one just has
another level of depth to it. Or
third one is just built as a
hierarchy. And this one works
really well with small to medium
size websites, because it really
just shows the structure of the
site. Okay, so see my homepage,
or I have a history page and
then it has pages lying
underneath it, or tours or here
or weddings has three pages
underneath it, you know, so you
can get a feeling of the
structure of the site and in
this case, Just using a bullet
list and the indents, you can
get a feel for what the
hierarchy is or the structure of
the site. You can have graphical
Sitemaps, though, honestly,
these are pretty rare.
This is an old screenshot off an
old site. And they're pretty
rare because you know, while
this works, and you can tell the
structure you have going here,
they're pretty difficult to
update. Okay, so if they're very
graphical at all, then you have
graphics here and to update
graphics, you have to open them
in Photoshop or something and
resave them and relink them and
things like that. So these are a
little more rare. And then
finally, we have an alphabetical
sitemap. And so this is off the
UN's website. And so you see, in
this case, I just have a
screenshot of the A's and you
can see things that fall under a
or I've got all the letters up
here I could go find something
under our if it starts with an R
This one, print obviously looks
a lot like the index that you
would find in the back of a
book. Okay? So these are web
page Sitemaps. Okay, different
styles that you can have. But
they all serve the same purpose.
They are just there to help the
end user find a page on the
site. They can take, you know, a
little bit of time to create,
but they're worth putting in
place. For everything that we're
building right now. We're
creating all of our pages by
hand. But once you start getting
into bigger websites, and you
have a content management system
behind the scenes, you can tell
it to build a sitemap for you,
and it just lists all the pages.
Okay. Our second kind of sitemap
is an XML sitemap. And this one
is well it's code as you see
already, slick code. It's
somewhat similar to HTML, but a
little bit different. And this
one was a cooperation of a
number of large companies that
got together. And Google being
one of them, and worked out a
good approach on this. And the
purpose of this one is this is a
listing of all pages in your
site, but it's for search
engines, okay? This is not the
end user never looks at this
one. So if we look at the code
real quick, you see it's XML up
here. And then we just get a URL
set. So that just has to do
with, you know, this is kind of
the standard it's following
here. And then if we zoom in
just a little bit, the code
should look kind of familiar,
because it's like we have there
like kind of like HTML tags. I
have a URL here, and
I have a close URL here.
So these all go together right
here, these lines, lines three
through eight. I have a location
and that's a web Address, okay,
and this is an old, actually
quite old one. But this is from
an old website of mine. But that
is just my domain name, then
this is last modified so the SEC
2010 10 years ago. So this says
this page was last modified
December 2 2010. We have a
change frequency. So this says
that I change this page monthly,
and then I have a priority of
point seven. And priorities
range between zero and one, one
being most important, okay,
so each of these is a page
between URL and the close
URL right here.
So here I have a second one. So
Michael Hayes dot biz slash
about dot htm. So that's my
about page. And then right down
here, work dot htm. That's my
portfolio. There's a contact
page. If we kept going, there's
my homepage listed right there.
So You can see all of these
listed here.
Now the thing you need to know
about this one of the things you
need to know is that you kind of
take a guess at you know, How
frequently do I change things?
So you see that like my about
page, it says monthly, my work,
which is my portfolio, I say
weekly, okay? And really,
they're just in relationship to
each other. And in other words,
I change this page more
frequently than this page.
Same goes with the priorities.
My homepage up here has a point
seven, okay, that's pretty
important. My about page I gave
it a point three, but my
portfolio I gave it a one as an
most important because I get the
most work off of my website by
people going through my
portfolio, seeing the work I've
done, who I've worked for things
like that. So I gave that a
priority of one. Now the
question comes up, why don't you
just make them all ones and They
don't mean anything if they're
all the same, okay? So, you
know, if everybody just sets
everything to one, then that
doesn't mean anything. So we
have to set a relative priority
to them. Okay, so that's why I
have this one as a one. This
file, it doesn't look like a
whole lot of fun to create. And
it's not bad actually, if you
get started because if you get
the structure then you can just
copy paste and put the
information in. But there are
other ways of creating it. In
fact, I'll show you two ways in
just a moment. This file also is
just saved in the root folder on
the server. None of your pages
will link to it. So no person's
ever going to go look at it. But
it's just there for the search
engines
to look at. So they will go look
for it.
And by you're telling them what
is there it helps them search
through your site and just helps
you in the rankings.
Let's see as far as ways to
create one, I'll jump over to a
browser here for a second. A
couple ways you can do it one
DMX zone here is a website that
sells extensions for Dreamweaver
to give it more capabilities.
And you see the Google sitemap
generator to hear. And this is a
free add on for Dreamweaver. So
that's one way to go about it
because Dreamweaver doesn't have
the capability built into it.
Another approach, which I've
used quite a few times, there's
websites out there that'll
generate it. So I've used this
one xml sitemaps.com. And you
just type in your web address
right there and tell it to start
and it runs through and
generates the list for you. Now,
if you think about it, it can't
do you know, a real accurate job
on it because neither of those
what methods know what your
change frequency is or what your
priority is. So really, it's
going to generate this text file
for you and then you can Go
update it and modify it. The
last modified date though it can
pull from the last time, each
page file was saved. Okay, so it
does save
you some work there.
Okay, so this is an XML sitemap.
Our final one is the structural
Sitemaps. And this is again is
back to our planning stage. So
the purpose of this one is to
take the information that the
client has given you from the
meeting, and sit down and think
about the organization of the
site. Where should things go so
that they're well organized and
people can find them? And also,
how is this going to be
reflected in our navigation?
Again, we don't want to
overwhelm users with navigation.
You know, three to five
different links up there is
great,
you know, six or seven is okay.
One of the first semesters I
taught, I had a guy take my
class and he wanted to Put every
single page on his website
listed on the homepage. And it
took some work to try and
convince him that there really
was a bad idea. And that's
mainly because it's just
overwhelming. You know, when you
start reading down through a
list, it's hard to focus all the
way through that. It's much
easier to scan five things and
go oh, that's it and click on
it. And as the page loads, you
get new navigation. You go, Oh,
there it is. That's what I need
right there, click up there's
the page I need. Okay, so that's
much easier than reading
through. So when you have that
meeting, you're gonna come out
with a list of things that they
want some ideas of how to
organize it, I would encourage
you to give it some critical
thought as far as how you think
it should be organized. Because
you know, you bring a different
and a fresh perspective to it.
And they are paying you you
know, for this type of work
to be the designer on it.
But it doesn't need to be good
partnership
again, because I never know my
clients business. As as well as
they do, okay, so we need to
cooperate and work together
on this. Once you get an idea of
how to organize that, then we
build a structural sitemap here.
So I've got the beginnings of
one on the page here. And it
just says homepage and it's
sitting in a box. Okay, so boxes
represent usually pages, or at
least the organization of a
site. So I would start with the
homepage at the top because
that's my typical entry point.
Then I would add the next layer
of pages. So in this case about
us products, contact us and
locations, those are pretty
common webpages. And those would
be what I expect to see my main
navigation running at the top or
down the sidebar. Okay. So this
these I will consider these my
secondary pages coming off of my
homepage. So now I need to
indicate how you come off of the
homepage and you can choose to
go between them. Okay, so coming
out The homepage, I have a
choice between which page I go
to. And so I would add lines in
this way. Okay, so see this
indicates coming out of it. And
then I have a choice which
direction I go in which page I
run to from there. I can keep
going in the structure. So like
I have a Products page. So let's
say I sell two products. So I
can do shirts and shoes there.
Okay, so these are one level
down from there. And then again,
I need to tie these in. So I
have a decision point coming off
of it, I can decide between
these two. Now you can also run
into times where you need to put
a couple pages below and they're
not going to fit so well down
here. And so I can add them
stacked this way. I just
realized I made a mistake. These
are supposed to be under
locations contact us but we're
gonna go with it for the moment.
I didn't have room to put them
side by side here. So I can see
Stack them. But you have to be
careful how you put the line in
here. So I want to show that it
comes down and you still have a
choice of going between these
pages. Okay, have a choice
between those pages. Again, this
should be locations and this
should be contact us over
there. Oops, okay.
Okay, so that's the general idea
of a structural sitemap. I would
build this in Illustrator or
Photoshop illustrator would be
the better tool for it, because
it's just boxes and lines and a
little bit of type. And I would
print it out on paper, if I was
going to go sit and meet with a
client, and it works well to
take it in on paper, because
then you can make changes, you
know, mark on it and things like
that. It just
helps show that it's a work in
progress. Okay, it's not locked
in stone.
Let's see one last thing to show
you about these. A couple
different things to watch out
for. In this case, this would be
a very broad
but shallow sight. In other
words,
my homepage has a choice between
all of these pages. And this is
kind of what I was talking about
before. This is too many pages
to choose between, okay, and
there's no depth to the site, it
doesn't go anywhere.
So that's, that's far from
ideal.
This one, on the other hand,
this is a very narrow site,
there's only three pages to
choose from, this would be in
our main navigation, but it's
pretty deep, you know, off of
graphic design, I can go a
couple layers over here and
homepage, or excuse me off of
homepage photography.
It goes pretty deep over here,
okay.
Now, this is what I was warning
you about a minute ago, where I
showed you where the the line
can come down this down next to
them come in the sides. Because
what this actually indicates
here, is to get to this
realistic page down here. I have
to actually go through each of
these. Notice there's no
decision point. This is a
decision point here I can come
down and choose between these.
If I Choose do from homepage to
photography, that's one click
23456 clicks to get down to
realistic, okay, so it's quite
deep. So this is not ideal
either. Our deal site really is
well balanced, meaning, you
know, I'm, I'm pretty equal in
how many pages I have across,
I've got four across here, my
whole site is four pages deep,
you know, that's pretty well
balanced there. So our goals are
to really figure out what the
best structure is, how to
organize this and break it out
that way. Sometimes you have to
get kind of creative with what
these pages will be up here,
because you have to cope with
categories that the pages
underneath makes sense. Okay, so
hopefully that has cleared
things up with Sitemaps. And
you're going to be creating two
Sitemaps in the lab assignment
today. And this page right here
actually is good example of what
you're creating
for your lab number one, okay?
