1. HELPMEHELPYOU
PRACTICALTIPSFORDESIGNERSFROMA
WORDPRESSDEVELOPER
WITH@DARASKOLNICK

2. HI,I'MDARA.
NICETOMEETYOU!
I'm @daraskolnick basically everywhere on the Internet.

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

5. THISMIGHTNOTBEQUITEAS
USEFULFOR...
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

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.)

7. THINGS(SOME)DESIGNERS
THINKABOUT(SOME)
DEVELOPERS
Why does the finished website look different from my
mockup?
Why do they keep saying ‘no’ to things? Are they just
grumpy?

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.

9. WITHALITTLEEDUCATIONON
BOTHSIDES,WECANFIXTHESE
PROBLEMS.

11. THISTALKISORGANIZEDINTO
PARTSOFTHEPROJECTLIFE
CYCLE
1. Before design begins
2. While you're designing
3. After development is complete

12. PARTONE:BEFORE
DESIGNBEGINS

13. 1.CHOOSEAGOOD
DEVELOPER
DEVELOPMENTISNOTACOMMODITY.
WE'RENOTALLTHESAME!

14. WORDPRESSISNOTINHERENTLY“EASY”
OR“HARD”FORCLIENTSTOUSE.THE
DEVELOPERMAKESALLTHEDIFFERENCE.

15. SITEADMINEXPERIENCES

20. SITEADMINEXPERIENCE

24. SOLUTION:ASKYOURPOTENTIAL
DEVELOPERWHATTHEYDOTOMAKE
WEBSITESEASYTOUPDATEFORNON-
TECHNICALCLIENTS
ASKTOSEEEXAMPLES!

25. SOMEDEVELOPERSPAYMORE
ATTENTIONTODETAILTHAN
OTHERS
SNOOPAROUNDTHEIRPORTFOLIO!

26. RESIZEYOURBROWSER
DOTHEIRWEBSITESFALLAPARTATANYPOINT?
DOYOUSEEHORIZONTALSCROLLBARS?

29. ISTHEIRTEXTACTUALLYTEXTORISTHERE
TEXTINSIDEIMAGES?
TEXTINIMAGESISBADFORPERFORMANCE,ACCESSIBILITY,AND
SEO.ALSO,HARDFORCLIENTTOUPDATE

32. CHECKOUTTHEIRSPACING
ISTHEREENOUGHPADDINGAROUNDTHEIRSITES?
ARETEXTANDFORMELEMENTSSPACEDNICELY?

35. LOADINGTIME
DOTHEIRSITESTAKEFOREVERANDEVERTOLOAD?

36. NOTE!
SOMEOFTHESEISSUESMIGHTBEOUTOF
THEDEVELOPER'SCONTROL.
BUTAGOODDEVELOPERWILLOFTENFIXTHESEISSUESANDTHEY
SHOULDN'TBEALLOVERTHEIRPORTFOLIO.

37. ASKYOURSELF:ISTHIS
DEVELOPERANICEPERSON?

38. "SOFTSKILLS"MATTER
DOTHEYUSEALOTOFJARGONANDTALK
ATYOUWITHASUPERIORITYCOMPLEX?

39. 2.WHENSHOULDYOUBRING
YOURDEVELOPERONBOARD?

40. BRINGTHEMONBOARDBEFOREDESIGN
HASBEGUN

41. DESIGNINGWITHOUTADEVELOPERIN
MINDANDASSUMINGTHATANYONECAN
DOTHEJOBISARECIPEFORDISASTER.

42. EVENWORSE:HANDINGDESIGNSTOA
CLIENTANDTHENTELLINGTHEMTOFIND
ADEVELOPER.

43. THISWILLMAKEYOULOOK
BADTOYOURCLIENT

44. THINGSI’VESEENINDESIGNS
THATWEREN’TPASSEDBYA
DEVELOPERFIRST

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

47. THISPUTSYOURDEVELOPERIN
ANAWKWARDPOSITION
THEYHAVETOLETBOTHYOUANDYOUR
CLIENTDOWN.

48. GOODCOMMUNICATIONISA
MUST.
ASKYOURPROSPECTIVE
DEVELOPERLOTSOF
QUESTIONS!

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?

50. QUESTIONSTOASKWHILEDESIGNING
Will [insert layout idea here] work in WordPress/on a
responsive site?
Can I pass something by you before I send it to the client?

51. PARTTWO:THEDESIGN
PHASE

52. Q:WHATSOFTWARESHOULDI
USE?
A:WHATEVERYOU’RECOMFORTABLE
WITH…WITHINREASON.

