Creating Mobile-Optimized Websites Using WordPress

By: Deepu Balan    |    In: Wordpress       

The latest and the trendy topic of discussion in the web design world are about creating mobile optimized websites. Finally, after enough experiments and trials the secret is revealed so that people can whet their skills and develop mobile friendly websites with no trouble. A mobile optimized website will offer the same smooth surfing experience enjoyed in a desktop computer in a mobile device as well. It is no more a tough task to create a mobile friendly website which will meet handheld design norms and standard, however you need to know the nuts and bolts of web UI development. WordPress is unquestionably become the best CMS system of modern time, it provides better SEO and user friendliness than any other Content Management System. Today, most of the websites are created using a desktop computer or a laptop, its design and layout will be as per desktop standards and it may not look good on a mobile or tablet device through moderately smaller screen size.

This is the most significant factor which has lead to the development of techniques using which you can make your website or blog mobile friendly. You can easily build a beautiful mobile friendly website with all modern features by following few essential steps. In order to achieve this, you would require few plugins which would be virtually performing the tasks in a better way. It is mandatory that the person whoever is designing the website must have some basic HTML / CSS knowledge.

While surfing the internet on your mobile or tablet device you must have come across websites that contains too much of data. These websites gives the readers an unpleasant feel as they have to zoom in and out each time to view new sentences in new lines. To move from one corner of the web page to the other, the readers have to scroll for a long time which frustrates them. Every website is required to be reader friendly so if a reader is wasting his/her valuable time in just scrolling, zooming and performing other crappy stuff then they will leave those websites and shift their focus to the competitor website which is mobile friendly. As the number of mobile internet users is tremendously increasing day by day, people tend to access several websites through their mobile. Therefore you will have to make sure that you are capable of building a website that is mobile friendly which would enable a reader to go through all the content easily.

With the help of some plugins or special themes we can facilitate smooth navigation around the website and provide better user experience, here is a collection of some cool wordpress plugins and themes which will make your job much easier. Among these few are free and few others are paid premium versions.

WPTOUCH


WPtouch automatically converts your WordPress website into a mobile application-like theme, complete with ajax loading articles and effects when it is browsed through most popular mobile web browsing devices such as iPhone, iPod touch, Android, Palm Pre/Pixi and BlackBerry OS6.
The admin panel lets the user customize many aspects of its look and feel, and deliver a fast, user-friendly and stylish version of the actual site to visitors who browse the site through a mobile device. All these things are possible without modifying a single bit of code of your regular desktop theme.

BUDDYPRESS MOBILE


plugin is an essential plugin if the website is operating on Buddy Press. What is the use of this plugin? It provides a guard that none of the website’s functionalities are missed while viewing in mobile. Like other plugin even this consists of options to change color, theme and style.

WORDPRESS MOBILE PACK


Another versatile wordpress plugin is known as WordPress Mobile Pack, as the name implies it is a plugin for creating WordPress friendly websites for mobile users. The WordPress Mobile Pack is a complete toolkit to help mobilize your WordPress site. It has a mobile switcher, themes, widgets, and mobile admin pane. The mobile switcher can be used to select themes based on the type of user that is visiting the site, a selection of mobile themes, extra widgets, device adaptation and a mobile administration panel to allow users to edit the site or write new posts when out and about.

Wapple Architect Mobile Plugin for WordPress


Wapple Architect Mobile Plugin for WordPress is a plugin that allows you to mobilize your blog in minutes.

Every single mobile device is detected and all aspects of your blog are tailored to the visiting handset. Sites aren’t dumbed down to the lowest common denominator but instead use the features and functionality that advanced phones offer. Devices are detected by using Wapple’s advanced web services instead of relying on inferior 3rd party tools. If you view your blog with a brand new, never before seen handset, it’ll still work perfectly! Any theme you’ve installed and have styled for web will be carried across to mobile giving you a consistent look and feel for each and every one of your visitors.

MOBIFY


Mobify is a premium wordpress plugin which extract elements and styles from your desktop site—order, arrange and present them to create a mobile site. It Manage resources, load only essential content, images, scripts and CSS for maximum performance. Works with any CMS or e-commerce backend. Mobify is built with open web standards such as HTML 5, CSS and JavaScript. It runs on Mobify Cloud with tools and services that ensure world class performance and reliability.

Orion Responsive Theme


Orion is a fully responsive theme ideal for design agency website, designer portfolio etc. Orion theme has a light, clear, minimalistic design and complementing typography. The homepage features a jQuery slider for featured posts. Theme supports wordpress 3 features like custom menu, featured thumbnail etc.Theme also comes with a theme option page. There is a widgetized section below the image slider which holds the “Services widget”. This is a custom widget built into the theme to showcase your services on the homepage just like any professional website.

Leon WordPress Theme


Leon is a fully responsive wordpress theme from web2feel. That means the theme adjusts itself to the resolutions of a monitor down to the mobile phone screen. So the theme will have a different layout while viewed on a computer screen, on a tablet or on a mobile browser. This will be adjusted automatically. Thanks to the awesome Skeleton framework . Apart from that the theme is WordPress 3 ready, and has custom menu feature, featured thumbnails, widgetized sidebar and footer, theme option page etc.

GridPhoto


GridPhoto is a fully-responsive HTML5 grid-based theme for photographers and photography lovers. The design is automatically resized based on the width of the screen. This means your photos will look great on all mobile devices, including the Iphone and Ipad. It uses the GPL license so it’s free to modify and share with your friends.

In brief, if you want to make your website or blog mobile friendly then there are four vital methods to follow. Those are… using plugin, using responsive themes that are inbuilt in certain plugin, using separate mobile themes that are available these days or by using the existing theme itself by making them responsive. Among these options you can choose an appropriate one depending upon the requirements, budget and other factors which influences your decisions. Out of the four options most of the users prefer responsive themes that are inbuilt in certain plugin. Considering the various options and limitations you can choose the best solution for building your Mobile-Optimized Websites Using WordPress.

This guest post was written by Debarshi Ghosh Dastidar who is associated with WebCreation US which is one of the best phoenix web designers. To know more about them follow them on twitter @WebCreationUS
Written by Deepu Balan

Deepu Balan is a self-taught web UI designer and developer who is really passionate about web design related stuffs. You can follow his updates on twitter @bdeepu