Amfas Tech | Technology, Blogging & Internet Marketing: Web Design

How to Check Where Visitors Click on the Page on Your Blog?

The spectacular design of your blog and the easy navigability might have made you think that visitors are going to engage on particular parts of the page mainly. Are you sure that your visitors are engaging on the same appealing parts of the page as you are thinking they are?

Why should you know where on the page your visitors are engaging more?

heat-map-webpage
There is are many benefits of knowing the user engagement on our webpages. It doesn't matter how attractive is your content is and how beautiful is your webpage. There would certain things on the page that would be dragging their attention most of the time. These things, upon optimization would double your profits than before.

Because people don’t read your article alone – I agree the fact that the content is king of your blog but believe me no king is safe unless he was put in some kind of fair protective palace surrounded by the powerful army and guiding intelligence.

If content is the king, the powerful army is the design of your blog and guiding intelligence is the SEO. So there are some other things that are to be taken care of beyond the scope of the content. Content is not the only thing that impresses your visitors.

What about ads that you put on your blog pages? – I think you got a bit closer to my point when I said ‘ads’. How many people do you think are clicking on your ad units displayed on your blog? Don’t tell me you are following up the statistical information of your publisher control panel. They just show you ‘after-math’. All the information you will find is there is the data collected after visitor clicked on them.

How many are actually clicking on them? Are they even seeing them exist on the page? The place to put the ads in right place, what we call the optimization is what going to help you increase your revenue though increased CTR which can be known by knowing where your visitors are engaging on the page mostly.

How to check where visitors click?

There available many good services offered by various companies on the internet. The visitor tracking features and the plan prices might change from one to another.

Here are some visitor heatmap services available on the internet. Sign up for a free account to test the service and upgrade to a commercial plan if your are comfortable with its results.

LightedPages.com – You can see track their visitors mouse pointer on their webpages precisely. Heatmap view allows you to see where people are clicking, hovering, focusing and scrolling their mouse on the page.

HeatMap.me – They allows to create free account for bloggers for life time with limited features. To get full features, you have to sign up to a commercial plan.

ClickTale.com – You can track your visitor’s footprints on your page along with a feature that collects data regarding the visitors attention on the page.

CrazyEgg.com – You can check your site’s demo heatmap stats right on their homepage. Tracking down the most famous elements on the webpage is their highlighting feature. You can sign up for a free trail and test their service anytime.

GemiusHeatmap(heatmap.gemius.com) Gemius heatmap outsmarts other heatmap services in features. You can have full control over the click map and charts for every link is maintained separately.

Inspectlet.com – You can also get a free sign up for ever with limited features. This service provides playback sessions to see visitors in action recorded.

and lot more.

Go sign up for a service today and convert your visitors into active leads.
Continue Reading

Don’t Make the Same 3 Mistakes Many Other Websites Owners are Doing

After web designing started determining the value of the business, the necessity to make them render properly on different devices have peaked up. Google also makes some recommendations over this issue to help webmasters optimize their websites for better performance.

 

Though there comes any number of recommendations from any liable resources, many website owners are unable to rectify the following 3 design issues on their business websites. I don’t want you repeat the same mistakes and simply ignore them with the world.

ecommerce-errores

1. Pages that load slowly and show up suddenly after sometime

The point in creating a website is to get the visitor’s attention on their products and services there by allowing them to convert into an active customer.

 

If a website won’t load in 2 damn seconds, you can’t get a customer nor even a visitor. It is found that an average visitor could barely wait for 5 seconds to let the webpage load. Forget about some stranger visitor, would you stay on a page that loads forever?

 

Solution: Unused CSS, JavaScript and third party scripts can block the page from rendering. Remove the unused code and compress the possible CSS to make the webpage load faster.

 

Optimize your webpage for mobile to load faster on small devices. You can also refer the following helpful articles for optimizing webpages fro mobile:

2. Pages with out numbered call-to-action elements

Call-to-action pages are where you get your visitors get converted. Placing call-to-action buttons in the bottom of the webpage can’t help you grow your business. Remember that you no need to use the same technique everyone else is using.

 

Solution: Place call-to-action buttons on the upfold of the page so that it will appear first to the visitor and therefore doesn’t looses him from converting into a customer.

 

3. Pages in which a popup blocks the main page before it finishes rendering.

