Help Me Help You: Practical Tips for Designers from A WordPress Developer

HELP ME HELP YOUPRACTICAL TIPS FOR DESIGNERS FROM A

WORDPRESS DEVELOPERWITH @DARASKOLNICK

HI, I'M DARA.NICE TO MEET YOU!

I'm @daraskolnick basically everywhere on the Internet.

A LITTLE ABOUT ME.I...

am from Torontoam both a web designer and front end developerrun my own (very) small businessdo lots of WordPress development work in partnershipwith designers who don't codehave been developing WP themes for 10 (!) years

THIS TALK IS FOR...Independent designers who don’t do their owndevelopment (or other designers who work remotely withdevelopers)Designers creating custom themes from scratch (not childthemes)Developers who want to help their designers make theirlives easier

THIS MIGHT NOT BE QUITE ASUSEFUL FOR...

Larger teams where designers and developers work side-by-side every dayDesigner/developer hybrids who always do everythingDesigners who design in the browser

WHY IS THIS IMPORTANT TOTALK ABOUT?

There’s often a lack of communication between designersand developersDesigners and developers are often frustrated with eachotherIt shouldn’t be this way. We’re on the same time! (Team awesome website, that is.)

THINGS (SOME) DESIGNERSTHINK ABOUT (SOME)

DEVELOPERSWhy does the finished website look different from mymockup?Why do they keep saying ‘no’ to things? Are they justgrumpy?

THINGS (SOME) DEVELOPERSTHINK ABOUT (SOME)

DESIGNERSThis is pretty, but have they actually thought about howthis 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 variablecontent.

WITH A LITTLE EDUCATION ONBOTH SIDES, WE CAN FIX THESE

PROBLEMS.

THIS TALK IS ORGANIZED INTOPARTS OF THE PROJECT LIFE

CYCLE1. Before design begins2. While you're designing3. After development is complete

PART ONE: BEFOREDESIGN BEGINS

1. CHOOSE A GOODDEVELOPER

DEVELOPMENT IS NOT A COMMODITY.WE'RE NOT ALL THE SAME!

WORDPRESS IS NOT INHERENTLY “EASY”OR “HARD” FOR CLIENTS TO USE. THE

DEVELOPER MAKES ALL THE DIFFERENCE.

� SITE ADMIN EXPERIENCES

� SITE ADMIN EXPERIENCE

SOLUTION: ASK YOUR POTENTIALDEVELOPER WHAT THEY DO TO MAKEWEBSITES EASY TO UPDATE FOR NON-

TECHNICAL CLIENTSASK TO SEE EXAMPLES!

SOME DEVELOPERS PAY MOREATTENTION TO DETAIL THAN

OTHERSSNOOP AROUND THEIR PORTFOLIO!

RESIZE YOUR BROWSERDO THEIR WEBSITES FALL APART AT ANY POINT?

DO YOU SEE HORIZONTAL SCROLLBARS?

IS THEIR TEXT ACTUALLY TEXT OR IS THERETEXT INSIDE IMAGES?

TEXT IN IMAGES IS BAD FOR PERFORMANCE, ACCESSIBILITY, ANDSEO. ALSO, HARD FOR CLIENT TO UPDATE

CHECK OUT THEIR SPACINGIS THERE ENOUGH PADDING AROUND THEIR SITES?ARE TEXT AND FORM ELEMENTS SPACED NICELY?

LOADING TIMEDO THEIR SITES TAKE FOREVER AND EVER TO LOAD?

NOTE!SOME OF THESE ISSUES MIGHT BE OUT OF

THE DEVELOPER'S CONTROL.BUT A GOOD DEVELOPER WILL OFTEN FIX THESE ISSUES AND THEY

SHOULDN'T BE ALL OVER THEIR PORTFOLIO.

ASK YOURSELF: IS THISDEVELOPER A NICE PERSON?

"SOFT SKILLS" MATTERDO THEY USE A LOT OF JARGON AND TALKAT YOU WITH A SUPERIORITY COMPLEX?

