Using a mobile-first approach - CSS Tutorial

- [Instructor] I probably don't need to tell you that mobile devices have become an integral part of the web landscape and will continue to be vital for the future as well. Since mobile contributes to approximately half of the overall web traffic, it's important to have a design that wows on mobile for users who will never see your layout on a desktop. A responsive approach is when the mobile website is planned and designed in tandem with the desktop site, making proactive changes to the overall design to ensure mobile experience is just as good as the desktop experience. As the term suggests, mobile first design is an approach in which web designers and developers start product design for mobile devices first. This can be done by sketching or prototyping the web's app design for the smallest screen first and gradually working up to larger screen sizes. Prioritizing design for mobile makes sense as there are space limitations in devices with smaller screen sizes, and we need to ensure that key elements of the website are prominently displayed for anyone using those screens. Designing and developing for small screens compels designers to remove anything that isn't necessary for seamless website rendering and navigation. CSS Grid and Flexbox both have some properties that can make your layout responsive and mobile friendly. Pages which are optimized for a variety of devices should include a meta viewport tag up here in the head of the document. Let's add one. A meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling. To attempt to provide the best user experience, mobile browsers will render the page at a desktop screen width, usually about 980 pixels, though this varies across devices, and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. So the syntax for this is name equals viewport, content equals width, equals device dash width comma initial, dash scale equals one. So this instructs the page to match the screen's width in device independent pixels. Let's save it and refresh. And we can see that this increases the font size quite a bit. Setting the CSS attributes in fractions and percentages rather than pixels is another good way to ensure responsiveness. So let's check out our CSS to make any necessary changes. So our grid is already set up in fractions and we have the height of 100%, so that's perfect. These items with a border of one pixel, that can stay because it won't make too much of a difference but this gap of 10 pixels could change into a percentage so that it reflects the size of the screen. So I'm going to change it from 10 pixels to maybe 2% and save and refresh. And it doesn't make much of a change on the mobile view here. But let's see what happens when I increase my screen. So we can see that the gap is getting slightly larger as I make the screen wider, so that's perfect. When working with images in our layout, setting the max width property to the percentage value will ensure that the image fits on the screen. This is very important in responsive layout. So let's add an image into our main class here, into item three. So add the image tag, source equals, and we'll close this. Let's save and refresh. And as we can see, this image is enormous and throwing off our layout completely. So let's add some CSS here. If I call my image and add a max width of 100%, now the image fits on the screen and our layout works again. And as we change the size of the page, the image adjust in size. So now you have the basic tools for making mobile first and responsive layouts.