Responsive Layout

Description

This Video describes what is responsive layout and an example of Responsive Layout.

Responsive Layout

By responsive, we mean that we are creating a single responsive website which can respond to different device sizes. A single website which can run on large desktop devices, laptop devices, tablet and on mobile devices. So we do not want to create the multiple versions of the same website instead we want a single website which can run on these devices.

Transcript
Welcome in the first module of the course "Creating responsive website design using Bootstrap". So 1st thing we need to answer what we mean we mean by responsive design and why we need responsive design? So by responsive, we mean that we are creating a single responsive website which can respond to different device sizes. A single website which can run on large desktop devices, laptop devices, tablet and on mobile devices. So we do not want to create the multiple versions of the same website instead we want a single website which can run on these devices. So you might have noticed that some websites have different versions if we take the example of facebook, so one version of facebook runs on desktop devices and another version of Facebook m.facebook.com runs on mobile devices here m presents the mobile version of this website. So in this case, we are creating two different websites for different devices. Though it completely depends on the business requirement that do we have to create the multiple versions of the website or we want a single website? Let's consider a business case. Suppose we do not want to provide all the functionalities of the website in the mobile version as mobile devices has less processing capabilities so we want to keep the website simple for the mobile devices but this is the case will we might want the different versions of the website. So in this tutorial, we will learn, how to create a single responsive website which can render on different device sizes. So first let's consider an example of a responsive website. So here I am on my own website http://modernPathshala.com. This is the desktop view of the website here we have the Navbar and Header on the top and we have different courses and different section in the website. If we want to see the mobile version of this website or the tablet version we can simulate the browser in the device mode. So by pressing F12 I have open the developer tool. Here we can see the iPad version of the website looks response. This is the tablet mode of the website here we have the two columns structure instead of four column as compared to desktop mode. We can see the behavior of website in mobile devices on iPhone 5, we have a single-column layout and website still responsive, all the components are stacked down vertically below to each other. So now let's see what are the different patterns of the responsive design next.

Share this Video
Comments
comments powered by Disqus

Navigation

Social Media