Mobile website can lower your bounce rate and increase conversions

Mobile phones or more appropriately smartphones have become an integral part of our lives but now they are creating an impact on your website conversion and bounce rate as well. People now use their smartphones to browse websites online and this trend is increasing very rapidly especially in Asia and Africa. In the words of my boss

Every man may not have a computer but nearly every man has a mobile phone

Due to this, website owners may have to revisit the design of their websites and check their websites on mobile website simulators available online to see how their websites look on a smartphone device. I use following simulators to check how websites I develop look on smartphones.

http://mobile-website-simulator.com/

http://transmog.net

http://iphone4simulator.com/

If you see that your website is not loading properly or you are having trouble finding your way on the website then it’s time you ask your web designer to design a mobile friendly version of your website which loads quickly on smartphones. If your visitors cannot find what they are looking for quickly believe me they will not wait another second and close their browser or worse visit another website (maybe your competitor). This in turn will increase the bounce rate of your website which is an indicator of how meaningful your website is to the visitor. Remember,

The higher the bounce rate the lesser the conversions.

You have two options for designing your mobile website.

  1. Responsive design
    Responsive as the name suggests makes use of CSS media queries to render your webs page according to the device the visitor is using to browse your website. This means that your website will appear different on a mobile phone and tablet than on a desktop. The best thing about this option is that the URL of your website will be same. As an example check out my website on one of the above mentiond simulators and you will see what I mean. Google also strongly recommends that website owners use responsive design on their websites for better results.
  2. Design a separate mobile website
    The first option is usually the best option however in cases where the website is huge or there is not enough time/resources or you don’t have the budget for a responsive design you can go and have a separate mobile website designed for yourself. There are only 2 issues with this option.

    • Your mobile website will need to be run on a separate URL (sub-domain or some other address). Most people run their website on http://m.yourwebsite.com but this is not mandatory and you can use any address for this purpose.
    • You need to check whether the visitor is browsing on a desktop or a mobile phone/tablet and redirect the visitor appropriately to the correct website so if a visitor is on a mobile phone then you need to redirect him to the mobile website.

Just to show how much an impact a mobile website can make in lowering your bounce rate check the graphic below. I implemented a mobile website for my client based in the UK. As you can see the bounce rate for mobile phones and tablets has gone down by 39% and 24% respectively.

mobile_website_lowers_bounce_rate
UPDATE Dec 2013:

The bounce rate has gone down further and now the bounce rate is 20% for mobile phones and 22% for tablets which is less than half of what was originally and the overall goal completions have risen by 35%

Tutorial to create custom Magento module

I could not find one good tutorial on developing a custom module in Magento when I had a client requirement to develop one for his website. It was not like there weren’t any. If you Google “custom Magento module tutorial” or something similar you will get a lot of search results however I received a lot of errors when I tried using them in my case. Either they were not tested or they were not supposed to work in that way but I am not complaining as it helped me to learn more about Magento and custom module development in Magento.

Follow the steps below to create your first custom Magento module. This module will display entries from a database table and display it in the Magento admin panel. I have tested this module on Magento community versions 1.6.2 and 1.7.0 and it is working on both of them.

Run the following SQL statement in your mySQL database.

CREATE TABLE `sarfraz` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(100) DEFAULT NULL,
  `cus_email` varchar(100) DEFAULT NULL,
  `telephone` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

After running the above statement it should create a table by the name of “sarfraz” in your database. Now run the following insert SQL statements to create records in the table.

insert into `sarfraz` (`id`,`first_name`,`cus_email`,`telephone`) values (1,'Adam Sandler','[email protected]','1234567890');
insert into `sarfraz` (`id`,`first_name`,`cus_email`,`telephone`) values (2,'Joe Burton','[email protected]','5556667777');
insert into `sarfraz` (`id`,`first_name`,`cus_email`,`telephone`) values (3,'Alice Keys','[email protected]','66677788888');

Our table now has some entries so we can now proceed with the actual coding related changes.

First create your XML file in the app/etc/modules folder. In this tutotial my XML file is named as Adeel_Sarfraz.xml however you are free to choose what ever name is right for you.

<?xml version="1.0"?>
<config>
    <modules>
        <Adeel_Sarfraz>
            <active>true</active>
            <codePool>local</codePool>
            <version>1.0.0</version>
        </Adeel_Sarfraz>
    </modules>
</config>

The above code will register your module in Magento. Now we put in the actual code for the module.

Go to app/code/local folder and create a new folder by the name of “Adeel” and then create another folder within it by the name of “Sarfraz”.

