March 2022 - Web Development Company | E-Commerce Development Agency

CSS Tips – Get Consistent Results in All Browsers

Posted on March 31, 2022 by ioadmin

Web standards are prevailing guidelines used on the World Wide Web to ensure websites and information is accessible to all in the most efficient manner. Most Web browsers have different default settings for the base margin and padding.

This means that if you don’t set a margin and padding on your body and XHTML tags, you could get inconsistent results on the page depending upon which browser your users are using to view the page. A simple way to solve this is to set all the margin and padding on the XHTML and body tags to 0:

html, body {
    margin: 0px;
    padding: 0px;
}

This will keep your design structure in the same place on all browsers.

Borders

You may be thinking “but no browsers have a border around the body element by default”. This is not strictly true. Internet Explorer has a transparent or invisible border around elements. Unless you set the border to 0, that border will mess up your web page layouts. So add the following to your body and XHTML styles:

html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

Here’s a nice and detailed article on CSS Reset: Resetting Your Styles with CSS Reset Stay tuned for more web design tips.

Check Our Portfolio

Enable Auto-Complete Search in WordPress Blog!

Posted on March 30, 2022 by ioadmin

“One sometimes finds what one is not looking for”

I am pretty sure that you are aware of Google Search Suggest and Yahoo Search Assist features. This feature helps you effortlessly find exactly what you’re looking for. No doubt, it lists a few suggestions to keep the user looking for more and more.

As you type something in the search box, it automatically offers search terms and phrases in real-time. How nice will it be to have the same feature on your website or blog. In this post, I am going to explain an easy way to add a search suggestion feature to your WordPress blog or website.

Things You’ll Need

jQuery: You can download the latest version from jQuery.com
Autocomplete Plugin: Download this plug-in by Jörn Zaefferer from //bassistance.de

Now let’s play with some code

Include this code within <head>..</head> tag.

<script type=text/javascript src=js/jquery.js></script>
<script type=text/javascript src=js/jquery.autocomplete.pack.js></script>
<link href="js/jquery.autocomplete.css" rel="stylesheet" media="screen" type=text/css />

Here I am assuming you are using “js” folder to keep all your java scripts and supported files. You may need to update the location of these files based on your folder setup.

Here’s the actual jQuery code to enable this feature on an input box:

<script type=text/javascript>
    var data = "Search Terms Separated With Spaces".split(" ");  
    $("#myInputBox").autocomplete(data);
</script>

