Mobile Responsiveness
Learn why mobile responsiveness matters, how to test their site on different devices, and how to use Divi’s responsive design tools to make their site look great on all screen sizes.
After video and review we will pay a game:
Scripture
1 Corinthians 9:22 (HCSB) – “To the weak I became weak, in order to win the weak. I have become all things to all people, so that I may by every possible means save some.”
→ Tie-in: Just as Paul adapted his approach to reach different people, our websites must adapt to different devices so they can serve every visitor well.
What is Mobile Responsiveness?
Definition: The ability of a website to adjust its layout and content so it looks good and works well on desktop, tablet, and mobile devices.
- Why it matters:
- Over 60% of web traffic comes from mobile devices.
- Improves SEO ranking (Google prioritizes mobile-friendly sites).
- Ensures a good user experience for all visitors.
Testing Responsiveness
- Tools:
- Google Mobile-Friendly Test
- Browser Dev Tools (Right-click → Inspect → Toggle Device Toolbar)
- Simply resizing the browser window
Live demo: Show how a site changes when viewed on different screen sizes.
Adjusting with Divi’s Responsive Settings
- Show Divi’s desktop, tablet, and mobile view icons in the visual builder.
- Adjust:
- Text size for mobile.
- Spacing (padding/margin) for smaller screens.
- Column stacking for better readability.
Demonstrate hiding certain modules on mobile or desktop if needed.
Class Activity – Mobile Check & Adjust
- Students:
- View their site in tablet and mobile mode.
- Identify any layout or spacing issues.
- Make adjustments in Divi’s responsive settings.
Homework
- Fully review every page of your site on desktop, tablet, and mobile.
- Adjust text, images, and spacing for each view.
- Take before-and-after screenshots of a page to show your mobile improvements.