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.

Read more »

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.

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. 

Read more »