Variable “data” hold the terms that you would like the user to see in the search suggestion list and $(“#myInputBox”) is the id of the search input box.

Let’s check out how we can automatically call WordPress tags in our search suggestions, using WordPress wpdb class:

<?php 
    global $wpdb;
    $search_tags = $wpdb->get_results('SELECT name FROM $wpdb->terms');
    foreach ($search_tags as $mytag){
        echo $mytag->name. ' ';
    }
?>

Here I am using WordPress wpdb class to fetch all tags assigned to the posts.

Here’s the complete code to enable this feature on your WordPress blog. Just replace the folder name with actual folder and the jQuery selector $(“#myInputBox”) with the actual id of search input box.

<script type=text/javascript src=PATH_TO/jquery.autocomplete.pack.js></script>
<link href="PATH_TO/jquery.autocomplete.css" rel="stylesheet" media="screen" type=text/css />
<!-- This goes in the head -->
<script type=text/javascript>
	$(document).ready(function(){  
		var data = '<?php global $wpdb; $search_tags = $wpdb->get_results("SELECT name FROM $wpdb->terms"); foreach ($search_tags as $mytag){ echo $mytag->name. " "; } ?>'.split(" ");
		$("#ID_OF_SEARCH_INPUT_BOX").autocomplete(data);  
	});
</script>

Don’t forget to add your inputs in the comments section below.

Let’s Check Our Portfolio

How to read minified CSS with ease?

Posted on March 29, 2022 by ioadmin

Today we have a quick tip for those who feel depressed and cry when they see the holy grail of CSS in one single line in their website/theme stylesheets.

Recently I started hearing from a lot of people complaining about their theme developers using minified CSS in their themes for maximizing performance without any consideration for their ease of use/customization. People keep asking me if there are tools that convert minified CSS back to normal human-readable form and recently someone even asked me to do a job – normalize some minified stylesheets (of course I didn’t do it and rob him off!)

Whether or not developers should minify CSS when giving out themes/websites has been a subject of debate for a long time but why developers choose to minify some parts of their stylesheets has often been overlooked. Performance issues for larger projects, minifying the reset styles (you don’t have to change them anyway!) and non-developer license are just some of the reasons!

Anyway, coming back to the subject of this post – How can you read minified CSS with ease?
(No, we are not going to install any 3rd party software!)

Simply validate the CSS (only the minified part if you have other files attached as well) in question using the W3C’s CSS Validation service!

The output of the validation check is:

whether or not, your CSS validates to standards set by W3C.
Normal, Properly Formatted, and Easily Readable version of your minified/compressed CSS

Do you need to keep the formatted and decompressed CSS? Just copy it from the validation output and replace your version. Voila!

See Our Portfolio

An easy way to create a light-box with jQuery & CSS

Posted on March 28, 2022 by ioadmin

As you already know that I’ve been working on improving the performance of my website and I needed a simple solution to create a light-box effect for Live-Chat on this website. I had many options to choose from available jQuery plug-ins however, the idea was to optimize the code with minimal use of heavy third-party scripts and CSS. Moreover, the only thing I needed was a light-box effect without any other functionality.

So I created the light-box effect with a few lines of code using CSS and jQuery.

Let’s start coding 🙂

xHTML Code

Place this code within <body></body> tags where ever you like.

<a id="show-panel" href="#">Show Panel</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
You can add any valid content here.
<p align=center><a id="close-panel" href="#">Close this window</a></p>

</div>
<!-- /lightbox-panel -->
<div id="lightbox"></div>
<!-- /lightbox -->

The first line of the above code is a link with id “show-panel” which will display the “light-box” and the “lightbox-panel” DIVs, similarly, on line 7 we have a link with ID “close-panel” to hide these DIVs. This will be handled by jQuery of course.

#lightbox-panel will hold the content to be displayed and #lightbox will add a transparent background behind our content panel. Let’s write some CSS code to stylize these two DIVs before we add the functionality to our links with jQuery.

CSS Code

You can add this code within the document’s <head></head> tag or in any linked style sheet.

* /Lightbox background */
#lightbox {
  display:none;
  background:#000000;
  opacity:0.9;
  filter:alpha(opacity=90);
  position:absolute;
  top:0px;
  left:0px;
  min-width:100%;
  min-height:100%;
  z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
  display:none;
  position:fixed;
  top:100px;
  left:50%;
  margin-left:-200px;
  width:400px;
  background:#FFFFFF;
  padding:10px 15px 10px 15px;
  border:2px solid #CCCCCC;
  z-index:1001;
}

Note: The z-index value for #lightbox-panel should be greater than the z-index value of #lightbox to display it above the transparent background and both should have the property display as none so they should not show up by default or if the users have Javascript disabled in their browsers.

Let’s put some life to our code with jQuery.

jQuery Code

You can add this code within the document’s <head></head> tag and we are done.

$(document).ready(function(){
  $("a#show-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeIn(300);
  });
    $("a#close-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeOut(300);
  })
});

Pretty simple, huh!!

Could it get easier than this?

Once you click the link with ID “show-panel” it will display both the DIVs with some nice fade effect and if you click the link with ID “close-panel” it will hide these DIVs.

I hope you enjoyed this little trick to create the simple light-box effect with CSS and jQuery You are most welcome to share your inputs and code in the comments below.

See Our Portfolio

An easy way to create a login panel with jQuery and CSS

Posted on March 26, 2022 by ioadmin

Among many studies conducted to find out just what influences people’s perception of a website’s credibility, one interesting finding is that users really do judge a book by its cover… or rather, a website by its design.

Rapid changes in design trends are driving focus towards its usability. More and more features are being zipped into a plain and simple design for users to get bountiful results without spending more than a jiffy. The back-end coding is the key device to achieve this simplicity in design.

Keeping this mind, I’ve designed a small script to introduce a sliding login box into your website, just as you see in Twitter login page. The script comprises jQuery & CSS techniques to display this arty feature. Checkout the code below and try it yourself or simply download the ready to use files.

HTML

