By:

1
Page Design

• By
• Aaron Lastoff

2
Determine A Theme

• Important to figure out the underlying theme of
  the website your going to develop
• Audience
• Business with E-commerce
• Search Engine -Google
• Blog
• Social Network FaceBook, Myspace

3
Key elements to a Layout

• A couple simple building blocks for a successful
  design
• Header
• Sidebars Left/Right
• Main Text
• Footer

4
Layout Table

• In the past developers used Tables
• They misused the tables for design purposes
  instead of its real use with tabular data
• HTML and XHTML was often referred to as table web
  design
• World Wide Web Consortium does not recommend the
  use of table design

5
Layout - CSS

• The proper way of designing a web page
• XHTML Plus CSS
• CSS allows the developer to use their imagination
• Can create any amount of columns
• Most common use of columns are from 1-4 in
  extreme conditions 5 or 6

6
Common Layouts
7
More layouts

• Three Column layout

• Three Column with Content

8
Table Layout
9
But Why Are Tables bad?

• The Good

• Used for tabular data
• contact lists
• shopping carts
• calendar dates
• address books
• Forums
• Was able to be used for complex designs

10
This is the Reason Why

• Table Cons

• More Cons

• Less optimization for search engines
• Tables increase code and bandwidth
• Tables tend to collapse on each other
• Hard to update especially with multiple pages
• No globalization

• Cannot convert to portable devices well
• Nested tables takes longer to download

11
Why use CSS Layout

• Pros

• More Pros

• Is recommended by the w3c
• Global designs are easier to make and fix
• Reduce code and bandwidth
• Better accessibility and readability for screen
  readers

• Higher search engine rankings
• Fixed Layout- styles easy depending on the theme
  of the webpage and resolution of the user
• Liquid Layout- has the ability to adapt to change
  (minimizing and maximizing)
• Elastic- measured in Ems, resizes at the same
  rate when changing

12
CSS Layout

• Cons
• Web Developers who are used to writing code with
  tables have a hard time switching over because of
  the time needed to learn CSS

13
CSS Layout

• When using CSS its best to use position elements
• Absolute position
• Fixed position
• Relative position
• Static position

• Float elements and boxs work well too

14
Background Info

• XHTML- is used to convey information and has the
  ability to allow the user to create their own
  elements.
• Tags- tells the browser what element its dealing
  with.

• CSS Strictly used for presentational purposes
• Style sheets
• Within the style sheets are selectors- name of
  tag
• Property name with a colon and between that is a
  value plus semicolon
• Looks like this --- selector property value
  property value property value

15
Heading

• Headings are a great way to differentiate between
  sections of text. Headings range from h1 - h6,

• A great example of a use of headings can be found
  in news paper articles online. The main heading
  is h1 and the subcategory of that would be h2 and
  the subcategory of that would be h3 and on and
  on.

16
Readability

• Consists of Fonts, Colors, background Colors and
  Scrolling
• Dont want to make users work
• Users want to accomplish things fast on the web,
  website shouldnt hold them up

• All content should be visually placed in a
  consistent manner

17
Fonts

• Normal to use standard fonts
• As a reminder use only fonts that come with the
  computer like Sans-Serif, Arial, Times New Roman

• Dont make font to big or too small.
• Shouldnt make users download font because it
  looks good on your page.

18
Colors

• Hard to grasp
• Better to use black text on white background then
  using a color that cannot be read
• Stay consistent with the color schemes
• Nav- same color
• Text- same color

• Some examples of bad color schemes are Black font
  on a blue background, yellow font on a white
  background and purple font with purple already
  visited sites

19
Scrolling

• Stay away from Horizontal scrolling
• Makes the page look amateur and drives users away
• Content beyond the width can be considered lost
  content

• Keep content about the Fold
• Before a user scrolls this is the information
  that will be presented to them first
• or this is were the important info should go

20
Images

• Second most common item on a webpage

• Use images that are relevant to your web page
• It does no good to be on the UNH basketball
  website with pictures of Umass players

21
Page Design

• By
• Aaron Lastoff