Index

A note on the digital index

A link in an index entry is displayed as the section title in which that entry appears. Because some sections have multiple index markers, it is not unusual for an entry to have several links to the same section. Clicking on any link will take you directly to the place in the text in which the marker appears.

Symbols

960 (CSS framework), Set up RPM 2.0 with the Blueprint Framework

A

<a> tag, Tabbing through a page should be ORDERLY, There’s more to ordering than just tabindexes, Edit your index file
rel attribute, Edit your index file
tabindex attribute, Tabbing through a page should be ORDERLY, There’s more to ordering than just tabindexes
more than just, There’s more to ordering than just tabindexes
accessibility, Accessibility: Inaccessibility Kills, Accessibility means making your site work for EVERYONE, How does your site READ?, A site’s message should be clear...to EVERYONE, A site’s message should be clear...to EVERYONE, A computer will read your image’s ALT text, A computer will read your image’s ALT text, Accessibility is not just about screen readers, Audio-2-Go is now a LOT more ACCESSIBLE, Audio-2-Go is now a LOT more ACCESSIBLE, Audio-2-Go is now a LOT more ACCESSIBLE, Audio-2-Go is now a LOT more ACCESSIBLE, WCAG Priority 1, Color shouldn’t be your ONLY form of communication, Color shouldn’t be your ONLY form of communication, Those stars are a real problem, Background images are still your friend, There’s more to ordering than just tabindexes
about, Audio-2-Go is now a LOT more ACCESSIBLE
background images, Background images are still your friend
color, Color shouldn’t be your ONLY form of communication, Those stars are a real problem
alternatives for communicating information, Color shouldn’t be your ONLY form of communication
without depending on color, Those stars are a real problem
color blindness, Audio-2-Go is now a LOT more ACCESSIBLE, Color shouldn’t be your ONLY form of communication
defined, Accessibility means making your site work for EVERYONE
hearing disabilities, Audio-2-Go is now a LOT more ACCESSIBLE
law, Audio-2-Go is now a LOT more ACCESSIBLE
screen readers, How does your site READ?, A site’s message should be clear...to EVERYONE, A site’s message should be clear...to EVERYONE, A computer will read your image’s ALT text, A computer will read your image’s ALT text
alt attribute (<img> tag), A computer will read your image’s ALT text
longdesc attribute (<img> tag), A computer will read your image’s ALT text
markup, A site’s message should be clear...to EVERYONE
titles, headings, and descriptions, A site’s message should be clear...to EVERYONE
tabbing through website, Accessibility is not just about screen readers
tabindex attribute (<a> tag), There’s more to ordering than just tabindexes
more than just, There’s more to ordering than just tabindexes
WCAG, WCAG Priority 1 (see WCAG)
AIGA’s Pricing and Ethical Guidelines, Figure out a total bid...
alt attribute (<img> tag), A computer will read your image’s ALT text
ambiguous navigation, Organize your site’s information
analytics tools, Mint
asymmetrical balance, RPM and the Golden Ratio: An (anti) case study
Attribution (by) (Creative Commons License), Creative Commons Licenses
Attribution No Derivatives (by-nd) (Creative Commons License), Creative Commons Licenses
Attribution Non-commercial (by-nc) (Creative Commons License), Creative Commons Licenses
Attribution Non-commercial No Derivatives (by-nc-nd) (Creative Commons License), Creative Commons Licenses
Attribution Non-commercial Share Alike (by-nc-sa) (Creative Commons License), Creative Commons Licenses
Attribution Share Alike (by-sa) (Creative Commons License), Creative Commons Licenses
audience, Design is about audience, Build an XHTML and CSS foundation optimized for 1024x768
(see also usability)
informed decisions, Build an XHTML and CSS foundation optimized for 1024x768
Audio-2-Go project, Audio-2-Go: inaccessible accessibility, A site’s message should be clear...to EVERYONE, A computer will read your image’s ALT text, A computer will read your image’s ALT text, Convert your long ALT text to a LONGDESC, Convert your long ALT text to a LONGDESC, Accessibility is not just about screen readers, Tabbing through a page should be ORDERLY, Tabbing through a page should be ORDERLY, WCAG Priority 1, Audio-2-Go, via color-blind eyes, Those stars are a real problem, Background images are still your friend, Background images are still your friend, There’s more to ordering than just tabindexes, There’s more to ordering than just tabindexes, There’s more to ordering than just tabindexes, There’s more to ordering than just tabindexes
alt attribute (<img> tag), A computer will read your image’s ALT text
background images, Background images are still your friend
color blindness, Audio-2-Go, via color-blind eyes
color without depending on color, Those stars are a real problem
longdesc attribute (<img> tag), Convert your long ALT text to a LONGDESC
site message, A site’s message should be clear...to EVERYONE
tabbing through website, Accessibility is not just about screen readers
tabindex attribute (<a> tag), Tabbing through a page should be ORDERLY, There’s more to ordering than just tabindexes
more than just, There’s more to ordering than just tabindexes
Test Drive, A computer will read your image’s ALT text, Convert your long ALT text to a LONGDESC, Tabbing through a page should be ORDERLY, Background images are still your friend, There’s more to ordering than just tabindexes, There’s more to ordering than just tabindexes
alt attribute (<img> tag), A computer will read your image’s ALT text
beyond tabindexes, There’s more to ordering than just tabindexes
color, without depending on color, Background images are still your friend
longdesc attribute (<img> tag), Convert your long ALT text to a LONGDESC
overall accessibility, There’s more to ordering than just tabindexes
tabindexes, Tabbing through a page should be ORDERLY
WCAG checkpoints, There’s more to ordering than just tabindexes
WCAG Priority 1, WCAG Priority 1

B

