what developers need designers to know about wordpress

38
November 17, 2013

Upload: east-bay-wordpress-meetup

Post on 15-May-2015

817 views

Category:

Technology


0 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: What Developers Need Designers to Know about WordPress

November 17, 2013

Page 2: What Developers Need Designers to Know about WordPress

EastBayWP.com

Page 3: What Developers Need Designers to Know about WordPress

Our Meetup.com Page

http://www.meetup.com/Eastbay-WordPress-Meetup/

Page 4: What Developers Need Designers to Know about WordPress

Ongoing Sponsor: Page.ly

http://page.ly/

Page 5: What Developers Need Designers to Know about WordPress

INTRODUCTIONS

1. Name2. Company (if appropriate)3. WordPress background4. What you’re hoping to learn

Page 6: What Developers Need Designers to Know about WordPress

GENERAL Q & AAsk a question provide a tip about WordPress

Page 7: What Developers Need Designers to Know about WordPress

What Developers Need Designers

to Know about WordPress

Sallie Goetsch

Page 8: What Developers Need Designers to Know about WordPress

Parts of a Theme

http://yoast.com/wordpress-theme-anatomy/

Page 9: What Developers Need Designers to Know about WordPress

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

Page 10: What Developers Need Designers to Know about WordPress

Example

Desktop LayoutMobile Layout

Page 11: What Developers Need Designers to Know about WordPress

WordPress Template Hierarchy

http://marktimemedia.com/redesigning-the-template-hierarchy/

Page 12: What Developers Need Designers to Know about WordPress

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.

Page 13: What Developers Need Designers to Know about WordPress

Example

Home Page Book Page Member Profile Page

Page 14: What Developers Need Designers to Know about WordPress

Most Developers Use Frameworks

Page 15: What Developers Need Designers to Know about WordPress

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.

Page 16: What Developers Need Designers to Know about WordPress

Example

Page 17: What Developers Need Designers to Know about WordPress

Style Blog Post Formats• Aside• Gallery • Link• Image• Quote• Status• Video• Audio• Chat

Find out which ones your client plans to use, and

design them.

http://codex.wordpress.org/Post_Formats

Page 18: What Developers Need Designers to Know about WordPress

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.

Page 19: What Developers Need Designers to Know about WordPress

Example

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

Page 20: What Developers Need Designers to Know about WordPress

Remember to Style Comments

Page 21: What Developers Need Designers to Know about WordPress

And Comment Forms

Page 22: What Developers Need Designers to Know about WordPress

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.

Page 23: What Developers Need Designers to Know about WordPress

Understand Featured Images

https://codex.wordpress.org/Post_Thumbnails

Page 24: What Developers Need Designers to Know about WordPress

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

Page 25: What Developers Need Designers to Know about WordPress

Examples: Featured Images

http://en.support.wordpress.com/featured-images/

This page lists ways different themes

use featured images.

Page 26: What Developers Need Designers to Know about WordPress

Create Multiple Headers

http://wpti.ps/functions/mobile-optimized-twenty-thirteen-header-image/

Page 27: What Developers Need Designers to Know about WordPress

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.

Page 28: What Developers Need Designers to Know about WordPress

Design a Mobile Menu

Page 29: What Developers Need Designers to Know about WordPress

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/

Page 30: What Developers Need Designers to Know about WordPress

Not All Fonts Are Created Equal

http://www.google.com/fonts

Page 31: What Developers Need Designers to Know about WordPress

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.

Page 32: What Developers Need Designers to Know about WordPress

Style Hidden Elements

• Drop-down menus• Headings level 1-6• List bullets• Blockquotes• Forms• Tables• Image captions

You don’t have to show

them all in action.

A stylesheet works fine for

text elements.

Page 33: What Developers Need Designers to Know about WordPress

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

Page 34: What Developers Need Designers to Know about WordPress

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.

Page 35: What Developers Need Designers to Know about WordPress

Example

Page 36: What Developers Need Designers to Know about WordPress

Provide Icon Libraries

Page 37: What Developers Need Designers to Know about WordPress

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.

Page 38: What Developers Need Designers to Know about WordPress

The Codex Is Your Friend

http://codex.wordpress.org/Site_Design_and_Layout