www.npgroup.net

Modular Web DesignPete Czech, CEO: New Possibilities Group, LLC

Welcome!

Today’s Agenda:

• Introductions• Topic Overview• About Web Templates• About Modular Design• Benefits• Technology Considerations• Examples• Q&A• Wrap Up

Introductions

Your Host: Pete Czech

CEO, New Possibilities Group

Co-founder of NPG in 2001

Background in custom web development, UI/UX.

Contact: czech@npgroup.net

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.

Our Experience

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!

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.

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

Already Prevalent In Industry

Many Industries Already Use Modular concepts!

Automobile Manufacturing

Universal platforms increase profitability via streamlined manufacturing.

All Similar, Different Logos

Construction

Prefabricated parts mean faster construction, lower labor costs, quicker time to market.

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.”

The End Product

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.

Commonalities

Highly Efficient.

Highly Profitable (or frugal).

Flexible for either consumer or manufacturer – limited inputs creat many different outputs.

Applied to Web Design

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.

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.

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.

Templates: Cons

With templates, content must fit the mold of the template.

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.

Modular Web Design: The New Way

Imagine having parts with near limitless potential.

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.

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.

An Exercise

An Exercise

Less = More

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.

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.

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.

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.

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”.

Modular Tech Requirements

This approach does require the proper tools.

Ideal Content Management Architecture

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.

The CMS of Today

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?

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.

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…!

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!

Sample Modular Design

Sample Modular Design

Sample Modular Design

Sample Modular Design

Sample Modular Design

Sample Modular CMS Integration

Sample Modular CMS Integration

Q & A

Our Next Webcast

In Depth: How to Design and Deploy a Secure CMS Installation

Tuesday, February 28, 20172PM EST

Additional Resources

Our blog – www.npgroup.net/blog

Videos - www.npgroup.net/videos

E-Books – www.npgroup.net/resources

150 Clove RoadLittle Falls, NJ 07424 1.855.NPGROUP www.npgroup.net

our home away from home.

Where To Find Us

©2001-2016