With time the technology used to create websites has changed and same has happened to the way people access the web. Nowadays, millions of web users rely on their mobile phones to access the web and perform nearly every online activity including shopping. While accessing websites made for computers is possible using Smart phones, issues like browser version compatibility, resolution mismatch and other issues can mar the experience to a large extent. Therefore, it is prudent that web designers master the method to optimize websites to render pearly in a variety of mobile devices.
Media Queries
With Media Queries you can shift styles of a website at certain break points. It is only natural that everything in web page will not fit perfectly within viewport size of a smart phone, even if it has a big screen. It also lets designers apply styles according to screen pixel density and screen orientation.
Meta view port Tag
It is a useful HTML tag that is used to control page scale and viewport specification. With it, it is possible to set page zoom level at the time of loading. It is also possible to disable zooming altogether and setting maximum permissible zoom limit using this tag. This tag should be used to make websites responsive.
TouchSwipe
It is a useful jQuery plug-in that is used to enable a mobile device’s touch interaction. This plug-in offers support for most widely used touch gestures like Scroll, zoom and pinch. As it is, a majority of smart phones and tablets are being shipped without physical keypad and controls and using this plug-in can prove to be helpful for users of such devices.
Modernizr
Modenizr is a function used for browser and device feature detection. Needless to say, mobile web browsers can be of various types including Safari, Android, and Chrome etc. Some browsers may not support certain features used in a website. While modern mobile browsers support HTML5 and CSS3 specifications, that may not be the case with older mobile users. With Modernizr you can set specifications for less capable browsers when it comes to displaying websites made with latest coding and scripting.
Avoiding Java and Flash
Using java and Flash can surely be beneficial for visual aspect of a site. However, remember the fact that majority of mobile users will face difficulty in seeing sites made with flash as Apple does not officially support the standard. Using Java can also add to site load time especially for users who do not have access to LTE and 3G networks.
Reduction of text entry
While web users make a purchase or want to find an information, they want to get their task competed fast. It is better if your mobile centric website has less text fields to be filled up. You can do so by using drop down menus and checkboxes.
Semantic Markup
Whether you are designing websites for mainstream computer users or mobile devices users, semantic markup is advisable. It helps in enhance SEO friendliness of a site while making it easily renderable in mobile devices.
Tweaking site Layout and Content
To make sure a website gets rendered in various web browsers seamlessly, use % widths that can adjust to browser settings easily. You may also discard unnecessary content and images for mobile sites to speed up loading and rendering time. Designers can specify low resolution images in style sheets for mobile websites.
Conclusion
There are various tools and plug-ins available to make websites optimized for mobile devices. However, designers need to focus on aspects like layout, simplicity and intuitiveness to create websites that meet user needs without hiccup.
Evans is a web designer and he is currently associated with Webarts.com.cy that offers Web Development services in Cyprus.