background images and accessibility, Background images are still your friend
base color, Use the color wheel to choose colors that “go together”
Behind the Scenes, usability testing, IE6 only supports :hover on link and anchor tags
bidding on contract work, Client Requirements
block hover navs, Add layout and typographic details with some more CSS
block navigation elements, Block elements are your friends, Let’s float the block navigation on the CNM site
floating, Let’s float the block navigation on the CNM site
Blog Exposed, Add a WordPress blog to the Red Lantern site
blogs, Edit your index file, Edit your index file, Adding blog functionality with WordPress, Change the look and feel of your blog with themes, Your Web Design Toolbox, Your Web Design Toolbox
hosted blog systems, Your Web Design Toolbox
installed, Your Web Design Toolbox
warning, Edit your index file
WordPress, Adding blog functionality with WordPress, Change the look and feel of your blog with themes
themes, Change the look and feel of your blog with themes
Blueprint, Remember your client?, Use Blueprint CSS rules to style RPM 2.0, Finish off the content and navigation markup
content and navigation markup, Finish off the content and navigation markup
CSS rules, Use Blueprint CSS rules to style RPM 2.0
brainstorming, Brainstorming: The path to a visual metaphor
breadcrumb trails, Your Web Design Toolbox
browser template, Sketches keep the focus on functionality
browser testing, Web Browser Usage
Browsershots, Web Browser Usage
Bullet Points, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Add layout and typographic details with some more CSS, Add layout and typographic details with some more CSS, Add layout and typographic details with some more CSS, Add layout and typographic details with some more CSS, Add layout and typographic details with some more CSS, Add layout and typographic details with some more CSS, Add layout and typographic details with some more CSS, Add layout and typographic details with some more CSS, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Friends and family can be a problem, Friends and family can be a problem, Friends and family can be a problem, Friends and family can be a problem, Friends and family can be a problem, Adding blog functionality with WordPress, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox, Your Web Design Toolbox
blogs, Your Web Design Toolbox
breadcrumb trails, Your Web Design Toolbox
business structures, Your Web Design Toolbox
card sorting, Your Web Design Toolbox
color schemes, Your Web Design Toolbox
color wheel, Your Web Design Toolbox
communicating information, Your Web Design Toolbox
copyrighted material, Your Web Design Toolbox
Creative Commons License, Your Web Design Toolbox
CSS Grid-based framework, Add layout and typographic details with some more CSS
design process, Your Web Design Toolbox
fresh content, Your Web Design Toolbox
golden ratio, Add layout and typographic details with some more CSS
grids, Add layout and typographic details with some more CSS
headings, Your Web Design Toolbox
horizontal navigation, Your Web Design Toolbox
hosted blog systems, Your Web Design Toolbox
IA (Information Architecture), Your Web Design Toolbox, Your Web Design Toolbox
IA diagrams, Your Web Design Toolbox, Your Web Design Toolbox
icons as navigational elements, Your Web Design Toolbox
installed blogs, Your Web Design Toolbox
inverted pyramid, Your Web Design Toolbox
JQuery, Your Web Design Toolbox
Kuler, Your Web Design Toolbox
lightboxes, Your Web Design Toolbox
lists, Your Web Design Toolbox
moderator scripts, Friends and family can be a problem
naming your navigational elements, Your Web Design Toolbox
open-ended questions, Friends and family can be a problem
personas, Add layout and typographic details with some more CSS
pre-production, Your Web Design Toolbox
primary navigation, Your Web Design Toolbox
proposal letter, Your Web Design Toolbox
rule of thirds, Add layout and typographic details with some more CSS
sans-serif fonts, Your Web Design Toolbox
scannability, Your Web Design Toolbox
screen real estate, Add layout and typographic details with some more CSS
screen resolution, Add layout and typographic details with some more CSS
secondary navigation, Your Web Design Toolbox
serif fonts, Your Web Design Toolbox
site statistics, Friends and family can be a problem
storyboards, Your Web Design Toolbox, Your Web Design Toolbox
surveys, Add layout and typographic details with some more CSS, Friends and family can be a problem
tetradic color scheme, Your Web Design Toolbox
top level navigation, Your Web Design Toolbox
triadic color scheme, Your Web Design Toolbox
usability testing, Friends and family can be a problem
user-centered design, Your Web Design Toolbox
vertical navigation, Your Web Design Toolbox
visual metaphor, Your Web Design Toolbox
WordPress, Adding blog functionality with WordPress
writing for the web, Your Web Design Toolbox
business of web design, The Business of Web Design: Mind Your Own Business, The newest potential client: the Foo Bar, What Foo Bar wants in a bid, Let’s build a quick mockup for the Foo Bar, Let’s build a quick mockup for the Foo Bar, Then, three months later..., Welcome to the world of DESIGN PIRACY, Welcome to the world of DESIGN PIRACY, Welcome to the world of DESIGN PIRACY, Welcome to the world of DESIGN PIRACY, Welcome to the world of DESIGN PIRACY, Red Lantern’s got a new prospective client, Red Lantern’s got a new prospective client, Client Requirements, Client Requirements, Figure out a total bid..., Use a proposal letter to deliver a detailed quote to a client, Use a proposal letter to deliver a detailed quote to a client, The Trilobite podcast: a(nother) new challenge, Creative Commons Licenses
AIGA’s Pricing and Ethical Guidelines, Figure out a total bid...
bidding on contract work, Client Requirements
corporations, Welcome to the world of DESIGN PIRACY
Creative Commons, The Trilobite podcast: a(nother) new challenge
Creative Commons License, Creative Commons Licenses
delivering detailed quote to client, Use a proposal letter to deliver a detailed quote to a client
design piracy, Welcome to the world of DESIGN PIRACY
Foo Bar project, The newest potential client: the Foo Bar, What Foo Bar wants in a bid, Let’s build a quick mockup for the Foo Bar, Let’s build a quick mockup for the Foo Bar, Then, three months later...
CSS stylesheets, Let’s build a quick mockup for the Foo Bar
design piracy, Then, three months later...
mockup, Let’s build a quick mockup for the Foo Bar
what Foo Bar wants in a bid, What Foo Bar wants in a bid
LLC (Limited Liability Companies), Welcome to the world of DESIGN PIRACY
proposal letter, Use a proposal letter to deliver a detailed quote to a client
Red Lantern Design, bidding on contract work, Client Requirements
Sole Proprietor/Partnership, Welcome to the world of DESIGN PIRACY
Trilobite Labs project, Red Lantern’s got a new prospective client, Red Lantern’s got a new prospective client
requirements, Red Lantern’s got a new prospective client
web designers, types of, Welcome to the world of DESIGN PIRACY
business structures, Your Web Design Toolbox

C

