Why Mobile Responsive is important?

 

▪ Mobile searches have grown four times since 2010.

▪

▪ 79 percent of people prefer reading product reviews on mobile sites versus non-mobile while 63 percent prefer mobile sites for purchasing.

▪

▪ 38 percent of Americans use iPhones while 51 percent use Android phones.

▪ Among tablet and smartphone users, 88 percent use smartphones for online activities. Tablet users commonly browse and research products while smartphone users typically buy products on the go. However, 62 percent of iPad and 56 percent of Android Tablet users spent an average of $250 on consumer products in 2012. This predicts a rising trend in mobile shopping on tablets in the coming years.

Step #1: Create a Mobile Subdomain It is important from an SEO point of view to create a mobile subdomain using your existing website’s domain rather than using a separate one . The link juice earned on your main site is maintained on your mobile site too. Check with your hosting provider as some give free subdomains with your hosting package. For more information read how to make the m subdomain for mobile websites. Your mobile URL must be mobile.yourwebsite.com or m.yourwebsite.com.

Step #2: Add Content to Your Mobile Subdomain Using an FTP software or with the help of your web developer, transfer the contents of your original site to your mobile subdomain. Remove all the XHTML and JavaScript coding as some mobile browsers may only support standard HTML. Remove any flash files on the website as iPhone does not support flash.

Step #3: Detecting the Mobile User Your website must understand whether a user is on a mobile device or not and serve the appropriate version of the website. The following are various methods to detect a mobile user: ▪ ▪ Detectmobilebrowsers.com gives an extensive list of mobile browser detection scripts. You can download a script of your choice from an array of options, such as Apache, PHP, ASP.NET, JavaScript and so on. The only thing you need to change in the script is the redirect URL. ▪ ▪ Check MIME types in your .htaccess file that are accepted by the user’s browser. This code helps detect mobile device users and redirects them to the mobile version of your site. The following is a sample code that can be included in your .htaccess file:

Sample MIME Code

▪ ▪ A mobile user can also be detected with the help of JavaScript. This method is implemented by detecting the screen width since mobile screens are not wider than 800 pixels, so users can easily be redirected to the mobile version of the site. The following is the sample code that needs to be included on each of your web pages:

Sample JavaScript Code

▪ ▪ If your site is on WordPress, you can use built-in features with various WordPress plugins for mobile sites that help detect mobile users, such as, WPTouch and WordPress Mobile Pack. ▪ ▪ If your site is on Drupal, use built-in features in the Drupal plugin for mobiles to detect the mobile user. ▪ ▪ If your site is on Joomla, mobilize your desktop site using MobileJoomla. For more information read how to redirect mobile users on your website.

Step #4: Optimize Your Mobile Website The graphics and content on the main website need to be minimized in the mobile version for enhanced usability and optimized speed. The following are some quick steps to optimize your mobile website: ▪ ▪ Work with a single column layout on the mobile style sheet. ▪ ▪ Increase whitespace. Use 'display: none;' on elements of the site that are of least importance. ▪ ▪ Reduce margins and padding. ▪ ▪ Remove any large background images and use 'display: none;' on any unnecessary content graphics. ▪ ▪ Increase font size and use bullet text. ▪ ▪ Use 30 – 40 pixels for buttons on the site. ▪ ▪ Use drop-down menus and opt-in or opt-out boxes wherever possible. ▪ ▪ To fit the font size on all screen resolutions you must use a Meta Viewport Tag in the < head >, as shown below:

Meta Viewport Tag

▪ ▪ Use top aligned labels on forms, reduce the number of fields and pre-fill areas that can be detected on the phone, such as the location via GPS. ▪ ▪ Place your phone number prominently on the home page and use a click-to-call functionality. ▪ ▪ Place a link to the desktop version of your website on the mobile version, as shown below:

A Prominent Link to the Main Site from the Mobile Version of the Site

▪ ▪ Add vertical scrolling as opposed to horizontal. ▪ ▪ Include your address/store locator on the home page.

Additional Information: You can create a mobile website using third-party sites, such as: ▪ ▪ Mofuse ▪ ▪ Dudamobile ▪ ▪ Wirenode ▪ ▪ OnBile ▪ ▪ mobiSiteGalore You can test your mobile website using the following tools: ▪ ▪ GoMo Test ▪ ▪ MobiReady ▪ ▪ W3CMobileOKChecker ▪ ▪ iPadPeek ▪ ▪ OperaMiniSimulator

Contact us for Website design

at 360digiworld.com

▪

Share on Google Plus