Now create 5 folders in the app/etc/local/Adeel/Sarfraz folder.

1. Block
2. controllers
3. etc
4. Helper
5. Model

We will start now by creating a config.xml file in the etc folder. Once you have created it you can add the following code to the config.xml file.

<?xml version="1.0"?>
<config>

    <modules>
        <Adeel_Sarfraz>
            <version>1.0.0</version>
        </Adeel_Sarfraz>
    </modules>
	
	<global>
	
		<helpers>
			<sarfraz>
				<class>Adeel_Sarfraz_Helper</class>
			</sarfraz>
		</helpers>

        <models>
            <sarfraz>
                <class>Adeel_Sarfraz_Model</class>
                <resourceModel>sarfraz_mysql4</resourceModel>
            </sarfraz>
            <sarfraz_mysql4>
                <class>Adeel_Sarfraz_Model_Mysql4</class>
                <entities>
                    <sarfraz>
                        <table>sarfraz</table>
                    </sarfraz>
                </entities>
            </sarfraz_mysql4>
        </models>		
		
		<blocks>
			<sarfraz>
				<class>Adeel_Sarfraz_Block</class>
			</sarfraz>
		</blocks>		
	
	</global>	
	
    <admin>
        <routers>
            <asarfraz>
                <use>admin</use>
                <args>
                    <module>Adeel_Sarfraz</module>
                    <frontName>asarfraz</frontName>
                </args>
            </asarfraz>
        </routers>
    </admin>
	
    <adminhtml>
        <menu>
            <customer>
                <children>
                    <list translate="title" module="sarfraz">
                        <title>Admin Title</title>
                        <sort_order>11</sort_order>
			<action>asarfraz/controller_list/index</action>
                    </list>
                </children>
            </customer>
        </menu>
    </adminhtml>
	
</config>

1. Now add the following folders and files in the Block folder.

Adminhtml
Adminhtml/Items
Adminhtml/Items.php
Adminhtml/Items/Grid.php

Open the Block/Adminhtml/Items.php and add the following PHP code to it.

<?php
class Adeel_Sarfraz_Block_Adminhtml_Items extends Mage_Adminhtml_Block_Widget_Grid_Container
{
    public function __construct()
    {
        $this->_controller = 'adminhtml_items';
        $this->_blockGroup = 'sarfraz';		
        $this->_headerText = Mage::helper('sarfraz')->__('Admin Title');
        parent::__construct();				
        $this->_removeButton('add');		
    }
}

Next open the Block/Adminhtml/Items/Grid.php and add the following PHP code to it.

<?php
class Adeel_Sarfraz_Block_Adminhtml_Items_Grid extends Mage_Adminhtml_Block_Widget_Grid
{	
    public function __construct()
    {
		
        parent::__construct();
        $this->setId('itemsGrid');
        $this->setDefaultSort('id');
		$this->setDefaultDir('DESC');		
    }
 
    protected function _prepareCollection()
    {
        $collection = Mage::getModel('sarfraz/sarfraz')->getCollection();
        $this->setCollection($collection);
        return parent::_prepareCollection();
    }
 
    protected function _prepareColumns()
    {
        $this->addColumn('id', array(
            'header' => Mage::helper('sarfraz')->__('ID'),
            'sortable' => true,
            'width' => '60',
            'index' => 'id'
        ));
 
        $this->addColumn('first_name', array(
            'header' => Mage::helper('sarfraz')->__('Full Name'),
            'sortable' => true,
            'width' => '60',
            'index' => 'first_name',
            'type'  => 'text'
        ));
 
        $this->addColumn('cus_email', array(
            'header' => Mage::helper('sarfraz')->__('Email Address'),
            'sortable' => true,
            'width' => '60',
            'index' => 'cus_email',
            'type'  => 'text'
        ));

		$this->addColumn('telephone', array(
            'header' => Mage::helper('sarfraz')->__('Answer'),
            'sortable' => true,
            'width' => '60',
            'index' => 'cus_telephone',
            'type'  => 'text'
        ));				

		return parent::_prepareColumns();
    }
 
}

2. Add the following folder and file to the controllers folder

Controller
Controller/ListController.php

Open the controllers/Controller/ListController.php file and add the following PHP code

<?php
class Adeel_Sarfraz_Controller_ListController extends Mage_Adminhtml_Controller_Action
{
    public function indexAction()
    { 
        $this->loadLayout()->_setActiveMenu('customers');
        $myblock = $this->_addContent($this->getLayout()->createBlock('sarfraz/adminhtml_items'));
        $this->renderLayout($myblock);
    }
}

