To position:fixed or not to position:fixed

For some time we have had fixed header on our sites. The problem with fixed headers are – they are fixed. If you are not using it, its taking up good real estate.
For people using the space bar to scroll it is even more annoying. Then you have to scroll a bit up, because the spacebar scrolls one page at a time.

The solution is to apply position fixed when the user scrolls up and position static when the user scrolls down. Throw in some CSS transitions to make it less jumpy.

When you scroll down you are reading or looking for something downwards on the page. If you scroll up you might be heading for the menu. At least you are not reading continuously.

We are implementing this on our pages in a few weeks.

Posted in UX | Leave a comment

IE8 rendering bug

We have experienced a rendering bug on scroll with Internet Explorer 8 lately. It turns out its because of embedded webfonts in one of our ads.

Removing this from the ad fixes the problem.
@font-face {
font-family: 'MuseoSlab';
src: url('/sites/all/themes/dinmat/css/fonts/MyFontsWebfontsOrderM4088454/webfonts/2439B2_3_0.eot');
src: url('/sites/all/themes/dinmat/css/fonts/MyFontsWebfontsOrderM4088454/webfonts/2439B2_3_0.eot?#iefix') format('embedded-opentype'),
url('/sites/all/themes/dinmat/css/fonts/MyFontsWebfontsOrderM4088454/webfonts/2439B2_3_0.woff') format('woff'),
url('/sites/all/themes/dinmat/css/fonts/MyFontsWebfontsOrderM4088454/webfonts/2439B2_3_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Posted in Bugs | Leave a comment

NodeJS presentation

Here are the slides from my NodeJS presentation.

Posted in Javascript, NodeJS | Leave a comment

Magnify plugin for jQuery

I have created a magnifier plugin for jQuery 1.7 or above that zoom html elements.
If you need legacy support replace “on” with “bind” in the source code.

Webkit browsers get a square magnify window because it doesn’t clip content with border-radius and overflow:hidden.

Usage:

$(target).mnoZoom({
	source: element | CSS query | jQuery object,
	background:'#ffffff',
	shadow:'0 0 10px rgba(0,0,0,.8)',
	border:'1px solid #999',
	magnifySize:300 // size in pixels
});

Download | Demo

Posted in Uncategorized | Leave a comment

Flash crash in Chrome

Our online newspapers have experienced chrome crashes when a user open multiple tabs. The crash is caused by Flash and it is a quite common problem

We have used -webkit-transform:translateZ(0); to turn on hardware acceleration in Webkit browsers, but hardware acceleration seams to work bad with Flash. Probably because Flash also use hardware acceleration and because Chrome opens a new process for each tab. Flash doesn’t run in multiple processes.

Removing the CSS-property fixes the problem.

Posted in Uncategorized | Leave a comment

Test position fixed for iPhone

Testing position fixed for iphone can be a problem. If created the following script to test for position fixed. It seams to work, but please provide feedback in the comments.

var IOS_FIXED_POSITION;

window.onload = function () {

if (typeof document.body.scrollIntoViewIfNeeded === 'function') {

	(function () {
		var runTest = false,
		container = document.body,
		el = document.createElement('div'),
		originalHeight = container.style.height,
		originalScrollTop = window.pageYOffset;
		testScrollTop = 20;
		el.style.cssText = 'position:fixed;top:0px;height:10px;';

		container.appendChild(el);
		container.style.height="3000px";

		window.addEventListener('scroll', testScrollTop, false);
		window.setTimeout(testScroll, 20);
		window.scrollTo(0,testScrollTop );

		function testScroll() {
			if (IOS_FIXED_POSITION === undefined) {
				el.scrollIntoViewIfNeeded();
				if (window.pageYOffset === testScrollTop) {
					IOS_FIXED_POSITION = true;
				} else {
					IOS_FIXED_POSITION = false;
				}
			}
			window.removeEventListener('scroll', testScroll, false);
			container.style.height=originalHeight;
			container.removeChild(el);
			window.scrollTo(0,originalScrollTop);

		}

	}());
} else {
	IOS_FIXED_POSITION = false;
}
}
Posted in CSS, Javascript | Leave a comment

Jagged fonts with css font-face in Firefox

Some fonts in Firefox for Windows have jagged edges with cleartype turned on. This is a result of poor hinting.

The problem cannot be fixed by other than Mozilla, but we can improve the result a bit with svg-filters.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fake antialiasing in Firefox</title>
<link href='http://fonts.googleapis.com/css?family=Metrophobic' rel='stylesheet' type='text/css'>
<svg xmlns="http://www.w3.org/2000/svg" height="0">
  <filter id="antialias">
	<feMorphology operator="dilate" in="SourceAlpha" radius="1" result="expand" />
	<feMorphology operator="erode" in="expand" radius="1" result="expand" />

    <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="blur"/>

    <feComposite in2="blur" in="expand" operator="in" />
  </filter>
</svg>
<style>
  .fakeAntiAlias { filter:url(#antialias); }
  h1 { font-family: 'Metrophobic', sans-serif;font-size:50px; font-weight:bold;}
</style>
</head>

<body>
<h1 class="fakeAntiAlias">Lorem ipsum dolor sit amet</h1>
<h1>Lorem ipsum dolor sit amet</h1>
</body>
</html>
Posted in CSS | 2 Comments

Frontend/Design/UX folk wanted..

Vi ønsker å bli bedre på “framsie” utvikling i Media Norge Digital (MND). Vi lager nye og spennende tjenester for avisene Aftenposten, Bergens Tidende, Fædrelandsvennen og Stavanger Aftenblad.
Har du en designer i magen, digger å jobbe med det som vises til brukerne og samtidig en glød for nyheter i alle kanaler (nå fokuserer vi mest på nett, mobil og nettbrett), så ta kontakt.

Har du innspill, spørsmål eller bare lyst til å snakke med oss som jobber i MND, ta kontakt med @mnobeta eller oss som skriver her, @torchestra eller @andrefoynb

Her er annonsen fra FINN:

Skjermdump fra FINN.no

Les mer hos FINN om stillingen

Posted in Uncategorized | Leave a comment

Slides fra JavaScript-kurs

Har lagt ut presentasjonen fra JavaScript-kurset.
Virker kun i de nyeste nettleserne. Jeg regner med du vet hvordan du oppdaterer :-)

Posted in Uncategorized | Leave a comment

Nyttige mobilverktøy – MNObeta på tur

Oppdatert: Nå med video fra konferansen :

Mobilism Conference 2011 from Frank Zijlstra on Vimeo.

I 2 dager nå har vi deltatt på konferansen Mobilism i Amsterdam. Det var en lineup av mer eller mindre kjente folk fra mobil-frontend-verden. Her er konferansens program. Jquery kjendisen John Resig kunne desverre ikke komme, men det var store folk som Luke Wroblewski (Mobile First), Brian Leroux(PhoneGap), Steve Souders (Performance) og arrangert av Peter-Paul Koch (quirksmode.org)

Konferanse lokalet

Vi har lyst til å dele noen av de nyttige verktøyene som dukket opp under denne konferansen. Sliter dere med ytelse, caching eller kanskje DOM traversering på en device, kanskje vi kan hjelpe litt. Dette er ikke breaking news, bare litt folkeopplysning for mobil utviklere og utviklere nysgjerrig på mobil.

DOM-manipulasjon on device

Vi skriver mye css og javascript, som er device avhengig. Hvilke features er det på den enkelte device, og hvordan funker css’en for dette. Verktøyet jeg bruker mest, er User Agent Switcher for Firefox med FireBug . Problemet er når det dukker opp på devicen, hva skjer egentlig med DOM’en og hvilken css kicker inn. Sjekk da ut Weinre. Det er en remote debugger for mobile devicer. Her kan du kjøre en remote test site, samtidig som du kan traverse CSS på DOM, og sjekke ferdig rendret HTML. Veldig nyttig.

Picture from: http://pmuellr.github.com/weinre/

Kompatibilitets liste for Browsere

Prøver du å finne hvilke css og html elementer som støttes i forskjellige nettlesere, så anbefales quirksmode.org sin kompatibilitets liste. I tillegg legger han ut nyttige slides på bloggen sin, bla. annet siste fra hans USA lectures

Ytelse

Steve Souders om ytelse på mobil


Steve Souders fokuserer mye på ytelse. Legger ut et par linker til noen nyttige tjenester:

  • En Artikkel om hvordan Bing og Google bruker localstorage for CSS og JS. Dette er noe vi har tenkt til å se nærmere på.
  • Blaze.io (ikke strippeklubben). Ytelses test av mobilsider, avhengig av device.
  • HTTP Archive Mobile Et arkiv for sammenligner av tester gjort på Blaze.io. Ser på antall kilobyte per site, størrelse på javascript og css, og http redirects. Kan gi noen nyttige pekepinner.

Slides fra Mobilism konferansen

Kommer flere etterhvert

Sjekk ut hele twitter streamen om #mobilsm konferansen

Dette blogginnlegget vil bli oppdatert etterhvert som jeg får samlet sammen all info fra konferansen.

Noen flere bilder fra arrangementet




Posted in Uncategorized | Tagged | Leave a comment