card sorting, IA–The card sorting way, IA–The card sorting way, To run a successful card sort, you need, Sort your cards into related stacks, Give your stacks names that are short and descriptive, Give your stacks names that are short and descriptive, Arrange your cards into a site hierarchy, Your Web Design Toolbox
Mark in Japan, To run a successful card sort, you need
orphaned cards, Give your stacks names that are short and descriptive
related stacks, Sort your cards into related stacks
running successful card sort, IA–The card sorting way
site hierarchy, Arrange your cards into a site hierarchy
stack names, Give your stacks names that are short and descriptive
Card Sorts Exposed, To run a successful card sort, you need
categories of information, Organize your site’s information
category names, Organize your site’s information
clear top navigation categories, Organize your site’s information
College of New Media project, School’s back in session, The first step to good navigation is good IA, What’s really in a name, anyway?, What’s really in a name, anyway?, Let’s float the block navigation on the CNM site, Icons don’t SAY anything... they just look pretty, Update the CNM XHTML to use textual links, Now we can style our new block elements..., Now we can style our new block elements..., Each sub-page gets its own secondary navigation, Let’s style the navigation with our CSS
floating block navigation, Let’s float the block navigation on the CNM site
IA diagrams, The first step to good navigation is good IA
screen.css, Now we can style our new block elements...
secondary navigation, Each sub-page gets its own secondary navigation
Test Drive, What’s really in a name, anyway?, What’s really in a name, anyway?, Now we can style our new block elements..., Let’s style the navigation with our CSS
secondary navigation, Let’s style the navigation with our CSS
updating XHTML to use textural links, Update the CNM XHTML to use textual links
using icons for navigation, Icons don’t SAY anything... they just look pretty
color, Color shouldn’t be your ONLY form of communication, Those stars are a real problem
alternatives for communicating information, Color shouldn’t be your ONLY form of communication
without depending on color, Those stars are a real problem
color blindness, Audio-2-Go is now a LOT more ACCESSIBLE, Color shouldn’t be your ONLY form of communication
color mockups, Your page elements shape your visual metaphor
color palettes, Develop a theme and visual metaphor for Mark
color schemes, Use the color wheel to choose colors that “go together”, Use the color wheel to choose colors that “go together”, Use the triadic scheme to create usable color patterns, The opposite of heavy is... light, Create a richer color palette with the tetradic color scheme, Create a richer color palette with the tetradic color scheme, Create a richer color palette with the tetradic color scheme, Your Web Design Toolbox
base color, Use the color wheel to choose colors that “go together”
double complementary scheme, Create a richer color palette with the tetradic color scheme
saturation, The opposite of heavy is... light
tetradic, Create a richer color palette with the tetradic color scheme
triadic, Use the triadic scheme to create usable color patterns
color wheel, The color wheel (where it all begins), Use the color wheel to choose colors that “go together”, Use the color wheel to choose colors that “go together”, Create the basic page layout with CSS, Your Web Design Toolbox
base color, Use the color wheel to choose colors that “go together”
color schemes, Use the color wheel to choose colors that “go together”
digital color, Create the basic page layout with CSS
color, designing with, Designing With Color: Moving Beyond Monochrome, Color has an emotional impact, The color wheel (where it all begins), Use the color wheel to choose colors that “go together”, Use the color wheel to choose colors that “go together”, Use the triadic scheme to create usable color patterns, Create the basic page layout with CSS, Create the basic page layout with CSS, The opposite of heavy is... light, Create a richer color palette with the tetradic color scheme, Create a richer color palette with the tetradic color scheme, Create a richer color palette with the tetradic color scheme, Create a richer color palette with the tetradic color scheme
base color, Use the color wheel to choose colors that “go together”
color wheel, The color wheel (where it all begins), Use the color wheel to choose colors that “go together”
color schemes, Use the color wheel to choose colors that “go together”
contrasting colors, Create a richer color palette with the tetradic color scheme
digital color wheel, Create the basic page layout with CSS
emotion, Color has an emotional impact
emphasized colors, Create a richer color palette with the tetradic color scheme
Kuler, Create the basic page layout with CSS
principles, Create a richer color palette with the tetradic color scheme
saturation, The opposite of heavy is... light
tetradic color scheme, Create a richer color palette with the tetradic color scheme
triadic color schemes, Use the triadic scheme to create usable color patterns
column-count property, #3: The future of CSS
column-gap property, #3: The future of CSS
column-rule property, #3: The future of CSS
column-width property, #3: The future of CSS
communicating information, Organize your site’s information, Your Web Design Toolbox
compressing copy, Compress your copy
content, Your page elements shape your visual metaphor, Compress your copy, Evolutionary Design: Keeping your site fresh
fresh, keeping website, Evolutionary Design: Keeping your site fresh (see evolutionary design)
page elements, Your page elements shape your visual metaphor
removing unnecessary, Compress your copy
content versus style, Time to get your RPM groove on
contrast, #9: Contrast is a fundamental layout device
contrasting colors, Create a richer color palette with the tetradic color scheme
copyright infringment, Then, three months later...
copyrighted material, Your Web Design Toolbox
copywriter, Welcome to the world of DESIGN PIRACY
corporations, Welcome to the world of DESIGN PIRACY
Creative Commons, The Trilobite podcast: a(nother) new challenge
Creative Commons License, Creative Commons Licenses, Your Web Design Toolbox
cross-cultural design, #1: Cross-cultural & international design, #1: Cross-cultural & international design, #1: Cross-cultural & international design, Is that the month or the year?, Is that the month or the year?
dates and time, Is that the month or the year?
flag icons, Is that the month or the year?
icons, #1: Cross-cultural & international design
localization, #1: Cross-cultural & international design
CSS, And the CSS..., Let’s style the navigation with our CSS, Let’s style the navigation with our CSS, Fix RPM’s CSS bug by moving the hover property, Use CSS to evolve your site’s design, Use CSS to evolve your site’s design, #3: The future of CSS, #3: The future of CSS, #3: The future of CSS, #3: The future of CSS, #3: The future of CSS
.page declaration, Let’s style the navigation with our CSS
:hover pseudo-property, Fix RPM’s CSS bug by moving the hover property
column-count property, #3: The future of CSS
column-gap property, #3: The future of CSS
column-rule property, #3: The future of CSS
column-width property, #3: The future of CSS
evolutionary design, Use CSS to evolve your site’s design
future of, #3: The future of CSS
joining XHTML and CSS, And the CSS...
Mark in Japan, And the CSS...
secondary navigation, Let’s style the navigation with our CSS
College of New Media project, Let’s style the navigation with our CSS
using to evolve site design, Use CSS to evolve your site’s design
CSS frameworks, Remember your client?, Set up RPM 2.0 with the Blueprint Framework
CSS Grid-based framework, Add layout and typographic details with some more CSS
CSS stylesheets, And the CSS..., Move from pre-production to production, Screen RESOLUTION also affects screen real estate, Use Blueprint CSS rules to style RPM 2.0, Time to get your RPM groove on, Add layout and typographic details with some more CSS, Add layout and typographic details with some more CSS, Get started on the SampleRate markup, Let’s update the SampleRate CSS, Approach #1: Horizontally-tabbed navigation, Approach #2: Vertical navigation, Let’s float the block navigation on the CNM site, Now we can style our new block elements..., Let’s style the navigation with our CSS, Let’s build a quick mockup for the Foo Bar
block navigation, Let’s float the block navigation on the CNM site
College of New Media project, Now we can style our new block elements..., Let’s style the navigation with our CSS
secondary navigation, Let’s style the navigation with our CSS
Foo Bar project, Let’s build a quick mockup for the Foo Bar
horizontal tabs, Approach #1: Horizontally-tabbed navigation
Mark in Japan project, And the CSS..., Move from pre-production to production
RPM Records project, Screen RESOLUTION also affects screen real estate, Use Blueprint CSS rules to style RPM 2.0, Time to get your RPM groove on, Add layout and typographic details with some more CSS, Add layout and typographic details with some more CSS
Blueprint CSS rules, Use Blueprint CSS rules to style RPM 2.0
cleaning up layout, Time to get your RPM groove on
layout and typographic details, Add layout and typographic details with some more CSS
optimized for 1024x768, Screen RESOLUTION also affects screen real estate
SampleRate project, Get started on the SampleRate markup, Let’s update the SampleRate CSS
updates, Let’s update the SampleRate CSS
vertical navigation, Approach #2: Vertical navigation
CSSTidy, #10: More tools for design

D

dates and time, Is that the month or the year?
debugging tools, #10: More tools for design
design elements, repetition of, #6: Rhythm in your layout
design piracy, Then, three months later..., Welcome to the world of DESIGN PIRACY
steps to follow, Welcome to the world of DESIGN PIRACY
design process, Where do you start?, Your Web Design Toolbox
design sketches, Show Jane some basic design sketches (see sketches)
design tools, #10: More tools for design
Deutanopia, Audio-2-Go, via color-blind eyes
developing web application, #5: Developing web applications
digg.com, Compress your copy
digital color wheel, Create the basic page layout with CSS
disabilities, Accessibility means making your site work for EVERYONE, Audio-2-Go is now a LOT more ACCESSIBLE
<div> tags, “wrap”, Move from pre-production to production
double complementary scheme, Create a richer color palette with the tetradic color scheme

E

editing text down, Compress your copy
emphasized colors, Create a richer color palette with the tetradic color scheme
evolutionary design, Evolutionary Design: Keeping your site fresh, Web design is about evolution, not , Use CSS to evolve your site’s design, Use CSS to evolve your site’s design, Use CSS to evolve your site’s design, Use CSS to evolve your site’s design, Use CSS to evolve your site’s design, Use JavaScript lightboxes to add interactivity to your site, Edit your index file, Adding blog functionality with WordPress, Change the look and feel of your blog with themes
blogs, Edit your index file, Adding blog functionality with WordPress, Change the look and feel of your blog with themes
WordPress, Adding blog functionality with WordPress
WordPress themes, Change the look and feel of your blog with themes
Flash, Use CSS to evolve your site’s design
JavaScript, Use CSS to evolve your site’s design
JQuery JavaScript library, Use CSS to evolve your site’s design
lightboxes, Use JavaScript lightboxes to add interactivity to your site
radically changing site, Web design is about evolution, not
using CSS to evolve site design, Use CSS to evolve your site’s design
XHTML and CSS, Use CSS to evolve your site’s design

F

