as a designer, i’ve always valued symmetry and balance. however, i came across the tesla model x site on my ipad and it made me rethink some tablet best practices.

when i first got to the page i immediately noticed the ugly gutter on the right hand side of the page. i assumed it was a development oversight and the site hadn’t been optimized for a tablet device. but as i scrolled down the page, i realized this gutter had a purpose. a few of the modules on the page were interactive, and as i interacted with the modules, my touch inputs affected the interaction of the module, not the scrolling of the page.

tesla had designed a scroll gutter!

in hindsight, it seems like a no-brainer. but, this is one of the first sites that i’ve come across that has some really smooth touch interactions, coupled with a scrolling solution.

as i design for more interactive sites, i’m definitely going to start using this obvious solution as a ux best practice for tablet devices.

six years ago, building a website was easy. a little css, some html, and maybe a form or two. get it to work on a few different browsers and your job was done.

today we have desktop, tablet, and mobile. everything needs to be responsive and adaptive. everything needs to be optimized for different shapes, sizes, orientations, and now, resolutions. even a single page site has a dozen different factors that need to be taken into account. if there was ever a time for good web designers and developers to really earn their paycheck, now is that time. 

it’s also a very exciting time. all of this advancement is leading to a lot of really great innovation. and now, with retina displays hitting the market, one major new factor in development is load time. even sprites load slowly at 326 ppi.

so, i thought i’d share some fun tools that i’ve come across that help with development in this time of transition…

get rid of gradient background images. get rid of them for pages, for buttons, for divs, for everything. i use this A LOT:

ultimate css3 gradient

linking to social is important. stop using images. there are now a few fonts made up entirely of icons. you can even create your own. it’s like the wingdings of the future…

socialico (used on this tumblog)

icomoon

beautiful fonts are easier to use now too. there’s no point in creating images just to use them for typography. i’m willing to bet you can probably find what you’re looking for here:

google web fonts

typekit

want a little responsive web design inspiration? 

mediaqueri.es

if you ever need a form for anything, go here:

wufoo

here are some shortcuts to writing css3:

css3 generator

css3 maker

if you want to learn more about web development, these are my favorite:

css-tricks

treehouse

code academy

i love my internet. let’s all make the best internet ever!