Hiring and Working With
Tech Vendors #1:
Website Design and
Development
for the Ford Foundation
Lauren Girardin, @girardinl, [email protected]
Director, Marketing and Communications, YTH, @YTHorg
Young
people
deserve real
information,
when they need it,
how they need it.
@girardinl @YTHorg
CSS
HTML
SEO
CMS
IA
SEM
UI/UX
RESPONSIVE DESIGN
THEMES
@girardinl @YTHorg
HTML
HyperText Markup Language
start tag content end tag
attribute value
<h1>Post title</h1>
<p>Paragraph <em>text</em> with a
<a href=http://url.com>link</a>.</p>
@girardinl @YTHorg
CSS
Cascading Style Sheets
element property value
rule
declaration
h1 {
color: #ffffff;
font-size: 10em;
font-family: Arial, sans-serif;
}
@girardinl @YTHorg
YOU ARE
THE {CSS}
TO MY <HTML>
@girardinl @YTHorg
CMS
Content Management System
front end back end
theme database
website visitors
content managers
@girardinl @YTHorg
CMS
Content Management System
CMS
Content Management System
IA
Information Architecture
Home
About
Staff
Board
Contact
Programs
Women
Children
News Blog
Social Search
@girardinl @YTHorg
SEO
Search Engine Optimization
SEO
SEM
Search Engine Marketing
SEM SEM
SEO
Responsive design
One site for every screen.
Creative Commons image from http://sparksheet.com/theres-no-such-thing-as-responsive-content/ @girardinl @YTHorg
UI/UX
User Interface / User Experience
Image based on one produced by @ed_lea, inspired by @jeanniehuang via @jeffrey @girardinl @YTHorg
Themes
Deploy your content.
@girardinl @YTHorg
GOOD
FAST CHEAP
PRICEY SLOW
CRAPPY
you can pick TWO @girardinl @YTHorg
GOOD
FAST CHEAP
PRICEY SLOW
CRAPPY
you can pick TWO @girardinl @YTHorg
http://www.slideshare.net/girardinl/before-you-redesign-your-website
@girardinl @YTHorg
Resources
• General: Lynda.com web tutorials ($), CodeAcademy.com
• HTML & CSS: w3schools.com, Turnwall.com Web
Development Basics
• SEO: Google Webmasters on YouTube,
SearchEngineWatch.com, The Moz Blog
• Responsive design: Smashing Magazine, Mashable
• UI/UX: DesignShack.net post, WebDesignerDepot.com post
• RFPs: TechSoup’s RFP Library
• If you can tolerate irreverence and blue humor, check out The
Oatmeal’s comics, How a website design goes straight to… &
Why you don’t like changes to your design
@girardinl @YTHorg
yth.org
@YTHorg @girardinl
facebook.com/YTHorg
Register!
YTH Live yth.org/live
April 6-8, 2014, San Francisco, CA
