Mobile Browsers and Page Width

One of the difficulties created by the use of mobile devices is that web pages viewed on such devices have very different criteria for how the page needs to be laid out as compared to when the same web page is viewed on much larger screens. While a tablet has a screen large enough to display the page with a similar layout to the way it is displayed on laptop and desktop computers, these layouts will not fit in the couple of hundred pixels that mobile devices have available.

On a desktop or laptop computer you have enough room to display more than one column of data on your web page. Often the content will be the wider column and ads and possibly navigation will fill narrower columns. As the browser viewport gets narrower, at least one of the columns needs to get narrower. As the ads and navigation columns will usually require a set width in order to fit their content, it will generally be the content column that gets narrower in smaller viewports. Eventually the content column (which is of course the most important of the columns) will get too narrow to fit the content properly.

With multiple column layouts the first breakpoint at which you need to change the page layout is when the content column gets too narrow. Just how narrow is too narrow depends on the content but as the content is the most important part of the page it really deserves by far the largest part of the available space. Once you reach the point where the content column is as narrow as you want it to get you need to set up your CSS to test for that width and to rearrange the page for narrower viewports so that instead of displaying as columns next to the content column that the other columns move below the content. This may mean adjusting ad sizes so that instead of displaying tall thin ads you display wider ads instead as they can now be as wide as the content but being under the content need to be not so tall.

This then allows you to support narrower viewports with the content filling 100% of the width. The problem comes when the content you have becomes too wide for the viewport even when there is noting else across your page but the content. At this point you need to consider just what it is that is that is too wide to fit the viewport.

Plain text will never be too wide for the content as it can simply wrap onto a new line at whatever point in the text it needs to. The most likely things to result in the page content being too wide for mobile viewports is either images or forms. Of these the images are the easier to resolve as if the viewport is narrower than the width of an image then the obvious solution is to shrink the image to 100% of the viewport width. It is forms where the solution is most complicated to adjust for narrower widths. To start with you may need to rearrange the form so that the labels are above the inputs instead of next to them. Then you may need to make the input and textarea fields narrower than they would normally be. This may mean that only a part of the content of the field will be visible at any one time.

Applying all of these changes may take some time, particularly when you want to keep the layout the same as it is now when the viewport is wide enough. Perhaps the most important thing in deciding on which order to apply these fixes to your site is to use a mobile usability tester to find out which aspects of your page are considered to be the greatest impediment for mobile device users so that you can fix those first.

I have noticed that some people are creating web pages with the opposite problem. By designing their page so that it works well on mobile devices but not picking appropriate breakpoints for rearranging the page for wider viewports they end up with pages that are extremely annoying to those using larger screens to access the web as the content is all that they see on those sites as the navigation is somewhere at the bottom where they can't see it (unavoidable on really narrow screens but easily rectified for wider layouts). One example of this is the 2015 theme for WordPress where the breakpoint for adding a second column to the layout requires a relatively wide viewport width and those using a more regular width viewport on their desktop get to see the mobile layout which is almost unusable on a desktop). In this case the breakpoint should have been set at least 10 pixels smaller to allow for the browser chrome when displaying the browser half width on a 1920x1080 screen.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow