Monthly Archives: April 2014

A Fresh New Start

Arvid Bräne - April 11th, 2014 - #Responsive, #Webapp, #Webdesign

Old PortfolioFor the last, I don’t know, 4/5(?) years I’ve had the same old portfolio; a simple “one page, scroll a lot, no content“-kind of website. It was really nothing fancy about it; no CMS, no PHP, no nothing. In my defense I knew nothing about web development when I created it, the idea was to have something temporary till I learned more (yeah right). During it’s rather long lifespan I’ve given it absolutely no love, only updating it only about once a year with new projects, mostly due to the lack of time and interest. Well, not any more.

I started designing this new website during Christmas break and it’s finally, somewhat, finished (I know there are still bugs) for an initial release, even though the “Resume”- and “Links” pages are far from complete. I actually started the redesign process sometime in 2011 and since then I’ve started on at least 6(!) different designs, none of which have been finished.

The New Design

iPhone WebappThis new website will not only be a portfolio but more importantly a medium for me to share my thoughts and “be more available”. This new release also forced me to update my old and out dated graphic profile; and therefor also my logotype. I’ve finally taken the time to look into learning the basics of WordPress (never really used it before) and the building of an actual theme (using twentytwelve as the base). I’ve also taken the responsive part a bit further by allowing the user to use the app as a web-app. A lot of effort has been put into trying to make the site feel like a native app; making the statusbar transparent, having a iOS 7-looking menubar etc. Here are some simple, yet very useful, JavaScript snippets that were very helpful:

//Detect if user launches the web-app from its homescreen:
if (window.navigator.standalone) {
	//Code
}

//Detect if user changes device orientation:
if (window.DeviceOrientationEvent) {
	//Code
}

//Prevents the user from leaving the app when navigating around
var a = document.getElementsByTagName("a");
for(var i=0; i<a.length; i++) {	
	a[i].onclick = function() {
		window.location = this.getAttribute("href");
		return false;
	}
}

//Fast-click (check out github.com/ftlabs/fastclick), for a more native feel
window.addEventListener('load', function() {
	FastClick.attach(document.body);
}, false);

//"Fixes" hover events 
document.addEventListener("touchstart", function(){}, true);

If you find anything that does not look right or if you have any feedback you’d like to share; feel free to comment below!