2. WHEN SHOULD YOU BRINGYOUR DEVELOPER ON BOARD?

�BRING THEM ON BOARD BEFORE DESIGN

HAS BEGUN

�DESIGNING WITHOUT A DEVELOPER IN

MIND AND ASSUMING THAT ANYONE CANDO THE JOB IS A RECIPE FOR DISASTER.

���EVEN WORSE: HANDING DESIGNS TO A

CLIENT AND THEN TELLING THEM TO FINDA DEVELOPER.� � � � �

THIS WILL MAKE YOU LOOKBAD TO YOUR CLIENT

THINGS I’VE SEEN IN DESIGNSTHAT WEREN’T PASSED BY A

DEVELOPER FIRST

OH, THE THINGS I'VE SEEN...Fonts that were all non-web fontsCompletely random element placement (positionabsolute all the things!) on a "responsive" site“Mobile designs” for a responsive site that bear very littleresemblance to the full-sized designGraphics that rely on Photoshop blending modesHuge images that would take forever to loadExtremely inconsistent page designs

THIS PUTS YOUR DEVELOPER INAN AWKWARD POSITION

THEY HAVE TO LET BOTH YOU AND YOURCLIENT DOWN.

GOOD COMMUNICATION IS AMUST.

ASK YOUR PROSPECTIVEDEVELOPER LOTS OF

QUESTIONS!

QUESTIONS TO ASK BEFORE THE PROJECTSTARTS

What browsers and devices do you test on?Who’s going to enter the content?Who’s responsible for creating mobile/tablet sizeddesigns?Does the client need training? If so, who’s responsible?

QUESTIONS TO ASK WHILE DESIGNINGWill [insert layout idea here] work in WordPress/on aresponsive site?Can I pass something by you before I send it to the client?

PART TWO: THE DESIGNPHASE

Q: WHAT SOFTWARE SHOULD IUSE?

A: WHATEVER YOU’RE COMFORTABLEWITH… WITHIN REASON.

POPULAR CHOICESPhotoshopIllustratorSketch

Good developers should be able to work in differentprograms. They’re just tools. Though if I find out your design

is in InDesign I might mark up your quote ;)

WHICHEVER APP YOUCHOOSE...

...USE VECTORS AS OFTEN AS POSSIBLE!

WHY VECTORS?We need to create Retina/HiDPI graphicsIt’s 2015 and SVGs are very well supportedDesign elements are crisp and clean at any sizeMakes your life and dev’s life easier

IF YOU'RE USING ILLUSTRATOROR SKETCH...

You're already designing with vector assets. High five!

IF YOU'RE USING PHOTOSHOP...Use shapesPaste in vector graphics from Illustrator as Smart Objects

KEEP YOUR DESIGN FILESORGANIZED

NAME, ORDER, AND GROUPYOUR LAYERS

�

�

DELETE LAYERS YOU'RE NOTUSING ANYMORE

