Your SlideShare is downloading. ×
0
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What Developers Need Designers to Know about WordPress

822

Published on

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.

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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
822
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×