Happy Friday and welcome to this week’s design and development roundup! 

This week, Apple launched the iPhone 7 and Apple Watch Series 2 to mixed responses, Chrome decided that is was going to help kill HTTP and Snapchat is reportedly eyeing up going public. 

Alternatively, we have far more useful resources than that information above, below. Enjoy!
 

Adam AvatarAdam

Twitter Reinvigorates Direct Messaging

New Twitter DM Typing Indicator

Photo: Twitter

With so many options for messaging friends and family, apps and companies that have built themselves on communication are falling over themselves trying to keep users in-app and using their platform. 

Twitter is the latest to roll out a set of updates to its Direct Messaging arm with send and read receipts (yikes! You can turn them off, though) typing indicators for you to see if the person you’re chatting to is still paying attention, and web link previews, much like Apple is introducing to iMessage in iOS 10.

It’s nice to see messaging platforms move forward and adopt the standard that has been around for a while. 

VIEW


Ruth AvatarRuth

Animated Weather Card

Animated CSS Weather Card

Photo: CodePen

Seeing as though Autumn is just around the corner, and we’re getting a whole host of weather lately, it seems fitting to showcase a lovely dynamic weather card created by Steve Gardner

Using SVG’s and GSAP, the card shows a seamless animation between states, and some of animations break outside the container. Shaking the whole card when Thunder strikes was a brilliant touch also! 

VIEW


Juma AvatarJuma

Granim.js

Granim.js Logo

Photo: Granim.js

Granim is a simple javascript package for creating interactive gradient animations. Granim can be installed via npm using:

npm install granim --save

Granim requires a canvas element to be created and uses this to create the gradients. Basic usage:

var granimInstance = new Granim({
    element: '#canvas-Id',
    name : 'radial-gradient',
    direction : 'radial',
    opacity : [1,1],
    isPausedWhenNotInView: true,
    states : {
        "default-state":{
            Gradients: [
                ['#ffb347','#ffcc33'],
                ['#83a4d4', '#b6fbff'],
                ['#9D50BB','#6E48AA']		
            ]
        }		
    }    
});

In this example, gradients is a multi-nested array that holds our different gradient objects and its colours. The gradients can have more than 2 colours assigned to them. Granim also supports addition of background images, this can be added via css. Transition speed controls the gradient animation speed. Opacity adapts the opacity of each colour of the gradient while direction dictates the orientation of the gradient. Element is the Id of our canvas. Using granim means less work is done in the css:

    #canvas-radial {
        position:absolute;
        display: block;
        width: 100%;
           height:100%;
           top:0;
           right:0; 
           bottom:0; 
           left:0;     
    }

The css snippet and the sample javascript code can be used to create a radial gradient animation with 3 gradients in queue which have 2 colours. To read more on Granim:

VIEW MORE


Stephen AvatarStephen

The Importance of A/B testing

AB Testing

Photo: PHP Insight

It’s all too easy to skip A/B testing because you think you already know exactly what your customers wants. A/B testing allows you to make subtle and careful changes to a user’s experience. 

Carrying out A/B testing consistently allows continual improvement of a user experience, in turn this will help you reach your conversion rate goals.

What is A/B Testing?

A/B testing is a method of comparing two different versions of a webpage, to determine which one performs better, basically it’s a big experiment where different users are shown a different experience. Analytics are then used to determine which variation was the best performing.

How to A/B Test

In an A/B test, you either create two versions of a new webpage or make a new version of an existing webpage. This change is normally something subtle such as a change in headline or moving a call to action button. Visitors are served one of the two variations and their interaction with each experience is measured using analytics. You can then determine what effect the different experiences had on your user's journey and behaviour.

VIEW


Thanks for reading! Enjoy this roundup? Let us know on Twitter or Facebook!

0
Make your Instagram beautiful. Preview your images before you post them ›