WordPress Theme Development WORKFLOW · A website is never done. It's a living and evolving...

WordPress Theme DevelopmentWORKFLOW

CLIENT REQUIREMENTS - (EXAMPLE)

• Client wants a site to showcase offered services, previous portfolio (works), and testimonials…

• Wants to publish blog posts…• Wants to have contact page with contact form / map…• Option to feature a few portfolio pieces on the front page…• Wants to maintain the site without the daily assistance of a web developer…

HOW DO YOU START?

WEB DESIGN IS A PROCESS

PREPARE

OPTIMIZE

PLAN BUILD OPTIMIZE LAUNCH

A website is never done.

It's a living and evolving entity and when it is launched, it's time to start over and revisit the first phase (plan).

Discovery Meeting

Gather all the information and requirements…The site purpose, message, functionality, content…What the site users should achieve on the site…

This meeting is to listen, not to propose ideas

PLAN

Discovery MeetingWHAT MATTERS TO WHOM?

PLAN

Site owner: Ability to communicate information to the end user.

Site users: Ability to find, consume, and understand information of their interest.

Discovery MeetingWHAT MATTERS MOST?

PLAN

Discovery MeetingTHE END USER

PLAN

We're building informational user experiences for

the user....

...even though the client is the one paying us.

Discovery MeetingTHE END USER

Looks for content and information…Doesn’t care about the platform…Doesn’t care about your opinions about their choice of browser…

PLAN

Discovery MeetingROLES

Remember... the client is part of the team. While the responsibility as the web designer is to build the solution, the client's responsibility is to provide vision, content, and input along the way.

PLAN

Discovery MeetingYour job as a web designer/developer is to create informational user experiences: Make it possible for the people to receive and understand what the site owner intends to communicate to them.

Note the lack of design and development at this point...

PLAN

Discovery Meeting

That’s because Content Strategy, Information Architecture and User Experience are what guide and define the design and development.

You need to sort these out before you can start the design and development process.

Content Strategy

Planning for the creation, delivery, and governance of useful, usable content.

DEFINITION

Content Strategy – for you

How to communicate the message in the clearest and most easily understood way.

DEFINITION

Information Architecture (IA)

The art and science of organizing and labeling web sites to support findability and usability.

DEFINITION

Information Architecture (IA) – for you

How to organize navigation, content and search to help people find what they are looking for.

DEFINITION

User Experience

The overall experience of a person using a product such as a website. Especially in terms of how easy or pleasing it is to use.

DEFINITION

User Experience – for you

How to make the design easy and entertaining to use.

DEFINITION

Informational Experience

How to ensure people find what they are looking for, understand it, and have a pleasant time doing so.

DEFINITION

Discovery MeetingUser centric design | Inclusive design

Content & Mobile FirstResponsive & Accessible

PLAN

Discovery MeetingWhat is the purpose of the site?What is the message of the site?Who is the audience of the site?

PLAN

Content Strategy

Establish rules about the substance and ownership of content.What is it, why does it matter, how, and when is it made, where is it published?

PLAN

Personas

Describe the people who are the target audience. Ideally base them on real people.Remember! The client is not the target audience and neither are you.

PLAN

Audit + Inventory

Collect, and document all existing and to-be-produced content.

Organize every single item…

PLAN

Content Modeling

Identify the types of content available: how they differ, how they relate, what attributes they have, how and where is best to present each type…

PLAN

Work Page

List of Web work— Image— Short description— Link to page

List of Photo works

— Image, link to page

About Page

About text

All the Testimonials (quote & author)

Contact Page

Contact text format and form

Sidebar

— Special Contact Page Widget with…

— Random Testimonial

— Link to Web works

— Link to Photo work

Services Page

List of Services with in page navigation

Sidebar

— Random Testimonial

— Link to Web works

— Link to Photo work

Architecture (IA)

Structure the content to enable understanding, usability, and findability.Create hierarchies, and intuitive structure.

PLAN

So you have a bunch of pages in your head? How do you want to organize them?

ASIDE

All in one - single page sites Trendy but not very effective with a lot of content. Hard to navigate on phone unless it is done right.Example: https://gocounterpoint.com/

ASIDE

Indexed Flat structure Typical for business brochure website but not very useful for large volumes of content.Example: https://www.interiorequities.com/

ASIDE

Strict Categorical Hierarchy Must click through each level to get to the next.Example: https://haidamarineplanning.com/

ASIDE

Multi Dimensional HierarchyMultiple ways to get to the same content.Examples: Any blog or large eCommerce website

ASIDE

Discovery MeetingWhich should you choose?

PLAN

Discovery MeetingTrack the path of your Personas

After you created personas for your different users, track their path through the site…

PLAN

Card Sorting

Create individual cards for each asset and have random people sort them according to their own understanding of order.

PLAN

Service list

About Contact

Testimonial list

Portfolio items

Blog posts

Compliments

Web works

Photo works

