Presentation from the November 2013 East Bay WordPress Meetup: what Sallie Goetsch has learned she needs to tell designers who aren't familiar with WordPress.

1. November 17, 2013

2. EastBayWP.com

3. Our Meetup.com Page
http://www.meetup.com/Eastbay-WordPress-Meetup/

4. Ongoing Sponsor: Page.ly
http://page.ly/

5. INTRODUCTIONS
1.
2.
3.
4.
Name
Company (if appropriate)
WordPress background
What you’re hoping to learn

6. GENERAL Q & A
Ask a question provide a tip about WordPress

7. What Developers
Need Designers
to Know
about WordPress
Sallie Goetsch

8. Parts of a Theme
http://yoast.com/wordpress-theme-anatomy/

9. Why This Matters
• The templates operate independently of
one another.
• Sizes and positions of these elements are
not fixed in responsive themes.
• Some templates will leave out one or more
of these files (e.g. full-width template with
no sidebar, landing page with main content
only).

10. Example
Desktop Layout
Mobile Layout

11. WordPress Template Hierarchy
http://marktimemedia.com/redesigning-the-template-hierarchy/

12. Why This Matters
• You need a separate design for every
template that the theme uses.
• At minimum, this means designing a home
page, a blog index page, a single post
page, and an interior page.
• Custom content types need their own
single and archive page designs.

13. Example
Home Page
Book Page
Member Profile Page

14. Most Developers Use Frameworks

15. Why This Matters
• The developer will be mapping your
design onto his or her preferred
framework.
• Frameworks often include things like
multiple layouts (e.g. right sidebar, left
sidebar, no sidebar) that you’ll need to
design for.
• If you find out which framework the dev
uses, you can make both your jobs easier.

16. Example

17. Style Blog Post Formats
•
•
•
•
•
•
•
•
•
Aside
Gallery
Link
Image
Quote
Status
Video
Audio
Chat
http://codex.wordpress.org/Post_Formats

18. Why This Matters
• If your client plans to include lots of media
(video, audio, galleries, photos), you can
display each kind to its best advantage
• Styling post formats with different
backgrounds or icons makes your blog
index more interesting.

19. Example
Twenty Thirteen is the
classic example of post
format styling. Each post
format has a different
background color.

20. Remember to Style Comments

21. And Comment Forms

22. Why This Matters
• Comments are an important WordPress
function.
• They can look really dreadful if you don’t
style them.
• If your client is going to use Disqus or
Jetpack Comments, they’ll look different—
find out.

23. Understand Featured Images
https://codex.wordpress.org/Post_Thumbnails

24. What You Need to Decide
• Featured image size for blog index
(index.php)
• Whether to show featured images on
single.php and page.php
• Featured image size for home page, if
different from blog index
• Whether to include a featured image
header option

25. Examples: Featured Images
http://en.support.wordpress.com/featured-images/

26. Create Multiple Headers
http://wpti.ps/functions/mobile-optimized-twenty-thirteen-header-image/

27. Why This Matters
• Depending on the framework or parent
theme, full-width headers either get
cropped or shrunken
• Creating separate header images for
desktop, large tablet, small tablet, and
phone gives you control over mobile
display.

28. Design a Mobile Menu

29. Why This Matters
• The desktop drop-down menu won’t look
good on a mobile device, even if it’s
responsive.
• Mega-menus are a mess on phones.
• Responsive menu plugins won’t match
your design.
http://wpmu.org/how-to-create-awesome-responsive-menu/

30. Not All Fonts Are Created Equal
http://www.google.com/fonts

31. Why This Matters
• Just because you have a desktop license
for a font doesn’t mean you can use it on
the web.
• Google’s 629 font families are free for web
and print.
• Adobe fonts are available from Typekit for
an annual fee.
• Web versions of ITC and Linotype fonts
(like Helvetica Neue) are expensive.

32. Style Hidden Elements
•
•
•
•
•
•
•
Drop-down menus
Headings level 1-6
List bullets
Blockquotes
Forms
Tables
Image captions

33. Document Intended Functions
•
•
•
•
•
•
Hover color/effect for buttons
Hover and visited color for links
Pop-up windows
Lightboxes for images and galleries
Multiple drop-down levels for menus
Anything else you click or hover over

34. Why This Matters
If you don’t show it or describe it, the
developer will do one of two things:
– Make it up, with a possibly less-than
optimal result.
– Come back and ask you, slowing down
the development process and adding
more work for you later.

35. Example

36. Provide Icon Libraries

37. Why This Matters
• The icons you show in your design may
not be the only ones the client needs.
• It saves time if the developer doesn’t have
to come back to you for more icons.
• When creating your own icons, make sure
you include all the most popular social
networks.

38. The Codex Is Your Friend
http://codex.wordpress.org/Site_Design_and_Layout