iFrame to parent communication across domains :: #JS #iFrame

iFramed content may be less than ideal to use, but in many cases it provides a way to easily bring in 3rd party content.  If there is communication that is necessary between the content inside the iFrame and the parent all hope is not lost.

You should use a postMessage event to talk from the content in the iFrame to the Parent window.  The below will work across domains and will not throw a JS security violation.

On your parent page:

window.addEventListener(“message”, function(){}, false);

On your content being iFramed in:

parent.postMessage(“myMessage”,”*”);

Don’t design pages, build the Atoms and Molecules that make up Pages

Atoms are abstract and aren’t often terribly useful on their own, but they provide a useful reference and allow you to see all your global styles laid out at a glance.   Atoms are basic tags, such as form labels, inputs or buttons. They also include more abstract elements like color palettes, fonts, and animations.

In interfaces, molecules are groups of elements that function together as a unit. For example, a form label, search input, and button atom can combine them together to form a search form molecule.

Organisms can consist of similar and/or disparate molecule types. For example, a masthead organism might consist of a logo, navigation, and search form, while a “product grid” organism might consist of the same product info molecule repeated over and over.

Templates are comprised mostly of organisms combined together to form page-level objects.  Templates mostly focus on content structure (such as character length, image size, etc) rather than the actual content.

Pages are specific instances of templates and swap out placeholder content with real representative content to give an accurate depiction of what a user will ultimately see.

Pages are essential for testing the effectiveness of the design system. This final form allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.

 

 

#UX :: One bad experience and poof…customers are history

This is so very true.   Your website may be the first time that a consumer has a chance to interact with your brand online.  If you provide a bad experience to them they are more than likely to never return.  This is why the experience of the consumer is so important in the process of developing a site.  You may code something to specifications, but as a consumer is it something that would be easy for you to use?

 

Google :: Multi-Screen Resources – Build a website that showcases your business on every scree

There are some great resources at this link below along with some conversion rates related to companies that have made their sites responsive.    All future development should be thought about from a multi-screen standpoint.

 

Responsive Full Screen Phaser Test :: #html5 #canvas #phaser

Have you created a Phaser app and wanted to make it take up the entire page height/width as well as re-size when the browser re-sizes?

The below is just a piece of a game I was testing with to make it full screen, but based on this you should get the concept.  In mobile this also allows for it to re-size on device rotation to match the new width/height of the display.  You would also need to add logic to allow your elements to re-position themselves in the game based on the new width/height.

JS:

$( document ).ready(function() {

var setup = {

init:function(){

var firstheight = window.innerHeight;
var firstwidth = window.innerWidth;
var game = new Phaser.Game(firstwidth, firstheight, Phaser.AUTO, ‘game_div’);

$(window).resize(function() { display.resizer(); } );

}

};

var display = {

resizer: function () {

var myheight = $(window).innerHeight();
var mywidth = $(window).innerWidth();

try{

game.width = Number(mywidth);
game.height = Number(myheight);
game.stage.bounds.width = Number(mywidth);
game.stage.bounds.height = Number(myheight);

game.renderer.resize(Number(mywidth), Number(myheight));

Phaser.Canvas.setSmoothingEnabled(game.context, false);

}

catch(e){

console.log(“Error description: ” + e.message + “”);

}

}

};

setup.init();

});

 

html:

<!DOCTYPE html>
<html>

<head>

<meta charset=”utf-8″ />
<title>Full Screen Phaser</title>

<style>

html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color:#000;}

</style>

<script src=”assets/js/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”assets/js/phaser.min.js”></script>
<script type=”text/javascript” src=”assets/js/main.js”></script>

</head>

<body>

<div id=”game_div”> </div>

</body>

</html>