Why do you need a website maintenance service

Website doesn't take care of itself, it needs to be taken care of. The codes may be reliable but there are many other factors like the hosting servers, backups, accidental deletion, continuous updation etc that needs a maintainer. This blog will guide you through the problems that occur and the features we provide as a maintenance service.

Why do you need a website maintenance service

Now as you know that a website needs continuous maintenance you get two options : either take care of the site yourself or hand it over to the professionals.

Taking care of the website yourself

While talking about a website you need two things : time and programming knowledge. Taking care of a website for yourself will cost you extra time with many reduced features, because each of the extra features cost extra money individually. Going further you need a good knowledge and understanding of the design and the programming skills. Common programs include (not all, but not limited to) HTML, CSS, Javascript, PHP and SQL. Some sites may require Perl, Python or Java. Some sites may also require knowledge of JQuery, Bootstrap, Foundation, Node, Angular, WebGL, Flash etc. If you have all these things then you can easily manage your site yourself. But many additional features will still cost you money.

Some people think managing a site is a child's play and they end up with a low quality site or they break the site while adding a new feature or updating the site. Then they finally come to me asking me to fix it.

Our Website Maintenance Service

Having your site maintained by us, you may sit back and relax or just concentrate on the business while we work hard on the technical stuff of the site to keep it get going smoothly. We provide many features that will cost you extra elsewhere.

Below are the list of features provided by us.

Design Debugging

This include basic arrangement or rearrangement of things like the texts, articles, images, videos, maps, forms, buttons etc. It also include the coloring and recoloring of certain or all objects.

ReDesigning

This includes the complete redesign of the site including everything. A brand new design from scratch at no additional or extra cost while the site is still online.

Site Optimization

Optimization of site includes the optimization of the related objects (texts, articles, images, videos, maps, forms, buttons etc.) that has some type of loading issues. We take care of every issue if some images are making the site heavy or some scripts are blocking the rendering of the page. Optimization also includes cross browser and cross platform testing, analysis and debugging.

Code Debugging

Problems or issues related to code either on the front end or back end, we help with everything.

Site Error

Site errors are generally some sort of coding errors but these are different from those traditional code errors.

Site Speed Optimization

Speed issues of the site related to loading images, codes, scripts, files etc. Everything is optimized for high performance and fast loading.

Site SEO

This includes light Search Engine Optimization techniques to optimize the site for search engine visibility and ranking.

Site Test and Analysis

Continuous test and analysis of the site for the features listed above and fix the problems that occur whether you report it or not, we take care of all things that come by or go through.

How to estimate the cost of your web design project

Cost of a website depends on the features required by the site and the company developing the features. While the features required can be understood by taking a look at the features that make up a website. The cost also depends on the person or company developing the site, this happens because of the varying countries, experiences and sometimes just for no reason. Like our website developing cost is low as compared to some other companies, the fact is that they simply charge more for no reason. We provide many features for free while other's charge. Full list can be found on this post.

How to estimate the cost of your web design project

Required

Domain Names

Generally from $2-$15 per year. You may get domain names free with your hosting plans as well, but read their terms before buying.

Hosting

This is difficult to judge as it ranges from $10-$5000 per year depending on amount of space, bandwidth, etc. However most people select a smaller plan ($40-$100) at first and then keeps upgrading to higher plans when required.

Logo Design

These days any website needs a logo designed from professional. This can cost $10-$1000 depending on the designer.

Number of Pages

While a website can have many number of pages depending on the need. Some small websites settle for just 3-4 pages. Including any extra page can cost you a little more (around $100 per page). The limit on number of pages is listed on our site.


Features We Provide for Free

Google Maps

We provide Google maps for free while others can charge upto $100.

Youtube or Vimeo

Yeah that's included free of cost with every order, along with perfect optimization and loading. Others charge upto $50-$150

Photo Slideshows

We provide this for free with 100s of effects to choose from while our competitors charge upto $100.

