3. ALITTLEABOUTME.
I...
am from Toronto
am both a web designer and front end developer
run my own (very) small business
do lots of WordPress development work in partnership
with designers who don't code
have been developing WP themes for 10 (!) years
4. THISTALKISFOR...
Independent designers who don’t do their own
development (or other designers who work remotely with
developers)
Designers creating custom themes from scratch (not child
themes)
Developers who want to help their designers make their
lives easier
6. WHYISTHISIMPORTANTTO
TALKABOUT?
There’s often a lack of communication between designers
and developers
Designers and developers are often frustrated with each
other
It shouldn’t be this way. We’re on the same time!
(Team awesome website, that is.)
8. THINGS(SOME)DEVELOPERS
THINKABOUT(SOME)
DESIGNERS
This is pretty, but have they actually thought about how
this will work in a browser?
Why isn’t this design more consistent and systematic?
Uh oh, this design is totally going to fall apart with variable
content.
45. OH,THETHINGSI'VESEEN...
Fonts that were all non-web fonts
Completely random element placement (position
absolute all the things!) on a "responsive" site
“Mobile designs” for a responsive site that bear very little
resemblance to the full-sized design
Graphics that rely on Photoshop blending modes
Huge images that would take forever to load
Extremely inconsistent page designs
49. QUESTIONSTOASKBEFORETHEPROJECT
STARTS
What browsers and devices do you test on?
Who’s going to enter the content?
Who’s responsible for creating mobile/tablet sized
designs?
Does the client need training? If so, who’s responsible?
55. WHYVECTORS?
We need to create Retina/HiDPI graphics
It’s 2015 and SVGs are very well supported
Design elements are crisp and clean at any size
Makes your life and dev’s life easier
64. LAYERCOMPS
A layer comps is a snapshot of the state of your layers a
particular point
Layer comps toggle different layer order and visibility
This is perfect for different states (hover state, active state,
nav menu opened, swapping out images in a carousel,
etc.)
69. WHYSHOULDIUSEAGRID?
Keeps your designs neat, tidy and balanced
Devs can't make wrong assumptions about spacing and
sizing if everything aligns to a grid
Good devs should work with whatever grid you prefer or
can offer suggestions if you don’t have one
70. AFEWGRIDRESOURCES
Or make your own!
A better Photoshop grid for responsive web design
1200px grid system
guideguide.me
Gridset
72. DEVELOPERSAREVERYLITERAL
If your font styles, spacing, and sizing of elements is
inconsistent from one page to another, we’ll be confused
and might make incorrect assumptions.
76. STYLEGUIDESSHOULD
CONTAIN
Typographic styles (paragraphs, unordered lists, ordered
lists, headings 1-6, blockquotes)
Colour palette
States: hover, active, focus
Form inputs (minimum: single line text input, multi line
text area, submit button)
Any other styles repeated throughout your site
94. THINGSTOTHINKABOUT
How should the site navigation work?
Are buttons and links easily tappable?
Should the font sizes and spacing change?
Does the mobile browsing experience feel good?
101. PERFORMANCETWEAKS
Limit the number of web fonts
Limit the number of huge (non-tiling) images
Don’t just hide half the site in the mobile view
Teach your client about resizing and optimizing images
(Resource: ImageOptim)