<div id="demo-header">

	<!-- Code for Login Link -->
	<a id="login-link" title="Login" href="#login">Clients Area</a>

	<!-- Code for login panel -->
	<div id="login-panel">
		<form action="" method="post">
			<label>Username: <input type=text name=username value="" /> </label>
			<label>Password: <input type=password name=password value="" /> </label>
			<input type=submit name=submit value="Sign In" /> <small>Press ESC to close</small>
		</form>
	</div>

</div>

CSS

<style type=text/css>

    a{text-decoration:none;}

    #demo-header{
        width: 980px;
        margin: 0 auto;
        position: relative;
    }
    #login-link{
        position: absolute;
        top: 0px;
        right: 0px;
        display: block;
        background: #2a2a2a;
        padding: 5px 15px 5px 15px;
        color: #FFF;
    }
    #login-panel{
        position: absolute;
        top: 26px;
        right: 0px;
        width: 190px;
        padding: 10px 15px 5px 15px;
        background: #2a2a2a;
        font-size: 8pt;
        font-weight: bold;
        color: #FFF;
        display: none; 
    }
    label{
        line-height: 1.8;
    }
</style>

jQuery

<script src=//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js></script>

<script type=text/javascript>

	// jQuery to apply actions to the link
	$(document).ready(function(){
	    $("#login-link").click(function(){
	        $("#login-panel").slideToggle(200);
	    })
	})

	//jQuery to apply actions to the ESC key
	$(document).keydown(function(e) {
	    if (e.keyCode == 27) {
	        $("#login-panel").hide(0);
	    }
	});

</script>

See Our Portfolio

WordPress Themes & Why You Should Have Unique Design

Posted on March 25, 2022 by ioadmin

When you have a website or blog you want to stand out from all the other websites, which is why having a good WordPress theme that sets you apart is so critical. There are millions of websites that are run using WordPress and with that, there are many themes out there that are being used many times over. This can cause your website to look like many other websites if you are using one of the standard themes out there.

If you can find a theme or someone to create a WordPress theme for you that is unique, you will be one step ahead in terms of branding and making your website stand out. Free WordPress themes are not the best way to go because anyone can have the same exact design as you. Not only will it not stand out to your visitors, but search engines as well. If someone comes across your website and they have seen that design before, they may think twice about visiting your site again.

The search engines will also see your site as the same as many other websites on the web. This can play a role in your website ranking well for any keywords that you want to be ranking for. Search engines have been cracking down on all the non-unique, or otherwise spam-type websites. One way that the search engines will see your site as a spam site is the design and layout. If your website is the same as millions of other websites, they will automatically put your website on hold until it creates some authority.

In conclusion, the best way to create brand equity and build a brand for yourself or your company is to have a unique design. Visitors and search engines will see your website as a legitimate source for quality information or products.

Check Our Portfolio

Why Keyword Research is Key?

Posted on March 22, 2022 by ioadmin

Good keyword research is the foundation of a successful SEO strategy. Without good keywords, all of your hard work writing SEO-friendly content, optimizing your title tags, getting rid of duplicate content and all of that fun stuff will be much less effective and, in some cases maybe even fruitless.

Keyword research is more than picking out keywords that fit your niche or offer. It requires gaining insight into patterns and searcher intent.

I encountered a great example of this very recently while looking to increase the volume of inquiries for “L1 Visas”, a type of US work visa, to a local immigration law firm. At first glance, one might think it logical to target keywords in the “L1 Visa” theme. But after doing a little research and giving it some thought, I found that this keyword is searched very infrequently and that it is very likely that the searcher making this query is researching L1Visas, and is probably not ready to seek out a lawyer for assistance.

Instead, you may want to target keyword themes that have higher search volumes and are more likely to reflect the kind of searcher intent that is going to bring you conversions. In other words, you want to get into the searcher’s way just when they are looking for what you offer, which of course is the beauty of SEO and the reason why search traffic can be so valuable.

With that in mind, it is very important to gain a complete and comprehensive understanding of your potential keywords before you do any SEO at all so that you know what trees you should be barking up. But where do you start? Here are six easy steps to keyword success:

Brainstorm: Take some time to think about all possible keywords themes that would be relevant to your business and offers. Think short-tail and don’t worry about permutations (i.e. “L1 visa” and “visa L1”), this part will come later. For now, just gather all of the root themes together into a list.

