Every year people spend more and more time on their mobile devices and tablets, but many websites still aren’t designed to account for different screen sizes and load times. Mobile optimization takes a look at site design, site structure, page speed, and more to make sure you’re not inadvertently turning mobile visitors away.
More and more people get online through their smartphone and tablet these days. So, it is important that we as designers and developers address how our websites are displayed on these devices.
Some Technical point to be considered while designing your Mobile Friendly Website.
Meta Viewport Tag
The meta viewport is an HTML tag for specifying viewport width and controlling page scale. Using this tag, we can set the page zoom when it is first loaded, the maximum zoom allowed for the page, and also disable zoom capability.
Below is an example of how we commonly add meta viewport tag inside the<head>.
| 1 | <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”> |
You can also add it inside your stylesheet this way:
| 123 | @-viewport { width: device-width;} |
The meta viewport tag is an indispensible tag (together with Media Queries) if you are building a responsive website. However, you can technically set viewport meta tag for non-responsive web design all the same.
- Media Queries
Media Queries let you shift the styles of your website at specified break points. Not everything from your website can properly fit on a narrow viewport size of a mobile device.
By using Media Queries, you can add specific style rules for specific viewport width. We can also apply styles based on the screen orientation and the screen pixel density.
You can embed Media Queries either directly in the stylesheet link:
| 1 | <link rel=”stylesheet” media=”screen and (orientation: portrait) and (min-width: 960px), projection” href=”style.css” /> |
Or code it inside the stylesheet, which is the most common way used by developers.
| 123 | @media screen and (max-width: 960px) { /** Style Rules here **/} |
- Modernizr
Modenizr is a JavaScript for browser/device feature detection. Browsers vary and they may or may not support certain features. When building a website for mobile you probably will use new and cutting edge features of CSS3 and HTML5, which unfortunately are not supported in earlier browsers (not everyone uses the latest of browsers).
Modernizr allows you to give fallback of functions and presentation for less capable browsers by adding extra HTML classes in the body tag and a set of method.
- TouchSwipe
TouchSwipe is a jQuery plugin to enable touch interaction for websites (phone or tablet). It supports a set of common gestures like Swipe, Pinch, Zoom and Scroll.
With more devices dropping physical keyboards and enabling the screen for touch, you should consider applying this plugin on your website for a better and richer user experience.
- iOS Icons
The first thing you see after unlocking your iPhone (or iPad) is the app icon. Apart from app icons iOS will also display icons for websites that have been added on the Home Screen.
To do this for your website, simply add the following link element within the<head> tag.
| 123 | <link rel=”apple-touch-icon” href=”touch-icon-iphone.png” /><link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” /><link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone-retina.png” /> |
Alernatively, you may remove those link elements, but ensure that the icons are saved in the root directory, and prefixed with apple-touch-icon-* on its name.
- Splash Screen
Splash Screen is the first image that is displayed when users start an application. The screen tells the users that the app is loading. It is common to use the Splash Screen as an opportunity to show off brand identity.
To add it to your website, simply insert the following lines at the <head>.
| 1 | <link rel=”apple-touch-startup-image” href=”splash-screen.png” /> |
When users open your website through the Home Screen, the image assigned in this link element will be displayed briefly before users see the whole website.
Although using Splash Screen to display brand is actually against the guideline, but as long as the the Splash Image is very well designed and loads briefly, it can gives better user experience and adds a cool factor to your website.
Final Thought
The mobile device revolution has changed the way we, web developers, build websites. And, at least, these elements that we have discussed above should be included in your Web document to make your website turn out well for viewing on mobile platforms, like iOS and Windows 8.
Thanks a lot for sharing!