We all web Ninja knows the value of USER EXPERIENCE. In
mobile platform it requires a different approach to make a better user experience.
I am listing few points one must remember while making mobile Interface.
- 1 .Responsive Web design
- 2 .The event handing must be touch friendly
- 3. The Forms must be design in a mobile friendly way .
- 4. Use appropriate screen pixel densities of images
1. We all know responsive Design is one which adapts the
layout on the basis of the screen size. It means the user will have the same EXPERIENCE on mobile as on Desktop while
browsing the site.few well known technique for making website responsive are
these.
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
type="text/css" href="main.css" media="screen,
handheld" />
<link rel="stylesheet"
type="text/css" href="fallback.css" media="screen and (min-width: 40.5em)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet"
type="text/css" href="fallback.css" />
<![endif]-->
It means non mobile version and The IE version 9 or less
than 9 will use fallback.css. We all knows IE 9 and lower does not support
media queries. Not only IE some mobile browser like Symbian Browser (Doesn’t exist
though) and BlackBerry older browser also not support the media queries. So Conclusion
of this Part is make web design responsive.If you don’t know learn it.
Use Appcache to make website offline available. Believe me
it increase user experiences
2. Now let’s jump on the second point event handling. Now
days mobile are touch friendly. Apple bought “touch events AP” from ios 2.0 .Android
is also catching up with touch events. W3C also making draft on touch event https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html.
There are single touch and Multi touch Devices in market. Let’s not focus on
multi and single touch devices (It’s another big debate).
So currently there are three basic touch events currently
- touchstart: When a DOM element is touched.
- touchmove: when a touch is dragged over the DOM element.
- touchend: when the touch removed from DOM element.
3. The Forms So one need to handle these events for making website touch
friendly .Few things one must remember while approaching for touch friendly
devices
1 .Disable the zooming : Preventing the user from zooming
will prevent user to scale website.
<meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=no">
2.Prevent the scrolling: Few devices like IOS jumps the viewport when the scroll exceed
the limits.
document.body.addEventListener('touchmove', function(event)
{
event.preventDefault();
}, false);
Now let’s come to Third point make form user friendly. Mobile
have on-screen keyboard and its really frustrating to fill the form with this.
But thanks to HTML5 which came with new semantic input types and validation.
For making form filling mobile friendly on need to follow these two things .
1 .Input Type. There are number of new input type introduced
in HTML which invokes relative on-screen keyboard.
The full list of all input types :
url ,tel ,Email , search, Number ,Color , Range , Datetime ,
datetime-local ,Date, Time , Week ,month
For Example I write < input type=”number” />, the
browser will show a numeric onscreen keyboard. Or I write < input type=”Email”
/> the on screen keyboard will show alpha numeric keyboard with @ and .com
button . So the user will feel it more easy to fill the form
2.Form Validation : Validation of form is very important .It
keeps the data clean and improve the user
experience . There are two approach one can use for form validation
I . Pattern . Pattern
is nothing but a regular expression to validate
<form
action="Myform.asp">
Country code:
<input type="text" name="Your country_code"
pattern="[A-Za-z]{3}" title=" only Three letter country
code">
<input
type="submit">
</form>
The above example will validate the input field and will
allow only 3 character
II. Require : If input field have require attribute the user
must fill the field before submitting the form
<input type="text" required name="Your country_code"
pattern="[A-Za-z]{3}" title=" only Three letter country
code">
III min, max and step: For numeric value specify the minimum
maximum value and for the value will increment in slider
<input type="number" id="myNumber"
min="10" max="50" step="10" />
IV maxlength : The maxlength
attribute for Input type will specify
the maximum allowed length of input character
4.Now days there is very wide range of screen pixel
densities. Some devices have really very very high resolution display. So first
and best suggestion for the optimizing different screen pixels is avoid images as much as you can. Now days there
are SVG CSS3 for getting nice interface. And these works fine across the web
But if it is compulsory to use image you can go for these two approach
1.
Optimize
Single image for multiple platform.
You can use one image and optimize it for different devices. But this will
affect the performance badly. As user will download the Hidpi image in all
browser ,the old browser will render it badly .
2.
Multiple Image approach . Use multiple images
and decide on the browser capacity which to load .We can use following technique
to make the dicision
- 1 . Javascript
- 2 .server side Delivery
- 3. CSS Media Queries
