A responsive workflow for WordPress

1,125 views

Published on

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

http://www.earlgreyandbattenburg.co.uk

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,125
On SlideShare
0
From Embeds
0
Number of Embeds
379
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

A responsive workflow for WordPress

  1. 1. A responsive workflow for WordPress WordPress North East, Northumbria University, July 2013
  2. 2. tl;dr
  3. 3. 1. Content audit
  4. 4. 1a. Content audit • Current content (if any) • Current structure • Current stats
  5. 5. 1b. Content audit • Scale of the website •Type of content • How the user gets there
  6. 6. 1c. Content audit • Rule out navigation types • Identify key page templates • Breakpoints for testing
  7. 7. 2.Wireframes
  8. 8. Identify problems earlier on
  9. 9. Solve them
  10. 10. The wireframe grid
  11. 11. 3. Mock ups
  12. 12. 3.Visuals based on wireframes
  13. 13. 4.The fun bit: implementation
  14. 14. Implementing your WP theme • Start from scratch? • A framework!
  15. 15. HTML5 Blank / @toddmotto html5blank.com • Strips out most of the crap • Good responsive base
  16. 16. No media queries: general style body {}
  17. 17. Mobile devices @media only screen and (min-width: 320px) {
  18. 18. Tablet devices @media only screen and (min-width: 480px) {
  19. 19. Notebooks, desktops, etc @media only screen and (min-width: 768px) {
  20. 20. Larger desktops @media only screen and (min-width: 1024px) {
  21. 21. Retina devices @media only screen and (-webkit-min- device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
  22. 22. Print @media print {
  23. 23. 5.Test!
  24. 24. The wireframe grid
  25. 25. 6. Minification
  26. 26. tl;dr
  27. 27. Questions?

×