This year the line-up had a nice mix of professions ranging from Illustrators, Designers, Developers, Engineers and a Fashion Icon in the form of Wayne Hemingway, who I wish had a longer speaking slot as he had a lot of interesting things to say on how he got to where he is today. All the talks were interesting and provided insight / inspiration towards our industry, but for me there was a few talks that stood out among the rest.

Seb Lee-Delisle

Having seen Seb talk a few times now you kind of know what to expect from him, however he always seems to knock it out of the park. He did one of his infamous live coding talks which involved programming on a Commodore 64! After his little fun on the C64 he got onto the main part of his talk which primarily focused on persuading designers to learn to code, his focal point being you can be just as creative with code as you can with visual design. He backed up his point by showing everyone how with a live javascript demo, the end result being an animated particle script which was all done with a few lines of javascript. 

It was pretty impressive what was achieved with what seemed like very little javascript because by just looking at the end result first I would assume it would be rather complicated to achieve and mostly likely would of put me off on trying. To see that it actually didn't seem that difficult has definitely encouraged me to better my limited knowledge of javascript. 

Tiago Pedras

The highlight talk of the day for me was Tiago, who is a web designer and teacher at ESAD School of Art & Design in Porto, Portugal. Tiago's talk was about how we can tackle the problem of teaching Web Design in an effective way which is also still enjoyable for the students. The web is fast evolving and quick to adapt to the ever changing way users view websites, yet the way web design is taught at most education establishments is out dated and sometimes boring. 

Tiago had a great approach to tackling this issue, he introduced gamification into his classes next project to help motivated the students. This was done by creating The Golden Coconut Awards, the idea being that the class would create their own teams and go about launching a web app from scratch, so the planning, design, building and then the final pitch would be done at the awards ceremony where a winner was announced. 

It is an interesting way to approach teaching and I know I would have loved to have had that class when I was at University, and so did most people at the conference. As Tiago mentioned the students would also get a better understanding of what working in the industry was like, working effectively in team, the challenge of managing time and resources effectively as well as how to talk about your work.

It was a great talk about an area in the industry that has kind of been neglected by professionals in the past, and only until recently have people started to to understand that it's important for the web to be taught effectively to the next generation.

It's good to see conferences going in this direction of having more varied talks. Also having fringe events is a nice touch, for instance New Adventures had blowing, smaller talks the night before, football and a photography walk. 

As expected NaConf was another great conference with some really good talks and when you walk out it makes you want to go home and start designing / building some really cool stuff, which to me is why I love going to conferences. Too bad it is the last one, though I half expect it pop up again in a few years either with the same name or a new one altogether. 

- Ben Darby

Bookmark / Share

Tags:

Now the reason I don't generally go to conferences is because I’m usually put off by the thought that they might be too techie, uninteresting or irrelevant. On this occasion though I was persuaded by a friend who told me about this conference which didn't sound too nerdy and covered a broad range of design. It also had some well-known and respected speakers in the design field including the fashion icon Wayne Hemmingway, Creative Coder Seb Lee-Delisle, Simon Collison, Jon Tan, Tyler Mincey, Steph Troeth, Tiago Pedras and Michael Heilemann. But for me, two people really stood out on that day.

First was a Graphic Designer from Brooklyn called Jason Santa Maria. He talked about the design process and how we can always improve and evolve the way we work. His working method in the past involved producing endless psd files and working in a very linear way starting with planning to creating, testing and finally launch. It’s not like that now at all and the process changes depending on the job. He was also big endorser of sketching ideas out before getting into detailed hi-fidelity design and said that 'sketching is not about being a good artist but about being a good thinker'. This made me think because I sometimes go straight into photoshop and can occasionally get design-block or bogged down in design polishing before I’ve even decided what I want the website to say or do.

Second was Jessica Hische. She is a letterer, illustrator and 'crazy cat lady' who has produced tons of really beautiful illustrative typography, including single letter book jackets for Penguin, a ‘Florence & the Machine’ poster and the titles for a Wes Anderson movie to name a few. She spoke about her work ethic which she calls 'Procrastiworking' - which is basically the fun stuff you do whilst you’re not working and from this she has carved her own niche career. She also said that it is nearly impossible to get all of your career happiness from client work alone, so go out and create your own fun side projects. Her talk ended with a slide titled 'follow your f****** bliss!’ Not a bad strategy for life! I found her humour and kooky outlook quite refreshing and read afterwards that not only does she illustrate and design but also builds her own websites and cannot understand why some designers aren't also doing this. Now, I’m at that particular junction in my career where I’m thinking 'do I need to do that too?' but have always maintained that I’m a 'visual person' and don't want to be staring at code all day. I now think that this is probably an excuse and that coding scares me! I suppose I’m worried I won’t understand it or all of those years spent at art college would have been for nothing. But what exactly am I afraid of and how hard can it really be?

I learned some really useful things from the NewAdConf 2013, but the best thing is that  it has made me realise what a great industry I work in. Being a designer is pretty cool and I can’t imagine doing anything else. I’m just gutted there won’t be another New Adventures Conference.

ive positive actions I will take from the conference are;

1. To do more sketching
2. To learn HTML and CSS
3. To build my own website
4. To create fun work in my own time
5. To attend more conferences!

- Jon Knight

Bookmark / Share

Tags:

The beautiful thing about PhoneGap is that we can use our existing web design skills set to produce native apps for iPhone and not have to cross-browser test our designs across an ever increasing multitude of web browsers, or so we thought.

Testing PhoneGap apps on the iPhone is even worse! Small performance improvements on one phone wreaks havoc on others - even when iOS versions are identical.

Now we have a few apps under our belt (and a suite of test devices) we have a much better idea of what can be achieved but I'm sure Internet Explorer was never this much trouble. 

- Joe Tuckwell

Bookmark / Share

Tags:

Last week’s SPARKies event was Bath’s first tech awards ceremony and part of the first Bath Digital Festival - and we were shortlisted as finalists for the Best Digital Design Agency.

We were shortlisted as finalists for the Best Digital Design Agency Award - a real honour because of the quality of digital and web design agencies in and around Bath. The team at Complete Control pipped us to the post this year for their great work in the children’s entertainment sector but it’s fantastic to have our work recognised by this particular panel of judges; a broad-ranging group of experienced techies and creatives whose opinions we really value. The panel of 16 included the likes of Tessa Cook (MD of eCommerce, Dyson), Paul Douglas (Editor, TechRadar) and Ryan Carson (CEO of Treehouse) among others.

The night was a lot of fun but what really impressed me was the atmosphere at the event. Talking to other nominees I noticed a genuine pride to be part of the South West’s digital economy. Events like The SPARKies only go to further highlight that industry leading digital businesses don’t need to be based in London (although it would certainly help with my travel costs).

The Awards and Digital Festival as a whole were both a big success. Credit to everyone involved in organising it and helping. Thanks in particular to Mike Ellis and the team at Storm for organising the Festival, and to David Maher Roberts for organising The SPARKies - everyone involved has helped to make Bath a bigger mark on the digital map.

We’re looking forward to 2013 when we can go one better and take the prize.

(...of course it’s widely recognised that the success of the whole Digital Festival is actually down to the quality of bottled water provided [by us] at the opening event)

- Joe Tuckwell

Bookmark / Share

Tags:

This is the second part of our Dojo and jQuery side by side series. If you’re not following allowing with the series, do be sure to check out Part 1: Dom Basics.

As mentioned in the previous article, the aim here is to provide a simple unbiased side by side comparison of common jQuery operations and how they are achieved in Dojo.

Today, we’re looking at animation and as a quick reminder you should assume that all the calls below are called when the DOM is ready.  If you’re not sure how to do this, checkout Part 1.

Lets go!

Fading elements in and out

This tends to be the workhorse for many beginner javascript programmers.  Simply select the element you want and then the javascript library will do the rest. 