Use a keyword tool: At this point, you should engage a keyword tool to help you get more ideas and gather data. The Google Keyword Tool is ever-improving, is free, and in my opinion is pretty much all you need if used right. Plug in all of your keyword ideas – only one or a few at a time – and try to pare them down to just the relevant ones since the tool tends to include some not-so-relevant suggestions. Play with it to get to know how it works.

Build a list: Most if not all keyword tools will allow you to export your research results to Excel format. As you find more keywords, export them all to a spreadsheet. Clear out all of the less important stuff, which will usually leave you with search volume (local and global, or whatever makes sense for your campaign) and average Adwords CPC. Organize all of your keywords into themes, and sort each theme by the search volume.

Do a ranking scan: If your site is brand new, skip this part, but if you have been around for at least a few months, find out where you are ranking for all of your most relevant keywords (keep it under one or two hundred for now). Record this on your spreadsheet.

Look at your Analytics: Again, skip this part of your site is new. Here, you want to look at your Analytics to see how much traffic and/or conversions and/or revenue you are getting to each of your top keywords. Record this on your spreadsheet.

Spot opportunities: Now you have a complete and comprehensive keyword data set with which you can make informed choices and decisions. This document should give you directions. Look for your best opportunities. An example of an ideal keyword is one where you are ranked somewhere on the second page and where you are already getting a fairly significant volume of traffic/conversions/revenue. This keyword is a sitting duck – you know that getting your site onto the first page for this keyword is going to make you more money.

See Our Web Development Services

Our SEO Services

Blockbuster BigCommerce Annual Partner 2021 Recognitions

Posted on March 21, 2022 by ioadmin

The most imaginative and along – allowing BigCommerce desk and technology consorts across America, EMEA and APAC are feted for their devotedness in aiding dealers to come off and dress during trailing demand inconstancies.

AUSTIN, Texas – March 2, 2022 – BigCommerce (Nasdaq BIGC), a guiding Open SaaS eCommerce podium for swift-raising and showed B2C and B2B trademarks, here and now uncloaked the blockbusters of the 2021 BigCommerce Partner Accolades. nowadays in its fourth time, the periodic accolades calendar recognizes highest – doing consorts among BigCommerce’s general mesh of fresh than desk and technology consorts. This time’s blockbusters are feted for their owing devotedness and fealty to feeding BigCommerce dealers with definitive technology and benevolences claimed to flourish, dress, and come off through unheard-of demand inconstancies.

“BigCommerce’s public, best-of-species consort ecosystem continues to secern our podium and redeem indeed lesser creation to an assiduity that has endured both unheard-of exceptions and stimulating excrescence,” passed Russell Klein, prime corporate officer at BigCommerce. “With that, this time’s periodic Partner Accolades image the owing fealty our blockbusters position ahead into aiding our dealers catch and overbear account expectancies and flourish against demand inconstancies. We’re feted to command you as our consorts and act along to unceasing supernova concurrently. Congratulations!”

The 2021 BigCommerce Partner Accolades pressed 17 full leagues across the Americas, APAC and EMEA areas whose appliers were assessed by a commission of BigCommerce retainers and archons. The accolades feted one success for each league grounded on their achievement’s individual to the geographic demesne in which they handle. This time’s blockbusters are Agency Partner of the Year Rewarded to Certified BigCommerce desk consorts that command showed devotedness to enduing in the podium, administering for customers and generating revelatory custom over the concluding time.

Winners:

Unisoft Informatics
IOGOOS Solution
DataArt
Old North
Mira Commerce
The ZaneRay Group
Space.bar
Acumatica
Codal

The Winner of the BigCommerce Partner of the Year 2021

Posted on March 21, 2022 by ioadmin

Unisoft Informatics is an elite BigCommerce Partner Agency to prop your mid-market custom flourish on BigCommerce organisation. From eCommerce application to exercise BigCommerce elaboration, we consort along with your customers to spin internet site callers into replication clients. We’ve created our own strategies to help you penetrate the e-commerce environment for more people. As a BigCommerce agency, we have created an existing BigCommerce feature to make your site a change engine. Through our own design, development, and data-based marketing campaigns, we help your teamwork harder, not harder.

IOGOOS Solution, as a Certified BigCommerce Partner, the Team assists the online business to generate revenue to make an online presence of your business.