3. Create the following file in the Helper folder.

Data.php

Add the following PHP code to Data.php file

<?php
class Adeel_Sarfraz_Helper_Data extends Mage_Core_Helper_Abstract
{

}

4. Add the following files and folders to the Model folder

Mysql4
Sarfraz.php
Mysql4/Sarfraz
Mysql4/Sarfraz.php
Mysql4/Sarfraz/Collection.php

Open the Model/Sarfraz.php file and add the following code

<?php
class Adeel_Sarfraz_Model_Sarfraz extends Mage_Core_Model_Abstract
{
    public function _construct()
    {
       parent::_construct();
       $this->_init('sarfraz/sarfraz');
    }
}

Then open the Model/Mysql4/Sarfraz.php file and add the following code

<?php
class Adeel_Sarfraz_Model_Mysql4_Sarfraz extends Mage_Core_Model_Mysql4_Abstract
{
    public function _construct()
    {   
        $this->_init('sarfraz/sarfraz', 'id');
    }
}

Finally open the Model/Mysql4/Sarfraz/Collection.php and add the code below

<?php
class Adeel_Sarfraz_Model_Mysql4_Sarfraz_Collection extends Mage_Core_Model_Mysql4_Collection_Abstract
{
    public function _construct()
    {
	parent::_construct();
        $this->_init('sarfraz/sarfraz');
    }
}

After adding the code changes above please clear the Magento cache and your module should come up under the customers menu by the name of “Admin Title”. If it does’t then logout and relogin into the Magento admin panel. You can change the “Admin Title” to some thing more meaningful by editing the etc/config.xml file.

If the above is too much time consuming for you then you can contact me and I will provide you the files in zip format.

If you have any feedback then please share by commenting.

Should I outsource my website to a freelancer or to a local company

A million dollar question no doubt but you should know the answer or at least have some idea after reading below. If you answer them according to your website requirements then you can quickly arrive at what’s best for you and your website.

What is the nature of your website?

If you website is of a sensitive nature and you believe that you cannot take chances with respect to the code or the data then you should not outsource the project to a freelancer. The local company would be your best choice in this regard. The local company would be easily available and they would abide by the laws of your country as they would be based in the same country as you. As the freelancer would be based in a remote location and not a resident of your country he is not bound by the laws of your country so if any thing goes wrong you can’t do anything. The freelancer would be the best option for your website project if it is not of sensitive nature.

Do you have the budget?

The amount you have to invest on your website also dictates whether the website is to be given to a freelancer or not. If you are one of those clients who have a lot of money to invest then you can hire a local company at $60/hour or more and your budget can easily go over thousands of dollars. For example local companies may charge over $5000 for a small to medium e-commerce website. If the same website was to be designed and developed by a freelancer then the total cost may not go above $500 (depending upon the freelancer) so you can see the price difference and the savings that can be had. If you have a limited budget then the freelancer should be your best bet.

Looking for reliability?

Suppose you have outsourced your project and you want to know what is the progress. What would be suitable for you? Call your local company on their land line phone and talk to them about your project so you can see how much work has been done and what is left or email/Skype chat with your freelancer to see what has been done up till now. Again it depends on the nature of your website. If you are one of those control freaks (meant in a nice way :)) then you would most probably want to outsource your website to a local company where you could go and sit through a presentation to know what is happening with your website. However freelancers nowadays are available on phone, Skype, Google chat etc. Freelancers have even purchased local land line numbers and when you call those numbers you will be routed to their number. This is the day and age of the smart phone where you can call anyone located anywhere in the world at any time.

Are they available?

Freelancers are generally available 7 days a week where as local companies enjoy the same number of gazetted holidays which are available in your country. Moreover they will only be available during the 9-5 time and not before or after that where as you can contact freelancers at any time (except for night time of course). Do check where your freelancer is located and what are his work timings so you know when to contact him.

Hopefully the aforementioned points would help you to know who you should outsource your website. Comments?

Script to check for malware on your website

After seeing a couple of websites getting infected by malware I decided on creating a script  which would inform the owner and the concerned technical staff at the slightest change in the website file system structure.

The script does the following

1. Detects change in any script/file.
2. Notifies when a new script/file is added.
3. Creates a zip backup of the website so you can restore your website at any time.
4. Displays source of the script/file.

Following snap shot displays the file path, modified date/time and the row is highlighted if the modified date/time is less than 1 day.

File Scan Results