jQuery is more succinct here since it assumes you want the animation to start straight away whereas dojo assumes you will want to trigger it later using the play method.  Dojo can be told to start automatically by providing the “auto” configuration option.

As with node traversal in Part 1, the NodeList animation extension is not loaded by default, so you need to require it.  As a reminder, NodeLists are what are returned from a dojo.query(), similar to jQuery collections which are returned from calling $().

//jQuery
//With default duration (400ms)
$("#header img").fadeOut(); 

//Specifying the duration
$("#header img").fadeOut(3000);                                 // Specify the duration in milliseconds


//Dojo
dojo.require("dojo.NodeList-fx");

//With default duration (350ms)
dojo.query("#header img").fadeOut().play();         
dojo.query("#header img").fadeOut({auto:true});                 // Automatically start (notice the play method is not called)

//Specifying the duration
dojo.query("#header img").fadeOut({duration:3000}).play();      
dojo.query("#header img").fadeOut({duration:3000, auto:true});  // Automatically start and specify the duration

As you would expect each also allows you to provide some configuration options as arguments to the fadeOut method.  The “fadeIn” mechanism is exactly the same as the “fadeOut”:

//jQuery
//With default duration (400ms)
$("#header").fadeIn(); 

//Specifying the duration
$("#header").fadeIn(3000);                                 // Specify the duration in milliseconds


//Dojo
dojo.require("dojo.NodeList-fx");

//With default duration (350ms)
dojo.query("#header").fadeIn().play();         
dojo.query("#header").fadeIn({auto:true});                 // Automatically start (notice the play method is not called)

//Specifying the duration
dojo.query("#header").fadeIn({duration:3000}).play();      
dojo.query("#header").fadeIn({duration:3000, auto:true});  // Automatically start and specify the duration

Slide Up & Down

Dojo takes a different naming convention when it comes to “sliding” and element.  jQuery uses this term to specify the hiding or showing of an element by changing its height.  Dojo prefers to use the more commonly known “wipe” terminology, which to be fair, is far more accurate (if you’ve done any type of video work, you’ll know this is a common term for this effect).

As with most of the Dojo animations, you will need to load the NodeList animation extensions manually.  Take note of the different CSS properties needed in order to get each to work. 

For brevity I have omitted the Dojo “auto:true” example, but rest assured it works with all the animation methods.

//jQuery
$("div.error").slideUp();
$("div.error").slideDown();                 // Only works with elements hidden with CSS "display:none" or that were hidden with "slideUp"


//Dojo
dojo.require("dojo.NodeList-fx");

dojo.query("div.error").wipeOut().play();
dojo.query("div.error").wipeIn().play();    // Only works on elements hidden with CSS "height: 0" or that were hidden with "wipeOut"

Animate multiple properties simultaneously

The examples in the preceding two examples are convenience functions that behind the scenes call an all purpose property animation method.  Both libraries will alow you to call each this method yourself if you want to animate more than one property at a time.

Once again, remember that we could provide the “auto:true” to the dojo animateProperty configuration object if we wanted it to play automatically as opposed to calling the play method.

//jQuery
$("#target").animate({
    width: 100,
    height: 300
}, 3000);


//Dojo
dojo.require("dojo.NodeList-fx");

dojo.query("#target").animateProperty({
    properties: {
        width: 100,
        height: 300
    },
    duration: 3000
}).play()

Chaining animation

When it comes to chaining animation, we see a clear difference in how each library chooses to handle this.  jQuery opts for the incredibly convenient chaining syntax, whereas Dojo uses a special “chain” method to collect the animations and then run them in sequence.

Although the jQuery method may be more convenient for simple animation chains, the ability for the Dojo chain method to accept an array allows you to store the animation chain and push/pop effects into it over time.  This can be very useful for animation sequences that change over time based on user actions.

Both implement their chaining mechanism so that it accepts all the standard animation effects.  Hence you can use the short hand “fadeIn” methods or the more powerful “animate” method when chaining animations.

//jQuery
$("#flash").fadeOut().fadeIn()

//Dojo
dojo.require("dojo.NodeList-fx");

dojo.fx.chain([                         
    dojo.query("div p").fadeOut(),
    dojo.query("div p").fadeIn()            // I would recommended you store the dojo.query("div p") as a variable to avoid repeated DOM queries
]).play();

Callback function when animation finishes

Here we once again see a distinct difference in how each library chooses to handle callback functions.  jQuery uses a standard API pattern whereby if the last argument supplied to an animation function, it will be called when the animation finishes. 

Dojo also has a standard pattern, but it chooses to use prespecified events to which you can attach callbacks. You can register callbacks for the following events: beforeBegin, onBegin, onAnimate, onEnd, onPlay, onPause, onStop.  The most commonly used is the “onEnd”, which is called when the animation finishes.

//jQuery
$("div p").fadeOut(3000, function(){
    alert("Animation has finished")
})

//Dojo
dojo.require("dojo.NodeList-fx");

dojo.query("div p").fadeOut({
    onEnd: function(){
            console.log("animation finished");
        },
    duration: 3000
}).play();

- Christopher Imrie

Bookmark / Share

Tags:

Dojo is a fantastic toolkit that we have used on many projects here at moresoda.  Although we still love and use jQuery nearly everyday, we use Dojo on projects where the front end requirements are more complicated than your average DOM manipulation and HTML5 shims.

This article isnt about preaching Dojos benefits though.  If you have a read of the features and benefits of Dojo you can make up your own mind.  That being said, Dojo can be harder to get into since is it a much larger than jQuery.

Hence my aim here is to provide a simple, unbiased side by side comparison of common jQuery operations and how they are achieved in Dojo.

Lets go!

Loading the script from the Google CDN

Both can be loaded from the Google CDN.  If you use any components of Dojo that are not part of Dojo Base (the file being loaded by the script tag below), they will be dynamically pulled from the CDN as well.

//jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

//Dojo
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js" type="text/javascript"></script>

Waiting for the DOM Ready Event

The Dojo ready and jQuery ready methods are identical.  With Dojo you dont need to specify the document, as the current document is implied.

//jQuery
 $(document).ready( function(){
   // Your code here
 });

 //Dojo
dojo.ready( function () {
    // Your code here
})

Querying the DOM

Both Dojo and jQuery support the CSS3 selectors.  Hence there is no real difference in usage here apart from dojo being more verbose.

When querying the DOM, each method returns their own array type collection of nodes that have been matched.  jQuery returns a jQuery Collection and Dojo returns a Dojo NodeList.  Both can be accessed just like an array but they allow chaining of methods to quickly add/remove classes, change properties etc.

//jQuery
$("some CSS3 selector");               // Returns a jQuery Collection (kind of like an array)

//Dojo
dojo.query("some CSS3 selector");      // Returns a Dojo Node List (kind of like an array)

Adding and removing classes

Both methods are identical and can be chained infinitely to add and remove classes in a single call.

Adding

//jQuery
$("p:last-of-type").addClass("last");

//Dojo
dojo.query("p:last-of-type").addClass("last");

Removing

//jQuery
$("p:last-of-type").removeClass("last");

//Dojo
dojo.query("p:last-of-type").removeClass("last");

Getting and Manipulating HTML Attributes

Once again the setter and getter methods are identical, making it very easy to remember!  As with class manipulation, both will allow these to be chained together for convenience.

Getting attributes

//jQuery
$("a.external_link").attr("target");

//Dojo
dojo.query("a.external_link").attr("target");

Setting attributes

//jQuery
$("a.external_link").attr("target", "_blank");

//Dojo
dojo.query("a.external_link").attr("target", "_blank");

Looping over multiple queried DOM nodes

Since the object returned from querying the DOM is array like in nature, you can loop through the items.  Both jQuery Collections and Dojo NodeLists contain built in methods that allow you to conveniently lopp through the items.

Take note that the technique for accessing the current item in the loop is different:

