News & Updates on Google Analytics – February 2015

Color Cuboid presents you with few updates by the Google Analytics which may be helpful to you in many ways to build you business and keep the performance of your websites high.

Trash Can: A New Creation by Google Analytics

Mistakes are made by everyone, some of which are damaging and seem to be irrecoverable like deleting of some crucial reporting information from Google analytics. This is a quite common mistake done by many people generally. After the mistake they struggle a lot to recover the data. To avoid this only google analytics has come up with something new that can help you to recover your deleted data or information.

To get started with it you need to navigate to the administrator tab, then select an account, and click the trash can feature on the left hand side of the panel. Now check out what is that you want to reclaim, and then click “ Restore”, and voila! Now you would find your view, property and account just same as before you have deleted it. Once it crosses 35 days that you have deleted it then there would be no use and the data will be gone even in the trash can also.

Google analytics has come up with this new idea so as to help its thousands of customers who rely on it for data and information. To learn more details about the Trash Can feature, please refer here

Instant Activation to Get Start Remarketing By Google Analytics

As we know that advertising and marketing play a very important role in either the success or failure of any business. This is very important for marketers to implement new things day to day. A part of the marketing activities is the remarketing, which has it’s own importance in the success of a business. For many advertisers remarketing is very important. But remarketing is really a tough task to go with even for the savviest marketers and advertisers. Because of this many advertisers keep tagging the hurdles.

They got to face many challenges and complexes while they think of going for remarketing.Google Analytics has come up with a new concept in order help the advertisers in this process of remarketing and also make them feel this task of remarketing easy with less hurdles and challenges. They have enabled remarketing with a single toggle, with which instead of manually updating all your sites you can use Instant Activation and get started with remarketing in four easy steps.I am sure you would be eager to know the four easy steps that would boost your business, to know in detail what the steps are and how to implement them you may visit here

 Add-ons For Google Sheets Would Simplify Your Google Analytics

Spreadsheets is a common tool that is preferred by the users of the Google Analytics so as to analyze their Google Analytics data or combine it with another data source. Exporting the data from Google Analytics to Google Sheets is a manual process which is tedious task if you are running reports frequently or managing multiple accounts.

Releasing Add-ons for your Google sheets would make it easier to get the Google analytics data into the Google sheets. Add-ons allow you to extend the power of Google Sheets by automating common tasks and integrating with external services. The Google Analytics Spreadsheet Add-on allows you to access your Google Analytics data, right from within a spreadsheet.

To get to know even more about this benefits by add-ons for Google Sheets refer here

Using CDNs for a Faster Website

Demand For a Faster Web

It is truly the epitome of the advent of information age when everyone from the tech savvy new age marketers to the way less tech savvy laymen stereotypes are seen on the streets tapping on smart phones, and talking rather enthusiastically and knowledgeably about dropping 3g internet rates. But it does not stop there, they want information and they want it now, on the go. People do not wait for your precious little website to load, they want it loaded and ready at the click of a button or the tap of a finger. To cater to the voraciously increasing demand for the huge reserves of information available through the internet in a fast and efficient way, an effective mode of content distribution called content delivery networks were designed and implemented.

Content Delivery Networks

CDNs are a method of providing content to end users in a fast and efficient way. CDNs or Content delivery networks use large networks of servers placed strategically around the world to remotely store data and provide it on demand to end users. The operational hierarchy is as follows: The various content rich websites and clients employ CDNs to distribute their online content effectively to their audience around the world. CDNs in turn employ ISPs, network carriers etc. and use data centers provided by them to host servers.

CDN

Types of Files That Can Be Stored in a CDN

Usually using a CDN, static files such as CSS files, Javascripts, images, videos, and audio files are stored for efficient and fast sharing. Files that do not undergo dynamic changes are preferably stored using CDNs.

Advantages of Using a CDN

Ease of access for data across the globe

Distribution of data and content using CDN has resulted in the starting of an age of faster and easier internet access. The time required to access data from a website that was established across continents and oceans has been reduced drastically through the introduction of CDNs. A series of signals that had to make the journey across land and sea could now be stored in remote servers and accessed on demand.

Decreases Server Load on the Main Infrastructure

