When someone visits a website, it’s possible they are viewing it on a phone, tablet, computer, or even a TV monitor. Because screen sizes can vary greatly across different devices, it’s important for websites to resize and reorganize their content to best fit screens of all sizes.
When a website doesn’t respond to different screen sizes, the website may look odd or become indecipherable on certain devices. This usually occurs on smaller screens, like phones. When a website responds to the size of the screen it’s viewed on, it’s called a responsive website.
Because websites can be displayed on thousands of different screen sizes, they must be able to respond to a change in screen size and adapt the content so that users can access it.
Instructions
We’re first going to look at a website that does not respond to different screen sizes and then look at a website that does respond. You may need to make the browser window as narrow as permittable to see the differences.
Nonresponsive Website
- Visit this site.
- Then resize the width of your browser to simulate a smaller screen size. Make note of how the content on the web page does not shrink or adjust as you resize the browser’s width.
- Open the dropdown that follows to see our list of nonresponsive behaviors.
Complete list of nonresponsive behavior:
The “Globe Book Store” title stays the same font size and collapses on top of itself when the screen becomes too narrow, making it unreadable.
The banner image gets cut off, showing only the leftmost brown portion, and William Shakespeare is no longer visible.
The gallery images do not shrink as the width of the browser window decreases, allowing only one image to be in each row. This causes the page to be very long.
Responsive Website
- Visit this site.
- Again, shrink the width of your browser, and this time notice how the content on the web page resizes and reorganizes itself.
- Open the dropdown that follows to see our list of responsive behaviors.
Complete list of responsive behavior:
The “Globe Book Store” title dynamically resizes the font and repositions to look better on the smaller screen.
The banner image is resized so that William Shakespeare remains visible even when the page is smaller.
The “Selected Title” and “Contact” headings expand to the whole width of the page on a small screen, providing clear content delineations.
The books in the picture gallery shrink slightly so that two images can be in each row. This beneficially shortens the page.