FaceBox, Use JavaScript lightboxes to add interactivity to your site
Firebug, #10: More tools for design
Fireside Chats, Sketches keep the focus on functionality, Time to get your RPM groove on, The level, not the size, of a heading conveys importance
content versus style, Time to get your RPM groove on
serif versus sans-serif fonts, The level, not the size, of a heading conveys importance
storyboards, Sketches keep the focus on functionality
flag icons, Is that the month or the year?
Flash, Use CSS to evolve your site’s design, Edit your index file
floating block navigation, Let’s float the block navigation on the CNM site
flowcharting programs, IA Diagrams are NOT just links between pages
focus groups, Let your audience speak to you through focus groups and surveys, Surveys and focus groups aren’t free
cost, Surveys and focus groups aren’t free
fonts, Develop a theme and visual metaphor for Mark, Mix fonts to emphasize headings and other text, The level, not the size, of a heading conveys importance
serif versus sans-serif fonts, The level, not the size, of a heading conveys importance
Foo Bar project, The newest potential client: the Foo Bar, What Foo Bar wants in a bid, Let’s build a quick mockup for the Foo Bar, Let’s build a quick mockup for the Foo Bar, Let’s build a quick mockup for the Foo Bar, Then, three months later...
CSS stylesheets, Let’s build a quick mockup for the Foo Bar
design piracy, Then, three months later...
mockup, Let’s build a quick mockup for the Foo Bar
Test Drive, Let’s build a quick mockup for the Foo Bar
what Foo Bar wants in a bid, What Foo Bar wants in a bid
footer, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor, Move from pre-production to production
framework, Set up RPM 2.0 with the Blueprint Framework
fresh, keeping website, Evolutionary Design: Keeping your site fresh (see evolutionary design)
front-end designer, Welcome to the world of DESIGN PIRACY
functionality, Sketches keep the focus on functionality
future of, #2: The future of web markup, #3: The future of CSS
CSS, #3: The future of CSS
web markup, #2: The future of web markup

G

Geek Bits, IA Diagrams are NOT just links between pages, Mix fonts to emphasize headings and other text, Edit your index file, Add a WordPress blog to the Red Lantern site, Change the look and feel of your blog with themes
flowcharting programs, IA Diagrams are NOT just links between pages
rel attribute <a> tag, Edit your index file
serif and sans-serif fonts, Mix fonts to emphasize headings and other text
WordPress, Add a WordPress blog to the Red Lantern site, Change the look and feel of your blog with themes
themes, Change the look and feel of your blog with themes
generic browser stats, Web Browser Usage
golden ratio, How wide should my grid be? Use the Golden Ratio, RPM and the Golden Ratio: An (anti) case study, Add layout and typographic details with some more CSS
RPM Records, RPM and the Golden Ratio: An (anti) case study
Google Analytics, Mint
graphic designer, Welcome to the world of DESIGN PIRACY
grid-based sites, Humans like things lined up and well-organized, How wide should my grid be? Use the Golden Ratio, The rule of thirds: A shortcut to the Golden Ratio, RPM and the Golden Ratio: An (anti) case study, RPM and the Golden Ratio: An (anti) case study, Set up RPM 2.0 with the Blueprint Framework
asymmetrical balance, RPM and the Golden Ratio: An (anti) case study
CSS framework, Set up RPM 2.0 with the Blueprint Framework
golden ratio, How wide should my grid be? Use the Golden Ratio
rule of thirds, The rule of thirds: A shortcut to the Golden Ratio
symmetrical balance, RPM and the Golden Ratio: An (anti) case study
grids, Add layout and typographic details with some more CSS

H

headings, Organize your site’s information, The first step to good navigation is good IA, The first step to good navigation is good IA, Headings make your text even more scannable, Headings make your text even more scannable, Mix fonts to emphasize headings and other text, The level, not the size, of a heading conveys importance, Your Web Design Toolbox, A site’s message should be clear...to EVERYONE
fonts, Mix fonts to emphasize headings and other text
level of importance, The level, not the size, of a heading conveys importance
naming, The first step to good navigation is good IA
navigation, The first step to good navigation is good IA
navigation headings, Organize your site’s information
screen readers, A site’s message should be clear...to EVERYONE
hearing disabilities, Audio-2-Go is now a LOT more ACCESSIBLE
Hipster Intelligencer Online, Build a better online newspaper, Hipster Intelligencer Online: project specs, The problem is TEXT, The problem is TEXT, Compress your copy, Ordered list, Headings make your text even more scannable
project specifications, Hipster Intelligencer Online: project specs
Ready Bake Code, The problem is TEXT
Test Drive, The problem is TEXT, Compress your copy, Ordered list, Headings make your text even more scannable
headings and lists, Headings make your text even more scannable
lists and inverted pyramids, Ordered list
horizontal buttons menu type, Put it all in context
horizontal tabs menu type, Put it all in context
horizontally-tabbed navigation, Approach #1: Horizontally-tabbed navigation, Your Web Design Toolbox
hosted blog systems, Your Web Design Toolbox
:hover pseudo-property, Fix RPM’s CSS bug by moving the hover property
HTML5 versus XHTML2, #2: The future of web markup

I

IA (Information Architecture), Draw up a blueprint FIRST, Your Web Design Toolbox, Keep your site organized with information architecture (IA), IA–The card sorting way, If IA were about links..., The first step to good navigation is good IA, Your Web Design Toolbox
card sorting, IA–The card sorting way (see card sorting)
navigation, The first step to good navigation is good IA, Your Web Design Toolbox
themes, If IA were about links...
IA diagrams, Draw up a blueprint FIRST, Draw up a blueprint FIRST, Your Web Design Toolbox, IA Diagrams are just card sorts on paper, IA Diagrams are NOT just links between pages, If IA were about links..., Your Web Design Toolbox, The first step to good navigation is good IA
College of New Media project, The first step to good navigation is good IA
flowcharting programs, IA Diagrams are NOT just links between pages
Mark in Japan, If IA were about links...
icons, Develop a theme and visual metaphor for Mark, Icons don’t SAY anything... they just look pretty, Your Web Design Toolbox, #1: Cross-cultural & international design
as navigational elements, Icons don’t SAY anything... they just look pretty, Your Web Design Toolbox
<img> tags, A computer will read your image’s ALT text, A computer will read your image’s ALT text
alt attribute, A computer will read your image’s ALT text
longdesc attribute, A computer will read your image’s ALT text
inconsistent navigation, Approach #2: Vertical navigation
information architect, Welcome to the world of DESIGN PIRACY
Information Architecture, Draw up a blueprint FIRST (see IA)
informed decisions, Build an XHTML and CSS foundation optimized for 1024x768
installed blogs, Your Web Design Toolbox
international design, #1: Cross-cultural & international design, #1: Cross-cultural & international design, #1: Cross-cultural & international design, Is that the month or the year?, Is that the month or the year?
dates and time, Is that the month or the year?
flag icons, Is that the month or the year?
icons, #1: Cross-cultural & international design
localization, #1: Cross-cultural & international design
inverted pyramid, Improve your content with the Inverted Pyramid, Compress your copy, Compress your copy, Your Web Design Toolbox

J

JavaScript, Use CSS to evolve your site’s design, Use JavaScript lightboxes to add interactivity to your site
lightboxes, Use JavaScript lightboxes to add interactivity to your site
JAWS, How does your site READ?, Convert your long ALT text to a LONGDESC
JQuery, Your Web Design Toolbox
JQuery JavaScript library, Use CSS to evolve your site’s design

K

knowing your audience, Listen to Your Users: The Pathway to Harmonious Design (see usability)
Kuler, Create the basic page layout with CSS, Create the basic page layout with CSS, Your Web Design Toolbox
warning, Create the basic page layout with CSS
Kuler Up Close, Create the basic page layout with CSS

L

