This is an introduction of Responsive Web Design. Below are some answers to what Responsive Web Design is really about and how it works.
FAQ's
- What is responsive web design?
Responsive Web Design is being able to resize or create a viewing of your website by making your layout, code, images and content of your web page easy to read and make it flexible so that any device can view it.
- Why has responsive web design become so important?
This has become very important for any website because it just makes it easier for companies to make one whole website as a responsive rather than making two separate websites, one for desktop, and one for mobile.
- What are media queries?
- What are media queries?
- What are breakpoints?
Breakpoints are intentionally stopping or pausing a program. They mostly used for debugging purposes to make sure the system is functioning.
Example Site
Below is an example of a responsive website with 3 different screen captures from a desktop view, tablet view, and mobile phone view. All from the home page.
Name: 3200 Tigres
website URL: http://3200tigres.wwf.fr
First the desktop view, it has the regular links of the different pages up at the top with the image sizes being more on the larger side. It also has the very wide layout a side bar and the content stretches very long. Also the text is smaller. Overall, it's like what you mostly see in a website.
Now if we look from a tablet view you notice that there are a few differences. The links to the different pages are now in a bar going vertically instead of going horizontally. Also you can you tell that there is no sidebar on the right side anymore? It shifted down the page and the new sidebar is the links on the left. The image sizes also got larger and the text got larger as well, and the content length got shorter. The layout of this is much more narrower but still is very organized.
Finally, the mobile phone view. This view makes most sites all scrunched up and very disorganized, but that's not the case for all mobile sites. If you noticed, the image of the tiger is gone and the page is mostly made up of the links to the different pages and the content is once again much larger. The page is also more narrower than before, that's because as the screen becomes more narrower the images and links all are moved because then they won't fit in the screen at all if it stays in the same place.
Overall, responsive websites are important for any device especially because not everyone has the desktop computer on them at all times, so they must be able to view it on a tablet or mobile phone.
Example Site
Name: 3200 Tigres
website URL: http://3200tigres.wwf.fr
First the desktop view, it has the regular links of the different pages up at the top with the image sizes being more on the larger side. It also has the very wide layout a side bar and the content stretches very long. Also the text is smaller. Overall, it's like what you mostly see in a website.
Now if we look from a tablet view you notice that there are a few differences. The links to the different pages are now in a bar going vertically instead of going horizontally. Also you can you tell that there is no sidebar on the right side anymore? It shifted down the page and the new sidebar is the links on the left. The image sizes also got larger and the text got larger as well, and the content length got shorter. The layout of this is much more narrower but still is very organized.
Finally, the mobile phone view. This view makes most sites all scrunched up and very disorganized, but that's not the case for all mobile sites. If you noticed, the image of the tiger is gone and the page is mostly made up of the links to the different pages and the content is once again much larger. The page is also more narrower than before, that's because as the screen becomes more narrower the images and links all are moved because then they won't fit in the screen at all if it stays in the same place.
Overall, responsive websites are important for any device especially because not everyone has the desktop computer on them at all times, so they must be able to view it on a tablet or mobile phone.
No comments:
Post a Comment