Improving Mobile Website Designs

Key Strategies

1. Distinct Sections

• Ensure sections are distinct and easily identifiable.
• Avoid repetitive layouts (image, header, subtext).
• Use different background colors or div blocks to distinguish sections.
• Add spacing between sections to avoid compression.
• Simple breaks (lines, icons) can help cleanly separate sections.

Example

• Butter.us: Utilizes varying background colors for different sections with brand headers like "Plan," "Run," and "Recap."

2. Work Within the Viewport

• Avoid excessively large images and fonts that require multiple scrolls.
• Aim to fit the majority of the section in a single viewport.
• Ensure users can see the subtext and call-to-action without excessive scrolling.
• General font size guidelines: 16px for body copy, 25px for H2 headers, larger for H1 and hero sections if needed.

3. Wise Use of Drop-Downs

• Use drop-downs to save space without hiding too much content.
• Limit drop-downs to 2-3 within a section.
• Display one drop-down open initially to show functionality.
• Indicators (icons, colors) help users recognize active drop-downs.

Examples

• Webflow: Uses color differences for active drop-downs and changes display content within the viewport.
• Gusto: Auto-timed drop-downs with visual progress indicators to help guide users through content.

4. Intuitive Sliders

• Ensure sliders are obvious and user-friendly.
• Indicators (dots, arrows) show slides and navigation cues.
• Showing the next slide slightly can hint at additional content.

Examples

• Intercom: Uses dots and arrows for easy navigation.
• Pipe.com: Second slide slightly peeks to indicate more content, creating an intuitive swipe experience.

5. Simplify Images or Use Videos

• Videos are engaging but make them auto-play without requiring user interaction.
• Simplify detailed images for better mobile viewing.
• Create specific mobile-friendly versions of images.
• Use close-ups or zooms to highlight the image focus.

Example

• Worksome.com: Uses animated images to make the content dynamic and engaging for users.

Conclusion

• Implementing these strategies will make your mobile website not only unique and custom but also user-friendly and engaging.
• For more detailed instructions and examples, refer to additional instructional videos on specific web design topics.