Following snap shot displays the source code for each file so that you know if any modifications have been made or not to the file.

File Scan Source

I have tested this script on both Linux and Windows and it has not given any issues. I have ran this on Zen Cart, WordPress, custom PHP websites and the results are promising. This should work equally well on other installations so if you would like access to this script then please let me know.

Why having a postcode lookup on your e-commerce website is a smart idea

If you are a store owner living in the UK and if you are not using postcode lookup on your website then it’s time you seriously considered it.

Why?

Postcode lookup will help your customers to complete their checkout process much quickly than writing their address details on your website. If you consider your registration form at the moment it will be most probably be like the following.

Standard e-commerce website registration form without postcode lookup

If you minus the email address, password, first name and last name fields then there are still 5-6 fields which your customer will need to enter to complete the registration.

Hey! Its just 5 fields. What harm will that do?

It may not do that much for an unsuspecting customer but these days customers are quite intelligent and they compare a lot of websites before placing an order on your website. Unless you are a huge brand name that people can’t think to live without you should try to make life as much easier as possible for your customers because that will help your website with more conversions and orders. People usually send out gifts to their loved ones and friends via websites and they can lookup their whole address if they just know the postcode.

What about the costs involved?

It would seem like that there would be huge costs in going this route but if you do a search for postcode lookup on Google UK and check the costs involved it would come down to some where around 1 pence – 1.35 pence for one lookup. Not only that, there are several other payment options available offered by these websites which would help you to put this up on your website and start using it from the word go.

How will this look on my website?

It’s upto you really on how you want  it to look on your website. You could get in touch with your web developer  and talk it over with him and give him your ideas. Standard look and feel for this type of lookup would be as follows.

Step 1: Customers sees a form asking him to enter the postcode

E-commerce website registration with post code lookup - Step 1

Step 2: Customer enters his postcode and the system searches for addresses on that postcode

E-commerce website registration form with postcode lookup - Step 2

Step 3: Customer selects an address from the list of addresses which is his desired address.

snap_shot_with_uk_postcode_search_3

And that’s it.

The customer needed to enter the postcode and with 2 clicks he was able to pre-fill his address thus saving his time and giving you a chance to convert one more prospective to a sale.

If you have any comments/questions then please do let me know.

How to customize your Zend Form fields to appear in columns

I received a requirement to change the form layout on a web page. I was not using any decorators on the form so the form was coming up in default format generated by Zend Form.

This is the page which displays the form when some one clicks on Edit

Once you click on Edit the form appears like so

Zend Form default layout without decorators

I had to show the fields in 4 columns so that the layout remains consistent with what was shown to the member before clicking on the Edit link.

I opened the form file (in application/forms directory) and added the following code to the file at the bottom after all the elements had been added to the form.

$this->addDisplayGroups(array(
			'left_fields' => array(
			'elements' => array($email, $firstname, $lastname, $company, $address1, $address2),
			),
		        'right_fields' => array(
			'elements' => array($city, $state, $postcode, $country, $phonenumber),
			),
			'bottom_field' => array(
			'elements' => array($cancel, $submit),
			)
		));		

$this->setDisplayGroupDecorators(array('Description', 'FormElements', 'Fieldset'));

I used the Zend Form addDisplayGroups method to group the fields in three separate groups (left_fields, right_fields, bottom_field) so that Zend Form generates the HTML fieldset element which encloses the form elements.

After adding the above code and running the script you will find no difference except when you do a View Source of the page you will see that 3 HTML fieldsset elements have been generated. Now you can tweak your CSS to align the form elements as you want.

I added the following code in the CSS file.

form fieldset#fieldset-left_fields, form fieldset#fieldset-right_fields
{
    float: left;
    width: 50%;
    border: none;
}

Now when I ran the script I got the desired results and the form fields were formatted in the layout I wanted.

This is how the page looked after adding the above code.

Zend Form new layout using decorators

Hope the above helped!

Why is Google not displaying the correct title of my web page on its search results?

Some times Google does not display the right title of the web page in its search listings. It does not mean that Google has not indexed your website. If you look at the Google cache of your web page you will see that it has indexed the page with the correct title.

This usually happens when Google feels that the page title is not descriptive enough of the content being presented on the web page. It also takes information from Dmoz however this depends whether your website is listed there or not. If it is listed on Dmoz then please add the following tag in the <head> section of your web page.

<meta name=”robots” content=”NOODP”>

This will tell Googlebot and other robots to ignore content from Dmoz and only use the title of the web page for display in it’s search listings.

You can read more on this on Google Site title and description

