Optimization Of Large Content With Responsive Websites On Mobile Devices

The advice of the Director of product design Viget Kevin vigneault. While working on the design of adaptive sites, we used to ensure that the content was nicely formatted in width and look good on screens of any size. The desire to fit into the width of the browser window is justified, since the horizontal scrolling is considered to be inconvenient for users.

But constant width of the content turn out to be excessive length of the page on the screens of mobile devices. When blocks of content are arranged under each other, the user is forced too often to scroll the screen. Consider a typical marketing page landing Google Nexus.

She has a clear and concise responsive design, it is beautifully formatted for any screen size. However, on the smartphone youll have for a very long time to get to the end of the page constantly scrolling the screen. MacBook the length of this page is about 4500 pixels, is six times greater than the height of the visible area of the browser window. On my phone the page took about 6200 pixels in length — about ten times the height of the viewport.

There is nothing wrong with, and the rules of design do not prescribe to vary the length of pages, depending on device sizes, but it would be interesting to dig a little deeper in this direction. I will repeat again. I do not think that the excessive length of the page can become a big problem. But I noticed that many adaptive sites selected group of content blocks, which is perceived with larger screens, cause some confusion when viewing on mobile devices.

For example, on the Nexus page in the second section three product. If the screen is large enough, you will see them arranged in one row, and the height of this section is likely to coincide with a visible area of the browser. However, on the phone, you will be able to view these products only one at a time.

And moving on this page, are unlikely to understand that they belong to the same group. Its certainly not the end of the world, but not an optimal perception of the content. More recently, pondering the placement of content, I began to consider the height of the visible area of the screen.

So I tried to solve that very problem about which wrote above. I tried to place blocks of content belong to one group, so that they can be viewed simultaneously, no matter what device you use. In our example, the alternative to the original location at the Nexus site could become this:

If you significantly reduce the titles and thumbnails, you can fit the content of the entire partition in one of the visible screen area. By itself this change may be only a small step towards incremental improvements, but if you will continue to follow this strategy, your users will be much easier to receive the information from mobile devices. That I just showed, there is nothing special. This is just one of many possible options, subordinated one purpose — to group content more obvious way.

If you use the visible area as a benchmark for your mobile layout, you will find many other interesting ways of posting content. Send your speakers and front-end cases [email protected]

Leave a Reply