Using the CDN distributed model of remote servers, the total load on the content provider owned IT infrastructure is drastically reduced. Instead numerous servers placed closer to the end users, shares the load and can alleviate network issues like bottlenecking and server overload.

Reduced Bandwidth Costs

Using CDNs the bandwidth costs accumulated by the content provider can be reduced.

Easy delivery of content rich media

Media such as audio and video files that require large bandwidth could be distributed faster and effectively through CDNs

Increased efficiency and higher revenue

Increase in response time for your websites and portals ensures a higher return of investments and furthermore it ensures customer satisfaction, effectively.

Manageable and efficient scaling

Your online business presence can be scaled up efficiently and effortlessly on the content distribution front using CDNs. This is especially effective in the case of e-commerce portals.

Easy management of traffic peaks

Traffic peaks can be easily manageable using CDNs due to its distributed nature and the availability of multiple sources for the same content.

Security benefits

Malicious attacks like denial of service (DoS) attacks can be contained and managed through the extensive network infrastructure offered by various CDNs.

LIST OF FREE CDNs

1. jsDelivr

An open source project, it is one of the most efficient and comprehensive options available online for developers. It hosts more than 1000 open source projects and provides the amazing service uptimes.

jsdelivr

2. Cdnjs

With just over 900 open source projects hosted on cdnjs, it is another big time player providing free CDN services. It supports numerous plugins and extensions making it a very reliable resource for developers.

Cdnjs

3. Microsoft Ajax CDN

Largely unnoticed and overlooked, Microsoft operates a fully functional and efficient CDN. Microsoft Ajax CDN supports numerous open source projects such as jQuery, Bootstrap, and respond.js Security and reliability is a guarantee from this open source project maintained by the tech giant.

Microsoft Ajax CDN

4. Open Source Software CDN

OSSCDN, as it is otherwise known, is an open source project maintained by MaxCDN and supported by jsDelivr.

Open Source Software CDN

5. Google Hosted Libraries

Another open source project by the tech giants, Google hosted libraries hosts numerous popular JavaScript frameworks such as AngularJS, jQuery, and even old ones such as MooTools and prototype.

Google Hosted Libraries

 6. Bootstrap CDN

Bootstrap CDN is a project specific CDN which can be used to serve the Bootstrap core, Fontawesome and Bootswatch.

Bootstrap CDN

7. jQuery CDN

This is another project specific CDN for jQuery projects.

jQuery CDN

Typography for Web Design

Typography

What is typography?

Typography is defined as the art and technique of arranging and presenting written language in an aesthetically pleasing manner. The primary objective of a website is to convey information in an easily accessible way. A great design can be ruined by the inappropriate presentation of content in it, such as, by using fonts that are illegible and unattractive. Every web designer should have a basic idea about typography and be able to recognise which font would present a website in the right way, and convey the right look and feel effectively.

What can the designer do?

There are certain typographic properties that is entirely upto the designer to select and use appropriately. The most important of such properties is the font family. Selection of which is how the font for the required page is chosen. And there is the font stack which is a collection of font families that you will be using for you precious website. Font stack is like your list of font families that you prefer to use.

Next comes font weight. Font weight refers to the relative thickness of a character’s strokes. Remember how we make the text light, regular, bold, and extra bold etc. in a text document. Similarly the font weight can be specified using stylesheets as well. The weight of a typeface is determined using the TrueType scale, which runs from 100 to 900. In this range 400 is what we see as regular weight, getting bolder as it goes higher and lighter as it goes lower.

Casing is another call that the designer usually takes. Casing refers to size of the letters. Uppercase would comprise of capital letters and lowercase would be smaller letters. Uppercase and lowercase letters go together to make these forms such as sentence case, title case, toggle case etc. These are essentially used to present the content in such a way that it is recognizable based on its intent.

Letter spacing is the space between consecutive letters. Manipulating the letter space can dictate the readability of the content on your website. Letter spacing can manage the trade off between readability and aesthetic attractiveness. Letter Spacing should be carefully managed to obtain the right look and feel for the content. Letter spacing is also known as tracking. Like letter spacing, another variable that determines the readability is word spacing. Word Spacing refers to the spacing between words.

Another important concept is Kerning. Kerning is the adjustment of the spacing between individual letter forms. Appropriate Kerning also contributes to readability.

