Questions
What is responsive web design: Responsive web design is a way of creating sites to provide an optimal viewing- easy to read, to navigate, and minimum resizing and scrolling required for a range of devices.
Why is responsive web design important: It is important because many people don't just use a desktop anymore, but also mobile devices and tablets. So responsive design allows you to have just one website that can easily be viewed on multiple different devices.
What are media queries: This is a CSS module that allows content to adapt to different conditions such as screen resolution (screen size)
What are breakpoints: Breakpoints are the point at which your sites content will respond to provide the user with the best layout for their device.
A Responsive site
 |
| Desktop view |
I found this website by searching "responsive web design web sites".
 |
| Desktop view with drop down menu. |
This first screen shot is of the website on a desktop at the normal size. It has the navigation at the top, it has a one column design, you can only scroll down as well. And also when you hover over the tabs in the navigation bar then a bunch of options come down.
 |
| Tablet View |
This screen shot shoes what the website would look if it were on a tablet. The only thing that changed was the top menu. The drop down menu is the same. However instead just the name, the tabs, and the shopping cart on top there are some new things. There is a wish list, sign in, search, and store locator options. The logo is also now right above the drop down menu.
 |
| Phone view |
This screenshot is what it would look like if were looking at this website on a phone. everything has shrunk down, but not so that you can't read everything. Instead of having everything going horizontal, it is all going vertical. So now the web page is longer, but it also means you don't have to scroll left and right all the time just to read something. Another huge thing that changed is the menu. Instead of it being in the middle it is now on the left. And instead of hovering over it you have to click on that button. and it comes out from the side. throughout all of the view the text did not change very much. It might have gotten smaller as the screen gets smaller, but only by a little bit. The images did shrink a little, however they are still very easy to look at and see what it is, the same goes with the content in the website. They didn't compromise being able to see it and read it by having the content go further down rather than shrinking it all to see it all at the same time.
 |
| Phone view with drop down menu |
No comments:
Post a Comment