Advantages and Disadvantages of Ecommerce Business


Introduction:

e-Commerce business is increasing day to day. It has created opportunity for everyone to start online business with little investment. Many people are not aware that starting eCommerce business require steps and decision to work together at right time. Like offline business, online business also have some advantages as well as disadvantages. Review the pros and cons of e-Commerce business.

You may also like to read "How to Guide to Create ​Mobile ​Responsive ​Design".

Advantage of eCommerce Business

1. Limitations –

Unlike e-Business, offline business have certain limitations to reach the customers. In e-Business owner can target the whole country at the same time and takes the lead on offline business because whole world is its playground.

2. New Customers –

There are limited customers for offline business. It cannot cross the limit. But on the other side Online business targeted area is too big. It receives new customers from Search Engine and other different methods.

3. Time Saving –

e-Commerce business is time saving for customers, they don't have to travel to purchase a products.

4. Physical Store –

Online business doesn't require a physical store and hence saves the cost of establishing a physical store. For users, it becomes easy to visit online website to purchase product instead of visiting physical store.

5. Low Startup Cost –

Offline business requires good amount to setup a business. But eCommerce business can be started with a little investment. If a person does not have any website, he can sell his products on various eCommerce portals available online as there are so many Ecommerce store development companies like shopify offering affordable and ready to use eCommerce portal.

Disadvantage of e-Commerce Business

1. Personal Touch -

Offline business builds the relationship with its customers personally. But on the other side e-Commerce business missed this important part. In offline business user visits again to the store because of personal touch, but not the same with online business.

2. Internet Connection –

Internet is the life of eCommerce business. Once the internet is down it will miss all the sales. It is like no internet no revenue online. But offline business never faces this types of issue.

3. Technical Issues –

Shopping carts and payment processing are very important parts of any eCommerce Business. But sometimes, a little technical bug can create issues in website and website stop working. Hence, it won't do any conversion until that issue get fixed.

4. Return Policy –

In online business business owner have to take the responsibility of products even after its delivery. If user is not satisfy with product he received, he will return it to the owner and owner have to refund the amount.

VERDICT :

Well with this article we may conclude that every business has advantage and disadvantage. Although we cannot avoid disadvantages but certainly, we can take measure to manage risks and get abundant advantages from eCommerce business. Advantages are undoubtedly teasing, and we will appreciate such simple exchange nowadays. It is suggested that always try to manage risks before it hinders your online business. Appreciate more your web searching and appreciate more your e-business exercises!

Author Biography:

James Anderson is an professional content writer. Email: ja9663019@gmail.com

How to Guide to Create ​Mobile ​Responsive ​Design


Introduction:

Hey Guys! Last article was about "How to Install Ubuntu 15.04 Along With Windows 8 (Dual Boot)".

Unlike a conventional desktop oriented website, the one which has been created for the mobile screens is a lot more in demand. It is a responsive website which automatically adjusts itself to fit the screen of device that the site is being viewed on. All the content, whether it is the text, images or video get moderated to ensure best display on the screen under focus. Whether you're a publisher, a designer or a developer, taking care of your site's mobile responsive design is something that can render flawless experience to the targeted users. In this post, I'll be walking you through the vital steps that must be followed for building a fine quality mobile responsive design.

What kind of mobile responsive design are we going to create in this tutorial?

Here, I'll be creating a simple e-commerce product detail page for a t-shirt firm. So, while ensuring that the customers are able to make the purchases conveniently, we'll also be making the product review easy-to-access, followed by utilizing customer's location for enhancing the overall mobile shopping experience.

A look at the basic structure

It is essential to author a semantic HTML5 markup that will allow you to ensure completely manageable and fully accessible adaptive experiences. The reason for this being that semantic markup is fully portable and can be easily accessed on a variety of mobile devices, desktop browsers, tablets etc.

Coming to the individual steps for creating mobile responsive design

Step 1- Set the Viewport

While for a majority of non-mobile-optimized websites, most of the contemporary browsers set up a larger browser viewport, in case of designing a website using mobile responsive design, we'll be using viewport meta tag for setting the screen width to the device width as shown below:


<meta name="viewport" content="width=device-width, initial-scale=1" />

Step 2- Adding the flexibility to load the website content conditionally

Here, we'll be creating two new HTML documents for the auxiliary content viz: reviews.html and related.html. Unlike the default way in which the content is accessible via links available on the page, we can use a little bit of javascript for loading the content as and when user requests for the same or when the screen's resolution reaches a specific breakpoint.

Step 3- Use HTML special characters

As an attempt to decrease the need for background images, it is recommended to use HTML special characters. In this tutorial, I've used $#9733 for creating a solid star (★) and ☆ for creating empty stars (☆) for the product ratings.

Step 4- Include a clickable link within footer

Here, we'll use the tel URI scheme for including a clickable link to customer service number, within the footer. Here's a look at the tel URI scheme:


<a href="tel:1234567891">123 456 7891</a>

Step 5- Add style enhancements

With a strong semantic markup in place, it's time to add some style enhancements as explained below:

Create separate style sheet for screens with larger displays

Here, we'll be creating two CSS files viz: style.css and enhanced.css for delivering basic styles for screens with dimension less than 967px. We'll be using media queries for serving the new styles for screens with dimension greater than 967px as shown below:


<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style-967.css" type="text/css" media="screen  and (min-width: 967px)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<![endif]-->

Adding Mobile-first styles

Next, we can start off with adding shared styles and advanced layout rules as shown below:



/* Avoid this style */
.customer-list img {
  width: 30%;
  float: left;
}
@media screen and (max-width: 967px) {
  .customer-list img{
    width: auto;
    float: none;
  }
}


The mobile-first approach will now look like this:



@media screen and (min-width: 967px) {
.customer-list img {
    width: 30%;
    float: left;
  }
}


Next, we'll be applying media queries as shown in the below code snippet:


/*Display 2 per row for medium displays*/
@media screen and (min-width: 480px) {
  . customer-list li {
    width: 50%;
    float: left;
  }
}
/*Display 3 to a row for large displays*/
@media screen and min-width: 768px) {
  . customer-list li {
    width: 33.33%;
    float: left;
  }
}



Step 6- Use CSS for reducing HTTP requests

Have a look at the below CSS which will play a vital role in saving HTTP requests so as to improve the overall performance of your website. For instance, CSS gradients can replace background images for decreasing the count of image requests and rendering a greater control over the original design.



/*Using CSS gradients rather than background images*/
header {
  background: #333; 
  background: +linear-gradient (top, # 333 0%, #555 100%);
}


Step 7- Add Javascript enhancements

To start off, we'll be adding functionality to the site's navigation. In the HTML5 Markup, we'll using a list #top-menu for toggling the visibility of navigation as well as the search bar on all small screens. Have a look at this:


<ul  id="top-menu" class="top-menu">
  <li><a href="#">Menu</a></li>
  <li><a href="#">Search</a></li>
</ul>
<nav id="main-menu" class=" main-menu">
  <ul role="main-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>


Additionally, we will include a resize listener which will find whether there's any possibility of displaying the search bar and navigation. Have a look at this:



var swidth, sheight ;
$(window).resize(function(){
  swidth = document.documentElement.clientWidth;
  sheight = document.documentElement.clientHeight;
  setElements();
});
  
//Set elements according to differ screen size
function setElements() {
  device = (swidth < breakpoint) ? true : false;
  if (!device) { 
    $('#top-menu').show(); 
  } else {
      $('#top-menu').hide();
  }
}


Adding functionality to the Image Gallery

To start off, we'll be adding functionality to the site's navigation. In the HTML5 Markup, we'll using a list #top-menu for toggling the visibility of navigation as well as the search bar on all small screens. Have a look at this:

Have a look at the below code snippet which will allow us to build an image carousel using the available thumbnail images:



function intslide() {
  container.html('<div id="img-slider"><ul /></div>');
  imgSlider = $('#img-slider');
  $('nav a:first-child').addClass('active');
  
  $('nav a').each(function() {
    var href = $(this).attr('href');
    imglist += '<li data-src="'+href+'"></li>';
  });
  
  imgSlider.find('ul').append(imglist);
      
  $('nav a').on('click', function(e) {
    var slidepos = $(this).parent().index();
    e.preventDefault();
    loadImg(slidepos);
    if(swipeEnabled) {
      mySwipe.slide(index, 500);
    }
    updateNav(slidepos);
  });
}



Adding functionality for Related Content

A code snippet will allow us to pull in related content in case any one of the below two conditions are met:

 When a mobile user clicks on related t-shirts or the product reviews links

 When screen has enough space for loading the auxiliary content

The code snippet that I'm referring to is shown below:



function setElements() {
    device = (swidth < breakpoint) ? true : false;
  
  if (!device) {
    loadContent(); 
  }
}

//Set up content
function loadContent() {
  var $content = $('.content');
  $content.each(function(index) {
    var $this = $(this);
    var contentLink = $this.find('a');
    var contentFragment = contentLink.attr('href');
    var realContent = $this.find('.demo');
    if (realContent .size()===0 && $this.hasClass('loaded')===false) {
      getContent(contentFragment,$this);
    }
  });
}

function getContent(src,container) {
  container.addClass('showcontent');
  $('<div class=”demo” />').load(src +' #content > div',function() {
    $(this).appendTo(container);
  });
}


As an approach to keep the web pages lightweight, I recommend using Closure Compiler for chopping off all the unused bits of the jQuery library. Other impressive alternatives include popular micro-frameworks like Zepto.js etc. Finally, don't forget to pay special attention to ensuring seamless off line access to your website. This will serve as a brilliant surprise to mobile users who aren't connected to the Internet at times.

We're done!

Conclusion:

With that it's a wrap on this post which made you familiar with the basic steps of creating a mobile responsive design. Hope by having a responsive design, it will become convenient for you to adapt to all the future mobile devices and browsers quite conveniently and instantly.

Author Biography:

Samuel Dawson is a comprehensive expert in Designs2HTML Ltd involved in the process of to convert HTML to Wordpress in a top manner.

Follow Us On Facebook Open Source Web Developers by Appsntech facebook group Twitter Open Source Web Developers by Appsntech twitter group Google+ Open Source Web Developers by Appsntech Google group Linkedin Open Source Web Developers by Appsntech, LinkedIn group
Copyright @2011-2015 appsntech.com. All rights reserved. Powered By- Sanjoy Dey Productions