[kaolinite]

Sure, I've worked with Backbone and advanced JS - this isn't the problem. What I'm talking about is the rich, fluid layouts that these sites have and which distinguishes them from a 'regular' website.

Edit: changed Bootstrap to Backbone - always get those two mixed up.

[adamauckland]

Not really sure what you mean by 'regular' website, it sounds like you're talking about a variety of different things.

Google the following:

Responsive Design, Object Oriented CSS, SASS, Compass, Susy Grids. Any help? I don't think you're going to get tutorials on how to create something like Gmail because AFAIK it's JavaScript generated from JAVA.

Nicole Sullivan writes a lot about this sort of thing.

EDIT fixed formatting

[kaolinite]

I think the best way to describe the difference between a 'regular' website and the advanced layouts I talk about is that an 'advanced layout' often looks similar to a desktop application.

Remember the first BaseCamp? Given designs, I reckon I could build the front-end for that. However given designs for GrooveShark, icloud.com or the new spotify web-app - I wouldn't know where to begin.

I've tinkered with responsive designs, Backbone, LESS, grid layouts and such (by the way, I will check out Compass, it looks interesting) - yet still I feel like I lack the knowledge to build more advanced apps.

[at-fates-hands]

Because front-end development is changing so fast, what I've had to do is simply start looking at website galleries and find sites where I like how they've implemented certain features.

Then I try and replicate it, switch it up and work with it. For me, this is a lot better than waiting for someone to show these techniques in a basic tutorial.

You might interested in learning about parallax scrolling as well. It's getting more popular, but its Achilles heel is its not mobile friendly at all.

I'll keep the list short: http://html5gallery.com/ - this is one of my favorites since it gives a review of each site and what the developer could've done better. http://webcreme.com/ http://cssremix.com/ http://www.webdesign-inspiration.com/ http://www.designfridge.co.uk/

[adamauckland]

It's actually not that hard. iCloud and GrooveShark are quite graphic-heavy which gives them that extra edge. Frontend technologies are pushing forward at an incredible rate.

Have you played with Sencha Touch or Google's Angular JS or Ember or Backbone?

These are all great starting points and will teach you a lot about how to structure your code, but for anything large like iCloud, you're going to probably need to write your own libraries because nobody else is doing exactly what you want.

Get good at using jQuery to animate stuff, then re-work your UI using CSS3 transitions (because jQuery suffers performance issues on mobile).

Design for mobile first and scale upwards; by design I don't mean PSDs I mean open an HTML document and just start chopping it up.

[mnicole]

I posed what I think is a similar question to a friend of mine that I'm designing a node.js app with. I thought that being in JavaScript, it would handle everything a lot more fluidly, like web apps such as koding.com. In reality, it's just another MVC framework entirely based in JS (let me know if I'm phrasing this wrong).

I'm unsure if for the type of apps we're talking about it's just the way they handle the loading of their site or if it's the framework it is based upon, but he forwarded me to Meteor (http://meteor.com/) and told me that that was probably what I was looking for.

If someone could chime in on this - and sorry for being so obtuse - I'd be super grateful.

[nbashaw]

It's actually simpler than you think - just use a lot of absolute positioning. Inspect the source code of grooveshark and gmail to see how they do it.

[rattray]

Surprised nobody here has mentioned Google Web Toolkit yet. It's the tool Google uses to build interfaces like Gmail and (I believe) Docs. Freely available: https://developers.google.com/web-toolkit/ That said, it's not something I would want to use myself (not a Java fan).

It's also worth noting that Gmail especially appears to rely very heavily on Javascript for positioning and styling, rather than pure CSS. Many elements have, eg; `style="width: 123px"`. This is a practice I strive to avoid, so it's interesting to me that Google makes such use of it.

[braveheart1723]

Try http://bradfrost.github.com/this-is-responsive/

[bryanwong]

Great!