Nsmith_avatar

Tablet Layout

by Nathan Smith Jul 7, 2010
Shot_1278483625
1 bucket
Tweet
1,192 views
http://drbl.in/mqb
Icon-colordrop

Tags

  1. 2
  2. 2
  3. 1
  4. 1

8 Responses

  1. Nsmith_avatar Nathan Smith

    --

    NOTE: [View full-size screenshot here]

    Working on a new tablet layout, to be used as a basis for web apps we build at work. This represents about a day's worth of work (in code). No images were used, except for a slight drop-shadow inside of form inputs, to get them looking consistent cross-browser.

    Unlike some of the other mobile frameworks out there, this works in more than just WebKit browsers. This screenshot is from Firefox.

    Note: To get around the limitations of position:fixed and overflow:auto in mobile WebKit, I'm using the mini JS library called iScroll...

    http://cubiq.org/iscroll

    almost 2 years ago

  2. Avatar-default Matthew Irish

    Did you consider Sencha Touch ?

    almost 2 years ago

  3. Nsmith_avatar Nathan Smith

    @Matthew - Yeah. I looked at it. We wanted something that would work in more than just WebKit browsers though. Plus I'm not at all familiar with Ext JS. And since we don't anticipate using many animations, just made more sense to do our own simple CSS for the layout - with the help of iScroll to smooth out mobile WebKit's scrolling weirdness.

    Sencha is still a fine library / framework. I definitely don't have anything negative to say about it. Very smart group of guys working there.

    We do plan to use jQTouch (original dev now works for Sencha) for our phone-specific web apps. And we use gRaphael JS for charts in our main web apps (geared towards desktop browsers). The creator of Raphael / gRaphael also recently went to work for Sencha. Needless to say, we have great respect for the whole Sencha crew.

    almost 2 years ago

  4. Pro Maxart-blue-80 Max

    @Nathan why no inset box-shadow for the inputs, instead of the image? Pretty consistent across browsers is it not?
    (I've also been making my own little iPad-like UI framework - http://drbl.in/28065)
    Nice work you did there!

    likes

    almost 2 years ago

  5. Logo Andrew Meyer

    Very cool. I've been considering developing a similar framework myself. Looks pretty awesome.

    almost 2 years ago

  6. Nsmith_avatar Nathan Smith

    @Max - Good suggestion on box-shadow.

    almost 2 years ago

  7. Davatar-600 Dave Simon

    I worked on something similar a while ago, but with my change in jobs, left it as it was. Would love it if this was the 960.gs of mobile frameworks. :)

    almost 2 years ago

  8. Nsmith_avatar Nathan Smith

    Update: Demo here...

    http://host.sonspring.com/slablet

    Works in Safari, Chrome, Firefox, Opera, and IE8.

    And of course, on the iPad.

    almost 2 years ago

keyboard shortcuts: ← previous shot → next shot L or F like