We start the season by introducing one of our most recent clients, Eltorque. Their new website is now online; we’re responsible for the design and InCreo has implemented the CMS. We’ve also developed their new logo and identity, more on this to appear in our portfolio in the near future.

Boom! There’s a new version in (gotochina)town, again.

• Fully compatible with all browsers, including webkit on iPhone and iPad (without scroll-bugs)
• Does not need to fully load images before calculating scaling (shorter loading time)
• Letterboxes vertically oriented images
• Standalone — no library needed and no conflicts needed
• VERY light weight (under 3KB for uncompressed css and javascript)
• Easy to integrate into different gallery types (what additional examples would you like? Post your comment)
• Seamless fallback to pure css solution in latest version of all major browsers

So here you go, see the comments in the source code for intructions:


Download source View demo View transition demo

We are proud to present a new addition to our product assortment! The website “Finere Festival” offers different promotional packages aimed at the Norwegian festival market. Most Norwegian festivals are relatively small, and their budgets for promotional material (posters/web-page a.s.o) aren’t often all that.

We hope to amend this by offering a streamlined production process where web and print are created simultaneously with high intensity. This will hopefully result in visually engaging posters and websites for some of the hundreds of festivals that compete for peoples attention during the year.

Check it out!

Cielo (which translates into “heaven”) started their own small chocolate factory here in Trondheim 3 years ago. Earlier these heavenly lumps of calories only were to be obtained in a few local outlets, but now there is an alternative.

We’ve recently completed their new website, which utilizes the Snop CMS. This merry occasion also marks Klipp og Lim’s first venture in the land of e-commerce as we are proud to present a neat and intuitive web shop. Drag items into the shopping basket and check out, simple as that. We’re also in the process of developing a new identity, the logo seen above included.

Cielo was earlier blogged by Made In Norway Now as well, and we suspect more will pick up on these tasty chocolate pieces in the time to come! You can also follow the boys on Twitter.

We recently finished a new dynamic website for Studio Skeie, as usual based on our Snop CMS. Hope you like it.

Also, all our videos are now also embeddable in case you’d want to post them elsewhere!

We’ve produced a new profile and website for Trøndelagsutstillingen, another site that uses our Snop CMS. This site uses the whole browser window as a showroom for the exhibition.

We wanted to make a site which emphasized the works of art, and use photos of the exhibition space as backgrounds throughout the website. We also made a catalog and a poster, which we will publish here as soon as we’re able to take some decent photos of them.

Launch site

Including the animation, based on the illustration by Si Scott and scored by Sander.

Since our last post about fullscreen scaling background without flash, we have received lots of feedback and suggestions for improvement. There has also been some further developement with implementing the gallery functionality we use at the GOTOCHINA-site. Now there’s a new version in town.

To sum up some of the changes:

• Mootools is used as a base
• You can now choose to letterbox vertically oriented images
• The script now automatically turns on gallery-mode if a “navigation-element” is found (see code for explanation)
• There’s been added some conditional settings, for example for preventing the ugly opera scroll bug

So here you go, see the comments in the source code for further explanations:

Download source

View demo

Step 1:

Unlike most full-size-background techniques, we want the image to remain relative to the center of the screen, and not to the default upper left corner coordinate. Example:

To do this, we start of by creating a holder that is 200% the size of our original area, and placing it equally outdented from the body on every side:

html,body{width:100%;height:100%;overflow:hidden} /*to give the #holder something to relate to and prevent scrollbars*/
#holder{position:absolute;width:200%;height:200%;top:-50%;left:-50%} /*with IE vertical centering-fix from http://www.jakpsatweb.cz/css/css-vertical-center-solution.html*/
#holder[id]{display:table} /*for standard-browsers*/

Step 2:

Inside this holder, we create a div that stays centered from the top:

#holder div{position:absolute;left:0;top:50%;width:100%} /*with IE-fix*/
#holder[id] div{display:table-cell;vertical-align:middle;position:static} /*for standard-browsers*/
*:first-child+html #holder div{position:absolute}/*force IE 7 back to position:absoulte*/