//jQuery
$(".someClass").each( function() {
    $(this).addClass("active");                         //Current node in the loop is available as "this"
});

//Dojo
dojo.query(".someClass").forEach( function(node) {
    dojo.addClass(node, "active");                      //Current node in the loop is available as function argument "node"
});

Creating HTML Nodes

jQuery introduced a novel way of creating HTML elements which was by parsing a string of HTML text string into its correct HTML Object.  Due to its convenience, Dojo has a method that allows you to achieve the same thing.

//jQuery - HTML Parsing
var newNode = $("<h1>This is a new heading</h1>");

//jQuery - Alternate
var newNode = $("<h1/>").prop({
    "innerHTML" : "This is a new heading"
});

//Dojo - HTML parsing
var newNode = dojo.toDom("<h1>This is a new heading</h1>");            

//Dojo - Alternate
var newNode = dojo.create("h1", {
    "innerHTML" : "This is a new heading"                             
})

Inserting HTML nodes into the DOM

As opposed to using multiple methods to dictate the position to insert a new element, Dojo opts for a single method with a string argument that dictates the position the new node should be inserted (eg: first, last, after etc).

Append

//jQuery
$("#header").append(newNode);

//Dojo
dojo.place( newNode, "header", "last")

Prepend

//jQuery
$("#header").prepend(newNode);

//Dojo
dojo.place( newNode, "header", "first");

Before

//jQuery
$("#header").before(newNode);

//Dojo
dojo.place( newNode, "header", "before");

After

//jQuery
$("#header").after(newNode);

//Dojo
dojo.place( newNode, "header", "after");

Creating and Inserting HTML nodes in a single go

Both provide convenience methods for creating and inserting in a single call.  Dojo’s create method’s third parameter expects the name of an element ID (in the example below, “#article”) but it will also accept an HTML node found by using the dojo.query method.

//jQuery
$("<p>Howdy Ho!</p>").prependTo("#article");

//Dojo
dojo.create("p", {
    "innerHTML": "Howdy Ho!"
}, "article", "first");                                 // Third parameter to this function accepts a CSS ID or an HTML Node.

Removing HTML Nodes from the page

Neither will actively destroy the object, but merely detach it from the DOM.  If the node removed is not referenced anywhere else in the currently running script, then the browser’s garbage collection will destroy the object for you.  Dojo does have an additional dojo.destroy method which will destroy an object for you.

//jQuery
$("#header li").remove();                               //Removes all items in the collection from the page

//Dojo
dojo.query("#header li").orphan();                      //Loops over each item found and hands it over to the destroy node method

Traversing

Dojo does not load the traversing methods by default.  Hence if you want to use the methods below you will need to load the NodeList-traverse extensions before using them.

Next element

//jQuery
$("li:first-of-type").next();                       //Next nodes after found nodes, if available
$("li:first-of-type").next(".active");              //Next nodes, but only if they match the CSS selector


//Dojo
dojo.require("dojo.NodeList-traverse");             //This loads the traversion extensions to Dojo NodeLists.  Only needs to be called once

dojo.query("li:first-of-type").next();
dojo.query("li:first-of-type").next(".active");

Previous element

//jQuery
$("li:first-of-type").prev();                       //Previous nodes after found nodes, if available
$("li:first-of-type").prev(".active");              //Previous nodes, but only if they match the CSS selector


//Dojo
dojo.require("dojo.NodeList-traverse");            

dojo.query("li:last-of-type").prev();
dojo.query("li:last-of-type").prev(".active");

Child elements

//jQuery
$("ul.nav").children();                             // All child nodes of the found nodes
$("ul.nav").children(".active");                    // All child nodes, but only if they match the CSS selector 


//Dojo
dojo.require("dojo.NodeList-traverse");             

dojo.query("ul.nav").children();
dojo.query("ul.nav").children(".active");

Parent element

// jQuery
$("li.active").parent();  

// Dojo
dojo.require("dojo.NodeList-traverse");            
dojo.query("ul.nav").parent();

- Christopher Imrie

Bookmark / Share

Tags:

I’ve been doing some playing with pseudo-elements recently on a personal project, and ended up doing a little bit of reading up about CSS gradients. I can’t remember where the article was, it’s not important really, but I wanted to share what I’ve managed to achieve with them.

So my idea was pretty simple, try and recreate an iPhone style “Send” button. My first attempts weren’t too bad, rounded corners were easy, thanks to colorzilla creating gradients was simple, and then I just applied them to a pseudo element, positioned it absolutely and created the overlay. While playing around with the webkit inspector, I noticed when I tried to change the text colour on the button, the gradient was displaying over the top of the text which made it look a bit weird. So I thought that’s simple, I’ll wrap the link text in a span, change the z-index on the span, done. But that’s far too easy, so I thought I’d see if I could do it without any added markup. Behold.

http://dabblet.com/result/gist/1589041

The code breakdown should be quite simple, but I’ll go through it step by step anyway. Because I was playing around with “Tags” I ended up doing this with lists, but it can be done standalone easily enough.

<ul class="tags">
	<li>Tagged With</li>
	<li><a href="#">Tag One</a></li>
	<li><a href="#">Tag Two</a></li>
	<li><a href="#">Tag Three</a></li>
	<li><a href="#">Tag Four</a></li>
	<li><a href="#">Tag Five</a></li>
</ul>


<ul class="tags alt">
	<li>Tagged With</li>
	<li><a href="#">Tag One</a></li>
	<li><a href="#">Tag Two</a></li>
	<li><a href="#">Tag Three</a></li>
	<li><a href="#">Tag Four</a></li>
	<li><a href="#">Tag Five</a></li>
</ul>

That’s the HTML, two lists. I had mine with a clearfix attached to them, but for this example they don’t have it, hence the clear and margin.

	.tags {
		clear: both;
		list-style: none;
		padding: 0;
		margin: 0 0 50px;
	}
	
	
	.tags li {
		float: left;
		margin: 0 4px 0 0;
	}
	
	.tags li:first-child {
		margin: 4px 4px 0 0;
	}
	
	.tags li a {
		display: inline-block;
		position: relative;
		font-weight: 700;
		color: rgba(255,255,255,0.4);
		padding: 4px 8px;
		text-decoration: none;
		border-radius: 12px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.25); 
		   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.25); 
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.25); 
	
		text-shadow: rgba(0,0,0,0.15) 0 -1px;
	}

	.tags li a:before,
	.tags li a:after {
		position: absolute;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		text-indent: -9999px;
		border-radius: 12px;
	 }

	
	.tags li a:before {
		content: "Underlay";
		top: 0;
		z-index: -10;
		background: #1a4cde;
	}
	
	.tags li a:after {
		content: "Overlay";
		position: absolute;
		top: 1px;
		z-index: -5;
	
		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%,rgba(255, 255, 255, 0) 65%,rgba(255, 255, 255, 0) 66%,rgba(255, 255, 255, 0) 80%,rgba(255, 255, 255, 0.5) 100%);
		   background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%,rgba(255, 255, 255, 0) 65%,rgba(255, 255, 255, 0) 66%,rgba(255, 255, 255, 0) 80%,rgba(255, 255, 255, 0.5) 100%);
				background: linear-gradient(top, rgba(255, 255, 255, 0.5) 0%,rgba(255, 255, 255, 0) 65%,rgba(255, 255, 255, 0) 66%,rgba(255, 255, 255, 0) 80%,rgba(255, 255, 255, 0.5) 100%);
	}
	
	.tags li a:hover {
		color: rgba(255,255,255,1);
	}
	
	.alt li a {
		color: #fff;
	}
	
	
	.alt li a:after {
		background: -webkit-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); 
		   background: -moz-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); 
				background: linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); 
	}