Readability is also affected by line-height. Line-height refers to the vertical space between each individual line in the content. It should be a balance between cluttering text and the lines appearing too far apart.

Selecting a typeface

There are two kinds of typefaces to select from, serifs & sans-serifs. Serifs are the name given to those additional strokes that terminates a main stroke. San-serifs are such typefaces that are devoid of any such additional strokes.

Serif typefaces are said to provide fluidity and an easier reading experience. But the main disadvantage being their characteristic of tiring out the reader with too many elements. They are said to complicate the typeface at times.

Sans-serif fonts are much better suited for web development as they are easily readable with enough white space between individual letters in the type form. And their less complicated appearance has led to their constant increase in popularity as the typefaces suited for the web.

5 web design trends that will stay till 2015

Here’s what we think will be the 5 web design trends in the coming months and what features will be the websites made ​​of in the coming months.

1) Sidebar, now occupies the entire page content

One one hand, websites will be created more like applications and on the other hand it will force us to simplify the layout and elements of the site. The sidebars even on larger screens will be favored over fixed horizontal menu or pop-up menu, while the content takes up the whole width of the page.

2) Fewer text, many images (and videos)

Thanks to the enormous success of infographics, web design such as graphic design texts leave room for elements of visual communication that allow us to communicate the message immediately. Now the texts are becoming shorter, accompanied by high quality images, graphs, maps, icons and buttons. And to tell stories and communicate more complex messages comes the video, also used as a background.

3) The flat design

Even Apple has abandoned the previous design trend with the introduction of iOS8 (although it has not yet changed the horrible menu of the website). The flat design trend should finally make websites with shadows and reliefs to be obsolete in favor of websites that are designed flat and clean.

4) Simple or monochrome palette

The flat design pushes the designer to simplify the elements and graphics of the site. So then in the new sites are very simple and often monochromatic palette will be used to further complement the flat design concept.

5) CMS and framework

Are the websites designed and developed from scratch dead? Of course not! But we can’t deny that many important projects are using CMS and framework and will definitely continue to see this feature in the coming months. Consider for example the websites made ​​with WordPress or those based on Bootstrap or Foundation and how the use of CMS and framework can help speed development time and optimize results.

These are some of the trends that we are following this year and it will remain the same for next few months until 2015 arrives in style.

 

Responsive Vs. Adaptive- Which to choose?

When working with customers and developing scopes for projects, we often present two options for web design: responsive design and adaptive design. The two are commonly confused, and some may refer to responsive as a subset of adaptive technologies. Therefore, it’s helpful to make sure all parties involved are using the same terminology when talking about site implementation. Understanding the key differences between responsive and adaptive design will keep everyone on the same page and help you select the best approach for your project.

While adaptive design is quicker and easier to implement, it’s generally a bad practice to go about. It caters to today’s devices only and doesn’t make provisions for new devices with different widths that may be released tomorrow. Responsive on the other hand, works with every width between the smallest and largest versions. While this means much more work on the developer’s part to ensure there are no breakpoints within the site, it also means the website is much more likely to work properly on any new device.
Which one to choose?

The correct answer is totally up to you. Both adaptive and responsive designs are great choices to ensure that your site is viewable on both mobile devices and desktops while using only one site. If we had to pick one, we will choose responsive as it is totally flexible and works on both mobile and desktops with the same perfection. Contact us to know how we can make your website responsive today!

How to use linkedin api in Rails applications?

LinkedIn actually provides 2 APIs:

  • The JavaScript API is a rich client library enabling you to build dynamic applications in the web browser. Use OAuth 2 to easily authorize users via the “Sign In with LinkedIn” button, access LinkedIn data with native objects, and interact with Plugins.
  • The REST API provides a simple, consistent representation of people, companies, jobs, and the interactions and relationships between them. Our query language lets you read data in XML and JSON at the granularity and aggregation that you choose. Use OAuth 1.0a to authorize users and begin making REST API calls using any programming language.

1. Initialize your linkedin api key and secret key

Linked in api key can be obtained from http://developer.linkedin.com/

  • linkedin_api_key = ” YOUR LINKEDIN API KEY”
  • secret_key = “YOUR LINKEDIN API SECRET”

2. Setting your callback:

callback_url = ‘http://localhost:3000/linkedin_callback’

