Design Goals for Web Pages - InDesign User Group

Design Goals for Web Pages
1 Effective communication - is the content valuable to visitor.
2 Page is usable on all devices (computer, phone, tv, other).
3 Page is usable at all screen sizes (cell phone to cinema display).
4 Page works in older browsers (and future browsers).
5 Search engine friendly.
6 Downloads quickly.
7 Accessible for those with disabilities.
8 Text can be resized by user for readability.
9 Avoid frames and tables for page layout and avoid storyflow across columns.
10 Page looks good in all modern browsers (IE6-9, Chrome, Firefox, Safari Opera).
Web Design Basic Rules
1 HTML applies structure and meaning to text.
2 CSS modifies HTML and controls layout, typography and overall design.
3 JavaScript modifies CSS & HTML adding interactivity to a design.
4 Only 3 guaranteed fonts (a Times, an Arial, a monospace).
5 All images RGB, 72ppi, jpg, gif or png compressed as much as possible.
6 No absolute control over font size.
7 No absolute control over page size.
8 File naming rules: lowercase letters, numbers, hyphen only.
9 Every file must have a file-type extension at the end.
10 Don’t Panic - it’s typing not programming.
1

Layout a webpage step by step
1 Setup project and organize with folders on computer (01-currentsite, 02-archives, 03-working-files, 04-client-provided).
2 Sketch, research, plan (10 minutes or 10 months).
3 Design a layout in any program you’re comfortable with. It’s a visual reference only (Photoshop recommended) .
4 Text representation of ENTIRE page including image descriptions.
5 Open a starter HTML page with required tags in place, save with web safe name.
6 Title page with consideration of bookmarks & SEO.
7 Paste contents of text version of page between body tags - test in browser after each step from here on.
8 Mark paragraphs of text with paragraph tag: p
9 Mark headings that introduce paragraphs and sections with heading tags: h1-h6
10 Add line breaks where you want to force a new line or soft return: br
11 Put list-type information in lists: ul, li
12 Put any other block level content in the appropriate tag: blockquote, pre, hr, address
13 Mark words or phrases that should be emphasized with proper inline tags: em, strong
14 Mark words or phrases by their meaning with inline tags: q, abbr, acronym, cite, code, del, dfn, ins, kbd, samp, var
15 XHTML do not use following inline tags: b, big, center, font, i, s, small, strike, tt, u (small, i, b have been redefined & added back to HTML5).
16 Use HTML Character Entities to put special characters on a page: © is © | non-breaking space is  
17 Prepare images in Photoshop or other image editor.
18 Add content related images with the image tag: img
19 Add multimedia & video: object, embed, (swfobject or other custom code) | HTML5 use the video and audio tags, with fallback to Flash.
20 Add tables for tabular information with the table tag: table, tr, td, th
21 Add forms with the form family of tags: form, button, input, label, legend, fieldset, option, select, textarea (and more).
22 Create links by wrapping anchor tag around any element: a
23 Add notes to yourself or others with comments:
24 In head of HTML page put a style tag to hold CSS: style
25 Add following rule to test CSS: body {background-color:red;} (change background-color to white if test works).
26 In CSS set basic font control on the body rule (color, typeface, size, background color for page).
27 In HTML use the div tag to make a box that holds entire body:
28 In CSS make #wrapper rule to give page width and background color: #wrapper {width:800px; background-color:red;}
29 Analyze PS layout and decide how many “boxes” or containers you need for the major sections of your page.
30 In CSS make box rules for each section and give them a unique name (ID) and temporary
background color: #header {background-color:blue;} #nav, #main-content, #aside, #footer
31 In HTML wrap the appropriate content in div tags, matching the names created in step 29.
32 In CSS rough-in shape of page using just divs from prev step. In this site, float to make 2 columns, clear footer. Now actual design can start.
33 Choose one of three methods to control element spacing: 1 - box model math, 2 - inner divs, 3 - content padding/margins
34 In CSS do universal reset to gain complete control of layout: * {margin:0; padding:0;} (only use this reset for educational purposes).
35 In CSS make rules for basic HTML tags: body, h1-h6, p, ul, ol, li
36 In CSS make rules for major sections of page until there are no more changes that work (start with footer in this site).
37 Design cycle: 1 - Identify design problem, 2 - find CSS property that fixes that problem, 3 - select appropriate item and apply property change.
38 In CSS make decendant selector rules for major sections until those no longer work.
39 In CSS make additional classes and ID’s to make localized changes where decendent selectors don’t work.
40 In HTML apply classes & id’s from previous step to existing tags, new divs or new spans.
41 in CSS use image replacement for headings as necessary.
42 CSS rollovers with sprites.
43 Add interactivity with JavaScript.
44 Make CSS and JavaScript external and save out copies of the initial master page for the rest of the pages of the site.
2

HTML
CSS
HTML Required
!DOCTYPE
html
head
body
title
Universal HTML
link
script
meta
style
Content HTML
h1-h6
p
br
ul/li
img
a
div
span
Text control
color
font-family
font-size
font-weight
text-align
line-height
text-transform
text-decoration
Link Control
a:link
a:visited
a:hover
a:active
List Control
list-style
Box control
width
height
margin
border
padding
background-color
background-image
display
overflow
Position control
float
clear
position
top
bottom
left
right
3

say hello to
Whether you’re a freelancer, in-house or agency creative or
professional, you deal with hot deadlines, tight budgets and
challenging client expectations daily. Because you’re a pro,
when the going gets tough, you work later and harder just to
succeed. C2 gets it! And, while we admire your work ethic, we
think you might appreciate a shortcut to success every once in
a while. C2 allows you to say YES! to any project, any deadline
and most budgets without sacrificing sleep, employee morale
or your profit margin.
learn everything
from actionscript to zapf dingbats
You’re a creative professional. You’re fast, software-savvy and
feel confident about your work. C2 instructors understand that
outstanding creative pros like you invest time and energy into
being the best, because they do too. In fact, you set the bar for
them. They know you need to learn best practices, time- and
money-saving workflow processes, shortcuts, troubleshooting
and the most efficient software techniques to bring concepts
to life for your clients. Our instructors blend engaging, handson
exercises with years of field experience, certification and
technical expertise, resulting in an industry-driven curriculum
crafted to increase your efficiency, productivity and ultimately,
profitability.
your shortcut to whew!
upcoming
classes
Madison
Adobe InDesign - begins Feb. 8
Standards Based Web Design - begins Feb. 9
Adobe Photoshop - begins Feb. 10
Milwaukee
Standards Based Web Design - begins Feb. 7 & 8
Adobe Photoshop - begins Feb. 7 & 8
Adobe InDesign - begins Feb. 9 & 10
Visit www.c2gps.com for more information
and to register today!
Nimble, versatile, ready to say yes to any project...
that’s YOU and C2!
Creative Talent Placement (4 hours, 4 days or forever): choose
from competitively priced and thoroughly screened creative
professionals, from copywriters to web developers and all
talents in between, satisfaction guaranteed. It’s a complex issue
determining who qualifies as an employee or independent
contractor. Why risk a labor audit or unemployment claim?
Use C2, we take the risk so you don’t have to!
shortcut
SUCCESS
YOUR
TO
AUTHORIZED
Training Center
222 E. Erie Street, Suite 330 Milwaukee, WI 53202 414 431 0062
3591 Anderson Street, Suite 227 Madison, WI 53704 608 268 9600