USE LAYER COMPS (IF YOU'REUSING PHOTOSHOP)

LAYER COMPSA layer comps is a snapshot of the state of your layers aparticular pointLayer comps toggle different layer order and visibilityThis is perfect for different states (hover state, active state,nav menu opened, swapping out images in a carousel,etc.)

A COUPLE OF OTHER TIPSDon't put all your page designs in one big fileAlways use whole pixels numbers

USE A GRID!

WHY SHOULD I USE A GRID?Keeps your designs neat, tidy and balancedDevs can't make wrong assumptions about spacing andsizing if everything aligns to a gridGood devs should work with whatever grid you prefer orcan offer suggestions if you don’t have one

A FEW GRID RESOURCES

Or make your own!

A better Photoshop grid for responsive web design1200px grid systemguideguide.meGridset

BE CONSISTENT

DEVELOPERS ARE VERY LITERALIf your font styles, spacing, and sizing of elements is

inconsistent from one page to another, we’ll be confusedand might make incorrect assumptions.

IF YOUR DESIGNS AREN'T CONSISTENT,YOUR DEVELOPER’S IMPLEMENTATIONPROBABLY WON'T BE GREAT EITHER.

You and your client will be sad.

SOLUTION: STYLE GUIDES!Do this before you get too far into designing, for your own

sake.

STYLE GUIDES SHOULDCONTAIN

Typographic styles (paragraphs, unordered lists, orderedlists, headings 1-6, blockquotes)Colour paletteStates: hover, active, focusForm inputs (minimum: single line text input, multi linetext area, submit button)Any other styles repeated throughout your site

USE PARAGRAPH ANDCHARACTER STYLES

THINK IN TERMS OF TEMPLATESAND MODULES, NOT JUST

UNIQUE PAGES

THINGS DEVELOPERS LOVERe-usabilityPatternsConsistency

Further reading: Atomic web design

WORDPRESS SITES ARE ALLABOUT REPETITION

Page templatesCustom post typesVariations need to fit within a system

THINK ABOUT THE VARIATIONSIN A WORDPRESS SITE, TOO

THE SIMPLEST, STANDARD PAGE

THE 404 PAGE(Almost everyone forgets this!)

FALLBACKS FOR MISSING CONTENT(e.g. what if the client forgets to upload a featured image?)

HOVER/FOCUS/ACTIVE STATESTHROUGHOUT THE SITE

(Otherwise, your developer will leave it out or make it up.)

OTHER THINGS SOMEDESIGNERS HAVE FORGOTTEN

Blog commentsNavigation menu dropdown (submenu)Image with captionSearch resultsForm styling

WHAT ABOUT RESPONSIVEDESIGN?!

RESPONSIVE SITESDON’T JUST HAPPEN.

SOME NEWBIE DESIGNERS ANDCLIENTS THINK THAT

“WORDPRESS TAKES CARE OFMOBILE”. NOOOOOOO.

WHO SHOULD FIGURE OUTTHE RESPONSIVE WEBSITE?

If you leave it to your developer, make sure they’re okaywith that and that they’re good at design.

Resource: mediaqueri.es

RESPONSIVE DESIGNSHOULDN’T BE ANAFTERTHOUGHT

THINGS TO THINK ABOUTHow 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?

MOBILE FIRST?MOBILE LAST?

MY FAVOURITE:MOBILE CONCURRENT!

Keep the smallest version of the site in mind as you’redesigning the largest and vice versa. Switch back and forth.

RESPONSIVE SITE = SAMECONTENT AT ALL SIZES

Not hiding 3/4 of the contentPlease design responsibly!

BROWNIE POINTSThink about how your website will behave between the

largest and smallest sizes.

THINK ABOUT PERFORMANCE

MUCH OF THIS IS UP TO YOURDEVELOPER, BUT HERE’S WHAT

YOU CAN DO

PERFORMANCE TWEAKSLimit the number of web fontsLimit the number of huge (non-tiling) imagesDon’t just hide half the site in the mobile viewTeach your client about resizing and optimizing images(Resource: ImageOptim)

PART THREE: WHILEDEVELOPMENT IS

HAPPENING

PART FOUR: AFTERDEVELOPMENT IS

COMPLETE

LET YOUR DEVELOPER KNOW IFANYTHING IS BROKEN

Tell them what OS, browser and device you’re using! This isextremely helpful information for debugging.

TEST THE ADMIN SIDE OF THEWEBSITE

Add in content yourself, make sure the workflow makessenseTry variations in content (e.g. different lengths) to see howthe site stands up

GETTING INVOLVED IN USINGTHE STAGING SITE HELPS YOU

HELP YOUR CLIENTS

NOW, GO HELP YOURDEVELOPER HELP YOU MAKE

AWESOME WEBSITES!

QUESTIONS?

THANKS!@DARASKOLNICK

DARASKOLNICK.COMSLIDES:

DARASKOLNICK.GITHUB.IO/WCTO-DESIGNER-DEVELOPER