The CSS looks a bit more complicated, but isn’t really. Setting the list styles was the first thing, I’m not going to go into that, I’ll go straight into the nitty gritty of the button itself.

	.tags li a {
		display: inline-block;
		position: relative;
		font-weight: 700;
		color: rgba(255,255,255,0.4);
		padding: 4px 8px;
		text-decoration: none;
		border-radius: 12px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.25); 
		   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.25); 
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.25); 
	
		text-shadow: rgba(0,0,0,0.15) 0 -1px;
	}

So it’s just an A tag, set as inline block which allows us to change the margin/padding on all four sides. You’ll notice I’ve got an inset shadow, that’s to create the “border” style that the button has. The text shadow simply adds a minor shadow 1 pixel above the text.

	.tags li a:before,
	.tags li a:after {
		content: "";
		position: absolute;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 12px;
	 }

The before and after elements share a few styles, they’re both absolutely positioned block level elements which span the whole height and width of their parent element. The the border radius is there so the inset box shadow displays nicely.

	.tags li a:before {
		top: 0;
		z-index: -10;
		background: #1a4cde;
	}
	
	.tags li a:after {
		position: absolute;
		top: 1px;
		z-index: -5;
	
		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%,rgba(255, 255, 255, 0) 65%,rgba(255, 255, 255, 0) 66%,rgba(255, 255, 255, 0) 80%,rgba(255, 255, 255, 0.5) 100%);
		   background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%,rgba(255, 255, 255, 0) 65%,rgba(255, 255, 255, 0) 66%,rgba(255, 255, 255, 0) 80%,rgba(255, 255, 255, 0.5) 100%);
				background: linear-gradient(top, rgba(255, 255, 255, 0.5) 0%,rgba(255, 255, 255, 0) 65%,rgba(255, 255, 255, 0) 66%,rgba(255, 255, 255, 0) 80%,rgba(255, 255, 255, 0.5) 100%);
	}
	

The before element is the background colour, so this has a z-index of -10 to pull it all the way back, and that’s about it. The after is a bit more in depth, it’s positioned 1px down from the top so that we get the inset box shadow showing. Then there’s the gradient, which starts at 50% white, which fades to 0% just over half way through the element. The third stop may be superfluous but I’ll leave it in there for now. The fourth brings the gradient back in slightly, and then the fifth just finishes it all off.

	.tags li a {
		...
		color: rgba(255,255,255,0.4);
		...
	}

	.tags li a:hover {
		color: rgba(255,255,255,1);
	}

As you can see, the standard state of the element has low opacity text, like an inactive “Send” button, then when you hover over it it comes back up to full opacity, just like the iPhone once you start to type a message.

	.alt li a {
		color: #fff;
	}
	
	
	.alt li a:after {
		background: -webkit-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); 
		   background: -moz-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); 
				background: linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); 
	}

The alternate style is something I am still playing with, although it was actually my first attempt. It sets a 15% white overlay over the top half of the element, then the bottom half is completely transparent. The third stop here is the important one, it sets the opacity to 0 immediately, which prevents the gradient from fading from 15% to 0% over the last half of the element.

More than anything this has been a trial exercise to see what’s possible with pseudo elements and CSS 3. Feel free to take this content and use it for your own projects, or play around with it. I have only tested it in Chrome 17 currently, so while it will work in the latest version of Firefox, it may need some tweaking to get it spot on.

- Jon Mack

Bookmark / Share

Tags:

For the second time in as many weeks, I have found myself talking to business owners about the lack of care they have been shown by their agency. I’m pleased to say neither related to projects we had delivered!

Just this morning, as I dropped off the melamine plates and beakers we had borrowed from a lovely independent toy shop in Bath, I got into a discussion about their new website.

The previous evening, I had been frustrated, unable to find their opening times of all things and had to refer to the SouthGate site to give me the (wrong) opening times. I also had noticed that several image links were broken and that was just scratching the surface.

Although the design of the site is lovely, by all accounts, they are tearing their hair out trying to get it to work in the way it had been intended. By the end of our conversation, I ended up feeling as frustrated as they were.

This could be a whinge about us not getting the gig, but we hadn’t gone looking for it so I have no-one to blame but myself for missing this opportunity. This also could be a rallying cry to buy local, rather than think that a web agency based in London is somehow better qualified to design and build a better website than one based in the South West. But it’s not.

Instead, my frustration stemmed from the apparent lack of care shown to their business by the agency as it dealt with problems post-deployment. So this is more of a plea to our peers to look after your clients appropriately and deliver on your promises. It’s reasonable to expect a few bug fixes in the early life of a site, but it’s how you deal with these that can effect how our industry is perceived externally.

So often, the technical aspect of web development can be a terrifying barrier for business owners to embrace the medium that can have such a huge effect on their success. Unfortunately, having made the leap, technical problems that aren’t handled appropriately can very easily tarnish the perception of the project and worse, the industry as a whole.

It’s easy to get frustrated with seemingly incessant support calls informing you that this or that is broken, this doesn’t work or that doesn’t link to where its supposed to. But with a positive attitude and a willingness to help business owners get to where they need to be, we can elevate the worth of our industry, making it more open so technical aspects of web development no longer discourage engagement.

Working for free to win business devalues our skills and expertise. By the same token, an eagerness to realise our clients’ dreams of what their site can be, whatever it takes, will reinforce our value as a dedicated web design agency to those outside the creative industry.

- Jason Bye

Bookmark / Share

Tags:

Looking for inspiration? Here are some website recommendations for you to feast your eyes on. This week’s selection includes an Oyster Restaurant and a Tasmanian Design Agency!

Poco People

Poco People are a creative partnership based in Australia. I love the no-holds barred full screen photography here which shows off their portfolio section. Simple yet beautiful.
Visit website

Island Creek Oyster Bar

I find the layout of this restaurant’s website really refreshing. Instead of going for the standard navigation route it uses a tactile one page collage style interface with enticing graphical nuggets make you want to explore more.
Visit website

Ruth - A Story of Redemention

The simple illustration and linear scrolling tell this enchanting story so beautifully. Regardless of age you cant help but be drawn in to its pure innocence.
Visit website

Corkcicle

I stumbled across this website and was instantly intrigued to find out exactly what a ‘Corkcicle’ was. This site is a great example of how to showcase an unknown product. By simply scrolling down the page you are taken through well explained sections whilst given a visual showcase of the product - very slick!
Visit website

Unfold

This is one of the most memorable websites i’ve seen in a while. Its so distinct and original that it’s already being aped by many other designer types out there. I love the big gratuitous space between the unconventional isometric sections.
Visit website

Daniel Loves Sharon

I had to add this site as it highlights the relatively new format of digital wedding invitations. As a former husband-to-be / designer I myself was handed the huge weight of designing and printing my own invites and now wish Id done something just like this. It uses some great illustration which show the couples’ eccentric and quirky personalities.
Visit website

- Jon Knight

Bookmark / Share

Tags:

We send a variety of email marketing for various clients. Recent activity has prompted questions about ‘open rates’ and ‘click rates’ and what constitutes a successful campaign. ‘Open rates’ are expressed as a percentage of emails opened from total emails sent. ‘Bounces’ are different kettle of fish which can be discussed at greater length another time.

‘Open’s’ are measured when the recipient’s email client displays html and downloads the images. If you send text only emails, the only way an open can be measured is if the recipient clicks a link. By the same token, if the html is displayed without images, the recipient might have read your email, but this isn’t recorded as an ‘open’.

In summary, an ‘open rate’ isn’t an absolute measure of the success of your email campaign. As a statistic, its much more useful to view in comparison with a number of campaigns over time so you can spot trends and react to them.

There are no typical open rates as the number of variables are potentially vast between different campaigns from size of the distribution list to the time of day it was sent. An open rate of between 20 and 40% is about average. Campaign Monitor, Mailchimp and Bronto spell it out in greater depth.