53. POPULARCHOICES
Photoshop
Illustrator
Sketch
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 ;)

54. WHICHEVERAPPYOU
CHOOSE...
...USEVECTORSASOFTENASPOSSIBLE!

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

56. IFYOU'REUSINGILLUSTRATOR
ORSKETCH...
You're already designing with vector assets. High five!

57. IFYOU'REUSINGPHOTOSHOP...
Use shapes
Paste in vector graphics from Illustrator as Smart Objects

58. KEEPYOURDESIGNFILES
ORGANIZED

59. NAME,ORDER,ANDGROUP
YOURLAYERS

62. DELETELAYERSYOU'RENOT
USINGANYMORE

63. USELAYERCOMPS(IFYOU'RE
USINGPHOTOSHOP)

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.)

66. ACOUPLEOFOTHERTIPS
Don't put all your page designs in one big file
Always use whole pixels numbers

67. USEAGRID!

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

71. BECONSISTENT

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.

73. IFYOURDESIGNSAREN'TCONSISTENT,
YOURDEVELOPER’SIMPLEMENTATION
PROBABLYWON'TBEGREATEITHER.
You and your client will be sad.

74. SOLUTION:STYLEGUIDES!
Do this before you get too far into designing, for your own
sake.

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

77. USEPARAGRAPHAND
CHARACTERSTYLES

80. THINKINTERMSOFTEMPLATES
ANDMODULES,NOTJUST
UNIQUEPAGES

81. THINGSDEVELOPERSLOVE
Re-usability
Patterns
Consistency
Further reading: Atomic web design

82. WORDPRESSSITESAREALL
ABOUTREPETITION
Page templates
Custom post types
Variations need to fit within a system

83. THINKABOUTTHEVARIATIONS
INAWORDPRESSSITE,TOO

84. THESIMPLEST,STANDARDPAGE

85. THE404PAGE
(Almost everyone forgets this!)

86. FALLBACKSFORMISSINGCONTENT
(e.g. what if the client forgets to upload a featured image?)

87. HOVER/FOCUS/ACTIVESTATES
THROUGHOUTTHESITE
(Otherwise, your developer will leave it out or make it up.)

88. OTHERTHINGSSOME
DESIGNERSHAVEFORGOTTEN
Blog comments
Navigation menu dropdown (submenu)
Image with caption
Search results
Form styling

89. WHATABOUTRESPONSIVE
DESIGN?!

90. RESPONSIVESITES
DON’TJUSTHAPPEN.

91. SOMENEWBIEDESIGNERSAND
CLIENTSTHINKTHAT
“WORDPRESSTAKESCAREOF
MOBILE”.NOOOOOOO.

92. WHOSHOULDFIGUREOUT
THERESPONSIVEWEBSITE?
If you leave it to your developer, make sure they’re okay
with that and that they’re good at design.
Resource: mediaqueri.es

93. RESPONSIVEDESIGN
SHOULDN’TBEAN
AFTERTHOUGHT

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?

95. MOBILEFIRST?
MOBILELAST?

96. MYFAVOURITE:
MOBILECONCURRENT!
Keep the smallest version of the site in mind as you’re
designing the largest and vice versa. Switch back and forth.

97. RESPONSIVESITE=SAME
CONTENTATALLSIZES
Not hiding 3/4 of the content
Please design responsibly!

98. BROWNIEPOINTS
Think about how your website will behave between the
largest and smallest sizes.

99. THINKABOUTPERFORMANCE

100. MUCHOFTHISISUPTOYOUR
DEVELOPER,BUTHERE’SWHAT
YOUCANDO

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)

102. PARTTHREE:WHILE
DEVELOPMENTIS
HAPPENING

104. PARTFOUR:AFTER
DEVELOPMENTIS
COMPLETE

105. LETYOURDEVELOPERKNOWIF
ANYTHINGISBROKEN
Tell them what OS, browser and device you’re using! This is
extremely helpful information for debugging.

106. TESTTHEADMINSIDEOFTHE
WEBSITE
Add in content yourself, make sure the workflow makes
sense
Try variations in content (e.g. different lengths) to see how
the site stands up

107. GETTINGINVOLVEDINUSING
THESTAGINGSITEHELPSYOU
HELPYOURCLIENTS

108. NOW,GOHELPYOUR
DEVELOPERHELPYOUMAKE
AWESOMEWEBSITES!

109. QUESTIONS?

110. THANKS!
@DARASKOLNICK
DARASKOLNICK.COM
SLIDES:
DARASKOLNICK.GITHUB.IO/WCTO-DESIGNER-DEVELOPER