I'm @daraskolnick basically everywhere on the Internet.
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
Independent designers who don’t do their own
development (or other designers who work remotely with
Designers creating custom themes from scratch (not child
Developers who want to help their designers make their
Larger teams where designers and developers work side-
by-side every day
Designer/developer hybrids who always do everything
Designers who design in the browser
There’s often a lack of communication between designers
Designers and developers are often frustrated with each
It shouldn’t be this way. We’re on the same time!
(Team awesome website, that is.)
Why does the finished website look different from my
Why do they keep saying ‘no’ to things? Are they just
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
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
What browsers and devices do you test on?
Who’s going to enter the content?
Who’s responsible for creating mobile/tablet sized
Does the client need training? If so, who’s responsible?
Will [insert layout idea here] work in WordPress/on a
Can I pass something by you before I send it to the client?
Good developers should be able to work in different
programs. They’re just tools. Though if I find out your design
is in InDesign I might mark up your quote ;)
A layer comps is a snapshot of the state of your layers a
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,
Don't put all your page designs in one big file
Always use whole pixels numbers
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
Or make your own!
A better Photoshop grid for responsive web design
1200px grid system
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.
You and your client will be sad.
Do this before you get too far into designing, for your own
Typographic styles (paragraphs, unordered lists, ordered
lists, headings 1-6, blockquotes)
States: hover, active, focus
Form inputs (minimum: single line text input, multi line
text area, submit button)
Any other styles repeated throughout your site
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