The BigCommerce award is the most reputed award where judges recognize the top-performing agency for their innovative solution with BigCommerce merchants. The partner awards are based on the application, agencies’ commitment towards their customers, the impact of their solutions, and the extreme & unique use of the BigCommerce platform.

On October 22nd, 2020, Space 48 was given the Partner of the Year Award at the yearly BigCommerce Partner Summit – BigCommerce’s flagship partner event. The virtual summit finished up with their yearly honors function, in which BigCommerce officially perceived Space 48 with this honor for their “huge development for quite BigCommerce clients”.

This is, no ifs, and, or buts, the greatest and most legitimate honor space 48 won to date and is a genuine achievement for their business. Turning into a multi-stage e-commerce business office marked a critical change for the kin and their image, however with the exceptional help and trust from BigCommerce, they have had the option to push ahead with force. It is a rush to go along with them on their own excursion as well, as they take jumps and limits and keep on pushing the limits of how an eCommerce platform can help our local area. Space 48 is really appreciative to the BigCommerce group for perceiving their diligent effort and for confiding in them with this remarkable title.

Through this association, they’ve had more inventive and specific chances to track down an absolutely new game plan of forceful eCommerce business merchants – ones that need a superior way to deal with developing their webpage, and one’s that, fortunately, trusted them to do thusly. Arms Survey, Ultra LEDs, Sweet Squared, Unisoft Informatics, IOGOOS Solution are two or three Top brands space 48 have migrated onto BigCommerce and they’re fulfilled to see that their undertakings have not gone unnoticed – particularly during this flight time.

That being said, the idea of work presented at these distinctions says a ton regarding the inclination and force of the BigCommerce social class as it is today. Both association and tech assistants have displayed their undeterred capacity inside the space, and without their top-notch standard, the industry wouldn’t be for all intents and purposes indistinguishable from the awesome quality standard that it is today. They are generally brought down by the influential thought of the eCommerce industry – one that never fails to challenge, entertain and persuade us.

Finally, it’s a given that without the complete drive and unadulterated ability of Space 48 groups, one of their similarly meriting accomplice chosen people might have effectively won this honor. Group culture is based on cooperating and their regular interest and resourcefulness have taken more time than ever as a business.

After what has demonstrated to be an extremely, unique year to be sure, we’re invigorated for what lies ahead. Space 48 Mission as a business has generally been to “make more human and convincing Ecommerce encounters”, and it is their objective to satisfy that mission in the long stretches of time to come.

Give Your Website A Colourful Touch This Holi

Posted on March 17, 2022 by ioadmin

The festival of Holi is just around the corner and ahead of the auspicious occasion, Top Website designing company, IOGOOS Solution has announced an amazing offer.

Aspire your business presence online as vibrant and colorful to buzz out in the digital marketing arena.

Embrace IOGOOS web design services and boost your online sales. As a part of the Holi cost-effective plans and packages, IOGOOS is introducing special Holi Festive Discounts & deals. So, if you are planning to give your site a refreshing look, then this is the right time to add a special theme to the website design, logo design, digital marketing services, and much more in one place.

So, HURRY! Offer Limited!!

Contact: info@iogoos.com

Month: March 2022

CSS Tips – Get Consistent Results in All Browsers

Borders

Enable Auto-Complete Search in WordPress Blog!

“One sometimes finds what one is not looking for”

Things You’ll Need

Now let’s play with some code

Here’s the actual jQuery code to enable this feature on an input box:

How to read minified CSS with ease?

An easy way to create a light-box with jQuery & CSS

xHTML Code

CSS Code

jQuery Code

An easy way to create a login panel with jQuery and CSS

HTML

CSS

jQuery

WordPress Themes & Why You Should Have Unique Design

Why Keyword Research is Key?

Blockbuster BigCommerce Annual Partner 2021 Recognitions

Winners:

The Winner of the BigCommerce Partner of the Year 2021

Give Your Website A Colourful Touch This Holi

When We Work Together

Let Us Call You Back

Borders

“One sometimes finds what one is not looking for”

Things You’ll Need

Now let’s play with some code

Here’s the actual jQuery code to enable this feature on an input box:

xHTML Code

CSS Code

jQuery Code

HTML

CSS

jQuery

Winners:

When We Work Together

Get In Touch

Let Us Call You Back

Start Your Project