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.




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.




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.
You can use the code below and add up your sections according to your needs.

@media screen and max-width1024px
@media screen and (max-width: 960px)
@media screen and (max-width: 500px)
@media screen and (max-width: 420px)
@media screen and (max-width: 320px)
@media screen and (max-width: 800px)

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}

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.




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.
  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