A responsive workflow for WordPress
Upcoming SlideShare
Loading in...5
×
 

A responsive workflow for WordPress

on

  • 553 views

Slides from my talk at WordPress North East on a responsive workflow for WordPress theme development.

Slides from my talk at WordPress North East on a responsive workflow for WordPress theme development.

http://www.earlgreyandbattenburg.co.uk

Statistics

Views

Total Views
553
Views on SlideShare
414
Embed Views
139

Actions

Likes
1
Downloads
5
Comments
0

2 Embeds 139

http://www.earlgreyandbattenburg.co.uk 138
http://cloud.feedly.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    A responsive workflow for WordPress A responsive workflow for WordPress Presentation Transcript

    • 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?