language flag icons, Is that the month or the year?
layout and design, Layout and Design: Follow the Golden Rule, Design is about audience, Pinpoint RPM’s audience with personas, Resolution impacts design and layout, Screen RESOLUTION also affects screen real estate, Build an XHTML and CSS foundation optimized for 1024x768, Humans like things lined up and well-organized, Remember your personas?, Finish off the content and navigation markup
audience, Design is about audience
grid-based sites, Humans like things lined up and well-organized (see grid-based sites)
informed decisions, Build an XHTML and CSS foundation optimized for 1024x768
personas, Pinpoint RPM’s audience with personas
requirements, Remember your personas?
resolution, Resolution impacts design and layout
vertical ratios, Finish off the content and navigation markup
XHTML and CSS optimized for 1024x768, Screen RESOLUTION also affects screen real estate
layouts, Web design is all about communication, and your USERS, Your page elements shape your visual metaphor
Mark in Japan, Your page elements shape your visual metaphor
lightboxes, Use JavaScript lightboxes to add interactivity to your site, Your Web Design Toolbox
link names, matching with destination pages, #8: Match link names with their destination page
links, textural, Icons don’t SAY anything... they just look pretty
listening to your users, Listen to Your Users: The Pathway to Harmonious Design (see usability)
lists, Move from pre-production to production, Compress your copy, Compress your copy, Add lists to your XHTML, Add lists to your XHTML, Add lists to your XHTML, Headings make your text even more scannable, Your Web Design Toolbox
ordered, Add lists to your XHTML
unordered, Move from pre-production to production, Add lists to your XHTML
XHTML, Add lists to your XHTML
LLC (Limited Liability Companies), Welcome to the world of DESIGN PIRACY
LLP (Limited Liability Partnership), Figure out a total bid...
localization, #1: Cross-cultural & international design
longdesc attribute (<img> tag), A computer will read your image’s ALT text

M

Mark in Japan project, Your first “international” gig..., Think before you code, Develop a theme and visual metaphor for Mark, Develop a theme and visual metaphor for Mark, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor, Build a quick XHTML mock-up for Mark, And the CSS..., And the CSS..., Let’s create a storyboard for Mark, Organizing Your Site: “So you take a left at the green water tower...”, Organize your site’s information, Organize your site’s information, Organize your site’s information, To run a successful card sort, you need, If IA were about links..., Move from pre-production to production, Move from pre-production to production, Move from pre-production to production
card sorting, To run a successful card sort, you need
clear top navigation categories, Organize your site’s information
color mockups, Your page elements shape your visual metaphor
CSS stylesheet, And the CSS...
IA diagrams, If IA were about links...
index.html, Move from pre-production to production
joining XHTML and CSS, And the CSS...
layouts, Your page elements shape your visual metaphor
organizing your site, Organizing Your Site: “So you take a left at the green water tower...”, Organize your site’s information, Organize your site’s information
categories of information, Organize your site’s information
communicating information, Organize your site’s information
pre-production, Your first “international” gig..., Think before you code
visual metaphor, Think before you code
screen.css, Move from pre-production to production
site structure, Move from pre-production to production
storyboards, Let’s create a storyboard for Mark
themes, developing, Develop a theme and visual metaphor for Mark
visual metaphor, developing, Develop a theme and visual metaphor for Mark
XHTML mockup, Build a quick XHTML mock-up for Mark
markup, A site’s message should be clear...to EVERYONE, #2: The future of web markup
future of web markup, #2: The future of web markup
screen readers, A site’s message should be clear...to EVERYONE
menu types, Put it all in context
Mint, Mint
mobile devices, designing for, #4: Designing for mobile devices
mockups, Mark in Japan, Your page elements shape your visual metaphor, Build a quick XHTML mock-up for Mark
XHTML mockup, Build a quick XHTML mock-up for Mark
moderator scripts, The building blocks of budget usability testing, Use a moderator script to organize the test, Friends and family can be a problem
contruction, Use a moderator script to organize the test
Moderator Scripts dissected, Use a moderator script to organize the test
mouse, tabbing through website without, Accessibility is not just about screen readers

N

naming headings, The first step to good navigation is good IA
naming your navigational elements, Your Web Design Toolbox
navigation, Determine your top level navigation, Web design is all about communication, and your USERS, Your page elements shape your visual metaphor, Organize your site’s information, Organize your site’s information, Organize your site’s information, Organize your site’s information, If IA were about links..., Smart Navigation: “In 2 Seconds, Click ‘Home’.”, The first step to good navigation is good IA, The first step to good navigation is good IA, Approach #1: Horizontally-tabbed navigation, Approach #2: Vertical navigation, Approach #2: Vertical navigation, Block elements are your friends, Let’s float the block navigation on the CNM site, Icons don’t SAY anything... they just look pretty, Primary navigation shouldn’t change... but secondary navigation SHOULD, Primary navigation shouldn’t change... but secondary navigation SHOULD, Your Web Design Toolbox
ambiguous, Organize your site’s information
block elements, Block elements are your friends, Let’s float the block navigation on the CNM site
floating, Let’s float the block navigation on the CNM site
categories, Organize your site’s information, If IA were about links...
clear top navigation categories, Organize your site’s information
headings, Organize your site’s information, The first step to good navigation is good IA
horizontally-tabbed, Approach #1: Horizontally-tabbed navigation
IA (Information Architecture), The first step to good navigation is good IA
icons, Icons don’t SAY anything... they just look pretty
inconsistent, Approach #2: Vertical navigation
page elements, Your page elements shape your visual metaphor
primary, Primary navigation shouldn’t change... but secondary navigation SHOULD, Your Web Design Toolbox
secondary, Primary navigation shouldn’t change... but secondary navigation SHOULD
top level, Determine your top level navigation
vertical, Approach #2: Vertical navigation
newsvine.com, Compress your copy
No Dumb Questions, Draw up a blueprint FIRST, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor, Let’s create a storyboard for Mark, Organize your site’s information, If IA were about links..., If IA were about links..., If IA were about links..., Data about RPM Music’s users, Screen RESOLUTION also affects screen real estate, Screen RESOLUTION also affects screen real estate, Set up RPM 2.0 with the Blueprint Framework, Create the basic page layout with CSS, Create a richer color palette with the tetradic color scheme, The first step to good navigation is good IA, What’s really in a name, anyway?, Approach #2: Vertical navigation, The problem is TEXT, Compress your copy, Compress your copy, Headings make your text even more scannable, Headings make your text even more scannable, Convert your long ALT text to a LONGDESC, Audio-2-Go is now a LOT more ACCESSIBLE, Audio-2-Go is now a LOT more ACCESSIBLE, Audio-2-Go is now a LOT more ACCESSIBLE, Audio-2-Go is now a LOT more ACCESSIBLE, WCAG Priority 1, WCAG Priority 1, Those stars are a real problem, Ask the right questions in your surveys, Ask the right questions in your surveys, The final RPM Music user survey, Web Browser Usage, Web Browser Usage, Friends and family can be a problem, Edit your index file, Edit your index file, Edit your index file, Then, three months later..., Client Requirements, Figure out a total bid..., Figure out a total bid...
bidding on contract work, Client Requirements, Figure out a total bid...
browser testing, Web Browser Usage
category names, Organize your site’s information
color blindness, Audio-2-Go is now a LOT more ACCESSIBLE
color schemes, Create a richer color palette with the tetradic color scheme
copyright infringment, Then, three months later...
CSS framework, Set up RPM 2.0 with the Blueprint Framework
disabilities, Audio-2-Go is now a LOT more ACCESSIBLE
editing text down, Compress your copy
Flash, Edit your index file
generic browser stats, Web Browser Usage
headings, Headings make your text even more scannable
hearing disabilities, Audio-2-Go is now a LOT more ACCESSIBLE
IA and themes, If IA were about links...
IA diagrams, Draw up a blueprint FIRST, If IA were about links...
inverted pyramid, Compress your copy
JavaScript, Edit your index file
Kuler, Create the basic page layout with CSS
lightboxes, Edit your index file
lists, Headings make your text even more scannable
LLC versus LLP, Figure out a total bid...
longdesc attribute (<img> tag), Convert your long ALT text to a LONGDESC
naming navigational elements, The first step to good navigation is good IA
navigation categories, If IA were about links...
personas, Data about RPM Music’s users
reading online, The problem is TEXT
screen real estate, Screen RESOLUTION also affects screen real estate
screen resolutions, Screen RESOLUTION also affects screen real estate
Section 508, WCAG Priority 1
semantics, What’s really in a name, anyway?
storyboards, Let’s create a storyboard for Mark
surveys, Audio-2-Go is now a LOT more ACCESSIBLE, Ask the right questions in your surveys, Ask the right questions in your surveys, The final RPM Music user survey
jargon, Ask the right questions in your surveys
limits to open-ended questions, The final RPM Music user survey
open-ended questions, Ask the right questions in your surveys
tabindexes, Audio-2-Go is now a LOT more ACCESSIBLE
themes, Your page elements shape your visual metaphor
usability testing, number of participants, Friends and family can be a problem
vertical navigation, Approach #2: Vertical navigation
visual indicators, Those stars are a real problem
visual metaphor, Your page elements shape your visual metaphor
WCAG Priority 1, WCAG Priority 1

