Profile cover photo
Profile photo
Able Parris
825 followers -
Artist & Design Director
Artist & Design Director

825 followers
About
Able's posts

Noticed G+ redesigned. Who’s still using it? 

Post has attachment
I'm putting this on today's calendar.

Post has shared content
Love this.

Post has shared content
Nice work, Kari.

Post has attachment
There's some new stuff up on Field Mic to check out and share with your friends.

Looking for great examples of mobile websites that are content-heavy. Link me.

Post has shared content
If you're interested in how my portfolio site was built, you're in luck. +Kari Pätilä has posted an insightful write-up on his process of building it. Check it out.
Thoughts on ableparris.com

As we began planning the project, Able suggested we use Amazon's S3 service. He was tired of having his site being brought to a halt every time his work was featured somewhere important. His wife, Julia Parris, had already made good use of the service on her site, Julia Parris Photography.

The S3 service is most often used for storing static assets, such as images and video and it has a reputation of having practically no downtime under any load. These features are exactly what you want from a service.

Earlier this year Amazon had announced that it now allowed static websites to be hosted on S3. And by "static" they mean HTML files, which still allows for dynamic content as long as you make it so with JavaScript. I could easily make a portfolio into a web app.

The tricky part about S3 is that a root domain must be pointed towards a CNAME A record, which S3 doesn't support. This means you can point www.ableparris.com to S3, but not ableparris.com. The only obvious way around this was to point www.ableparris.com to S3 and make a .htaccess rule on the old host for ^ableparris.com and redirect every request to the www domain.

The .htaccess file on Able's server:
RewriteCond %{HTTP_HOST} ^ableparris.com [NC]
RewriteRule ^(.*)$ http://www.ableparris.com/$1 [L,R=301]

The condition applies to all requests where the host includes the string "ableparris.com". [NC] stands for not case-sensitive. A matching request will be redirected to www.ableparris.com. On the second line [L,R=301] means "don't look at any more rules after this" and "do a 301 redirect".

So the thing is set up like this:

1. ableparris.com resides on a hosting service, which also handles all subdomains except www.ableparris.com
2. www.ableparris.com points directly to Amazon's S3 service, to a corresponding bucket called www.ableparris.com.

Since we can't host a CMS on S3, we still have a practical use for the old hosting service. You wouldn't want to be paying a web host for hosting a single .htaccess file, so this is not a good fit for anyone looking to set up his first web site unless he's willing to have the root domain lead nowhere (surprisingly, even in 2010 many Finnish newspaper sites still couldn't handle a URL without the "www").

The design of the site is exceedingly simple: Able's collages and other work take 100% of the screen all the time. 100% width, 100% height (this helped a lot when building the mobile version). Some slides have images that scale to the size of the browser window and some have backgrounds that do the same. There's a simple masthead with three links. The entire site works like a carousel, so you either click back and forth or use the arrow keys on your keyboard. Press the down arrow to bring down a list of thumbnails to help you navigate each section. Press up to get it out of the way. The "i" button brings up an information box, if available.

Most of the JavaScript relies on jQuery and jCarousel. What I've added on top of those is the keyboard navigation and a hashbang "#!" based URL scheme, which allows permalinks inside a dynamic web app. You have most likely seen those on the new Twitter site. I won't go into how good or bad of an idea relying on these might be on the long run.

The hash in the URL refers to an element ID, by which I can calculate the element's position in the carousel, thus yielding a page number. I can then set the number as the carousel's starting position.

I can't really say I'm writing "pure" or even consistent jQuery, but I'm not entirely convinced that one always should. I've taken shortcuts in places where I know how to do something in pure JavaScript, but am not sure about the corresponding jQuery functions. If I have to look something up just to do it differently — pass. For example, I prefer the simple document.createElement() to jQuery's more complicated, albeit equally fast version.

The mobile site doesn't use jCarousel at all. It doesn't have to. All I'm doing is monitoring Mobile Safari touch actions and styling the #carousel and #gallery elements based on those events. Swipe left and we translate3d() the carousel element to the left by the width of a single slide, and so on. Swipe down and we move the gallery grid down. After a transition we store the current position. When I need a page number on the mobile version I can use something like page = Math.abs(currentPos/itemWidth)+1;. This is all very simple.

What's not simple, however, is fine-tuning everything. Consider the following: the user moves his finger half a centimeter on the screen. Do you I want to move to the next slide, or do I just indicate that you can, in fact, move things around and snap back to the original position when he lifts up his finger? If so, then what's the threshold for moving onto the next slide? Furthermore, when the user swipes down, it's impossible not to move the finger just a little bit to the left or to the right so I'll have to take that into account also.

For this site I'm using a threshold of 40px, which means a finger has to slide over 40 pixels on the screen before we register a touch action as something the user intended to do. This goes for swipes in all directions.

What is really going on, then, when a user swipes downwards on the screen? Due to the threshold, the first 39 pixels will not count as downward motion. Some of it does, however, count as sideways motion, as no swipe is an exact up - down gesture. The user might also make a curved swipe downwards, meaning the sideways motion is also over the threshold, so I need to make sure we cancel all sideways motion if the up/down threshold is surpassed before the sideways threshold is. And vice versa. I'm sure you can appreciate how this will get complicated very, very quickly.

Keeping an eye on the orientation is simple when the carousel has a fixed width — you just reposition things with CSS if need be. A carousel with 100% width isn't as forgiving. You actually have to do something to keep thigs from going horribly wrong. The landscape orientation needs to reset the carousel elements to a width of 480px instead of 320px and reposition the current slide to fill the screen. Luckily there's a window.onorientationchange event to monitor and window.orientation variable that holds the current orientation as a numeric value. In window.orientation 0, 90 and -90 correspond to portrait, landscape left and landscape right. Or you could just write orientation = Math.abs(window.orientation) if you don't care about which way the phone is being held in landscape.

The good thing about Mobile Safari is that these CSS transitions are hardware accelerated — but only if you do them as translate3d(x,y,z) — the regular translate(x,y) is not. I've also found it good practice to always use -webkit-perspective:1000; for elements that have 3d transitions. This often results in smoother animation.

The bad thing is that images over a certain amount of kilobytes, about 25Kb, won't be cached. This means loading every single one of them every time. This won't do for a page with 30 images, especially as the maximum number of cacheable items seems to be less than that in practice. Luckily the screen, even the retina display, is very forgiving, so I could get by with very small files. Naturally this meant I would be using two sets of images: one for mobile and one for a regular browser.

This is where tinySrc comes in. It automatically scales your images to fit the constraints of your screen. Here's how you use it:

<img src="http://i.tinysrc.mobi/[url to your image]" alt="" />

That's it. Done. You are now serving smaller images for smaller screens. I thought this would have been more complicated than this, but I'm not complaining.

Post has attachment
Good morning.

Post has attachment
I think +julia parris will especially like this.

Post has attachment
A day of good news. Ani Pandit made a short documentary of my friend and co-blogger, +Cole Pierce. It's about his history with collage, field recordings, and our music blog, fieldmic.com.
Wait while more posts are being loaded