3. Create oauth object

oauth = LinkedIn::Oauth.new(linkedin_api_key, linkedin_secret)

4. Request authorize url

oauth.request_token.authorize_url

=> “https://api.linkedin.com/uas/oauth/authorize?oauth_token=53bc5779-75fb-4a82-915c-a33dba1dddf2″

Open the link in your browser as redirection url for user to do authorization process, if user authorize it we will get params[:oauth_verifier] in our “callback_url”, use it to authorize from request.

for example:

http://localhost:3000/linkedin_callback?oauth_token=94145e28-2d4d-4d55-856d-c5e791334e09&oauth_verifier=00883

oauth_verifier = “00883″

authorize using oauth verifier and token

oauth.authorize_from_request(oauth.request_token.token, oauth.request_token.secret, oauth_verifier)

create linkedin api object

linkedin = LinkedIn::Base.new(oauth)

 

Usability is eating the cake prepared by designer or baking it to perfection?

To understand the conflict between designers and usability analyst we need to know…

Why Usability is so important?

Usability, just common term used in today’s age of “ User Revolution ?”. I suppose we have already covered the stage where user used the philosophy to use the internet just to mark its presence on the new digital world.
As User Revolution  stage came in the dynamic pages for interaction between sellers and buyers, companies, .com, e-commerce web sites and such came into being in a billion versions. However, this phase also resulted in complicated and  very expensive websites. Just a good looking design was not enough to get enough  visitors on your site. Which created a rift between the designers and User-ability Analysts, as they both are driven by different set of philosophy.
As now we are in the stage where user or client requirement is on the priority. If we want our Web site to be visited and used often, and to create profit for our businesses, whatever the form these profits or benefits may adopt, we should create a setting which would take into account the user’s experience. If we do not do this in this way, the one who is in control, who is without a doubt in this case: ‘the user’, will forget all about our web site in the time it takes to make a simple click.


Lets see an example during a project at  ColorCuboid, we came across forms where multiple data entry text fields where used to get as much as information from the visitor, where it was a business requirement. However, the set up turned out to be time consuming for the user who in turn avoided filling the form. Therefore, we understood despite the advances in human-computer interaction, forms remain the predominant form of interaction for users on the Web. We started with grouping the related information, second important aspect we worked on was case, as sentence case is slightly easier and thus faster to follow grammatically than title case. Then use of smart defaults to make the user’s completion of the form faster and more accurate. Moreover, most important “Do not ask questions beyond the scope of the form or sudden changes in behavior or appearance makes users edgy”, which solved most of our issues.
So designer needs to understand just by adding nice buttons, color and typography and plenty of jQuery plugins will only solve 1/3 of the form usability factor.

I feel the looks of the website is complimented more if it’s made usable and accessible. Imagine if u like a dress which has beautiful design on it, but doesn’t fit you well. Will u buy it? The answer will be no. Same with one of the other project where the UI design was latest with all latest colors to suit the brand. Initially few categories where listed to us, which fitted well in the design frame. However, later as and when the detail list was prepared, it was getting difficult to get all the categories without disturbing the layout. So we grouped the related categories and exact labeling was done. And for further accessibility anchor links was given, glosses to help the user to select the correct link and even had sitemap for full overview.
Same client wanted a flash animation for landing page, even designers had the chance to showcase great pictures n even include animation to compliment it but FLASH ANIMATION is NOT recommended as USABILITY completely rejects the use of flash, reason, this slows down the loading of the site, the user needs to have at least flash player and one important thing that designers overlook is this animation might impress the viewer the first few times, but after some visit, the same animation loses the impact.

Even the table less CSS is there to help the graphic design , but the conflict between the designer and usability is not just the technical

After all this and many more experience, we all have learned the rules which we need to follow while designing the app or website. So the broad goal of usability can be:
A. Present the information to the user in a clear and concise way.
B. To give the correct choices to the users, in a very obvious way.
C. To remove any ambiguity regarding the consequences of an action e.g. clicking on delete/remove/purchase.
D. Put the most important thing in the right place on a web page or a web application.

To sum it up I would agree with, “Simplicity is the ultimate sophistication.” — Leonardo da Vinci .

Solving IE browser Compatibility issues