Step 3:

Now we can add our image and make it center, aligned to the parent div. The -ms-interpolation-mode-variable is trick to force IE to anti-alias when resizing the image.

#holder img{position:relative;top:-50%;margin:0 auto;display:block;-ms-interpolation-mode: bicubic;width:100%}/*Setting width here creates a look-alike fallback for browsers without javascript*/

Step 4:

Since the body now is all covered with a huge image, we need to make a “new” body, where we can put our content:

#body{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;overflow:auto}

Step 5:

Create a javascript file called scaler.js. To avoid the need of any “domready” or “onload” events, we are going to place this script just after our #body-div. The script:

(function(){
	var db=document.body;
	var img=document.getElementById('holder').getElementsByTagName('img')[0];

	var dbsize={}; //needed to store body size
	var imgsrc=img.src; //needed to store images src
	var keyStop=function(e){
		var e=window.event||e||{};
		var tag=e.target.tagName.toLowerCase();
		if(tag!='textarea'&&!(tag=='input'&&(e.target.type=='text'||e.target.type=='password'))){ //are the user not writing?
			if(e.keyCode==32||e.keyCode==39||e.keyCode==40){ //Did he press any of the "scrolling-keys"? (down, right, and space key)
				if(e.preventDefault)e.preventDefault();
				else e.returnValue=false;
			}
		}
	}

	if(this.addEventListener)window.addEventListener('keydown',keyStop,false);
	else window.attachEvent('onkeydown',keyStop);

	setInterval(function(){
		window.scrollTo(0,0);
		if(img.complete){ //check if image has loaded
			if(db.clientWidth!=dbsize.w||db.clientHeight!=dbsize.h||img.src!=imgsrc){ //check if size or img size has changed
				imgsrc=img.src; //store current src
				dbsize.w=db.clientWidth; //store current body width
				dbsize.h=db.clientHeight; //store current body height

				var newwidth=Math.round(dbsize.h*(img.offsetWidth/img.offsetHeight)); //calculate new width based on height

				img.style.width=(dbsize.w>newwidth?dbsize.w:newwidth)+'px'; //use the largest value of body-width and newwidht
				//and this is the real trick: if there's no specified height, the height is automaticly calculated relative to the with
			}
		}
	},300);
})();

Step 6:

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>Scaler</title>
	<link rel="stylesheet" type="text/css" href="scaler.css" />
	<meta http-equiv="imagetoolbar" content="no" /> <!--Prevent IEs anoying imgage toolbar-->
</head>
<body>
	<div id="holder">
		<div><img alt="" src="your_photo.jpg" /></div>
	</div>
	<div id="body">
		Your content
	</div>
	<script type="text/javascript" src="scaler.js"></script>
</body>
</html>

Download source

View demo

Our new website had 5741 unique visitors in its first 5 days which must be said to be a lot. The site was featured on Website Design Awards, CSS Mania, Most Inspired, Web Creme, CSS Wow, MephoBox, Web Newly, Designslices and FaveUp. CSS Wow wrote the following:

Klipp og Lim, have broken fresh grounds when it comes to the world of design and communication. Defying the cliched methods of media communication, Klipp og Lim provides a wide range of products on multiple platforms for a diverse group of customers. From strategic consulting to design, illustrations, sound, motion and web, they take care of all kind of communication requirements of their clients. Visit this website and learn new ways as to how to get your business cracking…

We were featured on Smashing Magazine’s 20 Beautiful Video Motion Pieces, and we’re working on a Virb profile. Oh, and if you’re on Facebook, feel free to take a look at our Klipp og Lim-page and become a fan :) All in all, so far soo good. We’re excited to see how it’s going to develop in the time to come.

Other than that, our portfolio has been updated with AVR Robots illustrations and an accompanying case study, our Musicians and voices section has gotten a few new additions and there’s a new Resman illustration out — make sure you check it out.

See what you make of it: Modernista!