Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordCamp Asheville 2017 - The Modular Web for WordPress

417 views

Published on

WordPress the CMS, meets the Modular Web. We need to stop thinking about a website as a collection of pages and templates, but as a set of modules and a system to manage them. Modules, like Legos, are interchangeable and can be combined fairly quickly to create an infinite number of results all while both showing variety and remaining consistent. With this modular paradigm shift, our workflows improve, our websites improve and our very well-being improves. Let’s explore how to use WordPress to manage site content using modules. We’ll see what this does for our development process and programming as well for our content management via the admin. We’ll discuss how to build and maintain a module library, and use it for every site you build. These principles have been immensely helpful in each team or project where I’ve put them into practice, so we’ll even take a look at a few examples and point out where to learn more.

Takeaways:

Learn the basics of Modular design for web
Understand the advantages to building sites modularly
See how to do it with WordPress

Published in: Software
  • Be the first to comment

  • Be the first to like this

WordCamp Asheville 2017 - The Modular Web for WordPress

  1. 1. The Modular Web For WordPress Stop thinking about a website as a collection of pages and templates, but as a system of modules. WordCamp Asheville 2017 - 3 June 2017
  2. 2. Introductions Evan Mullins Lead Web Developer at Brown Bag Marketing in ATL @circlecube circlecube.com WordPress user since 2006 Full-time web developer since 2007 Slides at https://circlecube.com/does-wordpress/
  3. 3. Presentation Abstract Stop thinking about a website as a collection of pages and templates, but as a set of modules and a system to manage them. Modules, like Legos, are interchangeable and can be combined to create an infinite number of results. Harnessing these modules with our trusty CMS, they each fit neatly into the system while also being unique. With this modular paradigm shift, our workflows improve, our websites improve and our very well-being improves. Let’s explore how to use WordPress to manage site content using modules. We’ll see what this does for our development process and programming as well for our content management via the admin. We’ll discuss how to build and maintain a module library, and use it for every site you build. These principles have been immensely helpful in each team or project where I’ve put them into practice, so we’ll even take a look at a few examples and point out where to learn more.
  4. 4. Outline The Page Mindset & Modular Paradigm Shift The Modular Approach How Modular Affects the Process Incorporating Modular with WordPress
  5. 5. The Page Mindset
  6. 6. Design Web Pages or Templates Have you ever done an estimate for a site with X unique templates? Been excited about the flexibility of building unique templates as needed? Build 13 different templates, then have to make each of 13 templates responsive? Scope creep? Realize that templates are a bit restrictive and end up with files like template-7b_3.php or template-no-sidebar-secondary-sidebar.php
  7. 7. TEMPLATE BLOAT
  8. 8. TOO HEAVY
  9. 9. The Paradigm
  10. 10. The Paradigm Shift
  11. 11. Modular Paradigm Shift Explain the modular approach Theory Pattern Libraries - shared system for sites Process (for agencies)
  12. 12. Andy Clarke, Walls Come Tumbling Down 2009
  13. 13. Stephen Hay, Responsive Design Workflow
  14. 14. Modules, not pages The traditional way to handle complexity in programming is to break large complex things into smaller well-formed “modules”. Focusing on creating healthy front-end modules instead of complete pages can help break complex page layouts into reusable solutions. This proved to be true working on the Microsoft.com homepage. Dave Rupert, Responsive Deliverables
  15. 15. As many of us move away from designing pages toward designing systems, one concept keeps cropping up: modularity. We often hear about the benefits of a modular approach; modules are scalable, replaceable, reusable, easy to test, quick to put together— “They’re just like LEGO!” Alla Kholmatova - The Language of Modular Design
  16. 16. LEGGO MY LEGO
  17. 17. How Modular Content Works Rather than one open content area — in which you could put text and images using a WYSIWYG — or a template that has pre-determined text and media “buckets,” modular content allows you to add any content — text or media — in blocks. It supports building pages ad-hoc, adding text and media as you need it in a variety of combinations. After you’ve stacked a bunch of these content blocks, you can re-sort them any way you like. It’s basically content Legos. Charlotte Jackson, From Pages to Patterns
  18. 18. Christopher Butler Newfangled Web The Way You Design Content is About to Change
  19. 19. Christopher Butler Newfangled Web The Way You Design Content is About to Change
  20. 20. #IRL In WordPress Examples Demo
  21. 21. Going from designs to modules. Journey of a Module
  22. 22. Dogfooding
  23. 23. Advanced Custom Fields ACF Pro: Flexible Content
  24. 24. Modules in Practice modules field group with modules flexible content field.
  25. 25. Each module is a flexible content layout. Sub-fields are properties specific to each module.
  26. 26. Add modules!
  27. 27. Configure modules.
  28. 28. Rendered Module
  29. 29. Module Code Billboard module: acf-json/acf-modules.json template-parts/module-billboard.php module-billboard.js _billboard.scss
  30. 30. Work Smarter
  31. 31. Project Gutenberg
  32. 32. Pattern Library
  33. 33. A Module Gallery
  34. 34. Thank You! Questions? Slides available at https://circlecube.com/does-wordpress/

×