Profile

Cover photo
Able Parris
Works at Big Spaceship
Attended Rhode Island School of Design
Lives in Brooklyn, NY
834 followers|15,419 views
AboutPostsPhotosYouTube

Stream

Able Parris

Shared publicly  - 
 
I'm putting this on today's calendar.
On their 13th album, Philadelphia's rap maestros reach new narrative and compositional heights.
4
1
Ike Edeani's profile photoMatthew Anderson's profile photo
 
Fantastic, obviously.
Add a comment...

Able Parris

Shared publicly  - 
 
Nice work, Kari.
2
Able Parris's profile photo
 
Search (specifically color) and random are my favorite features.
Add a comment...

Able Parris

Shared publicly  - 
 
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.
Kari Pätilä originally shared:
 
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.
Able Parris is a designer, art director, and illustrator for hire.
1 comment on original post
6
Maari Casey's profile photo
 
Awesome site Able!
Add a comment...

Able Parris

Shared publicly  - 
 
I think +julia parris will especially like this.
3
1
julia parris's profile photoVictor Aragão's profile photo
 
Magical!
Add a comment...

Able Parris

Shared publicly  - 
 
Stoked to see my site featured on Site Inspire. Thanks again to +Kari Pätilä for all of his help getting it live.
siteInspire is showcase and CSS gallery featuring the best web design today, highlighting examples of exciting visual and interface design.
5
Evan Stremke's profile photoIke Edeani's profile photoAble Parris's profile photo
3 comments
 
Thanks, guys.
Add a comment...

Able Parris

Shared publicly  - 
 
Nice.
5
1
Duane King's profile photo
Add a comment...
Have him in circles
834 people
Boyfriend Tag's profile photo
Maricar MacDonald's profile photo
Paul Buck's profile photo
Scott Ostler's profile photo
Justin Belcher's profile photo
Layden Robinson's profile photo
cheng-wei liu (維大力)'s profile photo
benjamin Thomas's profile photo
Kajal K's profile photo

Able Parris

Shared publicly  - 
 
Love this.
Oliver Reichenstein originally shared:
 
Draw a Vermeer with one line: http://vimeo.com/m/27405001
View original post
1
Add a comment...

Able Parris

Shared publicly  - 
 
There's some new stuff up on Field Mic to check out and share with your friends.
A sound art and music blog. Submissions welcomed. | A unique music and sound blog
4
Add a comment...

Able Parris

Shared publicly  - 
 
Looking for great examples of mobile websites that are content-heavy. Link me.
1
Able Parris's profile photo
2 comments
 
No, it is about design. :)
When if first loaded, though, a pop-up window appeared and I hit cancel. It was asking me if I'd like to view the mobile version. haha Oops. I got it figured out now.
Add a comment...

Able Parris

Shared publicly  - 
 
Good morning.
1
Add a comment...

Able Parris

Shared publicly  - 
 
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.
Here is a short documentary of my history as an artist that connects the dots between my early collage work to my recent paintings and interest in field recordings and sound art. Produced by Ani... | ...
2
Able Parris's profile photoMatthew Mansfield's profile photo
3 comments
 
I watched it when it came out a few years ago. Yeah, Ray Johnson was a bit queer for sure.

He's been on my mind recently since I read a piece on him in a local art magazine. 
Add a comment...

Able Parris

Shared publicly  - 
 
Great video of 1962 New York.
"Always fascinating, always inspiring -- Ever new New York!" Excerpts from this travel film reveal the New York of 1962, with its furious construction, booming tourism, and jazzy soundtrack....
1
Add a comment...
People
Have him in circles
834 people
Boyfriend Tag's profile photo
Maricar MacDonald's profile photo
Paul Buck's profile photo
Scott Ostler's profile photo
Justin Belcher's profile photo
Layden Robinson's profile photo
cheng-wei liu (維大力)'s profile photo
benjamin Thomas's profile photo
Kajal K's profile photo
Work
Occupation
Artist and Senior Designer at Big Spaceship.
Employment
  • Big Spaceship
    Design Director, 2011 - present
  • Newfangled
  • McKinney
    Designer, 2009 - 2011
  • Freelance
    Design, illustration, and art direction, 2004 - present
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Currently
Brooklyn, NY
Previously
Carrboro, NC - Wyoming and Kansas City
Story
Tagline
Artist & Design Director
Education
  • Rhode Island School of Design
  • Rhode Island College
Basic Information
Gender
Male