O

OmniGraffle, IA Diagrams are NOT just links between pages
open-ended questions, Ask the right questions in your surveys, The final RPM Music user survey
limits, The final RPM Music user survey
ordered lists, Add lists to your XHTML
organizing your site, Draw up a blueprint FIRST, Organizing Your Site: “So you take a left at the green water tower...”, Organize your site’s information, Organize your site’s information, Organize your site’s information, Organize your site’s information, IA–The card sorting way, Move from pre-production to production
card sorting, IA–The card sorting way (see card sorting)
categories of information, Organize your site’s information
clear top navigation categories, Organize your site’s information
communicating information, Organize your site’s information
IA diagrams, Draw up a blueprint FIRST (see IA diagrams)
moving from pre-production to production, Move from pre-production to production
navigation headings, Organize your site’s information
orphaned cards (card sorting), Give your stacks names that are short and descriptive

P

.page declaration (CSS), Let’s style the navigation with our CSS
page elements, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor
content, Your page elements shape your visual metaphor
footer, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor
navigation, Your page elements shape your visual metaphor
shaping visual metaphor, Your page elements shape your visual metaphor
sidebars, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor
whitespace, Your page elements shape your visual metaphor
Pencil, #10: More tools for design
personas, Pinpoint RPM’s audience with personas, Remember your personas?, Add layout and typographic details with some more CSS
Photoshop, Let’s create a storyboard for Mark
storyboards, Let’s create a storyboard for Mark
podcasts, The Trilobite podcast: a(nother) new challenge
pre-production, Web design is all about communication, and your USERS, Pre-Production: Paper covers rock, Think before you code, Think before you code, A clear visual metaphor helps reinforce your site’s theme, Develop a theme and visual metaphor for Mark, Develop a theme and visual metaphor for Mark, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor, Use storyboards to develop ideas and save time without code, Let’s create a storyboard for Mark, Your Web Design Toolbox, Your Web Design Toolbox, Move from pre-production to production, Pre-production to production: The complete process
defined, Think before you code
mockups, Your page elements shape your visual metaphor
moving from pre-production to production, Move from pre-production to production, Pre-production to production: The complete process
complete process, Pre-production to production: The complete process
storyboards, Use storyboards to develop ideas and save time without code, Let’s create a storyboard for Mark, Your Web Design Toolbox
Mark in Japan, Let’s create a storyboard for Mark
themes, A clear visual metaphor helps reinforce your site’s theme, Develop a theme and visual metaphor for Mark
developing, Develop a theme and visual metaphor for Mark
visual metaphor, Think before you code, Develop a theme and visual metaphor for Mark, Your page elements shape your visual metaphor, Your Web Design Toolbox
developing, Develop a theme and visual metaphor for Mark
page elements shaping, Your page elements shape your visual metaphor
primary navigation, Primary navigation shouldn’t change... but secondary navigation SHOULD, Your Web Design Toolbox
programmer, Welcome to the world of DESIGN PIRACY
proposal letter, Use a proposal letter to deliver a detailed quote to a client, Your Web Design Toolbox
Protanopia, Audio-2-Go, via color-blind eyes
prototypes, Sketches keep the focus on functionality

R

radically changing site, Web design is about evolution, not
reading online, The problem is TEXT
Ready Bake Code, Sketches keep the focus on functionality, The problem is TEXT
Hipster Intelligencer Online, The problem is TEXT
Red Lantern Design prototype, Sketches keep the focus on functionality
Red Lantern Design, Your big chance with Red Lantern Design, Draw up a blueprint FIRST, Determine your top level navigation, Show Jane some basic design sketches, Sketches keep the focus on functionality, Sketches keep the focus on functionality, Sketches keep the focus on functionality, Sketches keep the focus on functionality, Don’t ruin a good design with bad copy, What makes text scannable?, What makes text scannable?, Keeping your site and content fresh keeps your users coming back, Use CSS to evolve your site’s design, Use JavaScript lightboxes to add interactivity to your site, Add Facebox to the Red Lantern home page, Edit your index file, Adding blog functionality with WordPress, Add a WordPress blog to the Red Lantern site, Red Lantern’s got a new prospective client, Red Lantern’s got a new prospective client, Client Requirements, Figure out a total bid..., The Trilobite podcast: a(nother) new challenge
bidding on contract work, Client Requirements
evolutionary design, Keeping your site and content fresh keeps your users coming back, Use CSS to evolve your site’s design, Use JavaScript lightboxes to add interactivity to your site, Add Facebox to the Red Lantern home page, Adding blog functionality with WordPress
adding FaceBox, Add Facebox to the Red Lantern home page
lightboxes, Use JavaScript lightboxes to add interactivity to your site
using CSS to evolve site design, Use CSS to evolve your site’s design
WordPress blog, Adding blog functionality with WordPress
IA (Information Architecture), Draw up a blueprint FIRST
prototype, Sketches keep the focus on functionality
sketches, Show Jane some basic design sketches, Sketches keep the focus on functionality
functionality, Sketches keep the focus on functionality
storyboards, Sketches keep the focus on functionality
Test Drive, Sketches keep the focus on functionality, What makes text scannable?, Edit your index file, Add a WordPress blog to the Red Lantern site
lightboxes, Edit your index file
scannability, What makes text scannable?
WordPress, Add a WordPress blog to the Red Lantern site
top level navigation, Determine your top level navigation
Trilobite Labs project, Red Lantern’s got a new prospective client, Red Lantern’s got a new prospective client, Figure out a total bid..., The Trilobite podcast: a(nother) new challenge
estimate worksheet, Figure out a total bid...
podcast, The Trilobite podcast: a(nother) new challenge
requirements, Red Lantern’s got a new prospective client
writing for the web, Don’t ruin a good design with bad copy, What makes text scannable?
scannability checklist, What makes text scannable?
rel attribute <a> tag, Edit your index file
removing unnecessary content, Compress your copy
repetition of design elements, #6: Rhythm in your layout
requirements, Remember your personas?
resolution, Resolution impacts design and layout, Resolution impacts design and layout, Resolution impacts design and layout, Resolution impacts design and layout, Resolution impacts design and layout, Screen real estate determines how MUCH of your site will display in your user’s browser, Screen RESOLUTION also affects screen real estate, Add layout and typographic details with some more CSS
1024x768, Resolution impacts design and layout
1280x800, Resolution impacts design and layout
640x480, Resolution impacts design and layout
800x600, Resolution impacts design and layout
managing, Screen RESOLUTION also affects screen real estate
screen real estate, Screen real estate determines how MUCH of your site will display in your user’s browser
rhythm in layout, #6: Rhythm in your layout
RPM Records project, Your newest gig: RPM Records, Pinpoint RPM’s audience with personas, Screen RESOLUTION also affects screen real estate, Build an XHTML and CSS foundation optimized for 1024x768, RPM and the Golden Ratio: An (anti) case study, Remember your personas?, Remember your client?, Use Blueprint CSS rules to style RPM 2.0, Time to get your RPM groove on, Finish off the content and navigation markup, Add layout and typographic details with some more CSS, Add layout and typographic details with some more CSS, Listen to Your Users: The Pathway to Harmonious Design, The final RPM Music user survey, The results are in!, Fix RPM’s CSS bug by moving the hover property, Friends and family can be a problem, A simple problem...
:hover pseudo-property, Fix RPM’s CSS bug by moving the hover property
Blueprint, Remember your client?, Use Blueprint CSS rules to style RPM 2.0
CSS rules, Use Blueprint CSS rules to style RPM 2.0
content and navigation markup, Finish off the content and navigation markup
final user survey, The final RPM Music user survey
Golden Ratio, RPM and the Golden Ratio: An (anti) case study
layout and typographic details with CSS, Add layout and typographic details with some more CSS
personas, Pinpoint RPM’s audience with personas
requirements, Remember your personas?
surveys, results, The results are in!
Test Drive, Build an XHTML and CSS foundation optimized for 1024x768, Time to get your RPM groove on, Add layout and typographic details with some more CSS, A simple problem...
simple test page, Build an XHTML and CSS foundation optimized for 1024x768
usability fixes, A simple problem...
usability, Listen to Your Users: The Pathway to Harmonious Design
usability testing, results, Friends and family can be a problem
XHTML and CSS optimized for 1024x768, Screen RESOLUTION also affects screen real estate
rule of thirds, The rule of thirds: A shortcut to the Golden Ratio, Add layout and typographic details with some more CSS

