Handling responsive designs

While working on some Gutenberg/Site-Editor projects, I have realized that responsive designs may be the hardest thing. Gutenberg has certain limitations which may make it hard to create responsive designs without custom coding or third-party plugins. Let’s explore how to create truly responsive WordPress experiences.

Mobile-First Design Approach

Starting with mobile forces us to focus on content priority and core functionality. I’ve seen many designs fail because they were conceived for desktop and hastily adapted for mobile.

Content Prioritization:

• Essential information appears first
• Secondary content follows
• Optional elements last

Desktop designs often include:

• Multi-column layouts
• Hover states
• Complex animations
• Detailed navigation

Mobile focuses on:

• Single column flow
• Touch interactions
• Performance optimization
• Essential navigation

However, sometimes, it may not make sense to go mobile-first. During a revamp project, we analyzed the traffic reports and realized that most of the traffic came from desktop. Therefore, we focused our efforts on desktop designs and then worked towards mobile designs.

Stacking Behavior

One of WordPress’s strengths is automatic block stacking on mobile, but this needs careful planning.

Consider this typical hero section in Figure 5.1. This design requires custom coding or third-party plugins due to an unnatural element reflow.

Common Stacking Issues:

• Column content ordering
• Image placement
• Call-to-action positioning
• Spacing consistency

Design-Development Balance

Through numerous WordPress projects, I’ve learned where to push for pixel-perfect implementation and where to compromise.

Worth Perfecting:

• Navigation
• Element placement
• Critical content flow
• Brand consistency

Acceptable Variations:

• Slight spacing differences
• Minor alignment variations
• Non-critical animations
• Decorative elements

Navigation Patterns

Mobile navigation deserves special attention – it’s often the make-or-break element of mobile usability.

Effective Patterns:

• Hamburger menu with slide-out panel
• Collapsible sections for complex menus

Figure 5.2 shows a typical menu over multiple breakpoints.

Mobile Accessibility

Touch interaction requires different considerations from desktop design.

Touch Targets:

• Minimum size: 44x44px
• Adequate spacing between targets
• Clear active states
• Large enough text for readability