Introduction to Git for WordPress


By |November 6th, 2018|Categories: Advice and Opinions, Tutorials, WordPress||0 Comments

Slides: Make Your CSS Cross-Browser Compatible

Here are slides from my Lightning talk at the WordPress Seattle Lightning Talks & Help Desk Meetup, July 17, 2018. Please feel free to add constructive comments, corrections, alternative solutions, and your own advice.

Talk Description
Patrick discusses strategies and resources to help make your CSS more compatible across browsers. We’ll touch on which deciding which browsers to support, Progressive Enhancement vs. Graceful Degradation, finding which rules to use, and testing strategies.

By |July 18th, 2018|Categories: Tutorials, WordPress||0 Comments

Slides: Introduction to Browser Developer Tools

Here are the slides from a Lightning talk I gave at the Seattle WordPress Lightning Talks & Help Desk Meetup on June 19, 2018. Please feel free to add constructive comments, corrections, alternative solutions, and your own advice.

By |June 18th, 2018|Categories: Tutorials, WordPress||0 Comments

Slides: Empower Your Clients and Improve Maintainability with Advanced Custom Fields

This is the slideshow for my presentation at WordCamp Seattle, Nov. 5, 2017
Enjoy! Please feel free to add constructive comments, corrections, alternative solutions, and your own advice for empowering web admins and improving maintainability.

Talk Description
“I never want my site to change.” – Said No Client Ever

Healthy websites change over time just like healthy businesses do. As developers, it is our job to empower website admins, and make our sites more maintainable.

This talk shares design patterns and best practices you will find invaluable when creating custom themes for clients, and demonstrates how to implement them using Advanced Custom Fields (ACF).

ACF is a powerful development tool used to easily manage custom fields and data.

Since the possibilities are endless, we will explore a handful of specific examples. These will include…
Providing simple options for clients:

Editable content fields for specific sections, such as changing the image and copy overlay for hero images
Single, repeatable call-to-action blocks
Choose between several kinds of content blocks
Choose a custom post type “product” to be the featured product

Providing options for advanced users:

Add a field for custom CSS classes
Automatically apply ids so admins can apply custom CSS
Expose specific styling elements, such as tweaking the position of background images
Apply icons to menu items
Optionally add a sidebar to single content blocks
Force a content block to be full width

And many more!

By |October 31st, 2017|Categories: Tutorials, WordPress||0 Comments

Adding Links Inside of Images: Image Maps vs. CSS Alternatives

The question came up today about whether to use Image Maps or other alternatives to add links inside of images.  I did a little research on the subject, and thought it would be handy to share what I found along with my own thoughts.
A Quick Q&A Summary

Should I use image maps?  Yes!… when it makes sense to.
When should I use image maps?

When your images won’t change size
When your link needs to be a complex shape, and not just a box
When you’re dealing with raster images like jpg photographs

When should I NOT image maps?

When your image is responsive and changes size
When you’re dividing the image into parts: slice it, and use image links
When you want special styling or behavior
When you’re starting with a vector image, and can implement it as SVG

What should I remember when using image maps?

Always add descriptive alt tags to your area tags
Add Title attributes to area tags to provide tooltips to users
Include text links somewhere on the page corresponding to the image map links
Order the areas from left to right, and top to bottom for screen readers, and tabbing

Some Discussion
Image maps have been around since the dawn of time (which in this case means 1997 with HTML 3.2), so people sometimes dismiss them as arcane.  However, they’re still fully supported in HTML5, and shouldn’t be dismissed out of hand.

Having said that, there are certainly some things they can’t do, and should be implemented thoughtfully to be accessible to visitors using screen readers.  Of course you know Google’s going to have something to say about it, so you’ll want to implement them properly to bump up your SEO.
Here are some of the articles and resources I found.

What You Should Know About Image […]

By |June 13th, 2015|Categories: Advice and Opinions, Tutorials|Tags: , , |0 Comments