S

Safari, tabbing through website, Accessibility is not just about screen readers
SampleRate project, Help support your local music scene, Get started on the SampleRate markup, Get started on the SampleRate markup, Let’s update the SampleRate CSS
CSS basic page layout, Get started on the SampleRate markup
CSS updates, Let’s update the SampleRate CSS
XHTML, Get started on the SampleRate markup
sans-serif fonts, Mix fonts to emphasize headings and other text, The level, not the size, of a heading conveys importance, Your Web Design Toolbox
serif versus sans-serif fonts, The level, not the size, of a heading conveys importance
saturation, The opposite of heavy is... light
scannability, Don’t ruin a good design with bad copy, What makes text scannable?, What makes text scannable?, What makes text scannable?, Your Web Design Toolbox, Headings make your text even more scannable
checklist, What makes text scannable?
Red Lantern Design Test Drive, What makes text scannable?
what makes text scannable?, What makes text scannable?
scenarios, Let your audience speak to you through focus groups and surveys
screen readers, How does your site READ?, A site’s message should be clear...to EVERYONE, A site’s message should be clear...to EVERYONE, A computer will read your image’s ALT text, A computer will read your image’s ALT text
alt attribute (<img> tag), A computer will read your image’s ALT text
longdesc attribute (<img> tag), A computer will read your image’s ALT text
markup, A site’s message should be clear...to EVERYONE
titles, headings, and descriptions, A site’s message should be clear...to EVERYONE
screen real estate, Let the personas be your guide..., Screen real estate determines how MUCH of your site will display in your user’s browser, Screen RESOLUTION also affects screen real estate, Add layout and typographic details with some more CSS
screen resolution, Resolution impacts design and layout, Resolution impacts design and layout, Resolution impacts design and layout, Resolution impacts design and layout, Resolution impacts design and layout, Screen real estate determines how MUCH of your site will display in your user’s browser, Screen RESOLUTION also affects screen real estate, Add layout and typographic details with some more CSS
1024x768, Resolution impacts design and layout
1280x800, Resolution impacts design and layout
640x480, Resolution impacts design and layout
800x600, Resolution impacts design and layout
managing, Screen RESOLUTION also affects screen real estate
screen real estate, Screen real estate determines how MUCH of your site will display in your user’s browser
secondary navigation, Primary navigation shouldn’t change... but secondary navigation SHOULD
Section 508 of the U.S. Federal Rehabilitation Act, Audio-2-Go is now a LOT more ACCESSIBLE
semantics, What’s really in a name, anyway?
serif fonts, Mix fonts to emphasize headings and other text, The level, not the size, of a heading conveys importance, Your Web Design Toolbox
serif versus sans-serif fonts, The level, not the size, of a heading conveys importance
sidebars, Your page elements shape your visual metaphor, Your page elements shape your visual metaphor
site hierarchy and card sorting, Arrange your cards into a site hierarchy
site message, A site’s message should be clear...to EVERYONE
site statistics, Friends and family can be a problem, Site stats give your users (another) voice, Mint
website analytics tools, Mint
sketches, Show Jane some basic design sketches, Sketches keep the focus on functionality
functionality, Sketches keep the focus on functionality
slashdot.org, Compress your copy
Sole Proprietor/Partnership, Welcome to the world of DESIGN PIRACY
stacks (card sorting), Sort your cards into related stacks, Give your stacks names that are short and descriptive
stack names, Give your stacks names that are short and descriptive
storyboards, Sketches keep the focus on functionality, Your Web Design Toolbox, Use storyboards to develop ideas and save time without code, Let’s create a storyboard for Mark, Let’s create a storyboard for Mark, Your Web Design Toolbox
Mark in Japan, Let’s create a storyboard for Mark
Photoshop, Let’s create a storyboard for Mark
Strict XHTML, Move from pre-production to production
surveys, Add layout and typographic details with some more CSS, Let your audience speak to you through focus groups and surveys, Surveys and focus groups aren’t free, Ask the right questions in your surveys, Ask the right questions in your surveys, Ask the right questions in your surveys, The final RPM Music user survey, The final RPM Music user survey, The results are in!, Friends and family can be a problem, Friends and family can be a problem
asking the right questions, Ask the right questions in your surveys
cost, Surveys and focus groups aren’t free
jargon, Ask the right questions in your surveys
open-ended questions, Ask the right questions in your surveys, The final RPM Music user survey, Friends and family can be a problem
limits, The final RPM Music user survey
RPM Records, The final RPM Music user survey, The results are in!
final user survey, The final RPM Music user survey
results, The results are in!
Surveys Exposed, Focus Groups Costs
symmetrical balance, RPM and the Golden Ratio: An (anti) case study

T

tabbing through website, Accessibility is not just about screen readers, Accessibility is not just about screen readers
Safari, Accessibility is not just about screen readers
tabindex attribute (<a> tag), Tabbing through a page should be ORDERLY, There’s more to ordering than just tabindexes
more than just, There’s more to ordering than just tabindexes
tech.originalsignal.com, Compress your copy
testing tools, #10: More tools for design
tetradic color scheme, Create a richer color palette with the tetradic color scheme, Your Web Design Toolbox
text contrast, #7: Text contrast
text, scannability, Don’t ruin a good design with bad copy, What makes text scannable?, What makes text scannable?
checklist, What makes text scannable?
what makes text scannable?, What makes text scannable?
textural links, Icons don’t SAY anything... they just look pretty
themes, A clear visual metaphor helps reinforce your site’s theme, A theme represents your site’s content, Develop a theme and visual metaphor for Mark, If IA were about links...
defined, A theme represents your site’s content
developing, Develop a theme and visual metaphor for Mark
IA and, If IA were about links...
tools for design, #10: More tools for design
top level navigation, Determine your top level navigation, Your Web Design Toolbox, Organize your site’s information
clear top navigation categories, Organize your site’s information
triadic color scheme, Use the triadic scheme to create usable color patterns, Your Web Design Toolbox
Trilobite Labs project, Red Lantern’s got a new prospective client, Red Lantern’s got a new prospective client, Figure out a total bid..., The Trilobite podcast: a(nother) new challenge
podcast, The Trilobite podcast: a(nother) new challenge
Red Lantern Design, Figure out a total bid...
estimate worksheet, Figure out a total bid...
requirements, Red Lantern’s got a new prospective client
Tritanopia, Audio-2-Go, via color-blind eyes

