Real Time Collaboration

Strategy

Clean and Efficient Strategies, that will guarantee success. Ability for all Stakeholders to contribute to Design, Ideation and Iterative Product Development starts with amenable tools and consensus strategy.

Planning Global and Scoped UI/CSS patterns with tools that include modern compile, components use anywhere functions, will greatly improve Collaboration and Design Productivity and Speed to Market.

Modern CSS and Component Libraries incorporate, Vertical DOM, animation, BEM and Prefix normalized naming. Real Time Design and Strategy can be published without breaking live public facing code sets. Design can go from Ideation to Deploy without multiple steps. What is Designed can be live immediately.

When evaluating Design Tools, assess Business Need. Do you have a team that can support updates? Will you need to add additional libraries to support cross channel use? Can you extend the Design to Brand and Scope across Print, Mobile, App, Native POS, Voice, Geo. And most importantly is it easy to use? Incorporating Bootstrap/Material Design is not a substitute for having a trained Designer with experience, develop your Brand.

Modern “Semantic” libraries: Semantic UI, Ant, Bulma, Tailwind, UI Kit, were designed with improved 360 Development in mind. Use and mix lighter weight UI with components / wrappers and Vanilla Deconstructed setups. There is no rule that excludes mixing CSS strategies with Stacks and compiles. Vue does this well with normalizing Context and optional compile. Svelte is a “stripped down” Vue with a JIT compile, that is non destructive. I focus on UI Kit and Tailwind. Webflow will generate Vanilla export. If you have a team that cannot generate custom CSS, utilize a stable Atomic Library Design System. “Older” frameworks: Foundation, Bootstrap, Material Design, will need to be wrapped with Vanilla DOM Modifiers that setup Vertical positioning and animation, like Popper, GSAP, Flex with normalizers and resets. It is A LOT easier to incorporate a newer, atomic system with modern, semantic, not just design tools.

Sass / Less dependencies (single point of failure) can be improved with distributed Design Friendly collaboration tools and Program Management approach.

Tailwind has a “Just in Time” JIT compiler that will auto compile all inline scoped modifiers. (use while in ideation) – I use Webflow with iterative versions.

For Global/Atomic Approach UI Kit has a structure and a wrapper “DOM” with a BEM naming convention uk prefix, that can organize and wrap Vanilla Code with normalizers.

Use combination of Tree Shaking/Collaboration. I use Webflow with editor and Design / Marketing Editors that include Accesibility and Collection Curation for API Design Tools. Plus UI Kit, embedded. 

Both UI Kit and Tailwind can be configured with Vanilla Stack and within a Vue/Svelte File System. (exports from Vanilla JAM Stack can be folded into declarative work flows. React, that will require a more “flat” single compile architecture. Svelte/Vue can utilize Vite, that has a JIT live  compile, that can publish without breaking a live/public facing deployment.)

The output from Webflow is a Vanilla JAM stack that can be committed to a CL CD deployment/GIT based publish with a fully annotated ADA/SEO friendly asset and content management service for images/meta data and Endemic Optimization for 360 Asset Field Strategy.

Atomic Friendly

Modifiers Designing Semantically

Design Systems are not equal. Responsive design that allows for side modifiers over a “stack” of attributes, will simplify existing state.

Addition of modifier libraries can also help legacy systems that “break” with updates, and cannot fold into Global Strategies: Flex, Grid.

UI/Real Time Data Loading

With “traditional” Data Warehousing (a Database), UI could exist with a simple stackable compile. Watchers like Gulp, Grunt could detect CSS/JS updates and compiling to a running list. (Bootstrap, Foundation, Material Design – the CSS that appears last, overides the former)

Now with Data and API dependent on data and UI with Lifecycle Mounting Tools: React/Vue/Svelte, state and UX needs to be applied to a non linear design strategy. You can load UI with state and logic, by creating #Semantic UI with attributes, that side loads.

Semantic Design Libraries: Tailwind, Semantic UI, Ant Design, UI Kit lets you side load data inline, with conditional logic, without triggering a class change. 

Switch UI with hashable #data modifier

Change usability and UI with modifier based design components and easily managed logic. Load any #hashable div, and or API / Schema managed / Life Cycle Hook.

Programatic UI / Lifecycle Loading

APIs that utilize Stores, Data from Globally Managed Access Points: State Managers: Nuxt, Redux – plus multiple other React solutions, Svelte Stores, will need to add conditional UI: visibility, delete, load, unload, while simultaneously making the UI Accessible Friendly.