This is one of the most annoying things a visitor hates to see on a webpage in its first few seconds of loading. Popups may get you tons of social media followers and email subscribers as they serves blocking entire content page with only a subscription button highlighted and rest out-focused, but it can’t get you loyal customers visitors to the site.

 

Solution: Forget about one-time,weekly once and monthly popups on your website. If your site is really cool, visitors would rush to search for subscription links themselves.

 

I wish you don’t make these mistakes on your website(s) and rectify them if you are still practicing. Help visitors get proper access to the beautiful content you have created.

 

Share your thoughts or suggestions in comments below. Thank you!

Continue Reading

Download Call-To-Action Buttons Package for Websites

Here are the list of call-to-action buttons for websites which sell products or services and offers free downloads to their visitors, customers and clients. It is necessary that the call-to-action buttons are to be attractive and design friendly while be shown on the page.

 

call-to-action-buttons

 

Click on the image to download the complete call-to-action web images package in .rar format.

Continue Reading

25 Google Recommended Principles of Mobile Web Design

It is necessary to have a neat and effective responsive design for your website to convert visitors into customers. Google, partnering with AnswersLab have conducted a research on certain range of users with diversified number of mobile sites and yielded 25 principles of mobile site design to help companies build sites that delight customers and drive conversions.

 

The increase in the rely of consumers on mobile web for research and discovery make it important to companies take it the seriously about mobile design. So how to make a good mobile site that can convert visitors into customers?

 

Let’s take a look at the following 25 Google recommended principles of mobile site design and see how they are going to help our businesses in making conversions.

 

principles-of-mobile-site-design-by-google-1-638

 

Regarding Homepage and Site Navigation

A home is what that attracts the visitor in it first load itself. A homepage on the desktop serves as a welcome page, message center and all-in-one promotional space where as the homepage on mobile screen should display the content the visitor is looking for. Any extra elements on the page would not only take time to load but also looks clumsy.

 

Google recommends some principles to be kept in mind while designing a homepage for mobile site. They are as follows:

 

1. Keep calls-to-action front in center.

2. Keep menus short and sweet.

3. Make it easy to get back to the homepage.

4. Don’t let promotions steal the show.

 

Regarding Site Search

An internal site search engine is necessary for a website either on mobile design. It helps visitors find content by simple entering a keyword in it.

 

Google offers some tips to make site search more valuable to your mobile site. They are as follows:

 

5. Make site search visible.

6. Ensure site search results are relevant.

7. Implement filters to improve site search usability.

8. Guide users to better site search results.

 

Regarding Commerce & Conversions

The customer behavior on the site is still a mystery. Users are expecting to convert on their own terms. In this regard, Google provides 5 principles to let know of how to drive conversions by controlling your visitor on the site. Here they are:

 

9. Let users explore before they commit.

10. Let users purchase as a guest.

11. Use existing information to maximize convenience.

12. Use click-to-call buttons for complex tasks.

13. Make it easy to finish converting on another device.

 

Regarding Form Entry

Whether it may me a purchase, getting a quote or joining an email list, the conversion experience must be simple and as less complex as it can be.

 

Google makes some suggestions to reduce the fiction at the finish line through streamlined form entry. They are as follows:

 

14. Streamline information entry.

15. Choose a simplest input method for each task.

16. Provide a visual calendar while selecting dates.

17. Minimize form errors by labeling and real-time validation.

18. Design efficient forms.

 

Usability and Form Factor

Mobile users would feel it comfortable and delighted with the things like friendly user interface and easy navigability of your website.

 

Google recommends some design form factors that makes visitors happy while browsing the site on mobile. They are as follows:

 

19. Optimize your entire site for mobile.

20. Don’t make users pinch-to-zoom.

21. Make product images expandable.

22. Tell users which screen orientation works best.

23. Keep your browser in a single browser window.

24. Avoid “Full Site” labeling.

25. Be clear why you need a user’s location.

 

Thanks to +Google for providing such a wonderful check list for designing a mobile site for companies.

 

Don’t you find it useful? Is it a fin check list? what do you think? share your thoughts in comments.

Continue Reading

Guidelines to Make your Site Responsive

A responsive website is that which renders the elements on the page with respective to the screen resolution. Making a responsive design is easy though, but needed to taken care of. Let’s see what are the elements that are to be taken care of while designing a responsive design.

