content aware wordpress theming

38
Content Aware WordPress Theming Ryan Kanner @CodeProKid

Upload: codeprokid

Post on 14-Jun-2015

116 views

Category:

Software


0 download

DESCRIPTION

My talk from WordCamp Providence 2014

TRANSCRIPT

Page 1: Content Aware WordPress Theming

Content Aware WordPress Theming

Ryan Kanner

@CodeProKid

Page 2: Content Aware WordPress Theming

+ +

Who am I?

Page 3: Content Aware WordPress Theming

Content Aware What?

Page 4: Content Aware WordPress Theming

Templates that can

automatically make adjustments

based on the content being

displayed.

{ }

Page 5: Content Aware WordPress Theming

We aren’t launching this service until next year, can we remove it?

Can we add a newsletter signup here?

We don’t have anything to put here...

Page 6: Content Aware WordPress Theming
Page 7: Content Aware WordPress Theming

The Problem

● Rigid grid systems

● WordPress gives non technical people

total control of their content.

● Content changes, as it should.

● Clients needs change over time.

Page 8: Content Aware WordPress Theming

Current Solutions...

Page 9: Content Aware WordPress Theming
Page 10: Content Aware WordPress Theming
Page 11: Content Aware WordPress Theming
Page 12: Content Aware WordPress Theming
Page 13: Content Aware WordPress Theming
Page 14: Content Aware WordPress Theming

Issue with this solution

● Limitless layout possibilities to account

for

● Fragmented User Experience

● Overwhelming amount of options

● Too much control for clients

● Good luck moving that content ever.

Page 15: Content Aware WordPress Theming

My Solution

● Decisions, not options.

● Identify layout modules that can be

broken by content.

● Fallbacks for empty content.

● A little bit of math + grid system = a

whole lot of awesome.

Page 16: Content Aware WordPress Theming

What to look out for

Changing Content

● More

● Less

● Longer

● Shorter

● NULL

Trouble Spots● Filtered Content

● Sidebars

● Widgets

● Content Buckets

● Inline lists

Page 17: Content Aware WordPress Theming

Examples

woo, code.

Page 18: Content Aware WordPress Theming

What happens when this is empty?

Page 19: Content Aware WordPress Theming

“No Posts Found...”

Page 20: Content Aware WordPress Theming
Page 21: Content Aware WordPress Theming

Empty Queries

Yes No

Is this content the main focus of this page?

Display Similar content, or another

way to find what they are looking for

Display an alternate set of content instead

Don’t display anything

Page 22: Content Aware WordPress Theming
Page 23: Content Aware WordPress Theming
Page 24: Content Aware WordPress Theming
Page 25: Content Aware WordPress Theming

Establish what you were looking for in the first place

State there was nothing found

Offer a way to find something else

Page 26: Content Aware WordPress Theming

Empty Sidebars

Page 27: Content Aware WordPress Theming

Content Conditional

Sidebar Conditional

Page 28: Content Aware WordPress Theming

Let’s Count

Page 29: Content Aware WordPress Theming
Page 30: Content Aware WordPress Theming
Page 31: Content Aware WordPress Theming
Page 32: Content Aware WordPress Theming

Flexible Widgets

Page 33: Content Aware WordPress Theming
Page 34: Content Aware WordPress Theming
Page 35: Content Aware WordPress Theming

Widgets

● Horizontal widgets are a nightmare

● Fixed classes on widgets goes against

the entire concept of widgets

● My solution

https://github.com/CodeProKid/Flexible-

Widget-Widths

Page 36: Content Aware WordPress Theming
Page 37: Content Aware WordPress Theming

But why?

● Saves you time in the end

● Eliminates jobs you don’t want

● Establishes trust between you and your

clients

● Provides a better user experience

Page 38: Content Aware WordPress Theming

Thanks!