Back to: Web Design Fundamentals
0
Learn how to design websites that adapt smoothly across phones, tablets and desktops using a mobile-first approach: media queries, flexible units, and fluid images. Watch the linked video, then take one of your Module 2 layouts and make it fully responsive, starting from the smallest screen size first. FDA Notes: test your finished page on at least two different screen widths.
WatchMobile First Web Design TutorialAdrian Twarog · free video on YouTube
Add the viewport tag
Include <meta name=”viewport” content=”width=device-width, initial-scale=1″> so phones use the real screen width.
Make images fluid
Setting max-width: 100% on images stops them overflowing their container.
Test on a real phone
Browser developer tools are a great start, but check your page on an actual phone too.
Try it: small screen first
- Take one of your Module 2 layouts.
- Style it for a narrow phone screen first.
- Add a min-width media query for larger screens.
- Test the finished page at two different screen widths.
Key takeaways
- Mobile-first means designing for the smallest screen first, then adding styles for larger screens.
- Media queries apply CSS only when a condition is met, such as a minimum screen width.
- Flexible units and images that scale keep layouts readable on any device.