Finalize IA

PLAN

When you are satisfied, show it to the client:

Wireframe - schematic model of content + architecture

A wireframe is a structural illustration of features and functions.You need it for yourself to plan out every function and feature.It can be digital or on paper.

PLAN

Template Map

Create a template map (based on the WP template hierarchy) to match your architecture.Create a baseline for DRY development…

PLAN

What the client sees

PLAN

What we see…

PLAN

DESIGN

Create a design around the content… Smartphone Tablet Desktop Widescreen

BUILD

Content First

Present the content in pure HTML to match the architecture and hierarchy defined earlier.The content must make sense without CSS and any design elements…

BUILD

Underscores

Start with the _s theme (Underscores). It meets current WordPress and web standards and it is accessible.

BUILD

SETTING UP

1. Local environment (WAMP, MAMP, etc.)2. Fresh WordPress installation3. _s starter theme (or another starter theme of your choice)

BUILD

SETTING UP

1. Use an IDE or good code editor (VS Code, Sublime Text, Netbeans, PHPStorm, Brackets, Atom…)

2. Choose a target browser but test in all …3. Local + optional hosted version control …

BUILD

Version Control

BUILD

Use a version control system for code and design assets.

Version Control

BUILD

Cloud-based version control options for collaboration:

Accessibility

Ensure content, navigation, and meta information is accessible.

BUILD

The Accessibility Project Patternshttp://a11yproject.com/patterns/

WordPress Accessibility Guidelineshttps://make.wordpress.org/themes/guidelines/guidelines-accessibility/

Lynda.com – Accessibility for WordPresshttp://www.lynda.com/course-tutorials/Accessibility-WordPress/374185-2.html

Design in the Browser

Design with real content, starting with the smallest screen and moving up.Set breakpoints based on content, rather than defined device widths.

BUILD

Style, Code, and Process Guides

Establish guides for design, code, and process.Coding Example: http://codeguide.co/Other readings: https://docs.mobify.com/http://pointnorth.io/ https://developers.google.com/web/fundamentals/

BUILD

SEO + Sharing

Based on the client requirements have SEO & Social Media Sharing on the site.SEO by Yoast - https://wordpress.org/plugins/wordpress-seo/

AddThis - http://www.addthis.com/

SNAP - http://wordpress.org/plugins/social-networks-auto-poster-facebook-twitter-g/

HootSuite - https://hootsuite.com/

OPTIMIZE

Levels of being social

FollowShareAutomate posting to social platforms

SEO + Sharing

WordPress Plugins: Social Media Buttons tutorialhttp://www.lynda.com/sdk/WordPress-tutorials/WordPress-Plugins-Social-Media-Buttons/169878-2.html

WordPress Plugins: SEOhttp://www.lynda.com/sdk/WordPress-tutorials/WordPress-Plugins-SEO/140779-2.html

OPTIMIZE

Minify everything

Minify your HTML, CSS, and JavaScript resources.

https://developers.google.com/speed/docs/insights/MinifyResources

OPTIMIZE

PREPARE

Version ControlStyle, Code, and Process Guides

OPTIMIZE

PLAN BUILD OPTIMIZE LAUNCH

PersonasAudit + InventoryContent StrategyContent ModelingIACard SortingTemplate MapWireframesUser Testing

Content FirstAccessibilityGuidesDesignBrowser Design

Web StandardsAccessibilitySEO + SharingMinimizeCaching

Soft LaunchTutoringHard LaunchGrace PeriodIterateRevisions

Final Steps with the Client

Final Steps with the Client

Backup solution (a plugin and/or hosting provider backups)

Customize the login page (use a plugin or code in your theme)

Clean up the site (empty trash, delete unused themes/plugins,etc.)

Add a Screenshot to the Theme

Roles / Access

Give the client an “everyday use” account with restricted access to WordPress and an administrator account with full access.Plugins: Adminimize / User Role Editor / Advanced Access Manager… and many others

EXTRA

Tutoring

Create a website guide for the client (in the WordPress dashboard or as a PDF…).

Potentially provide them short video tutorials if you developed something very customized (there is free screen casting software such as Screen-Cast—O-Matic).

EXTRA

Measure

JetPack Statistics - http://wordpress.org/plugins/jetpack/

Google Analytics account & Google Analyticator plugin https://wordpress.org/plugins/google-analyticator/

Lynda.com:

http://www.lynda.com/sdk/WordPress-tutorials/WordPress-Plugins-Analytics/163114-2.html

http://www.lynda.com/Google-Analytics-tutorials/Google-Analytics-Essential-Training/197523-2.html

EXTRA

Us...

I can’t fix this …

Questions Life …

Questions Career …

Oh it was a typo, cool …

Crisis of confidence …

CREATIVE / DEVELOPMENT PROCESS

This is awesome…This is tricky…This is sh*t…I am sh*t…This might be ok…This is awesome…

LEARNING CURVE - MOOD