Contact Us Form

Integrated on the site for direct contacting with client side validation, server side validation and features like "send a copy to yourself" and you get an email when anyone submits the form. While others can charge $50-$200 for this, we provide it for free.

SEO

All our codes are search engine optimized and we try hard to include everything to make your website search engine friendly. However there's a whole lot of SEO options that are provided by the third parties at some cost.

Responsive Design

No website can live without a Responsive Design. Different sizes of screens need to display your website effectively. This what some designers take advantage of and charge extra. We adopt mobile first development at no extra cost while our competitors charge $400-$1000 for making the website responsive.

Analytics and Reports

Needed to track views and clicks of your visitors. We provide Google Analytics and Piwik integration for free (both are free to use). While no one should charge anything for Google Analytics, some may charge for Piwik installation upto $200.

Search Engine Submission

We submit your site to major search engines like Google, Yahoo and Bing for free. However there are third parties providing this service of submitting sites to more than 100s of search engines and with continuous pinging. This can cost upto $500.

Cross Browser Support

Support for all latest browser both on the laptop and mobile. I don't think anyone should charge for this.

Social Like, share and follow

It includes many social media like facebook, twitter, gplus, pinterest, youtube and many more. Also includes third party integration like AddThis and AddToAny (both are free). Should be done for free from others too.

Donate buttons

As of now we only include donation buttons provided by Paypal. Paypal supports all banks and cards. Again a free service.

Help and Documentation

Easy to follow "Do It Yourself" instructions and effective documentation. Why will anyone charge for this.


Twisting parts

Content - Images

Images and highres photographs to be inserted on the site. If you don't have one then we may provide it at some cost, generally between $100-$500 depending on the category and amount, or you can get it from the third parties like shutterstock.

Content - Icons

Icons, SVGs and vector images to be inserted on the site. If you don't have one then we may provide it at some cost, generally between $100-$500 depending on the category and amount, or you can get it from the third parties like iconsforuse.

Content - Text/Articles

Articles that need to be inserted on the site. If you need fresh content then we can provide it at some cost, generally between $100-$500 depending on the category and amount, or you can get it from the third parties like articlestock.


Features at additional cost

Not only We, but anyone will charge for these features, if it will not be listed then hidden (unless stated that its for free). These features don't only cost extra money but also cost extra time.

Site Search

Search option along with filters for specific categories or items, etc.

Cost : $100-$500

Custom Video Player

A high performance, playlist enabled integrated video player to play videos directly from your site.

Cost : $250

Audio Player

A high performance, playlist enabled integrated audio player to play audio clips directly from your site.

Cost : $200

Blog

A multiuser or single user blog with many features.

Cost : $400

Forums

A discussion forum integrated within the site or outside to discuss about some topics.

Cost : $500

Flash Player

A flash player or a flash video player to play videos. This does not include a full flash site.

Cost : $300-$800

Social Media Integration

This includes facebook, gplus followers or twitter feeds directly on your site.

Cost : $200-$1000

Surveys and Polls

On site survey and polls integration along with the result display or hide options.

Cost : $200

Ads Integration

Integrate ads from major ad network as a publisher. This includes Adsense and others. Ad network ads will be integrated only if you are verified to publish ads.

Cost : $200-$500

Custom Landing Pages

Useful if you are advertising a certain product or certain post, you want your visitors to land on a different page other than the home page.Like when redirected from a newsletter or social network etc.

Cost : $100-$1000

Following your own style guide

This includes using your company's styles like the colors, patterns and layouts to match with your company's look and feel.

Cost : $400-$1200

E-Commerce

This can be an online store for selling physical goods, downloadable items or some services. Configured to sell the products or services on the site securely and with ease. It includes features like shopping cart, wishlist, Discount coupons, etc and also accepts on-site payments with paypal, bitcoin, all types of cards, and many banks and offline payments like COD, cheque, bank transfer etc.