Every developer has been in this situation, after finishing the development of a site and  it is time–time for IE browser compatibility testing. After loading  the site in IE6/IE7/IE8 and everything looks out of position. Where do you start with IE Browser Compatibility? Most developers start making IE specific styles, some use JavaScript to detect the user’s browser,some uses css hacks etc.I am going to go through a few tips in trying to develop for IE Browser Compatibility
Some points to keep in mind while coding, to avoid much issues in IE

1) Limit use of absolute or relative positioning.
Limit the use of css properties like position:absolute and position:relative

2) No negative numbers.
We can give -ve values for margin and padding. IE has a hard time with negatives. If you are using,better off making the element styled as display:block;. This tends to fix some negative issues.

3) Use Wrappers to contain groups of elements.
Using wrappers around the elements, more than one may be necessary. The outer-most wrapper of a site usually has a margin:auto; to center all content, all subsequent child elements will be in floated blocks, i.e., float:left; or float:right.Usually only the content containers (usually divs). Pick a float (left or right) and stay consistent.


4) Treatment of anchor tags.
Always make them display:block;.  Use line-height and/or padding to make the height of the block larger.

5) Double Check HTML structure for syntax/parse errors.
IE is extremely checks elements being properly closed. Some pages won’t even finish loading. Double check your code and make sure everything is buttoned up. Newer browsers tend to auto-correct these mistakes

6) Using UL inside of an LI
When creating nested navigation with multiple unordered lists (ul) do not make a UL a first-level child of an LI. In order to create nested navigation that works in all versions of IE, you must create a DIV wrapper to act as a buffer for the nested UL.
Some ways to alter css for IE browsers only

Conditional comments

Conditional comments only work in IE, and are thus excellently suited to give special instructions meant only for IE. They are supported from IE 5 onwards.

Example of conditional comment

<!–[if IE 6]>
Special instructions for IE 6 here
<![endif]–>

In the above code, only IE6 will execute the codes written in between the
condition and rest browser skip this.
Below are a few conditional comments that reveal the IE version you’re using.

<!–[if IE]>
this portion will execute only if browser is IE
<![endif]–>

<!–[if IE 6]>
this portion will execute only if browser is IE6
<![endif]–>

<!–[if IE 7]>
this portion will execute only if browser IE 7
<![endif]–>

<!–[if IE 8]>
this portion will execute only if browser IE8
<![endif]–>

<!–[if IE 9]>
this portion will execute only if browser IE9
<![endif]–>

<!–[if gte IE 8]>
this portion will execute only if browser is IE 8 or higher
<![endif]–>

<!–[if lt IE 9]>
this portion will execute only if browser is lower than IE 9
<![endif]–>

<!–[if lte IE 7]>
this portion will execute only if browser  lower or equal to 7
<![endif]–>

<!–[if !IE]> –>
According to the conditional comment this is not IE
<!– <![endif]–>

We usually use this statements for calling specific CSS for IE specific browser version.
For Example
If we want to use a separate css for ie 7. we create a specific css file for ie 7 and call this css using the conditional statement.
That is if external css file is ie7_css_only.css
we write conditional statement in head section of HTML  like

<!–[if IE 7]>
<link type=”text/css” rel=”stylesheet” media=”screen” href=”ie7_css_only.css” />
<!– <![endif]–>

Note: In the conditional statement css we don’t need to write the whole css , we have to write only the css we want to change in IE7. That is consider a “<p>” tag in html page,and in all browser it is coming properly and IE7 only if it is coming left word. Then we have to add the “<p>”  tag css declarations in ie7_css_only.css and add margin or padding extra to make it proper with other browsers.
Another way of altering the css property are by CSS Hacks.

Css hacks are not only for IE other browsers also have hack codes.This is a little more easy to code but this wont pass W3 validation. For css hack we have to add some
code that are not in css property. So W3 wont validate.if we are not bothering about w3 validation we can use.

Below are some css Hacks
For IE 6 and below we can use below code.Here we dont want to create a new css file. Just add this below to our normal style in same css file.
* html {}
For Example
.myclass
{
background-color:red;
}
Consider this “.myclass” is applied to a  div and this css will apply to all browser with background color red.And if we are adding our hack code just below like
.myclass
{
background-color:red;
}
* html .myclass
{
background-color:green;
}