This is a tall and difficult ask. Especially if you have components that pass data down within nested operations that do not align with dependency.

A UI Library that can enable this is essential. “older” Responsive Tools will only fix the responsive logic. More Complex dependencies spiral really fast. Side Loading UI is critical if you want to utilize new API first Design.

<div class="uk-margin-remove-adjacent">

<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">New User</a></li>
    <li><a href="#">Reorder</a></li>
    <li><a href="#">Cart</a></li>
</ul>
<ul class="uk-switcher uk-margin">
    <li>  <a href="#" uk-switcher-item="2">  Switch to item 3</a></li>
    <li>  <a href="#" uk-switcher-item="next">  Next item</a></li>
    <li> <a href="#" uk-switcher-item="previous">  Load Account</a>
    <div class="uk-align-right uk-margin-remove-adjacent">
    <ul class="uk-iconnav">
             <li><a href="#"><span uk-icon="icon: bag"></span> (2)</a></li>
     </ul>
    </div>
    
    
    
    </li>
</ul>
</div>

A New Approach

Boil the Ocean

You will need to overhaul the entire system to effect change. Thoughtful Design with a content lead Design makes sense.

The responsive templates of yesterday, will need to be modified with new strategies. It is very easy to get to 300 different hex shades of the “corporate” blue, when you have multiple people pushing an endless CSS list to a single compile, that keeps on growing.

Modifiers will help to simplify Design Challenges.

Tailwind, UI Kit load attributes to the side of classes. This makes design and code a lot simplier/cleaner.

Reasons why non linear CSS/Semantic architecture is important. Accessibility can be structured, when 360 content (that is vanilla CSS/JS) is created. Meta and SEO data can be curated and paired with Accessibility and SEO Tagging for 360 Campaign and Content strategy. 

Minified and Compiled CSS – with GIT enabled CDN – publish, can be published and updated in real time, without disrupting Live and Deployed Tested Build Process.

The road to 2,449 hex values for blue happens when you have developers committing endless lists of SASS without cleansing and standard mechanism. Set up Naming and BEM with copy and functional documentation, in requirements. This includes Endemic and Accessibility Usability and UX mapping.

CSS / Collaboration

Visually collaborate, minify and reset before build

Utilize WYSWYG tools that can separately commit to GIT / CI CD workflow outside of server side build and deployment. 

Allow design and marketing content stakeholders revise SEO, content relevance and 360 integrations in real time.
Automate SEO/Accessibility content modeling with automatic tree shaking an minification tools, before production and deployment.

This process and legal review should occur before Developer Handoff.

Webflow Content and 360 Product Curation

Similar output and flexibility to Tailwind. Webflow CSS has the additional advantage of Visual Preview.

VUE/Svelte can be nested into head/page/div/section configuration of static Webflow build tools. Use Webflow static file system instead of Nuxt, Sapper, Sveltekit, with the same output, and dynamic Accessibility/SEO Modeling opportunity.

1 click template/page/UTM routing converter can export to Markdown/11ty CMS with CI CD vanilla CMS build to 11ty.

Infinite Scaling and Deployment can accommodate Automation, GEO/Globalization, Personalization Dashboard Management.

Vanilla CSS stack with prefix / BEM naming opportunity
Vanilla CSS stack with prefix / BEM naming opportunity

Tree Shake and reduce CSS with unused CSS delete
Vanilla CSS stack with prefix / BEM naming opportunity

Minify and Compile Single Source CSS with Content / Image update and CDN/GIT publish. Address Accessibility Flags before code testing.
Vanilla CSS stack with prefix / BEM naming opportunity

SEO Tag with Open Graph (Facebook) and GA (Google) Tagging in Context to Header Tags and Accessibility Search UI/Semantic Copy. Namespace and strategize UTM parameter 360 Marketing with CSS/JS/HTML that can be agnostically dropped into any CRM/Commerce/CMS development strategy with built in responsive media breaks. All content is Vanilla and will work anywhere including IEP/email hosts. Images and ALT tagging is recycled and optimizes the tracked efficiency and loading strategies that enable fast Lighthouse / PWA scores. Linked 360 content highly boosts relevancy rating for GA algorithms.
Vanilla CSS stack with prefix / BEM naming opportunity

Global and Scoped

Utilize Frameworks that enable easy to specify Global and Scoped classes. Intentionally tier design with CSS in Hierarchy.

Svelte and Vue have intuitive setups that will help build with intentional Design classes that strategically outline focused strategy.