Cost : $300-$1500


Third Party Features

News Feed and Newsletter

While its good to go with feedburner for blogs, its recommended to go with mailchimp or weber for newsletter. They provide good formats, pricing, analytics and tracking. It can cost an extra of $20-$150 per month


Reaching Customers

Marketing and Advertising

Marketing your business increases sales and relations. Every company big or small needs this. This may cost $100-$5000 per month


Maintenance Services

Site Maintenance

We provide Website Maintenance Service at affordable rate and features. Continuous evaluation and maintenance of your site to make sure your site is working properly and to sort out any problems that occur anytime. See the list of our maintenance features.

Cost : $100-$500 per month

Social Media Page Maintenance

This is a third party service. They can manage multiple social media accounts and pages on fb twitter, gplus, pinterest, youtube, linkedIn and much more and post professional posts timely and with due care. Also takes care of the comments and promotions. They can charge $200-$1500 per month


Taking it all together

So what's the cost of building your website. While many of you will not require the extra features listed here still your website can cost $1060-$22715 from Us. While the same website with the same features can cost $2060-$24965 from others.

Features that make up a modern website

Every website has its own set of features as per the requirements of the site owners or business. On this article we will look through the features that are most common to most websites. Not all features are required for a site and not all sites settle for these features only. Some sites may require custom built feature just for their use. Lets have a look at the common features and their market price.

Some people have started to say that our low cost is because of the features that we do not provide. But the truth is that we provide most of the features for free while others charge for it. This is the reason our web designing cost is low. For a more general info here are the features that make up a website. Check for what all we provide and compare with others. Transparency on our business is our strength, we do not charge any hidden fees, everything is stated clearly. Let's have a look at all the features.

Features Included

Number of Pages

Total number of pages defined on the features list is what you get at no additional cost.

Google Maps

Google maps to help locate you on the map and get a perspective view of your location.

Youtube or Vimeo

Yeah that's included free of cost with every order, along with perfect optimization and loading.

Photo Slideshows

Slideshows with 100s of sliding and transition effects along with captions and load optimizations.

Contact Us Form

Integrated on the site for direct contacting with client side validation, server side validation and features like "send a copy to yourself" and you get an email when anyone submits the form.

SEO

Our codes are search engine optimized but there's more than just this. There's a whole lot of optimizations that are provided by the third parties. Have a look here.

Responsive Design

We adopt mobile first development.Our designs that fit all sizes whether your screen is 3 inches or 21 inches.

Analytics and Reports

Track views and clicks of your visitors with integrated Google analytics and other third party analytics. We provide Google analytics and Piwik installation at no cost.

Search Engine Submission

Submit your site to major search engines. However we provide only submission to Google and pinging from various sources. However there are third parties providing this service of submitting sites to more than 100s of search engines and continuous pinging.

Cross Browser Support

Support for all latest browser both on the laptop and mobile.

Social Like, share and follow

It includes many social media like facebook, twitter, gplus, pinterest, youtube and many more. Also includes third party integration like AddThis and AddToAny (both are free).

Donate buttons

As of now it only includes donations from paypal. Paypal supports all banks and cards.

Help and Documentation

Easy to follow "Do It Yourself" instructions and effective documentation.


Things you need to provide

Content - Images

Images and highres photographs to be inserted on the site. If you don't have one then we may provide it at some cost, generally between $100-$500 depending on the category and amount

Content - Icons

Icons, SVGs and vector images to be inserted on the site. If you don't have one then we may provide it at some cost, generally between $100-$500 depending on the category and amount

Content - Text/Articles

Articles that need to be inserted on the site. If you need fresh content then we can provide it at some cost, generally between $100-$500 depending on the category and amount


Features at additional cost

Site Search

Search option along with filters for specific categories or items, etc.

Cost : $100-$500

Custom Video Player

A high performance, playlist enabled integrated video player to play videos directly from your site.

Cost : $250

Audio Player