Hope the above helped!

How to use Google Analytics Event Tracking to track your clicks and impressions

Most directory and listing websites on the internet need to record how many times their listings have been viewed by visitors and how many have clicked on them. Not only that they need to discount the impressions and clicks of search engine crawlers and spam bots from the actual data so that their data is correct and they have a clear picture of the ROI they are generating.

The most obvious way would be to record all this information into the database however this would not be ideal in the following cases

1. If the same visitor refreshes the listing page several times the data would not be accurate as the code would run each time the page is refreshed.
2. The database size could grow at an exponential rate and even if it’s manageable the amount of redundant data would not help in identifying correct ROI.
3. Members and investors of the website would not get the complete picture and this may increase frustration levels.

Enter Google Analytics!

Google Analytics to the rescue
Google Analytics to the rescue

Google Analytics provides a feature called Event Tracking which helps website owners to record information such as impressions and clicks very easily. You just need to add a one line JavaScript code and you are in business.

For e.g. if you are trying to record impressions on a business listing page you could put in the following code.

_gaq.push([‘_trackEvent’, ‘Business’, ‘Listing’, ‘Business Name here’]);

If you are trying to record the number of clicks for that business you can add the following line to your anchor tag (<a>)

_gaq.push([‘_trackEvent’, ‘Business’, ‘Click’, ‘Business Name here’]);

If you would like to know how you want to place this line in your anchor tag then please see below

<a href=”javascript:;” onclick=”javascript:_gaq.push([‘_trackEvent’, ‘Business’, ‘Click’, ‘Business Name here’]);”>Business Name</a>

The best part is that Google discounts redundant clicks and impressions as well as search engine crawlers and spam bots from its data so you can have the accurate picture.

Hope the above helped!

How to remove malware code from your website in easy steps

From my experience, malware is the most dangerous thing to happen on your website as it does not take down your website like hackers do when they deface your website to prove their point. Malware is code placed on your website which may do any of the following:

1. Send out massive amount of spam emails from your website.
2. Send out phishing emails to unsuspecting customers and plant their code on your website to get any important financial details.
3. Download scripts/files to unsuspecting customers via their browsers.

As you can see from above malware code is used to get access to a large number of visitors so they can then propagate their infestation to other computers.

This can also affect your website rankings on search engines as they block such websites and warn visitors on their search listing results page as well. See example below of one such website which got infected with malware and how Google alerts visitors about this.

Malware Alert on Google Search Results
Malware Alert on Google Search Results

If you try to click on the link of the website and try to browse to it you may get this message on your browser if you are using Firefox/Chrome.

Reported Attack Page as shown on Firefox
Reported Attack Page as shown on Firefox

Now how do you clean your website from malware code?

Please follow the steps below to remove malware from your website. I followed these steps while cleaning malware on some websites and 80%-90% of infected websites can be cleaned by using them. However, there could be some difference on some websites and if there is please do let me know so I can update them here.

1. First thing you should do is to contact your hosting provider and check for the last backup of your website. There may be a chance that the backup copy is clean and not affected by the malware. If the backup copy is clean then you can restore the backup and get the website up and running in the shortest time possible. If not then you will need to go through the following steps and gear yourself to put in the next couple of hours on cleaning your website.

2. Next step is to download the website to your local development server. This is a necessary but time consuming step as you don’t know the extent of the malware on your website. Some times it could only be in one file and some times the whole website may have been infected.

3. After downloading the files try and open them. If you are unable to open them or you get a “Access Denied” popup then change the extension of your script to (.txt).

4. Open the file and search for anything that is out of the ordinary in the file. If you see some type of jibberish code in the file then you can be assured that the file has been infected with malware. If your website has been developed in PHP then you should start by checking for “base64_decode”, “eval” and “iframe”.

5. After removing the malware from the file continue this process in other files as well. Be sure to remove it from all files as the malware replicates itself very quickly. You can write a simple script which can scan all files and then remove the code from all files in all directories.

6. When you have finally completed removing the malware from all the files you now need to look for the actual script which may have caused the injection in the first place. Start looking for it in your images, css, javascript folders. You will be sure to find very oddly named scripts in those folders and you need to delete them. You should remember to restrict execution of server side scripts in these folders. If you are on a Linux based hosting then you can just copy an .htaccess file to that folder with the necessary restrictions.

7. After doing all the above you can request Google to do a review of your website in your Google Webmaster panel. You should also submit your website for review at Stop Badware.

Check this link out on Google to see how you can prevent malware in the first place

Hope the above helped!