Visual Guide: Responsive Design Enhancements
This guide provides a visual understanding of the proposed Genesis Ontological Design System enhancements for responsive design.
📱 Current Challenges
Challenge 1: Mixed Paradigms
❌ CURRENT (Bootstrap + Genesis)
<div class="col-lg-7 mb-5 mb-lg-0"> ← Bootstrap utility classes
<div class="contact-form"> ← Genesis semantic class
✅ PROPOSED (Pure Genesis)
<div class="contact-form-section"> ← Semantic only
<div class="contact-form">
Challenge 2: Inline Styles
❌ CURRENT
<iframe style="border:0;" width="100%" height="450">
✅ PROPOSED
<iframe> <!-- All styling via SCSS -->
.map-container {
@include genesis-media('embed-responsive');
}
Challenge 3: No Mobile Navigation Pattern
❌ CURRENT
.main-nav {
@media (max-width: 767px) {
// Custom hamburger menu code
// Custom drawer positioning
// Custom touch targets
}
}
✅ PROPOSED
.main-nav {
@include genesis-environment('navigation-primary');
// Automatic mobile drawer, hamburger, touch optimization
}
🎯 Viewport Breakpoints Strategy
Proposed responsive behavior across all enhancements:
📱 Mobile Small 375px │ Single column, generous spacing, 44px touch targets
📱 Mobile Medium 390px │
📱 Mobile Large 428px │
─────────────────────────────
📱 Tablet Portrait 768px │ 2 columns, moderate spacing, 42px targets
💻 Tablet Landscape 1024px │ 2-3 columns, balanced spacing
─────────────────────────────
💻 Desktop Small 1280px │ 3-4 columns, compact spacing, 40px targets
💻 Desktop Medium 1440px │
💻 Desktop Large 1920px │
─────────────────────────────
💻 Ultrawide 2560px │ Capped at 4 columns, centered max-width
📐 Typography Scaling
Proposal #4: Responsive by Default
// Before (fixed sizes)
.hero-title {
@include genesis-cognition('axiom');
// Same size everywhere: 56px
}
// After (responsive)
.hero-title {
@include genesis-cognition('axiom');
// Mobile: 32px (readable, no overflow)
// Tablet: 40px (balanced)
// Desktop: 56px (impactful)
}
Visual Impact:
Mobile 📱 Tablet 💻 Desktop 🖥️
─────────────────────────────────────────────
32px 40px 56px
H1 Title H1 Title H1 Title
16px 17px 18px
Body text that Body text that Body text that
wraps nicely on wraps nicely on wraps nicely on
mobile screens tablet screens desktop screens
🎨 Grid & Card Layouts
Proposal #7: Adaptive Grid Behavior
// Before (manual)
.team-grid {
@include genesis-environment('distributed');
@media (max-width: 767px) { grid-template-columns: 1fr; }
@media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr); }
}
// After (automatic)
.team-grid {
@include genesis-environment('distributed');
// Automatic responsive columns!
}
Visual Layout:
Mobile 📱 Tablet 💻 Desktop 🖥️
────────────────────────────────────────────────────────────
[ Card 1 ] [ Card 1 ][ Card 2 ] [ C1 ][ C2 ][ C3 ][ C4 ]
[ Card 2 ] [ Card 3 ][ Card 4 ] [ C5 ][ C6 ][ C7 ][ C8 ]
[ Card 3 ] [ Card 5 ][ Card 6 ]
[ Card 4 ]
1 column 2 columns 4 columns
Gap: 1.5rem Gap: 1.75rem Gap: 2rem
👆 Touch Target Sizing
Proposal #6: WCAG-Compliant Interactions
// Before (too small on mobile)
.social-icon {
@include genesis-synapse('social');
// 32px × 32px (fails WCAG)
}
// After (responsive sizing)
.social-icon {
@include genesis-synapse('social');
// Mobile: 44px × 44px ✅
// Desktop: 36px × 36px ✅
}
Visual Comparison:
Mobile 📱 Desktop 🖥️
─────────────────────────────────────
┌────────────┐ ┌────────┐
│ 44×44 │ │ 36×36 │
│ 👆 │ │ 🖱️ │
│ WCAG ✅ │ │ Click │
└────────────┘ └────────┘
Easy to tap Space-efficient
📦 Content Density
Proposal #3: Viewport-Aware Spacing
.hero-section {
@include genesis-atmosphere('spacious-mobile');
// Mobile: 3rem padding (generous)
// Desktop: 2rem padding (efficient)
}
.dashboard {
@include genesis-atmosphere('dense-desktop');
// Mobile: Minimal items, focus mode
// Desktop: High information density
}
Visual Comparison:
MOBILE (spacious) DESKTOP (dense)
───────────────── ───────────────────────────────
│ │ │ ┌──┐┌──┐┌──┐┌──┐ │
│ [Content] │ │ │ ││ ││ ││ │ │
│ │ │ └──┘└──┘└──┘└──┘ │
│ │ │ ┌──┐┌──┐┌──┐┌──┐ │
│ [Content] │ │ │ ││ ││ ││ │ │
│ │ │ └──┘└──┘└──┘└──┘ │
│ │ │ ┌──┐┌──┐┌──┐┌──┐ │
│ [Content] │ │ │ ││ ││ ││ │ │
│ │ │ └──┘└──┘└──┘└──┘ │
───────────────── ───────────────────────────────
Breathing room Maximum information
🗺️ Media Responsiveness
Proposal #5: Semantic Embeds
// Before (inline styles)
<iframe style="border:0;" width="100%" height="450">
// After (semantic)
.map-container {
@include genesis-media('embed-responsive');
// Automatic aspect ratio preservation
// Responsive to viewport width
// No inline styles
}
Visual Behavior:
Mobile 📱 (375px wide) Desktop 🖥️ (1440px wide)
───────────────────── ───────────────────────────────
┌───────────────────┐ ┌─────────────────────────────┐
│ │ │ │
│ Map at 16:9 │ │ Map at 16:9 │
│ Height: 211px │ │ Height: 810px │
│ │ │ │
└───────────────────┘ └─────────────────────────────┘
Scales proportionally Maintains aspect ratio
🧭 Navigation Patterns
Proposal #1: Mobile Menu
.main-nav {
@include genesis-environment('navigation-primary');
}
Desktop Behavior:
┌─────────────────────────────────────────────────────────┐
│ Logo Home About Contact Resources CTA │
└─────────────────────────────────────────────────────────┘
Horizontal layout, inline menu items
Mobile Behavior:
┌──────────────────┐
│ Logo ☰ │ ← Hamburger toggle (44×44px)
└──────────────────┘
When toggled:
┌──────────────────┐
│ Logo ✕ │
│ ┌──────────────┐│
│ │ Home ││
│ │ About ││ ← Off-canvas drawer
│ │ Contact ││ Slides in from left
│ │ Resources ││ Full-screen overlay
│ │ CTA ││ Touch-optimized
│ └──────────────┘│
└──────────────────┘
📝 Form Layouts
Proposal #2: Responsive Forms
.contact-form-fields {
@include genesis-environment('interaction-form');
}
Desktop Layout:
┌──────────────────────────────────────┐
│ Name Field Email Field │ ← 2 columns
├──────────────────────────────────────┤
│ Subject Field │ ← Full width
├──────────────────────────────────────┤
│ Message Field │
│ (textarea) │
└──────────────────────────────────────┘
Mobile Layout:
┌────────────────┐
│ Name Field │ ← Single column
├────────────────┤
│ Email Field │ ← Stacked vertically
├────────────────┤
│ Subject Field │ ← Larger touch targets
├────────────────┤
│ Message │ ← 16px font (no zoom)
│ Field │
└────────────────┘
📊 Implementation Priority
Phase 1: Universal (High Impact)
✅ Typography Scaling → Affects all text elements
✅ Touch Targets → Affects all buttons/links
✅ Grid Breakpoints → Affects all card layouts
Phase 2: Common Patterns (Medium Impact)
🔄 Navigation → Every site has nav
🔄 Content Density → Improves mobile UX
🔄 Media Responsive → Common for images/embeds
Phase 3: Specific Use Cases (Lower Impact)
⏳ Form Environment → Form-heavy pages
⏳ Viewport Awareness → Hero sections, scroll effects
🎯 Success Criteria
Before Enhancement
❌ Custom @media queries in subdomain SCSS
❌ Bootstrap utility classes in HTML
❌ Inline styles for responsive behavior
❌ Touch targets < 44px on mobile
❌ Fixed typography across viewports
❌ Inconsistent responsive patterns
After Enhancement
✅ Zero @media queries in subdomain SCSS
✅ Pure semantic class names in HTML
✅ All styling via Genesis mixins
✅ WCAG 2.1 compliant touch targets
✅ Automatically scaling typography
✅ Consistent responsive behavior
📈 Expected Improvements
Performance
🔽 Page Weight → Responsive images, smaller payloads
🔼 Lighthouse Score → Better mobile UX
🔼 FCP → Optimized viewport, less CSS
Accessibility
🔼 Touch Target Score → 44×44px minimum
🔼 Typography → 16px minimum on mobile
🔼 Keyboard Nav → Responsive across viewports
Developer Experience
🔼 Code Simplicity → No custom breakpoint logic
🔼 Consistency → Same patterns across subdomains
🔼 Maintainability → Changes in theme, not subdomains
User Experience
🔼 Mobile Usability → Touch-friendly, readable, efficient
🔼 Tablet Balance → Optimal spacing and columns
🔼 Desktop Richness → High information density
🔄 Migration Example
Before (Bootstrap + Genesis)
<div class="col-lg-7 mb-5 mb-lg-0">
<div class="contact-form">
<input class="form-control" type="text">
</div>
</div>
.contact-form {
@include genesis-entity('primary');
// Bootstrap handles responsive
}
After (Pure Genesis)
<div class="contact-form-section">
<div class="contact-form">
<input class="form-input" type="text">
</div>
</div>
.contact-form-section {
@include genesis-environment('interaction-form');
}
.contact-form {
@include genesis-entity('primary');
}
.form-input {
@include genesis-synapse('input-primary');
}
Result:
- ✅ No utility classes
- ✅ Fully responsive
- ✅ Touch-optimized
- ✅ Semantic purity
📚 Documentation Structure
theme-pr-ontology-enhancements/
│
├── README.md ← Start here
│ ├── Overview of package
│ ├── How to use for theme PR
│ └── Success criteria
│
├── EXECUTIVE_SUMMARY.md ← Quick overview
│ ├── What was done
│ ├── Key findings
│ └── Next steps
│
├── RESPONSIVE_DESIGN_ANALYSIS.md ← Full analysis
│ ├── Current state review
│ ├── 8 challenge categories
│ ├── Code quality issues
│ └── Recommendations
│
├── ONTOLOGICAL_PROPOSITIONS.md ← Detailed proposals
│ ├── 8 enhancement proposals
│ ├── Implementation suggestions
│ ├── Semantic purity checklist
│ └── Testing strategy
│
└── IMPLEMENTATION_EXAMPLES.md ← Before/after code
├── 8 real-world examples
├── Migration checklist
└── Performance impact
🚀 Next Actions
For Theme Repository
- ✅ Review documentation package
- ✅ Prioritize proposals
- ✅ Implement in theme
_sass/ontology/ - ✅ Update INTEGRATION-GUIDE.md
- ✅ Record in GENOME.md
For www.asisaga.com
- ⏳ Wait for theme PR merge
- ⏳ Update theme version
- ⏳ Refactor SCSS
- ⏳ Test responsiveness
- ⏳ Deploy improvements
This visual guide complements the detailed technical documentation in the other files.