A high performance, playlist enabled integrated audio player to play audio clips directly from your site.

Cost : $200

Blog

A multiuser or single user blog with many features.

Cost : $400

Forums

A discussion forum integrated within the site or outside to discuss about some topics.

Cost : $500

Flash Player

A flash player or a flash video player to play videos. This does not include a full flash site.

Cost : $300-$800

Social Media Integration

This includes facebook, gplus followers or twitter feeds directly on your site.

Cost : $200-$1000

Surveys and Polls

On site survey and polls integration along with the result display or hide options.

Cost : $200

Ads Integration

Integrate ads from major ad network as a publisher. This includes Adsense and others.

Cost : $200-$500

Custom Landing Pages

Useful if you are advertising a certain product or certain post, you want your visitors to land on a different page other than the home page.Like when redirected from a newsletter or social network etc.

Cost : $100-$1000

Following your own style guide

This includes using your company's styles like the colors, patterns and layouts to match with your company's look and feel.

Cost : $400-$1200

E-Commerce

This does not mean a store. It's just to sell some products or services on the site securely and with ease.

Cost : $300-$1500

Maintenance

Continuous evaluation and maintenance of your site to make sure your site is working properly and to sort out any problems that occur anytime.

Cost : $100-$500 per month


Third Party Features

Domain Names

Look for the ones that are ICANN accredited registrars. The best ones for this service are one and two

Hosting

Host your site with the guaranteed uptime hosting providers. The best ones for this service are one and two

Logo Design

Get a logo designed from professional. We recommend this site.

News Feed and Newsletter

While its good to go with feedburner for blogs, its recommended to go with mailchimp or weber for newsletter. They provide good formats, pricing, analytics and tracking.

Marketing

Market your business and increase sales and relations with upto 40% using this site.

Social Media Page Maintenance

Can manage multiple social media accounts and pages on fb twitter gplus, pinterest and much more and post professional posts timely and with due care. Also takes care of the comments and promotions.

How to make beautiful tabbed login signup page in drupal




On my last tutorial I discussed about customizing the drupal login page. Today I will take it a step further and beautify the login page. Also add a tabbed login and signup form in the login page. It's going to look like the picture below. Let's get started.

How to make beautiful tabbed login signup page in drupal

How to make beautiful tabbed login signup page in drupal



The Process with Codes
You may be knowing that Drupal's login page is situated at /user/login
Well then let's get to the next step.
Open the theme's folder located at /sites/all/themes/YOURTHEME
Look for the file named template.php
Open this file and write this code

function theme_form_alter(&$form, &$form_state, $form_id) {  
     if ( TRUE === in_array($form_id, array( 'user_login','user_login_block'))){  
          $form['name']['#attributes']['placeholder'] = t('Enter UserName');  
          $form['pass']['#attributes']['placeholder'] = t('Enter Password');  
          $form['name']['#title_display'] = "invisible";  
          $form['pass']['#title_display'] = "invisible";  
}  
     if ( TRUE === in_array($form_id, array('user_register_form'))) {  
          $form['account']['name']['#attributes']['placeholder'] = t('Enter UserName');  
          $form['account']['name']['#title_display'] = "invisible";  
          $form['account']['mail']['#attributes']['placeholder'] = t('Enter valid Email');  
          $form['account']['mail']['#title_display'] = "invisible";  
}  
}  
function theme_form_user_login_alter(&$form, &$form_state) {  
     $form['name']['#description'] = t('');  
     $form['pass']['#description'] = t('');  
}  
function theme_form_user_register_form_alter(&$form, &$form_state) {  
     $form['account']['name']['#description'] = t('');  
     $form['account']['mail']['#description'] = t('');  
}  

Now make a new php template file named page--user--login.tpl
notice the double dash or it won't work.
Open this file and write this code

<?php print $messages; ?>  
<div class="site-logo">  
     <?php if ($logo): ?>  
          <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">  
           <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />  
          </a>  
     <?php endif; ?>  