Quite reasonably, clients ask why, if people have signed up to my list, aren’t they opening my email? People are busy and if your email lands at a peak of activity in their day, unless you give them a very compelling reason to open the email, then you’ll get overlooked. This is why you should experiment with the variables at your disposal. Change the times you send emails and the subject lines you use. There are no hard and fast rules, just tweak and see what works best for your distribution list.

Mailchimp’s  advice is to be boring when writing your subject lines. Spell out exactly what is contained in the email rather than sell the contents. Remind them gently who you are, use your company name in the “From” field and “Subject line” so they recognise you and remember what services or products they bought from you in the past - hopefully illiciting a positive memory!

Inline with this, make sure you include the most important content in the top third, logo and headline story etc…

There is plenty of opinion about the best time to send emails, whether that be time of day or day in the week. It completely depends on the people you are trying to talk to. Hobbyists thinking about their weekend and the bits and pieces they might need could respond well to an email sent on Thursday morning so they can plan their weekend and order necessary supplies in time for Friday delivery. Think about when your audience is most likely to have time to read your carefully crafted message and when they are more likely to act upon its contents. Equally, don’t be disheartened because they didn’t respond to your offer of a discounted weekend break. They might have already made plans but at least now they know they can expect the occasional gem of a bargain weekend retreat from you in the future and still be prepared for you to contact them.

As is always important when experimenting, change the variables one at a time, so you can more accurately assess the cause and effect of success or failure. Use the metrics at your disposal to improve and refine your email marketing campaigns.

- Jason Bye

Bookmark / Share

Tags:

Although similar in terms of principle and process, there are different rules that should be observed when designing for the web as opposed to designing for print. These new rules came as a bit of a revelation after 10 years of designing with printed media in mind. Luckily, team moresoda have been on hand to gently suggest how I might better change my mindset from print to web.

Some people won’t be as fortunate to have such a supportive environment to work in, so I thought it might be of some benefit to share my experiences of this particular transition. Many might seem obvious, but worth noting for those used to exporting print ready pdfs…

Workspace

Set your colour space to RGB. Its also worth bearing in mind you’ll have little control over how users will see the colours you choose. There are no Pantones on the internet and the majority of users will have their monitors / screens calibrated differently - important to note when discussing designs with different clients within the same business who could see slightly different colours on screen.

Set your page rulers to pixels. Users will be viewing your designs on a screen, not in a brochure. Also, preview any graphics created in Illustrator in “pixel preview”. Your logo might look great with hairlines and 7 point font when printed, but view that at a small size on a website and all your hard work is for nothing.

Use photoshop to design, at 72dpi. No need to crank up the size of the image files to 300 dpi as you would do normally for printed material. Likewise, when purchasing images from online resources like iStock, no need to spend your hard earned credits on XL images at 300dpi. The small ones will do just fine.

There are no ‘A’ sizes. The temptation if you design in InDesign is to go with what you know, A4, A3, whatever. We use a standard 960pxl width screen and more importantly, don’t forget the screen can scroll! You don’t have to use a fixed height.

Process

Organise your photoshop files. Use appropriate groups and name them and your layers. It will make the dev teams life so much easier when you hand over your psd and they come to build your design. Also, don’t rasterize copy. If you do this, time will be wasted re-typing content in the build phase.

When saving image files out for use on site, use the handily named “Save for Web and Devices”. Depending on the intended use of the image, use jpg, gif or png. A jpg at ‘high’ setting will be just fine for most applications.

Don’t go font crazy. There are a limited number of web-safe fonts. Stray from these and your copy could end up looking less than perfect. With the addition and evolution of TypeKit, the possibilities are increasing, but this wont be appropriate for every instance. If you do have to stray from this path, bare in mind you might need to use images to represent the text. Why is this bad? Because search engines can’t read the content of an image, which can have an effect on your ranking in search results.

Use colour to highlight active text that links to other content. In print you need to reference related pages in text. Not so on the web so use colour to show users where content relates to other pages.

Presentation

Finally, when you present your designs, do it on screen. It makes absolutely no sense presenting lovely A3 inkjet prints. Printing can hide a multitude of problems with legibility, where you can get away with hairlines and delicate 6pt type, but on screen all the faults will be exposed. Check out Joe’s thoughts on presenting your designs.

This is not meant to be a comprehensive list, only a starter for 10. Different studios will have their own processes and ways of doing things which may differ, but with more experience and exposure to web design, it will become easier to switch your mindset from print to web and back again.

- Jason Bye

Bookmark / Share

Tags:

A few weeks ago Mike Boyink posted a great article entitled Show, Don’t Tell, where he put out a plea to all those writing articles about ExpressionEngine (EE) addons to show how they implement their must have addon as opposed to simply writing about how great they are.

We totally agree with Mike on this one, and as part of our initiative here at moresoda to "open up” about how we develop EE sites, we decided to start  by writing about one of our must-have addons, morePreview.

The morePreview add-on allows a user to preview their new entry from within the EE control panel immediately after publishing, even if the entry’s status is set to ‘closed’. 

Establishing a Need

This add-on was created to solve a single client’s request and has since been used on every site we’ve produced. The client in question was a relatively experienced blogger, and had been writing blog articles for years using Wordpress.  

Completely sidestepping the “Wordpress vs ExpressionEngine” debate, there was one feature that the client simply loved about Wordpress, and that was the ability to preview articles before they went live.

For those who have never used Wordpress, when writing an article there is a button you can click to preview it on your site before publishing (whilst keeping it hidden from the public). It opens up a new window with your article (or draft in progress) shown on your site as if it were live.  You can check things over, then pop back to the Wordpress publish page to fix any problems you see and then preview again. You then rinse & repeat.

This is incredibly useful since any article that contains more than simple text can become unwieldy when using even the best WYSIWYG editor.

Problems With Native Functionality and Why We Went Custom

Without the morePreview add-on, ExpressionEngine can emulate this to a certain extent using a little known feature: Live Look Templates, which can be found in the Channel preferences.  

Template-wise it does require a small bit of work to setup since you need to have a compatible template setup (more on this in a bit), however, it does produce a link to the article just published - allowing you to view your newly published content on your site.

However, there are problems:

1. The “quick save” button was removed during the update from EE1.6.x to EE2.x.  The “Quick Save” button allowed you to save your work in progress without leaving the publish screen.  The only way you can save your changes now is to submit the publish form and then return to the entry you just edited.

2. The link for the Live Look template is not shown on the publish form, but on the page shown immediately after clicking “Submit”.  Hence you cannot click the Live Look button whilst on the publish form.

3. The Live Look feature only displays a link to the preview template, which is small and easy to miss.  We find that clients don’t tend to connect with the term “Live Look”, and hence don’t click it.

There is nothing we can do (for the moment) about points #1 and #2 above, but our add-on is designed to help solve point #3.  

Instead of a small link to the Live Look template, it adds a window showing the Live Look Template to the control panel, so that the user can view their content as soon as they click “Submit”.  This makes the Live Look feature very intuitive since they are presented with a large window showing their newly published content on the site, instead of a link.  

If they spot any problems, the can click the “Edit this entry” link below the window and then quickly make their changes. Then rinse & repeat.

Previewing Content Before It Goes Live

With some good knowledge of ExpressionEngine, you can do what we did and take this a step further to allow previewing of content before it goes live (like Wordpress).

This isn’t really a feature of our add-on but just clever use of ExpressonEngine’s built in features.  

Setup a new template & password protect it

We always setup a duplicate template for previewing, which I appreciate is not very DRY, but it allows us to modify the {exp:channel:entries} tag without affecting how the live site preforms.  It also allows us to password protect the page so that only administrators can view it.  After all this template is going to allow you to view article drafts & works in progress - not something you want the public to be able to access.  In the meanwhile the author publishing the article and previewing will already be logged into the ExpressionEngine CP, and hence will be able to preview the template.

Allow closed statuses and future entries

