Man, did it ever take a while to get to this.

RealPolitech is something I’ve been a part of for over 18 months now. The previous site design was based on a draft that Christina, the CEO, put together in iWeb.

I’m not a fan of WYSIWYG editors in general and iWeb in specific, but the design was acceptable and I didn’t have the time to re-do it until recently.

It’s really very difficult to design a site around a vague idea. Forgetting the enormous amount of web-related knowledge I’ve garnered in the last year and a half, it’s been even more important that RealPolitech has taken a more well-defined shape.

WebKit and jQuery

The content slider on the front page is something I spent a lot of time on. Instead of just implementing a stock Coda-style slider, I had very specific ideas about how the slider should work.

The first order of business was making sure the slider used WebKit transitions when viewed in a WebKit browser and jQuery transitions in others. The performance difference on mobile devices is unbelievable. I was able to avoid building the slider twice by using the scrollTo jQuery plugin, a PHP conditional based on the User Agent String and recycling Javascript functions.

Because of how ridiculously easy WebKit transitions are to implement, I also used them on the Team and Portfolio pages.

Touch Me

I may be the last person in the web development community to have figured this out, but jQuery can recognize touch events.

Typically, when you want jQuery to recognize user events, you’re talking about either hover() or click(). But on touch-based devices, there’s usually a slight delay in these kinds of interactions as the device tries to figure out if the user is trying to scroll, zoom, click or whatever. So something like this:

$('.piece-of-work').click(function());

will work on an iOS device, but there will be noticeable delay between the action and the result. Luckily, I happened upon something that I would have already known about if I were actually any good at my job:

$('.piece-of-work').bind('touchstart', function());

That’s it. That’s all it takes to use jQuery selectors and bind them to touch events. It was one of those genuine forehead-slapping moments that honestly made me question my manhood.

Once I figured that out, it was easy to get the slider on the front page to recognize when it had been “swiped.”

$(document).ready (function () {
			$('.slides-container').bind('touchstart', function(event){
				startX = 0;
				curX = 0;
				var e = event.originalEvent;
			    startX = e.targetTouches[0].pageX;
			});
			$('.slides-container').bind('touchmove', function(event){
				var e = event.originalEvent;
			  	curX = e.targetTouches[0].pageX - startX;
			});
			$('.slides-container').bind('touchend', function(event){
				if (parseInt(curX) <= -200){
					nextSlide();
				} else if (parseInt(curX) >= 200){
					prevSlide();
				}
			});
		});

The touchstart registers the starting point, the touchmove registers the end point, and the touchend gets the difference. Unbelievably simple.

TypeKit and iOS

I have one of the $50 a year accounts with TypeKit, allowing me to utilize their huge library of fonts on any of the websites I build. Unfortunately, they don’t work great on mobile devices. In fact, using more than one font style of any face will cause iOS devices to crash.

Obviously, this is unacceptable.

Re-using the User Agent String PHP conditional I set up for the moving parts, I used Font-Squirrel’s kit builder to put together the appropriate CSS and SVG fonts so that the League Gothic font would appear properly. Instead of Garamond for the body font, I switched to Baskerville, a font available on all iOS devices.

The Next Thing

It’s really an exciting time to be a web developer. All of the tools at our collective disposal means we’re seeing (and are able to create ourselves) some really cool things that work on a ton of different platforms in all kinds of ways.

After every site re-design, I wonder what the next thing I do for it is going to be. The web is never finished, and neither are websites.

I can’t wait to see what’s next.