</div>  
<div id="login-page">  
  <div class="login">  
    <div class="tabs">  
      <div id="lft" class="selectd">  
        <a id="tab1" href="#">Login</a>  
      </div>  
      <div id="rht">  
        <a id="tab2" href="#">Sign Up</a>  
      </div>  
    </div>  
    <div id="login-form" class="form1">  
      <?php $loginform = drupal_get_form('user_login'); ?>  
               <?php print drupal_render($loginform); ?>  
      <div class="forgot">  
        <a href="/user/password">Lost Password?</a>  
      </div>  
    </div>  
    <div id="signup-form" class="form1 hide">  
      <?php $signupform = drupal_get_form('user_register_form'); ?>  
               <?php print drupal_render($signupform); ?>  
    </div>  
  </div>  
</div>  
This is the end of php coding. Now we head over to the styling part.
Open the style.css file and write this code
 body{  
   font-family: Arial;  
 }  
 a{  
   text-decoration: none;  
   cursor: pointer;  
 }  
 .login {  
   width: 90%;  
   max-width: 400px;  
   margin: auto;  
   padding: 10px;  
   overflow: auto;  
   box-sizing: border-box;  
 }  
 .form1 {  
   width: 100%;  
   overflow: auto;  
   box-sizing: border-box;  
 }  
 .form1 form input{  
   width: 90%;  
   display: block;  
   margin:20px auto;  
   padding: 5px 10px;  
   border-radius: 8px;  
   outline: none;  
   border: 1px solid #ccc;  
   overflow: auto;  
   box-sizing: border-box;  
 }  
 .form1 form input:hover,.form1 form input:focus,.form1 form input:active{  
   border: 1px solid #60d4ff;  
 }  
 .form1 form input[type=submit]{  
   width:50%;  
   padding: 10px;  
   background:#0F61A9 ;  
   color: white;  
   text-transform: uppercase;  
   font-size: 18px;  
   letter-spacing: 1px;  
   font-weight: bold;  
   cursor: pointer;  
   border-bottom: 5px solid #0B518E;  
 }  
 .form1 form input[type=submit]:hover,.form1 form input[type=submit]:focus,.form1 form input[type=submit]:active{  
   background:#0B518E;  
 }  
 .login .tabs {  
   width: 90%;  
   margin: auto;  
   text-align: center;  
 }  
 #lft,#rht {  
   width: 50%;  
   float: left;  
   text-transform: uppercase;  
   letter-spacing: 1px;  
   font-weight: bold;  
   display: inline-block;  
 }  
 .tabs a{  
   display: block;  
   padding: 15px;  
   background:#094B86;  
   color: white;  
 }  
 .tabs #lft a{  
   border-radius: 10px 0 0 10px;  
 }  
 .tabs #rht a{  
   border-radius: 0 10px 10px 0;  
 }  
 .tabs #lft.selectd a,.tabs #rht.selectd a{  
   background:#218AE6;  
   display: block;  
   padding: 15px;  
 }  
 .login .tabs #lft a:hover,.login .tabs #rht a:hover{  
   background:#1370C3;  
   padding: 15px;  
 }  
 .forgot {  
   width: 90%;  
   margin: auto;  
 }  
 .forgot a{  
   color: blue;  
 }  
 .forgot a:hover{  
   color: #7373DC;  
 }  
 .hide {  
   display: none;  
 }  
That's almost over except for one more code snippet called the Javascript code.
Open the script.js file and write this code
document.addEventListener('DOMContentLoaded', function(){  
 document.getElementById('tab1').addEventListener('click', function(){  
   document.getElementById('login-form').className = 'form1';  
   document.getElementById('signup-form').className = 'form1 hide';  
   document.getElementById('lft').className = 'selectd';  
   document.getElementById('rht').className = '';  
 });  
 document.getElementById('tab2').addEventListener('click', function(){  
   document.getElementById('login-form').className = 'form1 hide';  
   document.getElementById('signup-form').className = 'form1';  
   document.getElementById('lft').className = '';  
   document.getElementById('rht').className = 'selectd';  
 });  
});  

