SEO and CSS by ojp13483

VIEWS: 11 PAGES: 18

									                   3487443_illustration [Converted].pdf   7/26/07   3:25:40 PM




SEO and CSS:  C



              M



              Y




The Perfect Marriage
             CM



             MY



             CY



             CMY



              K
Benefits of CSS
• Cascading
Style
Sheets
(CSS)
is
a
standard
layout
language
for
the

  Web—one
that
controls
colors,
typography,
and
the
size
and

  placement
of
elements
and
images.

• CSS
is
easy
to
author
by
hand

• It
is
bandwidth–friendly
technology:
a
single
10k
CSS
document
can

  control
the
appearance
of
an
entire
website

• CSS
can
replace
HTML
table-based
layouts
and
frames

• CSS,
together
with
other
web
standards
such
as
XHTML,
helps
us

  separate
style
from
content,
making
the
Web
more
accessible
to

  people
with
disabilities.
Benefits of CSS with Google
• The
Google
crawler
doesn't
recognize
text
contained
in
images,
CSS

  allows
you
to
mimic
the
same
effect
by
using
background
images
• If
your
site
has
fancy
features
such
as
JavaScript,
frames,
or
Flash,

  search
engine
spiders
may
have
trouble
crawling
your
site.
CSS

  simplifies
these
issues
by
leaving
a
smaller
code-to-content
footprint.
• The
HTML
code
on
each
page
is
much
cleaner
• The
CSS
file
is
cached
from
the
very
beginning,
and
this
speeds
up

  the
load
time
for
the
next
pages
•   Search
engines
spider
will
be
able
to
index
your
pages
much
faster,

    as
the
important
information
can
be
placed
higher
in
the
HTML

    document.

Marriage takes work
Changing your old ways
  Content to Code Ratio

Buji Case Study


• Original page,
  407 lines of code
  14.58
seconds
to
load


• Page rebuilt using CSS,
  76 lines of code
  4.30
seconds
to
load
Content to Code Ratio




      Traditionally using Javascript and bitmap images
      was the only way to achieve a roll-over effect.
Content to Code Ratio




      Traditionally using Javascript and bitmap images
      was the only way to achieve a roll-over effect.
Content to Code Ratio




      Traditionally using Javascript and bitmap images
      was the only way to achieve a roll-over effect.
Getting Started
What
does
CSS
look
like?

   A Basic Style Sheet

      /* CSS DOCUMENT */
      body { font: .9em Arial, Helvetica, sans-serif;background:#EEEEEE;}
      ul, ol { margin:10px; padding-left: 40px;}
      h1{ font: 24px Helvetica, Arial, sans-serif; color: #F7931E;}
      h2 { font: 20px Helvetica, Arial, sans-serif; color: #F7931E;}
      p { margin-top: 10px; padding:8px; line-height: 120%;}
      

Note
that
the
BODY
declaration
establishes
the
font
family,
text
color,
and

background
color.
Any
“child”
of
the
BODY
declaration
(such
as
<p>
or
<li>)
will
use

these
same
fonts
and
colors
unless
the
Style
Sheet
specifies
otherwise.
In
CSS,

this
passing
of
characteristics
from
“parent”
to
“child”
is
called
inheritance.

Getting Started
* background-color
  
Lets
you
set
a
page's
background
color
using
HTML
colors
(they
look
like
this:
#123456).

* color
  Sets
colors
for
text.

* font-family
  Lets
you
set
fonts
for
your
text
-
you
can
add
more
than
one
font
name,
separated

  by
commas,
in
case
your
first
choice
is
not
available.

* font-size
  You
can
set
the
font
size
in
px
or
em.
It
is
better
to
use
em
as
these
measurements

  are
relative
rather
than
absolute.

* width and height
  Lets
you
specify
the
width
and
height
of
things.
You
can
use
px
(pixels)
or
percentages.
Getting Started
* margin
  The
amount
of
space
around
the
edges
of
some
content.
You
can
add
-left,
-right,
-top
and
-
  bottom
to
margin
to
specify
these
margins
individually.

* padding
  Works
the
same
way
as
margin,
but
is
for
the
space
between
the
edges
of
the
tag's
box
and
its

  content,
instead
of
the
space
between
the
tag's
box
and
other
boxes.

* border
  Puts
borders
around
boxes.
Takes
three
settings
(width,
type
and
color),
so
you
have
to
put

  spaces
between
them,
like
this:
border:
1px
solid
black;

* text-align
  Lets
you
align
text
on
the
left
or
right,
or
in
the
centre
('center').

* text-decoration
  Controls
text
effects
-
mainly
used
to
stop
links
from
being
underlined,
like
this:

  a
{
text-decoration:
none;
}
H1, H2, H3 tags
<h1>
tags
seem
to
have
been
deprecated
by
stylesheets
these
days,
and
are

not
used
as
often
as
they
used
to
be.

The
Google
ranking
algorithm
dictates
that
if
you're
using
a
<h1>
tag,
then
the

text
in
between
this
tag
must
be
more
important
than
the
content
on
the
rest
of

the
page.
Here's
a
quick
example:





<h1>Google
sees
this
text
as
more
important</h1>




<p>...
than
this
text</p>

By
default,
H1
tags
aren't
the
prettiest
in
terms
of
formatting,
so
use
a
CSS

style
to
override
the
default
look:





H1
{
color:
blue;
font-family:
Verdana;
font-size:
16px
}

Something borrowed
and something new
Using CSS to freshen up your site
The Road to Enlightenment

CSS Zen Garden
The
Zen
Garden
aims
to
excite,
inspire,
and
encourage
participation.
Designers
are

challenged
to
build
a
unique
design
using
Cascading
Style
Sheets,
the
code

remains
the
same,
the
only
thing
that
has
changed
is
the
external
.css
file.

Benefits of CSS vs HTML tables
Laying
out
pages
with
CSS
instead
of
HTML
tables.


•   Conserve
bandwidth
(less
markup
for
visitors
to
download)
•   Reduce
design/development
time
•   Reduce
updating
and
maintenance
time
•   Increased
accessibility
(fewer,
or
no,
HTML
tables;
no
invalid
junk
markup)
•   Adhere
to
W3C
recommendations,
improving
interoperability
and
ensuring

    greater
longevity
(sites
will
not
become
obsolete)
•   More
professional
appearance
(line–height,
borders,
padding,
margins)
•   Increased
readability
(line–height,
borders,
padding,
margins)
•   More
easily
transition
in
future
to
more
powerful
standards
such
as
XML

    (because
page
content
no
longer
contains
junk
markup)
     CSS based tables
     Styling
a
table
with
CSS
has
mayor
advantages
since
it
separates
the
structural

     markup
from
presentation
formatting.
It
offers
extra
flexibility
on
the
way
you
present

     your
table
and
you
have
the
freedom
to
style
each
side
of
a
table
cell
separately.

                                         Html
table




                                    Table
styled
using
CSS




http://veerle.duoh.com/blog/comments/a_css_styled_table/
Resources
Following
W3C
advice
and
designing
your
pages
well
will
often
get
you
the
best

SEO
optimization.
• http://www.w3schools.com/css/css_intro.asp
• http://www.w3schools.com/xhtml/xhtml_intro.asp

Resources on using table-less layouts with CSS:
• http://glish.com/css/
• http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
• http://www.alistapart.com/stories/flexiblelayouts/

CSS inspiration
• http://www.csszengarden.com/
• http://alvit.de/handbook/
(my
personal
favorite)
• http://www.stylegala.com/
•   http://veerle.duoh.com/blog/
Thank You!

								
To top