Designing Responsive Websites in Wordpress

I gave this talk at FESuffolk on 26th Nov, 2013. A video of the talk is available at http://www.youtube.com/watch?v=T3LfArcdb-0

If you're interested and you'd like to talk about anything that was mentioned, please get in touch at http://twitter.com/maxshelley

Transcript

1. Designing Responsive Websites in Wordpress
2. Max Shelley @maxshelley
3. Only 99 Problems? Lucky git.
4. • Client understanding of responsive design. • WYSIWYGs / Clients editing content. • Responsive Navigation. • Working with multiple devs. • Working with multiple envs. • Working with Git. • Building extensible responsive templates. • WordPress changes. • + many, many more!!
6. Alan is awesome.
7. The Final Conclusion
8. Wordpress is not a great CMS for responsive layouts out of the box.
9. If you don’t have client buy-in, you’re screwed before you’ve really started.
10. Use their data to get them (even a little) interested.
11. Content remains (for me) the hardest thing to get clients to focus on.
12. Images are still a huge hassle.
13. Standard Process • Branding / Design Guidelines • Brief • Competitors • InVision / Wireframing • Navigation • Laid out PSD • Iterated design on a staging server. • Content, content, bug fixing, training. • Live. • Google, google, google. • Bug fixing, content.
14. Client Stuff
15. Competitors
21. Big Images
23. Design Guidelines
24. Design Guidelines This isn’t a mobile view. It’s just very zoomed out. Demonstrates behaviour rather than just appearance.
25. Google Docs
26. Stop As soon as you’re emailing files back and forth, panic.
27. GatherContent https://gathercontent.com/
28. InVision http://www.invisionapp.com/
29. Developer Stuff
31. LESS
32. @ll_brand_blue: #00b2f3; @ll_brand_pink: #e624b5; @ll_brand_green: #6fd242; @ll_brand_muted_blue: #8cbbe0; @ll_brand_light_grey: #c2c2c2; @ll_heritage_colour: rgb(124,13,66); @ll_education_colour: rgb(0,50,95); @ll_design_colour: rgb(0,141,201); @ll_restoration_colour: rgb(29,88,94); @ll_ecology_colour: rgb(156,161,0); @ll_public_colour: rgb(133,147,67); @ll_leisure_colour: rgb(211,0,41); @ll_landscape_colour: rgb(126,133,129); @ll_residential_colour: rgb(210,67,6); @ll_religious_colour: rgb(91,87,166); @ll_master_colour: rgb(62,141,133); @ll_arb_colour: rgb(144,86,42); @ll_witness_colour: rgb(84,64,46); @ll_infra_colour: rgb(173,174,162); @ll_gardens_colour: rgb(230,176,22); @ll_retail_colour: rgb(255,242,0); Colours. So many colours.
33. // GRIDSET // ------------------------- ! @m-Max: 599px; @s-Min: 600px; @s-Max: 767px; @t-Min: 768px; @t-Max: 989px; @db-Min: 990px; @db-Max: 1189px; @da-Min: 1190px; Viewports. So many viewports.
34. .trans_background(@background_colour, @default_opacity: 0.7) { @red1:red(@background_colour); @green1:green(@background_colour); @blue1:blue(@background_colour); background-color: rgba(@red1,@green1,@blue1,@default_opacity); } Getting an RGBA value from a hex easily.
35. SASS vs LESS
36. Markdown
37. https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet Markdown Cheat Sheet
38. Markdown: Dingus http://daringfireball.net/projects/markdown/dingus
39. Responsive Navigation
40. http://bradfrostweb.com/blog/web/responsive-nav-patterns/
41. http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
42. • How many levels of hierarchy? • How long are the pages going to be? • How important is navigation? • What do we want the visitor to do? • + many, many more!!
43. Wordpress has a menu system. Use Hack it.
46. Advanced Custom Fields
48. Wordpress normally uses ‘the_content’. ! In a client-facing responsive build, this is pretty bloody useless.
49. ACF lets us create fields that the client can fill in. ! They can be of different types, and appear on different pages.
50. We only show data from advanced custom fields.
51. wp_postmeta is insane.
53. Repeater fields & flexible fields.
54. The more layouts you add, the messier the code gets.
55. Gridset https://gridsetapp.com/
56. Combining it all.
57. We don’t know what the client will need in six months.
58. Building an extensible template builder with ACF.
59. demo