How To: Make HTML5 games fit for desktop and mobile screens.
When designing your HTML5 game for the mobile market you will always come to the point of deciding if the game should be played on landscape or portrait modes. Of course it depends on the game design and on the gameplay you are creating, which of these 2 modes serves the purpose of enhancing the gameplay better. But when preparing the HTML5 game keep in mind, that there are many users who will play it on a desktop computer.
In many cases developers design the HTML5 game exclusively for the mobile experience and then try to adjust the game for the desktop experience in the easiest way possible. Most of the time this means that the game is shown in portrait proportions on the desktop screen which generally has landscape(more width than height) proportions. This should be avoided in order to provide the end user with the best gaming experience possible.
Lets check 2020 first:
As you can see by navigating to the page, this game is meant to be played in portrait mode when used from a mobile devices, and it does this without any problems and handles rotation correctly, informing the user to rotate back to portrait if he’s playing on landscape. Now play the game in a desktop screen. What do you see? Clearly the game is perfectly playable on desktop, but the developer has not made any efforts to adjust the images to desktop screens, other than allowing the game to re-size to the screen. The user has the portrait canvas of the game, and so both sides of the desktop screen are empty, literally blank. The developer could have thought about this and use the blank space it to increase the user experience.
Now lets check the game Ship the Sheep:
When you play the game on mobile you see that it is planned for the portrait mode also and it does it rather well, also indicating the user to go back to the portrait mode with an image, if the user holds the mobile on landscape orientation. Now play the game on a desktop screen. See the difference? In this case the developer took into account that the users also should have a great desktop experience. The game uses the screen to the fullest so that no spaces are left blank. Moreover the elements have all reordered accordingly and nothing seems stretched and the layout is not broken. Both the desktop & mobile experience use the advantages of each system to enhance gameplay and none is above the other. This way it is even hard to say, if the game was designed with landscape or portrait in mind.
This is the point we want to make, please remember that your user will be playing your games on more than one platform and and design the HTML5 games canvas and layout to adjust to this in order to provide the best gaming experience possible.