We then modify the {exp:channel:entries} so as to allow ‘closed’ statuses and future entries to be shown.  We add the future entries parameter since some authors may have their article set to go live at some point in the future, but want to work on it now.

As an example, the entries tag may look something like this:

{exp:channel:entries channel="channel_name" status="open|closed"  show_future_entries="yes"}
	<h1>{title}</h1>
{/exp:channel:entries}

Setup the Live Look template to use this template.

After setting up and modifying the new template, we then setup the Live Look template to use our newly created template.  

Job done!

Download

We’ve released morePreview to the community for free, so if you are interested in achieving this type of workflow then check it out in Github or you can download it directly.

If you have any suggestions on how to improve the add-on, or just want to let us know how you implement your client’s workflow, we would love for you to leave us a message in the comments!

- Christopher Imrie

Bookmark / Share

Tags:

Currently the web development world is alive with discussion surrounding technologies like HTML5, CSS3.  I won’t go into what those technologies are, since that’s not the focus of this post, but I do want to bring attention to a dilemma surrounding what is known as Progressive Enhancement, which is currently how many web developers are (quite rightly) tackling the transition to these two new technologies.

Progressive enhancement is not a technology like HTML5 and CSS3, but merely an ideology.  It allows you as a developer to ensure your website/application works across all browsers, however, certain features (such as drag and drop, animations etc) and only shown to browsers that support them.  Many developers refer to this as graceful degradation.

The specific details of how you implement progressive enhancement are different for every website/application, but most will begin with a "baseline" functionality that works in all browsers, and then they will add features (HTML5) and extra styling (CSS3) on top of this to make the interface a better experience for more modern browsers.  Older browsers dont get these features, but the website/application is still fully functional at the "baseline" level.

The Dilemma

Now many a web developer will have had a conversation whereby they have had to explain Progressive Enhancement to someone else.  Now in my experience whether it is to a client, or a designer, it always sounds like an excuse.  And to be fair, sometimes it is.

Many new to web development, fail to grasp one of the best features of web development: its fluid nature.  The ability to take the same content and have it change depending on what browser or form-factor is viewing it is incredibly powerful.  But this comes at the price of letting go of a certain level of control.  You have to accept that certain things will look different in certain browsers.

When you add Progressive Enhancement into the mix, many designers believe that this is letting go of too much control, and most clients would tend to agree.

The client is always right

What if a client turned to you and said that a certain feature must be present in every browser?

Its very easy to get wrapped up in the web best practices and focus solely on achieving things using HTML and CSS.  Sometimes you need to step back and look at all your tools.

Like PHP.

An example: Semi-transparent backgrounds

Recently I was working on a feature for a bespoke Content Management System whereby the client was able to upload an image (for their homepage) and then create an overlay that contained some text and links.

The client could choose the colour of the text and background of the overlay using built-in colour-pickers and they could also choose the transparency of the background.

Achieving translucent backgrounds using CSS3 is possible, but it doesn’t work in older browsers such as IE 7 & 8.

During the brief for this feature we had decided that the translucent background had to work in all browsers since the photography being used on their homepage was very high quality and simple gracefully degrading to a solid colour overlay was not acceptable.

A simple problem, but one that we couldn’t use Progressive Enhancement to back out of.

Kicking it old school

We solved this problem using some good old fashioned PHP.  I wrote a script that creates a 1px by 1px semi translucent PNG image according to what hexadecimal colour and alpha information you send it via GET parameters.  All we do is set the background image of an element to use this script:

#element {
    background-image: url(http://path/to/script.php?hex=%23ffffff&alpha=0.7);
}