In the above case all browser will apply red to the div background but ie 6 will have background green.Like this we can alter the css property.

Below are the some other css hack for IE versions.


IE 7 and below

*:first-child+html {} * html {}

IE 7 only

*:first-child+html {}

IE 7 and modern browsers only

html>body {}

Modern browsers only (not IE 7)

html>/**/body {}

There is a backslash hack for IE8 and IE 9
width:300px;   // normal for all browsers
width:300px\9;   // ie 8 and 9 will read this line.
Another css hacks for     ie

#element {

color:orange;

}

#element {

*color: white;    /* IE6+7, doesn’t work in IE8/9 as IE7 */

}
#element {

_color: red;     /* IE6 */

}

#element {

color: green/IE8+9; /* IE8+9  */

}

:root #element { color:pink /IE9; }  /* IE9 */

Some of the common bugs in IE which causing issues in IE browser are

1) The Box Model problem — IE6
div#box {
width: 100px;
border: 2px solid black;
padding: 10px;
}
For this
IE 6 takes width as 100px. but mordern browser takes width as 124px.

2)The Double Margin Bug — IE 6
div#box {
float: right;
margin-right: 20px;
}

IE 6 will double the 20px to 40px.Causing potentially huge layout issue

3) No Min Widths / Min Height — IE 6/7
This is another big issue . Ie 6 completely ignores this.

4)No Hover States –IE 6
Most modern browsers support hover states on just about any element, but not IE 6. IE 6 only support the hover pseudo-class on anchor (<a>) elements, and even then you don’t get them if your anchor doesn’t have a href attribute.

5) No Alpha Transparent PNG Support–IE 6
IE6 doesn’t natively support it.

6) Line height issue–IE 6

The graphic shows Internet Explorer 6’s inconsistent rendering of the line-height. The line-height is made exceptionally large to exaggerate the effect of the bug

7) Fixed position bug in ie 7
In ie 6 position fixed will not take properly as other browser

8 ) Width auto bug

In ie 7 if we declare a floating div with width:auto property, ie7
will give 100% width to that div.

9) Space Between List Items
IE 6 adds vertical spacing even none is specified in specific cases.

10) Auto Overflow and Relatively Positioned Items

In this bug when in a layout you set the parent container’s overflow property to auto and place a relatively positioned item inside it. The relatively positioned item violates its parent element’s boundaries and overflows outside.Its shows scroll bars in parent div

11)Inability to Have Elements with Small Heights

As part of creating a layout,if we need to create elements with very small heights as custom borders for elements. Usually, we have to add height: XXpx to the style’s declarations. but ie will give more height to that element

Some Java script libraries  to altering css properties

Some JavaScript libraries are now available to alter the css. The main logic behind all are like detecting which browser (JavaScript has inbuilt function to detect the browser) and giving css

http://rafael.adm.br/css_browser_selector/
In this above link we can download add one js, after that we can target each browser with specific versions and give css.

Another javascript lib to avoid  IE bugs  is

http://code.google.com/p/ie7-js/
In the above link there are specif libraries to avoid bugs in ie. They have overridden the unsupported properties of ie.

All most all browser capability issues are coming due to bugs in IE versions .In IE 9 almost all are fixed but some are not yet!!

Web Presence and Branding Solutions by ColorCuboid launched!

ColorCuboid is a venture of Carmatec IT Solutions which is in its 9th year of operations as a premium IT solutions provider, delivering service across the globe. In the past Carmatec has undertaken and successfully completed numerous Web Development and Web Design Projects with a 100% Customer Satisfaction. Businesses have always praised and recognised Carmatec for delivering them with the best possible work, which has helped them achieve new horizons in their sales and brand value. With this experience, expertise and passion to deliver the best, Carmatec has now given a new name to its Web Development and Design division, “ColorCuboid”.


ColorCuboid proves to be one place where anyone can come see our work and order from us. This brand has been established with an eye to provide a wide variety of custom Design and Web Development services to our clients. We aim at providing a flexible, desired and appropriate service delivery for the assignment entrusted upon us. “Your wish our command.” is our motto and we will in no way refrain from striving forward to deliver your desired end product which caters to all your requirements and expectation. So come hire services from us and let us help you take your business and brand to a whole new level.