Websites or blogs have layouts. Any layout of a website or blog contains a Header, Content, Sidebar and Footer in general. All these sections of the layout are placed in a Outer-Wrapper. Content and Sidebar are placed in Content-Wrapper and Footer is placed in the bottom of the layout. Confused? you no need to. The terminology I used here will be helpful for you while writing the responsive code.
respnsive-design-preview-example
You can use the code below and add up your sections according to your needs.

@media screen and max-width1024px
{
ADD YOUR CODE HERE
}
@media screen and (max-width: 960px)
{
ADD YOUR CODE HERE
}
@media screen and (max-width: 500px)
{
ADD YOUR CODE HERE
}
@media screen and (max-width: 420px)
{
ADD YOUR CODE HERE
}
@media screen and (max-width: 320px)
{
ADD YOUR CODE HERE
}
@media screen and (max-width: 800px)
{
ADD YOUR CODE HERE
}

You can add as many different resolutions as you wanted. The code in a particular resolution block will render your website accordingly. Writing a responsive code need an idea of CSS.

For e.g., I’m writing responsive code for screen resolution of 420px.

@media screen and {max-width:420px}
{
#header{width:180px;}
.sidebar-wrapper{display:none;}
}

You can write your own CSS in the respective blocks to make your website or blog look decent and tidy.

Remember the following guidelines while writing a responsive code:
  1. Use percentages instead of pixels for the ‘width’ and ‘height’ attributes.
  2. Render the sizes of header and body for mobile phone resolutions.
  3. Reduce the font sizes for small resolutions.
  4. Remove the sidebar wrapper for mobile phone resolutions. You can choose to keep it for iPad and tablet screen resolutions.
  5. Make the footer spread to 100% for the handheld device screens.
  6. Use default fonts for the tablets and smartphone screens. Using particular fonts may not show up the text or might take long loading times.
  7. Use Google PagSpeed Insights to optimize the website for mobile.
Did I miss anything? comment it below, I will add it up immediately.
Continue Reading

Optimizing Website for Mobile Viewing

Internet has been taken into smart phones already. The statistics say that 15% of the internet users are browsing through high-end mobile phones and around 25% of the internet usage has been observed from moderate smart phones. So recently we’ve seen the growth of eCommerce optimized for mobile phones to allow customers shop right from their mobile phone. This shows the growth and necessity for a business or a individual to optimize the websites for mobile viewing.

Websites or blogs that are optimized for mobiles won’t loose the 15-25% of incoming traffic. It is more beneficial when talked about business websites. Optimizing a website for different resolutions and mini-platforms need a optimization of code of the website. To do this, we have two options,
  1. Setup a mobile redirect
  2. Use mobile CSS

Setting up a mobile redirect

Mobile redirect will redirect your website to a mobile version when detected a low-end browser. This is done by adding up the viewport in the <head> section of your website.

You can also design a separate website for mobile version and provide a link at the top of the website saying “Mobile version available” here. When clicked it will redirect the website to mobile version. This is a bit old fashioned method that many of the webmasters opted out to implement as it is time taking and less flexible. It is the fact that a mobile version cannot have the same features a web version had.

Using Mobile CSS

In addition to the redirection option, you can also optimize CSS to make your website mobile-friendly. A way to do this is designing a responsive web template that accommodates itself with the resolution of the screen and the device. Unlike the normal websites, responsive websites need not to be scrolled horizontally to check out the contents on the page when viewing on mobile. Making a web template responsive is easy. Learning responsive design won’t take your half-an-hour of time at least if you had any previous knowledge of CSS.

webversion

mobile-firendly-ipad

mobile-fiendly-iphone4s

Before you proceed with either of these options, you should weed out some of the less important information that is on your actual website and tailor it toward mobile viewers. Mobile visitors are typically looking for key information when they visit your website, so reduce the information included on your web pages to provide them with just information that will be most useful. For example, make contact information prominently visible and make the navigation less robust.

While your entire website should be mobile friendly, there are some critical elements that you need to pay attention to. They are:
  1. Emails.
  2. Calls-to-action & landing pages.
  3. Downloads.
  4. Videos.
With indications that mobile bandwidth cost may be on the rise, it is important for marketers to develop lightweight ways to engage mobile users. Don’t ask a user to stream a ten-minute video. Instead, provide a clean text summary of the video if they are using a cellular data connection. Give them an opportunity to watch the video if they are on a Wi-Fi connection, in an effort to help them conserve mobile bandwidth.

User HTML5 embed tag in embedding a video on the webpage. HTML 5 technology provides a great support for web playing of videos irrespective of the device and browser.
Continue Reading