Simply provide a hex parameter and set it equal to the hexadecimal colour reference of your colour (where %23 is the url safe entity for #), and then provide an alpha value between 0 and 1 to control the transparency.

Since PHP’s image processing functions are very computationally intensive, and the client’s website had very high traffic, it even caches the images it produces by storing them on the server them up when a request is made.

I like this solution since it completely side steps CSS3 compatibility issues, and works with any browser that supports PNG images!

You can check out the code below. Simply place it in a folder on your server that has write access (eg: 777), and then set it as the background image using CSS.

Hopefuly you’ll find use for it in some project when Progressive Enhancement is simply not an option.  Trust me, one day it will happen.

<?php

//Crap out without any inputs
if(!isset($_GET['hex']) || !isset($_GET['alpha']) || strlen($_GET['hex']) != 7) exit;

header('Content-type: image/png');

//Read from file if we can
if(file_exists($_GET['hex'].$_GET['alpha'] .'.png')){
  $im = imagecreatefrompng($_GET['hex'].$_GET['alpha'] .'.png');
  
  imagepng($im);
  
//Create a new file if it doesnt exist
}else{

  $rgba = allocate_colours();
  $img = imagecreate(20, 20);
  
  imagecolorallocatealpha($img, $rgba['r'],$rgba['g'], $rgba['b'] , $rgba['a']);
  imagepng($img, $_GET['hex'].$_GET['alpha'] .'.png');
  imagepng($img);
}

function allocate_colours(){
  
  //Remove the hash;
  $hex = str_replace("#", "", $_GET['hex']);
      
  //Alpha is from 0 - 127;
  $alpha = round(127*(1-$_GET['alpha']));

  $data = array(
  
    "r" => hexdec(substr($hex, 0, 2)),
    "g" => hexdec(substr($hex, 2, 2)),
    "b" => hexdec(substr($hex, 4, 2)),
    "a" => $alpha
  );

  return $data;
}

- Christopher Imrie

Bookmark / Share

Tags:

At some point in most web projects there comes a point where we have to present our designs to a client. This can be quite an emotional stage because, as a team, we feel we’ve arrived at a design that ticks all the boxes: it’s innovative, usable and will deliver on the project goals. We’ve become attached to this design and want everyone else to like it as much as we do. Ultimately however, we realise they just might not like it and this makes the whole process quite nerve-wracking.

In order to make presenting our designs more enjoyable, but also improve the quality of the feedback we always try to cover the items outlined below. If it all goes to plan it should help focus the next steps in the project.

Ideally, we wouldn’t reach the following tasks until we’ve completed wireframe and user testing phases but not everything we do includes these so it’s good to have a plan in place that makes presenting designs as painless as possible.

Upload an image that is a true representation of the final design

The first step is to present mock-ups of the final page designs. Upload an image file that matches the pixel dimensions and colours of the finished design. If the design includes a background image or effect then set that to display accurately in the HTML too. The idea is to demonstrate, as closely as possible, what the final designs will look like. This helps to manage the clients’ expectations and means that once the site is built you hopefully reduce comments like “this isn’t the same colour I saw before”, or “why doesn’t it fill my screen?”. Printouts don’t give a true feel for the end result.

Email the links to everyone involved

A gut reaction rarely provides the constructive criticism we’re hoping for. Ahead of any planned presentation meeting it’s important to give the client time to digest the designs and formulate their feedback so email the links out to everyone involved. They can then also share the designs among other project stakeholders and colleagues if needed. Typically, when people with different agendas see a creative idea for the first time, they will pay specific attention to different parts of the design - those parts that relate to their personal or departmental goals. If designs are presented cold in a meeting it can be difficult to consolidate the various thoughts and opinions. You may also find that some on the client side may not be comfortable speaking up. This ‘thinking time’ should improve the quality of the feedback all round.

But don’t just email the client. Let any of your own team members that haven’t been involved in the user interface design see the them too. They’ll benefit from seeing the designs early if they are to be involved in the project further down the line.

I’d suggest keeping the email as brief as possible because the reasoning behind the route you’ve taken will be discussed in detail at a face-to-face meeting. Make sure the client understands that they are viewing a dummy page so buttons won’t work and it will take much longer to load than the final website.

Meet to discus the designs in person

We try to meet a couple days after the designs have been emailed out. This should be enough time for everyone to review the designs but not so long as to lose momentum on the project.

Meeting face to face is really important (- it can be online if distances don’t allow everyone to be in one room). It allows you to pick up on the emotions within the feedback - the weight of importance of each comment. In an email all bullet points are the same, but in a meeting it’s easy to see what people are the most passionate about.

Prepare some notes prior to the meeting. It’s easy to get caught up in the discussion and fail to make important points that support the design. However, I’d avoid showing previous designs or other routes as this will just confuse the issue.

Present the design in the meeting on a screen big enough for everyone to see and make sure the screen resolution is typical of a regular computer. It’s also a good idea to have printed boards as well. I know this is more ‘graphic’ than ‘web’ design but it helps to make the presentation a tactile experience. People can pass the boards around, point at user interface elements and, most importantly, scribble notes on top.

Take notes and agree next steps

Make sure you document the comments given. No client wants to be sent revised designs that don’t include everything that was discussed. Notes also help to identify if any feedback contradicts other responses from earlier in the meeting. Ask the client to prioritise any changes that clash.

Check that the feedback and ‘next steps’ are consistent with original project goals. It might be that the creative process reveals new objectives that can be incorporated into the overall brief for the project.

Once back in the studio, send the client an email with an overview of the tasks from the meeting and an expected delivery date for the work. Everyone should be on the same page by now but this may highlight if anything has been misunderstood.

Don’t take criticism personally

The most important thing about this process is to agree how to improve the design. It’s important to remember that if the client isn’t 100% behind their website then their heart won’t be in when it comes to promoting it. That doesn’t mean we should become yes men, but it does mean that all feedback is valuable and none should be discounted because it doesn’t sit with our ‘vision’ for the final website.

You might also want to take a look at the great article The Great Unveiling by Cennydd Bowles on 24 Ways. He covers some more useful info on what and how to present.

- Joe Tuckwell

Bookmark / Share

Tags:

We’ve developed a new ExpressionEngine addon that allows Beanstalk web hooks to empty your ExpressionEngine cache after each deployment.

→ Download the Beanstalk Web Hook Module

Here at moresoda, our ExpressionEngine development workflow is managed through Git.  This not only allows us to version track the progress of each site build but also gives us the benefit of team members collaborating and developing locally, then “pushing” changes to the preview or live servers using services like Beanstalk. 

For those of you who have not used Beanstalk before, its a fantastic service that (among other things) hosts a Git server for you and manages FTP deployments using your Git commit history.  This means that if you only change a single file and then “push” this to Beanstalk, it will know to only update that single file via FTP.  This becomes incredibly handy when dealing with large web apps, or CMS’s such as ExpressionEngine, where keeping track of what files have been updated and need to be uploaded via FTP can be tricky.

This can present a slight problem when you have enabled caching on your ExpressionEngine powered site, since the system will be unaware of changes to any templates since they are being served statically until the cache expires.  ideally we would want ExpressionEngine to refresh its cache after each Beanstalk deployment.

Hence we use a small in house add-on that utilises Beanstalk’s “Web Hooks” feature.  Web Hooks are simply web addresses that Beanstalk will send information to before and after each deployment.  Our add-on places a script at the location of the Web Hook, which in turns instructs ExpressionEngine to delete its cache.

→ Download the Beanstalk Web Hook Module

Its a small module that you place in your system/expressionengine/third_party folder, and then install via the ExpressionEngine Addons->Modules panel.  Once installed you can click on the module’s name to view your site’s unique Web Hook URL.  Once armed with your Web Hook URL, simply head over to the your Beanstalk repository’s deployment section and insert it into the “Post Release URL” field of the Web Hook settings.

You can read more on Web Hooks here: http://help.beanstalkapp.com/kb/deployments/web-hooks-for-deployments

- Christopher Imrie

Bookmark / Share

Tags:

addon, software, expressionengine, git, beanstalk

When I get a new mac, or do a clean install of OS X, there are a number of applications I install by default, apps such as Adium, Adobe Creative Suite, Chrome, Firefox, Skype and VirtualBox are all a given, but in the last few months I’ve found myself using the following applications regularly, and wanted to share them.

Dropbox

First up is Dropbox - https://www.dropbox.com/ It’s a cross-platform online storage/backup solution, which gives you 2GB of space free of charge (which is expandable up to 100GB for paying customers). If like me, you have multiple computers and need to share files across them, then an application like this will soon become invaluable. The only limiting factor is the speed of your internet connection, as sharing larger files can become a bit of a pain waiting for them to sync, but the application itself allows you to manage bandwidth limits which is a nice feature. Dropbox also offer mobile access (from your iPhone/iPad or Android device) and a web interface, so you can access your files from anywhere with an active internet connection. I think what I like the most is that because the files are stored locally on your machine, you can work on them at any point, you don’t need to log into anywhere to get access to them, meaning if your internet connection drops out, you won’t lose your work. I find myself using this application daily and would recommend it for anyone who has multiple computers and finds them self regularly putting files on a flash drive to take between the two, as Dropbox handles all that for you online.

Droplr

Another file sharing application, this time from Droplr - http://droplr.com/hello Although an OS X specific app, it’s great for users of Twitter, Facebook, etc. as it offers 1GB of space for free, and has automatic URL shortening, with the option of running a custom url for ultimate customisation. It’s really easy to use, you just have to drag the file you want to upload over the menu bar icon, and it has a nice little progress indicator built in. Once you’ve uploaded something it copies the URL straight into your clipboard ready to be pasted wherever you please. It separates uploads into images, links, notes and files, and although the storage space isn’t expandable I expect it to take a long time to fill up, but I guess that depends on the frequency of use. Droplr has a good web interface, the app runs nicely in the background on your computer, and is really simple to use. I run it on all three of my computers which goes to show how much I rate it.

Logmein

Although I don’t use http://www.logmein.com that regularly, I still consider it to be a must-install app if you’re running multiple computers (and don’t mind leaving them on all the time). Once you sign up and install the LMI app on the machine you want to access, the web interface allows you to view the computer as if you were sat infront of it (although it’s obviously slower). The only downfall is that you need to install LMI before you need to access your machine, so it’s something you should do when you first set up your computer really. Combined with Dropbox it allows you to access any file on the remote computer, and have it on the machine you’re working on as fast as your connection can upload it.  Overall I rate it really highly, I’ve been using it for about 5 years and it’s never let me down.

Spotify

One which must be on at least one computer in every studio is http://www.spotify.com If yo.u don’t know what Spotify is then you must be living in the dark ages. Spotify is iTunes on drugs. You want to listen to something, search for it, double click and bingo, it’s playing.  No need to download, no need to pay*, it just plays. There are over 8 million tracks on there, with more being added on a weekly basis, it’s also available on most modern smartphones, so if you’re driving home and really craving that one song, just Spotify it and it won’t be long before you’re singing along like a fool. It also allows playlists and has Facebook integration, allowing you to check out your friends’ playlists and favourite tracks. I use it on a regular basis on both my computer and my mobile, definitely one to check out. There are two levels of free listening, both are ad-supported, and one which has a monthly listening limit. There are also two forms of paid subscription, I myself use the Premium service, at only £9.99 a month for unlimited ad-free music streaming it’s a complete no-brainer.

Evernote

My most recent find is http://www.evernote.com/ It’.s a note taking app which allows you to capture pretty much anything, web pages, photos, screenshots, text notes, can all be put into Evernote. It has a brilliant web interface, although I prefer to use the downloadable desktop app. You can sort notes into different notebooks, and add tags, and the search indexes everything, titles, keywords, tags, even handwritten text in your images, which is pretty impressive. Although it’s not an app I use daily (I must confess I have a good memory so don’t tend to use note-taking apps all that regularly) I do still find myself dipping into it every couple of days to leave myself a reminder to do something when I get home, or a link to a website I want to check out at a later date. The free version is good enough for me due to the frequency in which I use it, but if you do find yourself running out of upload allowance (40MB/month) you can get a premium account for only $5 a month.

There are plenty of other great apps I use daily, but these are just 5 of my current favourites which surprised me the most.

- Jon Mack

Bookmark / Share

Tags:

dropbox, droplr, logmein, spotify, evernote, free, applications, mac, os x

Many people start their website development with what’s known as a base stylesheet, this tends to include a reset, then some base styles, and then a few specific definitions. In this post I’m going to run through our base stylesheet (which tends to get amended every few weeks)

/*
=========================================

Project Name: 
Creation date: 00 Month 2010
Last modified: 00 Month 2010
Description: 
Version: 1.0
Author: Jon MacKinnon | jon@moresoda.co.uk
Company: moresoda design ltd
Company URI: http: //www.moresoda.co.uk

===========[TABLE OF CONTENTS]===========

1. BASE
-1.1. CSS Reset [RES]
-1.2. Global Settings [GLO]
-1.3. Common Formatting [COM]
-1.4. Links [LIN]
-1.5. Forms [FOR]
-1.6. Tables [TAB]
-1.7. Global Classes [GLC]
-----
2. CONTENT
-2.1. Wrapper [WRA]
-2.2. Header [HEA]
-2.3. Nav [NAV]
-2.4. Content [CON]
-2.5. Footer [FOO]
-2.6. Classes [CLA]

=========================================
*/

I start my stylesheets with a quick header, which I fill out at the start of every project, it’s quite self explanatory really, although I’m considering moving the description to under the project name, and adding another area for the last change to be written in, just to give a bit more depth to the last modified area. Then we have the version (which doesn’t tend so could probably be taken out), my details, and our company details.

Next up is the contents, I find it very important as it allows you to see exactly where everything is, and find things easily too, I included a 3 letter abbreviation so it’s easier to jump to sections by doing a Cmd + F and typing in [NAV], as this will then take you straight to that section. Some people also include an area for their main colours, but I don’t bother with that, sometimes it would be useful, but in the past i’ve developed sites which have 10+ different sections, all with different colour backgrounds/navigations.

/* =[RES]= CSS Reset - derivative of YUI Reset CSS - http://developer.yahoo.com/yui/reset/#code ===== */
html,body,div,pre,form,fieldset,input,h1,h2,h3,h4,h5,h6,p,textarea,ul,ol,li,dl,dt,dd,blockquote,th,td,
/* HTML 5 elements */ abbr,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,
mark,menu,meter,nav,output,progress,section,summary,time,video { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address,caption,cite,code { font-style: normal; font-weight: normal; }
ul { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; }
q:before,q:after { content: ''; }
abbr,acronym { border: 0; }

This is my basic CSS Reset, it’s not perfect, and in all honesty could do with tidying up and looking over again, but it’s quite good, and it definitely helps squash a lot of cross browser issues which would otherwise be a complete pain in the ass to troubleshoot. I think a css reset is the most important element of a base stylesheet, but it has to be done properly.

One thing you definitely shouldn’t do when creating your reset, is try to take a shortcut and use the “star reset”

* {
	margin: 0;
	padding: 0;
}

There are far more things which need to be reset other than just margin and padding, and this horrible shortcut can do some seriously weird things to form fields. You don’t have to write your own reset, there are plenty available all over the web, i’m going to combine elements of mine with Nathan Smith’s (creator of 960.gs) reset to make a rock solid reset.

/* =[GLO]= Global Settings ===== */
html {
	font-size: 125%;
}
body {
	font: 50% Arial, Helvetica, sans-serif; /* base font size 1em (10px)*/
}

This is the second most important are of my stylesheet, this sets the base font size to 62.5%, which is 10px. By doing this it makes very easy to work out em values, for example I know that 1em = 10px, and 7.3em = 73px, I don’t really have a reason why I choose to work in em’s, I think I just prefer them.

The rest of the first area stylesheet is quite simple, it includes some base style defintions such as margin and padding on elements, link colours, and a few global classes.

/* =[GLC]= Global Classes ===== */
.clear { clear: both; font-size: 1px; }
.float-left { float: left!important; }
.float-right { float: right!important; }
.align-left { text-align: left!important; }
.align-center { text-align: center!important; }
.align-right { text-align: right!important; }
.align-justify { text-align: justify!important; }
.align-bottom { vertical-align: bottom!important; }
.error { color: #FF0000; }
.highlight{ color: #ffff00; }
.lowlight{ color: #666; }

I rarely use anything other than clear, but it’s still useful having them in there, just to make quick layout changes and such.

The second area is where most of the work happens. I tend to structure my css in a very easy to read way, for example

/* =[CON]= Content ===== */

#content {
	width:960px;
}

#content-left {
	float:left;
	width:260px;
}

#content-right {
	float:right;
	width:700px;
}

If I have elements that are going to be in the left column, then they’ll go under the content-left declaration, this makes it easy for me to find the code I need to make changes on

.intro .content-left .heading {
	border-bottom: 2px solid;
	position: relative;
	margin: 0 -30px 40px -30px;
	padding: 50px 30px;
}

.intro .content-left .heading h1 {
	font-size: 7em;
	margin: 0 0 25px;
}

.intro .content-left .heading h2 {
	font-size: 2.3em;
	color: #fff;
	font-weight: 700;
	line-height: 1.2em;
}

This allows me to keep a similar hierarchy to that that’s on the html page, and makes it easier for me to find the styles related to the element. I feel I should mention at this point that although it’s very common, I don’t feel the need to alphabetize my definitions in any way, I just write things as and when I think of them, I don’t find that it slows me down in any way, so I’m happy to stick with the way I do things.

- Jon Mack

Bookmark / Share

Tags:

css, design, stylesheet

Over the last few years CSS grid systems have become very popular. Frameworks like blueprint, 960.gs and YUI Grids CSS seemed to pop up out of nowhere, providing us with a way of easily building balanced, well structured websites. Most well designed websites you browse these days are built around a grid system of some kind, although it might not seem obvious at first, an underlying grid structure will be there somewhere.

To most, the benefits seem quite obvious, it saves time with development, as your base style sheet has already been built for you, and it’s already been cross browser tested, so you wont be pulling your hair out because a certain browser isn’t behaving. In terms of design, as long as it’s done properly and not rushed, it allows for a very pleasurable viewing experience.

But grid systems are nothing new, they’ve been around for the best part of 50 years within the print world, and since table based layouts have become outdated they have slowly started to filter through to the web, with a sudden influx over the last couple of years. A quick google search for css grid system will give you over half a million results, proving their popularity.

What’s interesting to learn is that W3C now supports basic multi-column layouts in CSS 3, using nothing but standard markup you can split a div into multiple columns of equal width. Although this feature couldn’t be used to build a base grid system, as there is no way to span columns (elements either span one column, or the whole element), it shows that “newspaper” styling has been accepted and demanded by the web community, and a format which some might have once considered “boring” in it’s simplest form, is now being used throughout the web with great results.

One of the problems I found when I build my first site based around a grid system, was trying to fit everything in it’s own column, i’d design site navigation that had every element in it’s own column, I wanted everything to sit within the confines of the grid, and instead of allowing it to push my design work, it just held me back.

Once you learn to “break the grid” things become so much easier, although the majority of your design should fit into the basic grid system, there is no need to be quite so strict in the way that content is displayed. A great way to see this is on the 960.gs home page, where it lists sites which have been designed around their grid system, with a button to overlay the initial grid which they based their site build on.

Another thing to take into account is vertical rhythm, which in it’s simplest form is “the spacing and arrangement of text as the reader descends the page”, this is quite a complicated subject, and has to be taken into account as soon as you start the design process, otherwise you’ll end up with all sorts of problems as you get further down the line. There’s an excellent article over at 24 ways which gives a basic overview of vertical rhythm, and is definitely worth checking out.

- Jon Mack

Bookmark / Share

Tags:

css, layout, design, stylesheet