designing and developing trello for multiple devices

Designing and Developing Trello for Multiple Devices

Bobby Grace - March 2012

Thursday, March 22, 12

Our approach... one site and one codebase for all devices.


Why


People get a consistent experience.

No redirects. Links work seamlessly.

Can read pitch, watch video, sign up and start using it.

Don’t have to learn a new interface.

All the same features.


We can deliver updates seamlessly.

One place to deploy, easy updates.

Don’t have to retro-fit features for mobile.

Mobile site is always up-to-date.


Everything we do for mobile translates back to a better desktop experience.

Big, finger-friendly hit targets

Super fast

Intuitive interactions


What about native apps?


We love native apps!We have an iPhone app and are

working on an Android app.

Gives us native speed, native look and feel, push notifications, offline support...


But we didn’t want to ignore the mobile web because of native apps.


How


Optimizing UI Components for Mobile


Pop over menus Narrow enough for mobile devices

finger-friendly hit targets

280px

These context menus are used to log in, show card actions, view notifications, and lots more.


Only one menu is visible at a time. Simplifies navigation and works on mobile.

There are view transitions, though.

Back to Card Actions1. 2.


This is not going to work for us...Lots of hover events and complicated nesting. Will work for a desktop-only environment, though.


Dialog windows

Collapses to single column

Shows an action menu button

These layout elements are used for the “back” of cards, for user pages, and elsewhere.


Touch fallbacks

Would normally show up on hover on desktop.Always visible on mobile.


Icons


Sprite your icons.


We use Illustrator for icons so we can easily export high-res versions.

We load them with CSS media queries for high DPI devices like the iPhone 4 and the third-gen iPad.


.app-icon { background-image: embed(../images/icons-1x.png); background-position: -9999px -9999px; &.board-icon { background-position: -60px -30px; }}

@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-webkit-min-device-pixel-ratio: 2) { .app-icon { background-image: url(../images/icons-2x.png); background-size: 690px 144px; }}

The CSS looks like this... Our compiler embeds an inline base64 encoded datauri of the

image. One less request.

This image is 1380x288 (2x), but we use the 1x background-size so all the icon-specific

background-positions line up.

(This is LESS.)


http://lesscss.org/

http://lesscss.org/

Detecting Window Width


We listen for window resizes with JavaScript and add an appropriate class to the body element.

CSS takes care of everything else.


window.WindowSize = new class

calc: => width = $(window).width()

@fExtraLarge = @fLarge = @fMedium = @fSmall = @fExtraSmall = false

if width > 1280 @fExtraLarge = true else if width > 850 @fLarge = true else if width > 700 @fMedium = true else if width > 500 @fSmall = true else @fExtraSmall = true

$("body") .toggleClass("extra-large-window", @fExtraLarge) .toggleClass("large-window", @fLarge) .toggleClass("medium-window", @fMedium) .toggleClass("small-window", @fSmall) .toggleClass("extra-small-window", @fExtraSmall)

The code looks like this...

(This is CoffeeScript.)


http://coffeescript.org/

http://coffeescript.org/

body.extra-small-window body.large-window

For example...


if WindowSize.fLarge or WindowSize.fExtraLarge renderHugeThing()

This method gives us an easy way to check the window size in view code.

We also have a Browser.isTouch() method to selectively load components.


Views


We use Backbone for views. It makes views straightforward and keeps code flexible.


class CardView extends ViewWithId

className: "list-card"

events: "click .js-card-menu": "openCardMenu" render: => data = cardModel.toJSON()

$(@el).html( Mustache.to_html( templates.card_in_list, data ) )

openCardMenu: (e) => Util.stop(e) PopOver.toggle elem: e.target top: 23 view: cardModel.getView(CardMenuView)

A view look like this...


class CardMenuView extends EditableView

events: "click .js-change-members": "changeMembers" "click .js-edit-labels": "editLabels" "click .js-move-card": "moveCard" "click .js-due-date": "changeDueDate" "click .js-vote": "vote" "click .js-close-card": "close" render: => data = {foo: ‘bar’} $(@el).html( Mustache.to_html( templates.popover_card_menu, data ) )

changeMembers: (e) => Util.stop(e) PopOver.pushView view: model.getView(CardMemberSelectView)

# ... editLabels(), moveCard(), etc.

...and this.

Push another view (select members) onto the stack. PopOver will load the view and handle transitions.


Templates


We use Mustache for templates.They are strictly logic-less, which keeps code clean.


card_in_list.html-----------------

<div class="card-labels clearfix"> {{#labels}} {{#isActive}} <div class="card-label {{color}}-label"> </div> {{/isActive}} {{/labels}}</div>{{#__ed}} <span class="card-operation app-icon dark-hover small-icon menu-icon js-card-menu"></span>{{/__ed}}<a href="{{url}}" class="list-card-title clear"><span class="card-short-id hide">#{{idShort}} </span>{{name}}</a><div class="badges"></div><div class="list-card-members"></div>

Templates look like this...

Note: The view wraps this with an element with class View.className, in this case ‘.list-card’. Make good use

of className so you don’t end up with useless divs.

Dynamically loaded elsewhere in the view


Thanks!

trello.comtwitter.com/trello

twitter.com/bobbygrace


https://trello.com

https://trello.com

https://twitter.com/trello

https://twitter.com/trello

https://twitter.com/%23!/bobbygrace

https://twitter.com/%23!/bobbygrace

designing and developing trello for multiple devices

Documents