Svelte has syntax, that lets you indicate global functional CSS and will compile all scoped CSS into a single CSS file. 11ty, will let you specify “pass through” file naming that will let you consolidate compiling logic with file system, setup.

Avoid styles with override collisions by “replacing” SASS, that is a compile of styles regardless of hierarchy, the last style overides preceding styles, with logic that intentionally specifies usability in context to the organization of file system. 

//Atomic Global Syntax for Svelte

<style>
    :global(body){
      margin: 0;
      padding: 0;
    }
</style>

Utility Based System Design

Systems plus, with Modifiers

Rethinking Bootstrap, Foundation, Material Design

Most of us and many themes, templates rely on old school kickback Bootstrap, it is time to revisit how these systems effect ability to effectively design.

With the advent of PWA to App Development the Design System is no longer embedded into the static asset serving stack. 

Simplified modeling and Global / Scoped Design needs to be outlined.

Utility First

Traditional Example


<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

With Modifiers

Tailwind

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

UI Kit

Programmatic use. VUE based Design System can load unload CSS/JS conditionally, inline with a DOM / BEM at Semantic Modifier Wrapper.

Create a DOM/Div/Section with #ID in simple HTML. Load and unload data with conditions and logic per VUE best practice. Buld Tools are not required, so this will work with legacy Angular/Guardrail protected configurations.

Programmatically, components may be initialized with the element, options arguments format in JavaScript. The element argument may be any Node, selector or jQuery object. You’ll receive the initialized component as return value. Functional Components (e.g. Notification) should omit the element parameter.

// Passing a selector and an options object.
var sticky = UIkit.sticky('.sticky', {
    offset: 50,
    top: 100
});

// Functional components should omit the 'element' argument.
var notifications = UIkit.notification('MyMessage', 'danger');

Wrap Legacy Design/ERP

Utilize name space to wrap Legacy Bootstrap 3 to address vertical height detection without Popper.

Bootstrap 4 will break Bootstrap 3. Any Legacy Enterprise App/CRM/ERP that has not been upgraded with Bootstrap 3 will not work. Bootstrap will require jQuery and Popper to resolve Vertical alignment, and rely on DOM served from client side.

Angular 2 and forward will break Angular 1.

Use with naming conflicts like complicated nesting for Angular 1 and Bootstrap conflicts. Add data with inline vanilla JS directly to #div/class with ID callback.

Side loading and functional styles can be done inline to class.

DOM/Viewport is namespaced in UI Kit. Vanilla DOM query can be used without jquery or Popper requirement (Bootstrap).

//Vanilla JS
Selecting DOM elements using the # or . notation: 
document.querySelector('.button')

Waiting for page DOM to load:
document.addEventListener("DOMContentLoaded", () => { ... })

Executing AJAX requests:
fetch('/api.json').then(response => response.text()).then(body => console.log(body))

UI Kit

Utilize name spaced positioning classes without writing custom UI code. Create variables and side load data, inline styles with contextual Props and Attributes.

<div class="uk-inline">
    <img src="images/light.jpg" alt="">
    <a class="uk-position-absolute uk-transform-center" style="left: 50%; top: 50%" href="#" uk-marker></a>
</div>

Symbols and State Management

Reusable Symbols / SVG

Utilize universal – vanilla compile “native” state 

Symbols and SVG natively incorporate reusability.

Webflow has a symbol management system that works like State Managers like Vuex, Redux. Output is Vanilla and can be incorporated into any framework including: Salesforce/AEM/Static Development Lifecycle Loading Pattern.

Creative Cloud has Symbols that traverse all Applications and are accessible with AEM/Analytics/Marketing/CMS Provisioning Management Tools.

Symbols can be set up with Vanilla IA and File Based Managers.

Webflow will create reusable components with Symbols.
Similarly Adobe Creative Suite will let you generate SVG based minified JS compiles in C# based header code in SVG components with embeded JS/CSS. Creative Suite Components can be reused in AEM – provisioning and CMS development Life Cycle. (After Effects/Cinema 4D – Geo Spatial, Illustrator, In Design, Photoshop)

Any JAVA based wrapper: Unity, Android SDK, Provisioning Wrappers like: Cordova/Ionic, will generate Native Applications.

Symbols will convert to partials in 11ty based Ruby Conversion. Collections and File Based Management can be automated with GIT automation, or with WYSWYG publish and collaboration updates.

Add manifest.json and service worker files with instant native mobile wrappers (like Bubblewrap)  for automatic Mobile APP workflow with Authentication and Moderation for PCI/HIPAA compliance.
© 2020 All rights reserved. Powered by Yoonsun Lee.