U

U.S. Federal Rehabilitation Act, Audio-2-Go is now a LOT more ACCESSIBLE
unordered lists, Move from pre-production to production, Add lists to your XHTML
usability, Listen to Your Users: The Pathway to Harmonious Design, Let your audience speak to you through focus groups and surveys, Let your audience speak to you through focus groups and surveys, Surveys and focus groups aren’t free, Surveys and focus groups aren’t free, Ask the right questions in your surveys, Ask the right questions in your surveys, Ask the right questions in your surveys, The final RPM Music user survey, Web Browser Usage, Web Browser Usage, Fix RPM’s CSS bug by moving the hover property, Site stats give your users (another) voice, Mint
:hover pseudo-property, Fix RPM’s CSS bug by moving the hover property
browser testing, Web Browser Usage
focus groups, Let your audience speak to you through focus groups and surveys, Surveys and focus groups aren’t free
cost, Surveys and focus groups aren’t free
generic browser stats, Web Browser Usage
site statistics, Site stats give your users (another) voice, Mint
website analytics tools, Mint
surveys, Let your audience speak to you through focus groups and surveys, Surveys and focus groups aren’t free, Ask the right questions in your surveys, Ask the right questions in your surveys, Ask the right questions in your surveys, The final RPM Music user survey
asking the right questions, Ask the right questions in your surveys
cost, Surveys and focus groups aren’t free
jargon, Ask the right questions in your surveys
open-ended questions, Ask the right questions in your surveys
RPM Records final user survey, The final RPM Music user survey
usability testing, IE6 only supports :hover on link and anchor tags, IE6 only supports :hover on link and anchor tags, The building blocks of budget usability testing, The building blocks of budget usability testing, Use a moderator script to organize the test, Friends and family can be a problem, Friends and family can be a problem, Friends and family can be a problem
Behind the Scenes, IE6 only supports :hover on link and anchor tags
friends and family, Friends and family can be a problem
moderator scripts, The building blocks of budget usability testing, Use a moderator script to organize the test
contruction, Use a moderator script to organize the test
number of participants, Friends and family can be a problem
on a budget, The building blocks of budget usability testing
user experience, Time to get your RPM groove on
user experience designer, Welcome to the world of DESIGN PIRACY
user-centered design, Web design is all about communication, and your USERS, Your Web Design Toolbox
users, Design is about audience, Build an XHTML and CSS foundation optimized for 1024x768
(see also usability)
informed decisions, Build an XHTML and CSS foundation optimized for 1024x768

V

vertical menu type, Put it all in context
vertical navigation, Approach #2: Vertical navigation, Your Web Design Toolbox
vertical ratios, Finish off the content and navigation markup
vertical tabs menu type, Put it all in context
Visio, IA Diagrams are NOT just links between pages
visual indicators, Those stars are a real problem
visual metaphor, Think before you code, Brainstorming: The path to a visual metaphor, Your page elements shape your visual metaphor, Your Web Design Toolbox
brainstorming, Brainstorming: The path to a visual metaphor
page elements shaping, Your page elements shape your visual metaphor
VoiceOver, How does your site READ?

W

Watch it!, Create the basic page layout with CSS, There’s more to ordering than just tabindexes, Edit your index file
blogs, Edit your index file
Kuler, Create the basic page layout with CSS
WCAG checkpoints, There’s more to ordering than just tabindexes
WCAG (Web Content Accessibility Guidelines), WCAG Priority 1, WCAG Priority 1, There’s more to ordering than just tabindexes
Priority 1, WCAG Priority 1, There’s more to ordering than just tabindexes
WCAG checkpoints, There’s more to ordering than just tabindexes, There’s more to ordering than just tabindexes
Audio-2-Go project, There’s more to ordering than just tabindexes
web applications, #5: Developing web applications
web designers, types of, Welcome to the world of DESIGN PIRACY
Web Developer (Firefox add-in), #10: More tools for design
web markup, future of, #2: The future of web markup
web-safe colors, Life through web-safe eyes...
website analytics tools, Mint
whitespace, Your page elements shape your visual metaphor
WordPress, Adding blog functionality with WordPress, Add a WordPress blog to the Red Lantern site, Change the look and feel of your blog with themes
Geek Bits, Add a WordPress blog to the Red Lantern site
themes, Change the look and feel of your blog with themes
workflow, Where do you start?
“wrap” <div>, Move from pre-production to production
WriteMaps, #10: More tools for design
writing for the web, Don’t ruin a good design with bad copy, What makes text scannable?, Web design is all about communication, and your USERS, Your Web Design Toolbox, Writing for the Web: Yes, You Scan!, The problem is TEXT, Improve your content with the Inverted Pyramid, Compress your copy, Compress your copy, Compress your copy, Compress your copy, Compress your copy, Compress your copy, Headings make your text even more scannable, Headings make your text even more scannable, Mix fonts to emphasize headings and other text, The level, not the size, of a heading conveys importance, The level, not the size, of a heading conveys importance
editing text down, Compress your copy
headings, Headings make your text even more scannable, Headings make your text even more scannable, Mix fonts to emphasize headings and other text, The level, not the size, of a heading conveys importance
fonts, Mix fonts to emphasize headings and other text
level of importance, The level, not the size, of a heading conveys importance
inverted pyramid, Improve your content with the Inverted Pyramid, Compress your copy, Compress your copy
lists, Compress your copy, Compress your copy
reading online, The problem is TEXT
removing unnecessary content, Compress your copy
serif versus sans-serif fonts, The level, not the size, of a heading conveys importance
what makes text scannable?, What makes text scannable?

X

XAMPP, Add a WordPress blog to the Red Lantern site
XHTML, Build a quick XHTML mock-up for Mark, And the CSS..., Move from pre-production to production, Move from pre-production to production, Screen RESOLUTION also affects screen real estate, Finish off the content and navigation markup, Get started on the SampleRate markup, Approach #1: Horizontally-tabbed navigation, Approach #2: Vertical navigation, Update the CNM XHTML to use textual links, Each sub-page gets its own secondary navigation, Add lists to your XHTML, Use CSS to evolve your site’s design, Let’s build a quick mockup for the Foo Bar
College of New Media project, Update the CNM XHTML to use textual links, Each sub-page gets its own secondary navigation
secondary navigation, Each sub-page gets its own secondary navigation
updating XHTML to use textural links, Update the CNM XHTML to use textual links
evolutionary design, Use CSS to evolve your site’s design
Foo Bar project, Let’s build a quick mockup for the Foo Bar
horizontal tabs, Approach #1: Horizontally-tabbed navigation
lists, Add lists to your XHTML
Mark in Japan project, Build a quick XHTML mock-up for Mark, And the CSS..., Move from pre-production to production
index.html, Move from pre-production to production
joining XHTML and CSS, And the CSS...
RPM Records project, Screen RESOLUTION also affects screen real estate, Finish off the content and navigation markup
content and navigation markup, Finish off the content and navigation markup
optimized for 1024x768, Screen RESOLUTION also affects screen real estate
SampleRate project, Get started on the SampleRate markup
Strict XHTML, Move from pre-production to production
vertical navigation, Approach #2: Vertical navigation
XHTML2 versus HTML5, #2: The future of web markup

Y

Yahoo UI (YUI) Grid CSS, Set up RPM 2.0 with the Blueprint Framework
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.123.155