It's finally done and should be working great without any trouble if you copied the codes on the right files. That was four files with codes in four different languages. Let's see how it all works.

The Logic

In the first step we remove the ugly looking default drupal labels and descriptions from the login and signup forms, and also add the palceholders in the input tags of the respective forms. This is done from the template.php file by altering the default drupal forms. 

Next step is to create a .tpl file for the login page. It's easy and already explained in my previous tutorial. For those who missed can see the tutorial on How to customize the drupal login page
Now comes the beautification of the page using the css. You can customize the code here to fit your colors and needs.

Last thing remained was the working of tabs on clicking, which is handled by the Javascript code.
Hope it all went right for you. If having any troubles or errors you can comment below. Also comment for some code improvement suggestions. 

How to customize the drupal login and signup page

Drupal is a free to use Content Management System with the flexibility to customize everything present within it ranging from its internal working to its external looks. However most people are confused on how to do it. This post will deal on one of the aspects of customizing drupal, the login page.


Every site owner wants to have an attractive login page. Let's take a look at customizing the login page. This tutorial explains how to do it. However it does not explain how to make it look attractive. It just explain the process of accessing the page and the form. Let's begin.

The Process

You may be knowing that Drupal's login page is situated at /user/login
Make a new php template file named page--user--login.tpl
notice the double dash or it wont work.
Open this file and write this code

The Code

<?php print $messages; ?>
<?php $loginform = drupal_get_form('user_login'); ?>
<?php print drupal_render($loginform); ?>

The Logic

The page--user--login.tpl template file provides the login page.
First we print the messages like the password error etc.
The drupal_get_form() is used to get the required form, in this case its the user_login form.
For registration form use the user_register_form
Here drupal_render() is used to render the contents, but be careful to pass only variables or it shows error. So the two lines are used.
To make it look attractive just add the classes and the corresponding css.
More customizations on the login page can be found on my next tutorial. Stay with us.

How to add viewport and other responsive meta tags to drupal

Responsive design is the need of every website. Without a responsive design you lag behind in the ever growing technology and standards. Responsive design is the key to deliver a perfect website to all devices that come in different sizes ranging from 3 inches to 21 inches.

How to add viewport and other responsive meta tags to drupal


While designing with drupal it is common to add a responsive design code to the website as drupal does not have one. Let's get to add then.

The Process

For doing this you need access to the theme folder.
Open the theme folder situated at /sites/all/themes/YOURTHEME
Open this file template.php and write this code

The Code

function theme_page_alter($page) {  
$mobileoptimized = array(  
     '#type' => 'html_tag',  
     '#tag' => 'meta',  
     '#attributes' => array(  
     'name' => 'MobileOptimized',  
     'content' => 'width'  
     )  
);  
$handheldfriendly = array(  
    '#type' => 'html_tag',  
    '#tag' => 'meta',  
    '#attributes' => array(  
    'name' => 'HandheldFriendly',  
    'content' => 'true'  
    )  
);  
$viewport = array(  
    '#type' => 'html_tag',  
    '#tag' => 'meta',  
    '#attributes' => array(  
    'name' => 'viewport',  
    'content' => 'width=device-width, initial-scale=1'  
    )  
);  
drupal_add_html_head($mobileoptimized, 'MobileOptimized');  
drupal_add_html_head($handheldfriendly, 'HandheldFriendly');  
drupal_add_html_head($viewport, 'viewport');  
}  

The Logic

The theme_page_alter() alters each and every page.
The drupal_add_html_head() adds the meta tags in the <head> of the html output file.
So this adds the three tags as shown below
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

This will now support the @media queries in the CSS. That means you can start styling.

customizing comment box

Prism