Making A Mobile Friendly Website: Content Wider Than Screen (2/5)

Fixing “Content Wider Than Screen” Failures

Our previous post addressed preparing your website for mobile friendliness.  We looked at the background to being mobile-friendly, the Google mobile-friendly test tool and set out the solution to the easiest of the five problems Google’s tool highlights.

We now turn our attention to a slightly-more-difficult-to-solve problem the tool will identify.

Content Wider Than Screen

This issue might seem to be just a browser problem.  If the text is too wide to fit the screen, won't the browser just reflow the text to fit? 

In fact, there are, at least, three reasons for Google to conclude that the content is too wide for the screen. 

  1. images (but probably not background images - this depends on your page styling) may have dimensions too large to fit in the viewport
  2. text sizing is causing the browser to make the text display so large for certain types of HTML element that it causes the browser to render the page to be wider than the viewport. 
  3. the page construction is such that HTML block elements are not reflowing within the mobile browser's viewport. 

Let's see how to fix each of these issues.

Images

Google recommends implementing fully responsive web site designs. One aspect of responsiveness is to define element and other dimensions using relative measures, such as percentages or, for text, in terms of multiples of ems

This approach means, for example, defining an image width as 100% or 100vw (100 times 1% of the viewport width) - incidentally, these two would not always give the same result, since 100% would mean "100% of the containing element". Configured this way affected elements resize to fit the viewport.  

For images, you should probably define the height to auto, otherwise the aspect ratio (width:height) could change and produce undesirable results. 

Text

For text, using em units means making the text sized relative to everything else. You may wish to start by deciding the size of ordinary paragraph text and then setting all other text sizing relative to that.

With a fully responsive design, you would probably use CSS Media Queries to alter the definition of basic page elements. Media queries allow you to define CSS properties based on media features such as device width (for “device” in this instance, read “browser”). Current practice seems to be that media queries are used sparingly by having several definitions (for various screen width ranges) that alter only a limited set of CSS properties such as paragraph text sizing. 

Combining media queries with relative element and text sizing goes a long way to making a responsive design that will be mobile friendly.

Fundamental Page Design

The third factor causing content to be wider than the screen is much harder to solve as it derives from the fundamental design of a page. 

Page designs that fix the relative position of page elements or designs that prevent the browser reflowing or breaking text at the right hand end (or left hand end for right-to-left script) result in the content being deemed too wide for a mobile screen.

It may be the case that only one of a few pages suffers from this problem, in which case a fix may be easily developed and implemented. However, if a whole site is affected, it may be that a single common design decision is all that is needed to revisit, redevelop and implement changes with site-wide benefits for mobile friendliness.

The next post addresses: Links Too Close Together

 

 

Sign Up for Email Delivery:

We collect the following solely to email you new blog posts.

* indicates required
 

MailChimp stores your details. We do not share data with third parties.

 

 

Don’t have accurate and current information on all the websites you own? Not able to monitor and check each website’s content quality and risk status? Let’s talk about how we can help.

 

Blog photo image: unsplash.com