0
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?
Upcoming SlideShare
Loading in...5
×

A responsive workflow for WordPress

772

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
772
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×