2. This is a Car
● Standardize!
● Don't Make Users
Relearn Web
● Be Inventive
When Budget &
Purpose Allows
● Standard does
not have to be
Boring
3. Why Standardize?
● Less Time to Code
● Easier to Update and Maintain
● Helps Search Engine Optimization
● Painless Plugin and Software Upgrades
● Pleasant Customer User Experience
● Use Common Names & Icons for Sections
Don't Label the Cart “Pink Bicycle Basket”
● Faster Loading
8. Things You Don't See But Exist
● Active, Link & Navigation
Hovers
● Drop Down Menus
● Outside of the Container
● Special Functionality
● No Background on Logo
● Favicon 16x16 Icon
9. Grid Theory
● Rule of Thirds/
Golden Ratio
● 1.6180339 ɸ
(Phi)
● Line-up
Components
● Proportion
10. Nathan Smith's 960 Grid
● http://960.gs
● 12, 16, or 24
columns
● 960 pixels wide:
divisible by 2, 3,
4,5,6,8,10,12,15,
or 16
11. Twenty Eleven Grid Template
● Container
● Header (Logo, Navigation,
Social Media, Call to Action)
● Body (Content Sidebar,
Widgets)
● Footer (Copyright, Site
Map, Terms & Privacy)
Download PSD Template:
http://wpexpresslane.com/grid
12. Above The Fold
● First 600 Pixels
● Sliders take up a lot
of space
● Idea of What
Website is About in
3 Seconds
● Entice Users to Dig
Deeper
13. PSD Organization
● Neatness Counts
● Name Your Layers
● Use Groups/Folders
● Include Fonts (licensing)
● Don't Use Layer Effects
that are dependent on
other layers to display
● Keep It Simple
14. Print vs. Web
PRINT WEB
Screen Resolution 300dpi 72dpi
Measurements Inches or points Pixels or Ems
Backgrounds Go Crazy! Size Matters
Layers & Blending Mode Use if Needed Avoid
Page Width 8.5 inches 960px
Page Height 11 inches Variable
Drop Shadows, Outer Use anyway you Must have transparent
Glow like background
Gradients Use anyway you Should be linear, repeatable
like
Fonts Rasterize or Web Safe Fonts, Google Web
embedded Fonts, or @font-face
15. Web Typography
● Web Safe Fonts
http://www.w3schools.com/cssref/css_websafe_fonts.asp
● Google Web Fonts
http://www.google.com/webfonts
● @Font Face
http://www.fontsquirrel.com/fontface
● Web Fonts
http://www.dafont.com/
● Cufon
http://cufon.shoqolate.com/generate/
16. Web Safe Fonts
● Body Text
● Fastest to load
● Display Inconsistent
(Browser, OS, Hardware)
● Readability is Key
18. Google Web Fonts
● Body, Headlines, Navigation, Logo
● Some Fonts are Inconsistent
● Easy to Add to Web Sites
<link href='http://fonts.googleapis.com/css?
family=Chau+Philomene+One' rel='stylesheet' type='text/css'>
● Compare and Filter Fonts by Type
● Downloadable for use in Photoshop
http://www.google.com/webfonts or
http://joemaller.com/1856/download-google-fonts/
19. @font-face
● Way to Embed Fonts into Site
● Must be Licensed for Web Embedding
● Add Code to top of style sheet, use like any
font using font-family: tag
● Best for for Navigation and Headlines
● Font Squirrel
http://www.fontsquirrel.com/fontface/generator
20. Cufón
● Use for Headlines, Navigation
● Delay in Rendering of Fonts
● Check EULA for Web Embedding
● Javascript converts text to images, but
leaves HTML code intact
● http://cufon.shoqolate.com/generate/
● Requires WordPress Plugin or Upload of
.js files
21. New Trends in Web Design
● Minimalistic
● Gradients and Drop Shadows (CSS3)
http://css3generator.com/
● Noisy Backgrounds
http://www.noisetexturegenerator.com/
● Beautiful Typography
● Expansive Footers
● Responsive Design
26. Intro to Responsive Design
● Article by Ethan Marcotte in 2010
http://www.alistapart.com/articles/responsive-web-design/
● Layout Changes Based on Width of Device
● Uses Same Style Sheet for All Versions
● Uses Media Queries & CSS
● Widths and Fonts as % and ems
● Hidden Content Will be Downloaded
27. Media Queries
● Target Device Based on Screen Width
● Bottom of Twenty Eleven Style Sheet
@media (max-width: 800px) {
#sidebar {
float: none;
}
}
● Examples: http://mediaqueri.es/popular/
29. What Coders Need
● Site Map (Flowchart or Bullet List of Pages and Hierarchy)
● PSD with Layers Intact
● Background Image if Used
● Special Fonts if Used
● Explanation of Special Functionality
● Deadlines
● Login Credentials for Domain Registrar
31. Prevent Catastrophes
● Save Work Often
● Take Snap Shots
● Revision Control
● Strong Passwords
● Backup Often
● Keep Software
Updated
● Develop A Process
