Search Console Says My Horizontal Website Is A Problem On Mobile Phones
I made an horizontal website which works well in all browsers and devices. But Google Search Console says that the content should not be larger than the screen on mobile phones. Does anyone know how to solve the problem in the Console without changing the page design ?
My page width in written in "vw". Actually it's 600vw because there are 6 horizontal sections of 100vw each.
Thanks in advance.
I am curious to see what other answers you will get here! I am not a specialist, but wanted to contribute here with the things I think about it. I spent a lot of time in the past with the Google Mobile-Friendly validator tools and I know that can be frustrated sometimes.
In general, horizontal scroll on mobile is discouraged by most people, including Google (see this article, for example). However, the "swipe" gesture is used a lot in Mobile Apps and even some websites. It is interesting to see that even the google search page on mobile, has some content in a horizontal scroll:
I am not sure how the Google Console check the webpage, but I believe that having some content in a horizontal scroll is not the problem. But you need to follow some conventions and best practices. The Google Material conventions has some of those intructions in the Gestures section. There is also a really good article about it here.
In summary, I feel like having the whole website in a horizontal scroll, doesn't feel natural for the mobile experience. Having lists, catalogs and other components like that; could be acceptable, but not the whole page.
In case of games or video apps, the horizontal experience is the indicated one, but in those cases, the user will actually rotate the device to use it horizontally.
I would suggest to either:
- Consider updating the design to use swipe components that will make sense, not the whole page
- Consider creating a mobile app
Hope this helps in someway :)
- → OctoberCMS - How to make collapsible list default to active only on non-mobile
- → How to disable assets combining on development in OctoberCMS
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → How to dynamically add class to parent div of focused input field?
- → Expanding search bar not expanding before search
- → Using css modules how do I define a global class
- → Conditional BG Color on AngularJS
- → Divs aren't aware of screen resizing
- → Setting the height of a textarea inside a table
- → How can I get Greasemonkey to highlight visited image links?
- → How to handle onclick event of a button?