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.


$( document ).ready(function() {

var setup = {


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();


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);



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








<!DOCTYPE html>


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


html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;


<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>



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



Simple touch events in Phaser :: #html5 #Phaser

I recently was doing some work in Phaser and had noticed the spacebar being used to initiate a jump in game example:

// Call the ‘jump’ function when the spacekey is hit

var space_key =;

space_key.onDown.add(this.jump, this);

However for a mobile game it works much better using “game.input.onDown”:, this);

The above also works when the mouse is clicked on the HTML5 canvas element when on a desktop.


JSP conditionals :: c:choose c:when c:otherwise

I have been doing some coding in JSP recently and here is a code snip I wanted to share.  It is essentially a if/else conditional, but in the JSP:



<c:when test=”${someConditional}”>

<!– if someConditional is met output some html –>


<c:when test=”${someOtherConditional}”>

<!– if someOtherConditional is met output some other html –>



<!– final content if no Conditional is met output some different html –>