From the course: Responsive Layout

Responsive design - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

Responsive design

“

- [Instructor] Responsive design has been in existence for several years now, and one of the key things you need to know is that responsive design isn't a separate thing from web design. Most new websites are responsive now, and you'll use responsive design techniques in pretty much every site you create. Responsive design is essentially a webpage that looks good on devices of various sizes and is usable in as many devices as possible. For it to look good on various viewport sizes, you're going to use media queries and other layout methods to change what's on the screen depending on the size of the viewport. The second part is a little more difficult. Your site needs to be usable in as many devices as possible. For example, if someone is using a browser or device that is several years old, your layout might not look the way you want, but the site should still be usable for whatever tasks that user is trying to complete. There are two main qualities that make a site responsive. A responsive website is both flexible and adjustable. Flexible means that the elements on the page can change size depending on the width of the viewport. You can see, as we change the width of the viewport, elements on the website change size. The photos get larger to take up the available viewport space. The text in the white Hours box at the top left changes size. The second quality is adjustable. Not only can elements on the page change size, they can also change in other ways depending on the width of the viewport. So, for example, the Hours box jumps down to be in front of the top photo. As we go wider, the icon at the top leading to navigation goes away, and instead the navigation is displayed at the top of the page. Now, there's a lot more to think about than just layout. You have to make a site that works properly no matter what device or browser people are using. You have to think about performance because some users may not have fast internet like you do. You have to make sure your site is accessible to people with disabilities. Having a website that looks nice isn't enough. It also needs to be usable.

Contents