One of the goals of our mod-lab.com redesign was to showcase our partnership with clients while highlighting our flexibility and capabilities as a design and technology studio. We came up with an idea to create "Client Stories" that are made up of featured projects we have done with that client. Not a unique idea unto itself, but we were inspired to consider how we could give ourselves the flexibility in our visual and CMS design to present our projects in diverse ways allowing each to have a presence that represent them best.
For one project we might want a large screenshot, while another a slideshow with supportive text. For a third, we might want to group two projects side by side to convey how they share a particular feature or design element.
Sure, we could hard code these pages; we have the skills ... "we have the technology". We also, could use a simple text editor and add the code we needed for these various elements direct with HTML.
Neither of these solutions is what we would deliver for our clients. We needed something better.
Thankfully, Craft CMS came out with Matrix, and from this content modeling feature our minds have been blown.
Craft CMS is created by the fine folks at Pixel & Tonic. We have come to know them through their work with ExpressionEngine and we have followed their efforts to release and evolve Craft since it was launched to public beta some years ago. There are many wonderful reasons to consider Craft that you can read about here; however, the recently released Matrix feature is what put them notably over the top in terms of content modeling/management flexibility.
Matrix allows us to create content blocks, each of which are collections of fields that then can be styled uniquely and dynamically in a website's templates.
We are starting with 5 content blocks for our project work.
- One Column
- Two Column
- Special: Two Images with Text Block Underneath
- Special: Image with Caption Overlay
- Special: Three Image Block
- Special: Testimonial
Within various content blocks, we have all sorts of special that we have included. We can ...
- Add no rule, a light rule, or a heavy rule below a block
- For our One/Two Column blocks we can add multiple images to create slideshows.
- For our One Column block we can make the image full width and go big or align it left or right of the text block.
The following 30 second video showcases many of the options highlighted above to illustrate how our use of content blocks, strategy and design work in concert to allow us to create unique layouts to help us tell our stories.
Two Project Examples
MOUSE@15 uses the following recipe.
- Special: Two Images with Text Below along with no rule underneath to allow it to blend seamlessly with the next content block.
- One Column that adds multiple images to create a slideshow and the images are aligned to the right. A light rule is added below to add some separation from the section that follows.
- One Column that includes a header and multiple images for a slideshow treatment. Image is set to full width and text follows below.
GreenTECH uses the following recipe.
- One Column with a single image that is set to full width along with text that follows below. A light rule is added below to add some separation from the section that follows.
- One Column that includes a header and a single image positioned to the right.
This post is just scratching the surface of our implementation but I hope it highlights why we are so excited about the Craft platform and how it changes the way we define what a piece of content is on the web.
The combination of strategy, design and this technology has our heads spinning with excitement over what it means for constructing stories on the web.