in-depth: modular web design & cms integration
TRANSCRIPT
![Page 1: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/1.jpg)
www.npgroup.net
Modular Web DesignPete Czech, CEO: New Possibilities Group, LLC
![Page 2: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/2.jpg)
Welcome!
Today’s Agenda:
• Introductions• Topic Overview• About Web Templates• About Modular Design• Benefits• Technology Considerations• Examples• Q&A• Wrap Up
![Page 3: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/3.jpg)
Introductions
Your Host: Pete Czech
CEO, New Possibilities Group
Co-founder of NPG in 2001
Background in custom web development, UI/UX.
Contact: [email protected]
![Page 4: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/4.jpg)
What We Do
We are the experts in development of safe, secure custom content management systems.
NPG focuses on custom web development & design to create websites and applications for clients with complex requirements.
![Page 5: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/5.jpg)
Our Experience
![Page 6: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/6.jpg)
Why You Are Here
You are here because maybe:
• You are tired of old school web design methodology.
• You are an early adapter of new techniques.
• You are undergoing or about to undergo a new design project.
• You were inundated by emails from me.
Thanks for coming!
![Page 7: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/7.jpg)
Overview of Modular Web Design
• A new way of looking at web design.
• Eliminates the template methodology prevalent today.
• Allows for faster, cheaper redesigns.
• Will make your redesign / redevelopment projects last longer.
![Page 8: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/8.jpg)
Some Background…
First, let’s review the theory.
According to Wikipedia:
Modular design, or "modularity in design", is a design approach that subdivides a system into smaller parts called modules or skids, that can be independently created and then used in different systems.
Focus on Reusable Parts – Not Templates
![Page 9: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/9.jpg)
Already Prevalent In Industry
Many Industries Already Use Modular concepts!
![Page 10: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/10.jpg)
Automobile Manufacturing
Universal platforms increase profitability via streamlined manufacturing.
![Page 11: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/11.jpg)
All Similar, Different Logos
![Page 12: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/12.jpg)
Construction
Prefabricated parts mean faster construction, lower labor costs, quicker time to market.
![Page 13: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/13.jpg)
An Amazing Example
“Broad Sustainable Building, a prefab construction firm, put up the rectangular, glass and steel Mini Sky City in the Hunan provincial capital of Changsha, assembling three floors a day using a modular method, the vice-president, Xiao Changgeng, said.”
![Page 14: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/14.jpg)
The End Product
![Page 15: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/15.jpg)
Furniture
LoveSac: Low cost, super-comfortable furniture.
Buy parts, assemble as you wish.
Similar models in commercial office furniture and of course one of the most profitable companies in the world: IKEA.
![Page 16: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/16.jpg)
Commonalities
Highly Efficient.
Highly Profitable (or frugal).
Flexible for either consumer or manufacturer – limited inputs creat many different outputs.
![Page 17: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/17.jpg)
Applied to Web Design
![Page 18: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/18.jpg)
Template-Based Design
Basically what most CMS systems are based on today.
Ushered in with advent of CMS platforms.
Was a great methodology back in the day.
The vast majority of established CMSs still utilize this method.
![Page 19: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/19.jpg)
Templates: The Pros
Allowed for large websites to be CMS driven easily.
Gave administrators options for page layouts.
Integrated to most CMS systems easily or natively.
![Page 20: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/20.jpg)
Templates: Cons
Templates are based on an old concept: Your CMS controls webpages, but not content.
Templates are the leading cause of customer dissatisfaction with their CMS.
Templates are rigid by design.
Templates are highly dependent.
Templates ushered in our current state of sameness online.
![Page 21: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/21.jpg)
Templates: Cons
With templates, content must fit the mold of the template.
![Page 22: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/22.jpg)
Templates: A Digital Commodity
Templates are bad for the web!
The ease of downloading and installing templates has ushered in a era of sameness.
It has also commoditized web design: why hire a designer? Is a developer really a developer?
But, the worst flaw: It’s rigid and unwavering.
![Page 23: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/23.jpg)
Modular Web Design: The New Way
Imagine having parts with near limitless potential.
![Page 24: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/24.jpg)
Benefit 1: Enhanced Control
Quick, easy continuous improvement.
Fast prototyping of new pages.
Less dependence on developers.
Quicker development / deployment of pages.
Marketers dream: Landing pages in minutes.
![Page 25: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/25.jpg)
An Exercise
Pick a page on your website today.
Screenshot between the natural page breaks – creating “modules”.
Print the modules out and trim them.
Begin to contemplate how moving and mixing modules allows you freedom and control.
![Page 26: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/26.jpg)
An Exercise
![Page 27: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/27.jpg)
An Exercise
![Page 28: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/28.jpg)
Less = More
![Page 29: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/29.jpg)
Benefit 2: Easier to Maintain
Maintaining parts is easier than maintaining templates.
Code changes, navigation changes – these are all made into parts.
Unlike templates, modules need not be dependent on other modules = less coding dependencies = less technical debt.
![Page 30: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/30.jpg)
Benefit 3: Politically Expedient
Approvals and revisions are the biggest unknown factor in a design project.
Easier buy-ins from management.
Old Cycle: Permanent = Scary!
New Cycle: Flexible, changeable.
![Page 31: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/31.jpg)
Benefit 4: Cheaper to Iterate
Initial website design & development project can utilize few modules to get live faster.
New features or pages? Either use existing modules or…
Create new ones – a simple task.
In the past: Develop a new template – either off an existing or from scratch.
Hire a designer.
Pay your developer.
![Page 32: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/32.jpg)
Benefit 5: Quicker Development
Modular design also means a hierarchal, modular codebase.
Adding a new module uses existing CSS styles which means expedited development.
Pages can be prototyped near instantly.
![Page 33: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/33.jpg)
Benefit 6: No More Redesigns
Targeted redesigns mean no more global redesigns.
New focus: Continuous Redesign & Improvement where warranted.
No more redesigns “because it’s time to do it”.
![Page 34: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/34.jpg)
Modular Tech Requirements
This approach does require the proper tools.
![Page 35: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/35.jpg)
Ideal Content Management Architecture
![Page 36: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/36.jpg)
The CMS Problem
Current CMS platforms are heavily focused on templates.
Modular plugins exist but fall short. There are few native solutions.
Modular design starts with content & design – not technology.
Available plugins still work the wrong way – technology first.
You can’t use frameworks built with predetermined notions of content. Pages, posts, etc.
![Page 37: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/37.jpg)
The CMS of Today
![Page 38: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/38.jpg)
The Ideal CMS
Organizes content into logical, understandable groups.
Understands that the website is just one possible method of distribution.
Allows for integration of content into modules both statically and dynamically.
Allows for drag and drop manipulation of modules.
Allows for creative, unique front-end experiences. Decoupling?
![Page 39: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/39.jpg)
Your Website
It is only the front-end experience that speaks to the user.
It must be a merger of content and user experience.
The modular administrative interface serves as the glue.
![Page 40: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/40.jpg)
Quick Review…
We now know:
Modular Design will help eliminate massive future redesigns.
Focus is on reusable parts versus templates.
Problem: CMS limitations.
But there are ways to do it…!
![Page 41: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/41.jpg)
How To Go Modular
Find appropriate plugins that properly integrate the modular approach.
Go with a customized solution.
WATCH OUR WEBCAST: CMS OF THE FUTURE!
![Page 42: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/42.jpg)
Sample Modular Design
![Page 43: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/43.jpg)
Sample Modular Design
![Page 44: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/44.jpg)
Sample Modular Design
![Page 45: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/45.jpg)
Sample Modular Design
![Page 46: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/46.jpg)
Sample Modular Design
![Page 47: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/47.jpg)
Sample Modular CMS Integration
![Page 48: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/48.jpg)
Sample Modular CMS Integration
![Page 49: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/49.jpg)
Q & A
![Page 50: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/50.jpg)
Our Next Webcast
In Depth: How to Design and Deploy a Secure CMS Installation
Tuesday, February 28, 20172PM EST
![Page 51: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/51.jpg)
Additional Resources
Our blog – www.npgroup.net/blog
Videos - www.npgroup.net/videos
E-Books – www.npgroup.net/resources
![Page 52: In-Depth: Modular Web Design & CMS Integration](https://reader034.vdocument.in/reader034/viewer/2022042706/58abdc4a1a28ab212a8b5677/html5/thumbnails/52.jpg)
150 Clove RoadLittle Falls, NJ 07424 1.855.NPGROUP www.npgroup.net
our home away from home.
Where To Find Us