Cut off images and content are not good for mobile users
- The image above shows one mobile page that is correctly showing content and one where the content is not sized to the viewport.
- When images and text go offscreen, it requires a user to scroll sideways to see content.
What is a viewport?
A viewport declares how big of a window a webpage should be displayed in. To learn more about viewports – how to configure viewport
In responsive web design we need to configure the viewport to the Google recommended value of..
<meta name=viewport content=”width=device-width, initial-scale=1″>
Sometimes after the viewport is configured we discover a problem, like content being cut off.
This occurs because a properly configured viewport is going to display content to the width of what ever device the page is being seen on.
So if the someone is using a phone to see your content, and their phone is 300 pixels wide, your webpages will display at 300 pixels wide.
If you are not sure of how your viewport is set, use google pagespeed insights tool (it will tell you).
If some of your content is being cut off, or a user needs to scroll horizontally to see your content, that is bad.
This issue occurs when something in your html is sizing something larger than the viewport window (in our example case – 300 pixels).
A common situation is where you may have explicitly declared the width of an image using absolute values.
<img src=example.png style=width:500px; >
In this situation, someone has said an image should be 500 pixels. This means the image will be cut off when seen on devices less than 500 pixels wide.
To fix that you would not declare the image width explicitly (with an exact number of pixels), you would rather declare the width as a percentage or another relative measurement.
<img src=example.png style=max-width:100%; >
In the above example we used an image, but the truth is any element of your html can find itself in this situation.
With responsive design it is always safest to use relative measurements for every thing you do (things like % or em). Following the the guidelines for legible text will also help in not encountering or correcting content not sized to the viewport.
Third party widgets / frames / videos
You may have your content perfectly sized for the viewport but might be embedding something from a third party (like a video from youtube) into your pages.
If you are getting the “size content to viewport” error on some, but not all of your pages, one of the first places to look is third party content.
Finding this issue without tools
It is easy to determine when a mobile page has content not sized to the viewport. If you go to a page on your smartphone and can wiggle the page left to right, it is a good bet something is wrong with the page.
Responsive pages are in general designed to fill the viewport of the device it is being shown on. If you can scroll left and right, something is likely wrong.
Your page content should not rely on a particular viewport width to render well
Google recommends the following:
- Avoid setting large absolute CSS widths for page elements since this may cause the element to be too wide for the viewport on a narrower device (e.g. a device with a width of 320 CSS pixels, such as an iPhone). Instead, consider using relative width values.
- Beware of using large absolute positioning values that may cause the element to fall outside the viewport on small screens.
- If necessary, CSS media queries can be used to apply different styling for small and large screens.
Google also states:
“On both desktop and mobile devices, users are used to scrolling websites vertically but not horizontally, and forcing the user to scroll horizontally or to zoom out in order to see the whole page results in a poor user experience.”
Tools to use to find out if your pages are configuring the viewport tag correctly (or at all):