Tag Archives: window

It’s Time To Start Using CSS Custom Properties

Today, CSS preprocessors are a standard for web development. One of the main advantages of preprocessors is that they enable you to use variables. This helps you to avoid copying and pasting code, and it simplifies development and refactoring.

It's Time To Start Using CSS Custom Properties

We use preprocessors to store colors, font preferences, layout details — mostly everything we use in CSS. But preprocessor variables have some limitations.

The post It’s Time To Start Using CSS Custom Properties appeared first on Smashing Magazine.

This article is from:

It’s Time To Start Using CSS Custom Properties

VWO eCommerce Cart Abandonment Report 2016

Cart abandonment has long been one of the biggest pain-points for the eCommerce industry. Numerous studies have reported the average cart abandonment rate to be over 60%, across all websites.

In other words, six out of 10 “add-to-cart” actions on eCommerce sites do not result in sales!

To alleviate this situation, eCommerce marketers need to understand their users’ behavior better. They need to know the following:

  • Why do users abandon carts?
  • What measures can be taken to prevent cart abandonment?
  • What really makes user return to an eCommerce site and checkout an abandoned cart?
  • How can window shoppers be converted into customers?

VWO ran a survey with online shoppers, gaining critical insights on common cart abandonment issues. The respondents, more than 1000 in number, lay in the age group of 18 to 65 years and belong to the US territory.

You can download the full report here.

Note: This report does not claim to represent the full picture of the state of cart abandonment worldwide. It attempts at providing answers to some of the most important issues regarding cart recovery, and eCommerce optimization as a whole.

Here are the key findings from the report:

Why Do Shoppers Abandon Carts?

The biggest reason users don’t complete the purchase process is “hidden item costs.” Not showing the total bill amount upfront doesn’t sit well with them.

One-fourth of the respondents will not checkout if they encounter “unexpected shipping cost.” Other crucial concerns for users include “having to create a new account for checkout” and “payment security.”

Why shoppers abandon cart

eCommerce sites can reduce cart abandonment by providing the estimated cost of shipping and additional taxes on the product description page itself.

If Shoppers Choose to Buy the Product They Abandoned, How Would They Do It?

About a quarter of respondents (22%) would buy the product they initially abandoned from another website if offered a better deal.

This user preference was followed by “buying the product from a physical store” and “buying from a more trustworthy website.”

Interestingly, a total of 41% respondents would go on to purchase the product from a different site.
How do shoppers buy back a product they abandoned earliereCommerce sites can display popular trust seals and employ social proof to nudge users towards completing a purchase.

What Convinces Shoppers To Buy From an Unfamiliar Website?

A user’s perception of a new website is influenced greatly by the experiences of other shoppers with that website. 30% users would buy products from an unfamiliar website based on the customer reviews presented there.

Trust seals prove to be the second biggest factor, followed by “a deal too good to pass.”

What Convinces Shoppers To Buy From an Unfamiliar Website

eCommerce sites should encourage users to write reviews for the products they’ve bought. After users complete a purchase, they can be targeted with emails, soliciting product reviews. They can also be provided with incentives, if required.

Do Shoppers Add Products to Cart Without the Intention of Buying? If Yes, Why?

Almost half (45%) of the users that add a product to their cart without willing to buy it, do that to know its final price. Users want to be aware of all the costs which might show up at the checkout page, such as shipping cost and taxes.

35% use the add-to-cart function as a wishlist. 10% users hope to get a discount on the product later.

Why users add product to cart without an intention of buying

This again emphasizes the importance of providing transparency in the product cost.

What Motivates Shoppers to Buy the Product They Abandoned?

A whopping 58% respondents said that emails and ads, which offer a discount on an abandoned product, brings them back to the website. This proves the effectiveness of retargeting in reducing cart abandonment.

Applying the scarcity principle to retargeted emails/ads also works with some shoppers. 9% respondents said that they return to buy a product if it’s going out of stock.

What Motivates Shoppers to Buy the Product They Abandoned

eCommerce sites need to master retargeting for retrieving lost carts. (Here’s a post that lists out the popular tools and tips for retargeting.)

Do Shoppers Abandon a Purchase When Their Bank Rejects the Transaction?

25% respondents said that they’ve abandoned a purchase at least once because of the bank rejecting the transactions.

Do Shoppers Abandon a Purchase When Their Bank Rejects the Transaction

eCommerce sites need to offer multiple payment options to users. The mode of payment can include digital wallets and cash on delivery service.

What Motivates Window Shoppers To Make a Purchase?

