a responsive workflow for wordpress
DESCRIPTION
Slides from my talk at WordPress North East on a responsive workflow for WordPress theme development. http://www.earlgreyandbattenburg.co.ukTRANSCRIPT
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) {
@media print {
5. Test!
The wireframe grid
6. Minification
tl;dr
Questions?