Suggest Users Rotate Their Mobile Device 90º For Better UX

suggest 90 degree rotation better ux ui

I was forging ahead with the responsive css breakpoints on my site to insure better UX (User Experience) and realized that the UI (User Interface) was not at all optimal in landscape view on mobile devices with a viewport of 400 pixels high (in landscape view).

The idea came to me to suggest, not impose the user rotate the device 90º so that the viewport is actually in portrait mode. I’m doing this (you can actually test it on your mobile device) by filling the screen with a dark translucent background and a very simple graphic and short title suggesting this rotation for a better UX. It’s not very invasive and a simple tap on the screen will make the background disappear.

Here is how I did it.

The CSS (SCSS) only triggers on mobile devices


@media only screen and (min-width: 751px) and (orientation: landscape) {
    #rotate {
	    display: none !important;
    }
}
@media all and (orientation: portrait) {
    #rotate {
	    display: none !important;
    }
}
@media only screen and (max-width: 750px) and (orientation: landscape) {
    #rotate {
         position: fixed;
         z-index: 5000;
         width: 100% !important;
         height: 100% !important;
         text-align: center;
         background:$black8 !important;
    }
    #rotate p {
         font: 22px/24px 'Roboto Slab 300';
         color:$blue;
         left:50%;
         //margin-left:-95px;
         margin-top:15%;
         img {
	         width: 150px;
	         height: auto;
         }
         span {
	         color:#cccccc;
	         font:  14px/16px 'Roboto Slab 300';
	         font-style: italic;
         }
    }
}

Jquery


jQuery('#rotate').click(function(){
	jQuery('#rotate').fadeOut('slow');
});

HTML


<div id="rotate">
	<p>
		<img src="/wp-content/uploads/2016/12/rotate-device.png" alt="rotate device" /><br />
		Rotate 90˚<br />for an optimized experience.<br />
		<span>Tap to continue...</span>
	</p>
</div>

Leave a Reply

Your email address will not be published.

Views: 229