99% users who don’t actively look for products to buy admit that time-bound offers encourage them to make a purchase.

Almost half of the respondents (48%) will buy a product if offered a limited-time discount, even when they’re just window shopping.

What Motivates Window Shoppers To Make a Purchase?

eCommerce sites should run time-based offers (promoting urgency) to attract window shoppers.

Which Part of the Checkout Process Frustrates Online Shoppers the Most?

Nothing frustrates shoppers more than filling a piece of information twice — 32% respondents admitted to this.

A close second was “too many form fields” having the votes from 26% respondents. 14% said “not being able to change/modify order” is what they hate the most in a checkout process.

Which Part of the Checkout Process Frustrates Online Shoppers the Most

eCommerce sites must ensure that their checkout process has minimum friction. They should ask only the most relevant and necessary details from users. Here are a few other actionable tips to optimize web forms.

Do Online Shoppers Abandon Carts If They’re Asked for Personal Information?

Almost 60% respondents have at least once abandoned a purchase because the website asked them for information they didn’t want to share.

34% respondents admitted having abandoned a purchase when they were asked to provide their social security number. Other information points consist of gender type, phone number and date of birth.

Do Online Shoppers Abandon Carts If They’re Asked for Personal Information

eCommerce sites should ask users for only that information which they’ll be actively using.


Cart abandonment is still a major bane to eCommerce businesses. This report attempts to shed light on the common factors why shoppers abandon a cart, and how eCommerce marketers can overcome them. The key strategies to alleviate cart abandonment include retargeting, employing scarcity and urgency principles, maintaining transparency in prices, and minimizing form-friction.

New Call-to-action

What Do You Think

How useful did you find our report? Do you want any additional questions to be included in our next survey? Tell us in the comments section below.

The post VWO eCommerce Cart Abandonment Report 2016 appeared first on VWO Blog.

Original article -  VWO eCommerce Cart Abandonment Report 2016


React To The Future With Isomorphic Apps

Things often come full circle in software engineering. The web in particular started with servers delivering content down to the client. Recently, with the creation of modern web frameworks such as AngularJS and Ember, we’ve seen a push to render on the client and only use a server for an API. We’re now seeing a possible return or, rather, more of a combination of both architectures happening.

What Is React?

React is, according to the official website1:

“A JavaScript library for building user interfaces.”

It is a way to create reusable front-end components. Plain and simple, that is the goal of React.

What Makes It Different?

React has quickly risen to immense popularity in the JavaScript community. There are a number of reasons for its success. One is that Facebook created it and uses it. This means that many developers at Facebook work with it, fixing bugs, suggesting features and so on.

React To The Future With Isomorphic Apps

Another reason for its quick popularity is that it’s different. It’s unlike AngularJS2, Backbone.js3, Ember4, Knockout5 and pretty much any of the other popular MV* JavaScript frameworks that have come out during the JavaScript revolution in the last few years. Most of these other frameworks operate on the idea of two-way binding to the DOM and updating it based on events. They also all require the DOM to be present; so, when you’re working with one of these frameworks and you want any of your markup to be rendered on the server, you have to use something like PhantomJS.

Virtual DOM

React is often described as the “V” in an MVC application. But it does the V quite differently than other MV* frameworks. It’s different from things like Handlebars, Underscore templates and AngularJS templates. React operates on the concept of a “virtual DOM.” It maintains this virtual DOM in memory, and any time a change is made to the DOM, React does a quick diff of the changes, batches them all into one update and hits the actual DOM all at once.

This has huge ramifications. First and foremost, performance-wise, you’re not constantly doing DOM updates, as with many of the other JavaScript frameworks. The DOM is a huge bottleneck with front-end performance. The second ramification is that React can render on the server just as easily as it can on the client.

React exposes a method called React.renderToString(). This method enables you to pass in a component, which in turn renders it and any child components it uses, and simply returns a string. You can then take that string of HTML and simply send it down to the client.


These components are built with a syntax called JSX. At first, JSX looks like a weird HTML-JavaScript hybrid:

var HelloWorld = React.createClass(
    displayName: "HelloWorld",
        return (
            <h1>Hello this.props.message</h1>

React.render(<HelloWorld message="world" />, document.body);

What you do with this .jsx format is pass it through (or “transpile”) webpack, grunt, gulp, or your “renderer” of choice and then spit out JavaScript that looks like this:

var HelloWorld = React.createClass(
  displayName: "HelloWorld",
  render: function() 
    return (
        React.createElement("h1", null, "Hello ", this.props.message)

React.render(React.createElement(HelloWorld, message: "world"), document.body);

That’s what our HelloWorld.jsx component transpiles to — nothing more than simple JavaScript. Some would consider this a violation of the separation of concerns by mixing JavaScript with HTML. At first, this seems like exactly what we’re doing. However, after working with React for a while, you realize that the close proximity of your component’s markup to the JavaScript enables you to develop more quickly and to maintain it longer because you’re not jumping back and forth between HTML and JavaScript files. All the code for a given component lives in one place.

React.render attaches your <HelloWorld> component to the body. Naturally, that could be any element there. This causes the component’s render method to fire, and the result is added to the DOM inside the <body> tag.

With a React component, whatever you pass in as attributes — say, <HelloWorld message="world" /> — you have access to in the component’s this.props. So, in the <HelloWorld> component, this.props.message is world. Also, look a bit closer at the JSX part of the code:

return (
    <h1>Hello this.props.message</h1>

You’ll notice first that you have to wrap the HTML in parentheses. Secondly, this.props.message is wrapped in braces. The braces give you access to the component via this.

Each component also has access to its “state.” With React, each component manages its state with a few simple API methods, getState and setState, as well as getInitialState for when the component first loads. Whenever the state changes, the render method simply re-renders the component. For example:

var Search = React.createClass(
            search: ""
        return (
            <div className="search-component">
                <input type="text" onChange=this.changeSearch />
                <span>You are searching for: this.state.search</span>
        var text = event.target.value;

            search: text

React.render(<Search />, document.body);

In this example, the getInitialState function simply returns an object literal containing the initial state of the component.

The render function returns JSX for our elements — so, an input and a span, both wrapped in a div. Keep in mind that only one element can ever be returned in JSX as a parent. In other words, you can’t return <div></div><div></div>; you can only return one element with multiple children.

Notice the onChange=this.changeSearch. This tells the component to fire the changeSearch function when the change event fires on the input.

The changeSearch function receives the event fired from the DOM event and can grab the current text of the input. Then, we call setState and pass in the text. This causes render to fire again, and the this.state.search will reflect the new change.

Many other APIs in React are available to work with, but at a high level, what we did above is as easy as it gets for creating a simple React component.

Isomorphic JavaScript

With React, we can build “isomorphic” apps.

i·so·mor·phic: “corresponding or similar in form and relations”

This has already become a buzzword in 2015. Basically, it just means that we get to use the same code on the client and on the server.

This approach has many benefits.

Eliminate the FOUC

With AngularJS, Ember (for now) and SPA-type architecture, when a user first hits the page, all of the assets have to download. With SPA applications, this can take a second, and most users these days expect a loading time of less than two seconds. While content is loading, the page is unrendered. This is called the “flash of unstyled content” (FOUC). One benefit of an isomorphic approach to building applications is that you get the speed benefits of rendering on the server, and you can still render components after the page loads on the client.

The job of an isomorphic app is not to replace the traditional server API, but merely to help eliminate FOUC and to give users the better, faster experience that they are growing accustomed to.

Shared Code

One big benefit is being able to use the same code on the client and on the server. Simply create your components, and they will work in both places. In most systems, such as Rails6, ASP.NET MVC7, you will typically have erb or cshtml views for rendering on the server. You then have to have client-side templates, such as Handlebars or Hogan.js, which often duplicate logic. With React, the same components work in both places.

Progressive Enhancement

Server rendering allows you to send down the barebones HTML that a client needs to display a website. You can then enhance the experience or render more components in the client.

Delivering a nice experience to a user on a flip phone in Africa, as well as an enhanced experience to a user on a 15-inch MacBook Pro with Retina Display, hooked up to the new 4K monitor, is normally a rather tedious task.

React goes above and beyond just sharing components. When you render React components on the server and ship the HTML down to the client, React on the client side notices that the HTML already exists. It simply attaches event handlers to the existing elements, and you’re ready to go.

This means that you can ship down only the HTML needed to render the page; then, any additional things can be pulled in and rendered on the client as needed. You get the benefit of fast page loading by server rendering, and you can reuse the components.

Creating An Isomorphic Express App

Express138 is one of the most popular Node.js web servers. Getting up and running with rendering React with Express is very easy.

Adding React rendering to an Express app takes just a few steps. First, add node-jsx and react to your project with this:

npm install node-jsx --save
npm install react --save

Let’s create a basic app.jsx file in the public/javascripts/components directory, which requires our Search component from earlier:

var React = require("react"),
    Search = require("./search");

var App = React.createClass(
        return (
            <Search />

module.exports = App;

Here, we are requiring react and our Search.jsx component. In the App render method, we can simply use the component with <Search />.

Then, add the following to one of your routers where you’re planning on rendering with React:

    harmony: true,
    extension: ".jsx"

All this does is allow us to actually use require to grab .jsx files. Otherwise, Node.js wouldn’t know how to parse them. The harmony option allows for ECMAScript 6-style components.

Next, require in your component and pass it to React.createFactory, which will return a function that you can call to invoke the component:

var React = require("react"),
    App = React.createFactory(require("../public/javascripts/components/app")),
    express = require("express"),
    router = express.Router();

Then, in a route, simply call React.renderToString and pass it your component:

router.get("/", function(req, res) 
    var markup = React.renderToString(

        markup: markup

Finally, in your view, simply output the markup:

    <div id="content">

That’s it for the server code. Let’s look at what’s necessary on the client side.


Webpack9 is a JavaScript bundler. It bundles all of your static assets, including JavaScript, images, CSS and more, into a single file. It also enables you to process the files through different types of loaders. You could write your JavaScript with CommonJS or AMD modules syntax.

For React .jsx files, you’ll just need to configure your webpack.config file a bit in order to compile all of your jsx components.

Getting started with Webpack is easy:

npm install webpack -g # Install webpack globally
npm install jsx-loader --save # Install the jsx loader for webpack

Next, create a webpack.config.js file.

var path = require("path");

module.exports = [
    context: path.join(__dirname, "public", "javascripts"),
    entry: "app",
        path: path.join(__dirname, "public", "javascripts"),
        filename: "bundle.js"
        loaders: [
             test: /.jsx$/, loader: "jsx-loader?harmony"
        // You can now require('file') instead of require('file.coffee')
        extensions: ["", ".js", ".jsx"],
        root: [path.join(__dirname, "public", "javascripts")],
        modulesDirectories: ["node_modules"]

Let’s break this down:

  • context
    This is the root of your JavaScript files.
  • entry
    This is the main file that will load your other files using CommonJS’ require syntax by default.
  • output
    This tells Webpack to output the code in a bundle, with a path of public/javascripts/bundle.js.

The module object is where you set up “loaders.” A loader simply enables you to test for a file extension and then pass that file through a loader. Many loaders exist for things like CSS, Sass, HTML, CoffeeScript and JSX. Here, we just have the one, jsx-loader?harmony. You can append options as a “query string” to the loader’s name. Here, ?harmony enables us to use ECMAScript 6 syntax in our modules. The test tells Webpack to pass any file with .jsx at the end to jsx-loader.

In resolve we see a few other options. First, extensions tells Webpack to omit the extensions of certain file types when we require files. This allows us just to do require("./file"), rather than require("./file.js"). We’re also going to set a root, which is simply the root of where our files will be required from. Finally, we’ll allow Webpack to pull modules from the node_modules directory with the modulesDirectories option. This enables us to install something like Handlebars with npm install handlebars and simply require("handlebars"), as you would in a Node.js app.

Client-Side Code

In public/javascripts/app.js, we’ll require in the same App component that we required in Express:

var React = require("react"),
    App = React.createFactory(require("components/app"));

if (typeof window !== "undefined") 
    window.onload = function() 
        React.render(App(), document.getElementById("content"));

We’re going to check that we’re in the browser with the typeof window !== "undefined". Then, we’ll attach to the onload event of the window, and we’ll call React.render and pass in our App(). The second argument we need here is a DOM element to mount to. This needs to be the same element in which we rendered the React markup on the server — in this case, the #content element.

The Search component in the example above was rendered on the server and shipped down to the client. The client-side React sees the rendered markup and attaches only the event handlers! This means we’ll get to see an initial page while the JavaScript loads.

All of the code above is available on GitHub10.


Web architecture definitely goes through cycles. We started out rendering everything on the server and shipping it down to the client. Then, JavaScript came along, and we started using it for simple page interactions. At some point, JavaScript grew up and we realized it could be used to build large applications that render all on the client and that use the server to retrieve data through an API.

In 2015, we’re starting to realize that we have these powerful servers, with tons of memory and CPU, and that they do a darn good job of rendering stuff for us. This isomorphic approach to building applications might just give us the best of both worlds: using JavaScript in both places, and delivering to the user a good experience by sending down something they can see quickly and then building on that with client-side JavaScript.

React is one of the first of what are sure to be many frameworks that enable this type of behavior. Ember’s developers are already working on isomorphic-style applications as well. Seeing how this all works out is definitely going to be fun!


(rb, al, il)


  1. 1 http://facebook.github.io/react/
  2. 2 https://angularjs.org/
  3. 3 http://backbonejs.org
  4. 4 http://emberjs.com/
  5. 5 http://knockoutjs.com
  6. 6 http://rubyonrails.org/
  7. 7 http://asp.net/mvc
  8. 8 http://expressjs.com/
  9. 9 http://webpack.github.io/
  10. 10 https://github.com/jcreamer898/expressiso
  11. 11 http://facebook.github.io/react/
  12. 12 https://egghead.io/technologies/react
  13. 13 http://expressjs.com/
  14. 14 http://react.rocks/tag/Isomorphic
  15. 15 http://webpack.github.io
  16. 16 https://github.com/petehunt/jsx-loader

The post React To The Future With Isomorphic Apps appeared first on Smashing Magazine.

Read this article:

React To The Future With Isomorphic Apps

Four Ways To Build A Mobile Application, Part 4: Appcelerator Titanium

This article is the last in a series of articles covering four ways to develop a mobile application. In previous articles, we covered how to build a tip calculator in native iOS, native Android and PhoneGap. In this article, we’ll look at another cross-platform development tool, Appcelerator Titanium.
PhoneGap enabled us to build a tip calculator app quickly and have it run on both the Android and iOS platforms. In doing so, we were left with a user interface (UI) that, while quite usable, did not offer quite the same experience as that of a truly native application.

Link to article: 

Four Ways To Build A Mobile Application, Part 4: Appcelerator Titanium


An Introduction To DOM Events

Click, touch, load, drag, change, input, error, resize — the list of possible DOM events is lengthy. Events can be triggered on any part of a document, whether by a user’s interaction or by the browser. They don’t just start and end in one place; they flow through the document, on a life cycle of their own. This life cycle is what makes DOM events so extensible and useful. As a developer, you should understand how DOM events work, so that you can harness their potential and build engaging experiences.

See the article here: 

An Introduction To DOM Events

Introducing Responsive Web Typography With FlowType.JS

It’s our great pleasure to support active members of the Web design and development community. Today, we’re proud to present FlowType.JS that allows a perfect character count per line at any screen width. This article is yet another special of our series of various tools, libraries and techniques that we’ve published here on Smashing Magazine: LiveStyle, PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin, CSSComb and Jelly Navigation Menu. — Ed.

Continue at source:  

Introducing Responsive Web Typography With FlowType.JS

Progressive And Responsive Navigation

Developing for the Web can be a difficult yet rewarding job. Given the number of browsers across the number of platforms, it can sometimes be a bit overwhelming. But if we start coding with a little forethought and apply the principles of progressive enhancement from the beginning and apply some responsive practices at the end, we can easily accommodate for less-capable browsers and reward those with modern browsers in both desktop and mobile environments.


Progressive And Responsive Navigation

A Web Developer’s Guide To Adobe InDesign

Over the past several years, there has been a big divide between designers: those who work in print distribution and those in digital distribution. The irony is that, despite the disputes, name-calling and flat-out arguments between the two camps, their techniques and methods are far more common than many believe. Both sides of this communications field are heavily influenced by each other. Grid systems and typography now play a strong role in Web-based design, and usability and user experience play a big part in developing print material.

Continue reading: 

A Web Developer’s Guide To Adobe InDesign

Pixel Perfection When Rotating, Pasting And Nudging In Photoshop

When creating Web and app interfaces, most designers slave over every single pixel, making sure it’s got exactly the right color, texture and position. If you’re not careful, though, some common functions like moving, rotating and pasting can undo your hard work, resulting in a blurry mess. But with some small changes to your workflow, you should be able to maintain the highest-quality artwork from the start to the end of the project.

More here – 

Pixel Perfection When Rotating, Pasting And Nudging In Photoshop

10 Useful Typography Tips For Adobe Illustrator

Typography is not only an all-important aspect of design, it is also an art form in and of itself. Choosing the right font, the perfect spacing and even the correct shape of text can be an important factor as to whether a project fails or succeeds. Although Illustrator is not really used for multiple-paged projects, many would agree that it is one of the most powerful applications for creating vector graphics, such as logos, and it is also often used for one-page documents, such as business cards, posters, or postcards.

Read article here: 

10 Useful Typography Tips For Adobe Illustrator