Spending the weekend at WordCamp.

Lots of good stuff but here is one presentation that is valuable for anybody who wants and/or builds websites.

Profitable Website Development: The Oreo Cookie Strategy

WordPress is a complicated application software.  It’s a CMS.

Presentation by James Hipkin, Red8Interactive, Inc.

Planning | Design | Concept

Discovery

  • Objective: Wireframes
  • Functional Requirements
  • Tech requirements
  • Determine the architecture
  • Design
  • Build
  • Launch

Mobile First: responsive or adaptive?  Know the difference.

Provide mobile designs and consider mobile requirements.

Follow the review process

  • Desktop Only
  • Agency and client, desktop and mobile
  • Manage Changes
  • Let the Dev Team drive

Budget

Don’t bring a knife to a gun fight.

  • Charge for discovery. It’s valuable.  It makes projects go smoother.
  • Ask for the budget.
  • Charge for Project Management
  • Charge for Training (It draws on my Intellectual Property)
  • Change orders are your friend.

“Anything can be done with enough time and budget.”

  • Document the scope coming out of the discovery process.
  • Define the post launch grace period.
  • Charge for content entry.
  • A clear and documented understanding of the websites functional analysis.
  • An efficient build
  • Charge for what you do.

Build a partnership with the client.

 

Web Performance: Three Stages to Success

Austin Gil

This discussion addresses issues in design, development, and project management, where performance is affected. We will look at various opportunities and even techniques within each stage to get even more speed, and cover topics from beginner to advanced, with tips or advice that just about anyone can walk away with.

Why Performance is Important

  • User Experience. Speed.
  • SEO
  • Money (high conversion rate)

Amazon found that every 100ms of latency cost them 1% in sales

Google:  Web Performance?

Web Performance is not that complicated.

Three Stages:

  1. Foundation (hosting, server environment)
  2. Design (most important)
  3. Code (very most important)
  • Hosting
  • Client Uploads
  • CDN (Cloudflare)
  • Client requirements (see: sliders)

Be the Expert

  • Educate and position yourself
  • Educate your clients (use metrics)
  • Share examples
  • Learn to compromise

Share useful tools

Image editors (Pixir, Picasa)
Provide detailed documentation.

Design

Font families (Google fonts)
Icon libraries (Fontello, Iconmoon)
Third party elements (ad, maps, social)

WP Rocket (paid)
WP Fastest Cache
w3 Total Cache

Image Markup

Use srcset: <img src=”…”srcset=” “/>

Lazy Load Images (Lazy_Load)

Plugins: Organizer, WP Asset Clean Up

Images: (Flickr, ImageEngine)
Videos: YouTube, Vimeo
Audio (SoundCloud)

Resources:

Modern WordPress server stack
GM Metrix – Webpage grades and advice
P3 Compare plugin load times
Query Monitor – Load time, queries, hooks
Bitcatcher: load times

  • Turn on caching
  • Upgrade Your host
  • Check file sizes

Using A Content First Design Process

Dawn Pedersen

What is it?  Content.  Text, images, video, audio, downloadable file, forms, interactive

Creating and organizing content as the first step. Lots of reworking the mockups, trying to adjust.

We are desiging those experiences.

Responsive design needs:  across various viewports.

Design inside out.  Start with the miniutae.  Home page last?  Small to large.  See relationships between pieces.

Content Strategy:

  • Define how you’re going to use your content to meet your goals
  • Convincing the client.  Architect analogies?  Engineer, car analogies. Benefits of this process.  The content doesn’t look shoe-horned into an existing template.
  • Better structure of the information.  See patterns, relationships between content.
  • Content can become more efficient.  Less redundancy.
  • Better Branding:  Clear tone throughout.
  • Process.  Write the paragraphs, provide photos
  • Google Drive for collaborations.
  • Ask how the content will be maintained.
  • Content challenges with competitors?
  • Prioritize content milestones.
  • Hire a copy writer to work with content experts.
  • Be there for questions.
  • Build a schedule.

Defining Goals: Users

  • What story can we tell them?
  • What conversations can we have with them?
  • What plugins do you need?
  • What types, how are they related to each other?
  • What are questions?  What is valuable on current site?
  • Curated Content
  • Crowd sourcing (facebook)
  • Competitor Content
  • Who is in charge?
  • Concise, short blocks of text
  • Forms and interactions

Tools

  • Evernote
  • Google Docs
  • GatherContent.com

Working with early drafts.  Proto-content.  One idea per paragraph.  Each page should be scannable.

Card sort/post-its

Kind, category, meta data, sidebar, own page?

Summary.  Headings, subheadings.

Problem Solving for Optimizal Structure.

Wireframes?


A Full Stack WordPress Project Workflow

Why Wireframe? Strategic Decisions

How: Old School (sketch it out)

Cool Resources He Told Us About:

Sketch

Vision

wpengine:

Install WP

WPE account

Set up GIT push

Manage WP

 

 

CALL ME