Overview and Demo CSS Media Query Mobile First Responsive Design

Audience: Those who are new to CSS Cascading Style Sheets for mobile development.

This is first video in a series to build a framework for CSS Cascading Style Sheets following the mobile first responsive design approach. This video shows the testing demonstrated using Firefox responsive design tools.

Mobile first designs target all mobile device by using screen widths. You start out with a base screen Cascading Style Sheet.

Then using progressive media queries to detect wider and wider device screen widths, overrides to Cascading Style Sheets are applied.

At then end of the series you have a template to target smartphones, mobile tables like the iPad, and laptops and desktops.

Designing for mobile first is very easy if you have a single column of text and add the CSS img {height: auto; width: 100%; } to make the images flexible. But ultimately you design multiple column layouts and graphics that may not be suitable for dynamic resizing across the wide width spectrum of viewing screens that your visitor may be using.

[AlvomaniaDK]

Greetings, Mr. Hosford. I´d love to take this opportunity to thank you for everything you have put together here, they are fantastic. Everything is so well elaborated, the way you teach makes it clear and easy to understand. Well done for everything, God bless. I think I´m going to love hanging around here for a while. lol