Responsive Webdesign has been around for a little while, and most modern websites are created using it.
The idea is different CSS is used for some, or all, of the website based upon the screen size. This is done through a media query.
This way, the exact same webpage can be used – but look correct regardless of if it was viewed on a phone, and iPad, or a desktop computer. Even changing the image from vertical (portrait) to horizontal (landscape) may affect the rendering of the web page.
Some items may be hidden, or rearranged so the flow still works for the end user.
In the video below, we see a website I created, first in the desktop version, then in a preview window for different mobile screens. Note, that while you can simulate what the screen would look like, you cannot specify the actual rendering, as you are still using the Firefox browser. However, this does give you some initial testing, and let you see the power of responsive webdesign.
The even better news about responsive web design is that it uses CSS. Therefore, it doesn’t matter if your website is built on top of PHP, C#, WordPress, or a plain HTML set of documents. As long as you use CSS, you can build a responsive web design.
We’ll be looking at building some websites using the existing Bootstrap framework. Bootstrap is used in many websites, and has a long history of being well accepted by many companies because it works so well in different web browsers, and it has many front end components ready for us to use.
What is Responsive Web Design was originally found on Access 2 Learn
