Responsive Design & Accessibility Basics: Mobile vs Desktop (Beginner Guide) | UX Design Ep 15

How do you design one product that works on a phone, a tablet and a desktop, and for everyone who uses it? In this beginner-friendly episode, you'll learn responsive design (breakpoints, fluid layouts and mobile first), how to adapt layouts to different screen sizes, the basics of accessibility (contrast, readable text, alt text and accessible forms), how keyboard accessibility works, and the most common mobile and accessibility mistakes. We use Studyleaf, the fictional study planner from the last episode, as our example. No experience needed. 📺 This is Episode 15 of "UI/UX Design for Absolute Beginners", a 30-episode series that takes you from zero to your first design project. This is the final episode of Module 3: Visual design. 📂 Full series playlist:    • UI/UX Design for Absolute Beginners   Previous episodes: ▶ Ep 1 — What Is UI/UX Design? Explained for Beginners:    • What Is UI/UX Design? Explained for Beginn...   ▶ Ep 2 — What Does a UI/UX Designer Actually Do?:    • What Does a UI/UX Designer Actually Do? (D...   ▶ Ep 3 — The 7 Principles of Good UI Design:    • The 7 Principles of Good UI Design (With B...   ▶ Ep 4 — What Is UX Research? Simple Examples:    • What Is UX Research? Simple Examples for B...   ▶ Ep 5 — The Complete UI/UX Design Process:    • The Complete UI/UX Design Process (Step by...   ▶ Ep 6 — How to Create a User Persona:    • How to Create a User Persona (Step by Step...   ▶ Ep 7 — User Journey Maps Explained:    • User Journey Maps Explained (Step by Step ...   ▶ Ep 8 — Information Architecture for Beginners:    • Information Architecture for Beginners: Or...   ▶ Ep 9 — User Flows Explained with Real Examples:    • User Flows Explained with Real Examples (S...   ▶ Ep 10 — Wireframes vs Mockups vs Prototypes:    • Wireframes vs Mockups vs Prototypes: The 3...   ▶ Ep 11 — Color Theory for UI/UX Designers:    • Color Theory for UI/UX Designers: Choose B...   ▶ Ep 12 — Typography in UI Design:    • Typography in UI Design: Fonts, Weights & ...   ▶ Ep 13 — Spacing, Alignment, and Layout Explained:    • Spacing, Alignment & Layout Explained: Fix...   ▶ Ep 14 — Visual Hierarchy and Gestalt Principles:    • Visual Hierarchy & Gestalt Principles: Gui...   Next: Ep 16 — Figma for Beginners: Complete Introduction (Module 4 begins) ⏱ CHAPTERS 0:00 Intro: one page, three screens 0:50 Responsive design: breakpoints, fluid layouts & mobile first 2:34 Adapting layouts to screen sizes (Studyleaf example) 4:42 Accessibility basics: contrast, readable text, alt text & forms 6:47 Keyboard accessibility: focus states & focus order 8:18 Common mobile & accessibility mistakes, the 5-step check & recap In this video: • What responsive design is, and fixed vs responsive layouts • Screen sizes and breakpoints • Fluid layouts and max width • Mobile-first design • Adapting layouts: stacking columns, simpler navigation, images, touch targets, type and spacing • Example: Studyleaf on desktop, tablet and phone • Accessibility basics: contrast ratios, readable text and zoom, plain language • Alt text, labeled icon buttons, and never using color alone • Accessible forms: visible labels and helpful error messages • Keyboard accessibility: Tab, Enter, Space, arrows and Esc; focus states; focus order and skip links • Common mobile and accessibility mistakes • A quick 5-step check for any design Studyleaf and its screens are fictional examples for teaching only. ✍️ Mini challenge: pick a design you made, or any website you use, and run the 5-step check (resize, zoom to 200%, check contrast, tab through, view in grayscale). Note 3 problems and sketch fixes for mobile and desktop. 💬 Which accessibility tip surprised you the most? Tell me in the comments! 🔔 Subscribe and turn on notifications so you don't miss Module 4. #ResponsiveDesign #Accessibility #UIUXDesign