Optimizing Mobile Navigation: A Smooth UX for Small Screens

Making design responsive means not only certain representations on different screens, but also particular behavior on different devices. Usually on mobile devices mouse is not available, keyboard with navigation keys is out of reach. So we are short of controls to provide a useful navigation.

Let’s take image viewer. User taps a thumbnail and gets an overlay with the image. We don’t have much screen space on the smartphone. So the image goes fullscreen. Well, how is the user supposed to close the overlay? On desktop we would place close button on the frame. Besides, we would use Esc and any click outside the frame. Here on mobile we just have this fullscreen image and no keyboard. If we place “close” button on the image, it will hide a part of image. Let’s add to the list “previous” and “next” buttons, all big enough to tap easily by a finger. So what are we to do?

HTML5 Video on iPhone: Challenges and Solutions

Enabling your videos for iPhone Safari doesn’t seem as a big deal. You know it supports HTML5 . Besides, you don’t even need to write event handlers and produce a skin by yourself, but only take a ready JS component. Apparently videojs.com is getting close to be the most popular one. Though, I personally like mediaelementjs.com. It is very simple to use any of them. The only difficulty is to get your videos converted to h.264, Theora Ogg and WebM. When two last ones are meant for desktop browsers Chrome/Opera/Firefox/EI9, the first is for mobile devices. And here we go, using a converter (e.g. E.M. Video Converter) we are getting .mp4 which looks pretty ok on iPad, but iPhone refuses even to try playing.