A responsive

workflow for

WordPress WordPress North East, Northumbria University, July 2013

tl;dr

1. Content audit

1a. Content audit

• Current content (if any)

• Current structure

• Current stats

1b. Content audit

• Scale of the website

• Type of content

• How the user gets there

1c. Content audit

• Rule out navigation types

• Identify key page templates

• Breakpoints for testing

2. Wireframes

Identify problems earlier on

Solve them

The wireframe grid

3. Mock ups

3. Visuals based on wireframes

4. The fun bit:

implementation

Implementing your WP theme

• Start from scratch?

• A framework!

HTML5 Blank / @toddmotto

html5blank.com

• Strips out most of the crap

• Good responsive base

No media queries: general style

body {}

Mobile devices

@media only screen and (min-width: 320px) {

Tablet devices

@media only screen and (min-width: 480px) {

Notebooks, desktops, etc

@media only screen and (min-width: 768px) {

Larger desktops

@media only screen and (min-width: 1024px) {

Retina devices

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {

Print

@media print {

5. Test!

The wireframe grid

6. Minification

tl;dr

Questions?