[kaolinite]

Does anyone know of any guides or books for really advanced HTML/CSS? I find a lot of these guides target regular websites, which I have experience with, whereas I'd love to know how to create much more advanced layouts (e.g. Gmail, Grooveshark). Does anyone know where I can find information on that kind of stuff?

[bzalasky]

Learn a front-end MVC framework. JavaScript plays a huge roll in creating applications like Gmail or Grooveshark. Addy Osmani's blog is probably as good a jumping off point as any (http://addyosmani.com/blog/).

[chewxy]

Funny. Due to a CDN error yesterday I was forced to use GMail on HTML mode.

Guess what? Even after the problem has been fixed I'm still on HTML mode. It is so much faster, and more responsive than the javascript version.

Why people make complex javascript frontends, I will never understand.

[skeletonjelly]

Really? I find my usage is faster using keyboard shortcuts. I can clean out new mail in a matter of seconds.

[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!

[joshmlewis]

I think I get what you're asking here. I work for a startup as the sole front-end guy and we have a mess of SASS/JS. It was never really rebased since the beginnings and definitely wasn't structured for performance, reusability, or neatness. I'm going to be reorganizing it soon and I'm reading up on things like this, object oriented CSS, and SASS best practices.

There's a big difference from creating a simple/moderate website vs an application that has many facets but same styles. It's a tough chore to get everything right but I'm excited to do it.

[aglosson]

I inherited a similar beast at my last startup. The company ended up going under before I could fully untangle the mess, but when I was researching, I found little out there to give me good advice. All of our HTML, CSS, and JS needed to be addressed and we were on a 2-week release cycle, so I found breaking this debt work into release-size chunks to be a real challenge and still am without a real solution for.

I'd be interested in hearing your approaches to your current project and would definitely be willing to give whatever advice I can based on what I found through trial and error.

[Already__Taken]

You should have a look at this 'Big CSS' talk.

www.youtube.com/watch?v=R-BX4N8egEc

[why-el]

I would recommend Alex Maccaw's javascript Web Applications. Sure it's about Javascript, but how really big can your HTML/CSS get before you modularize? :) What I like about the book is that it explains the fundamentals of MVC in a framework agnostic way, which I think is helpful if you are trying to refactor and MVC-ize your code base without throwing in a heavy dependency like Backbone or Spine.

[juddlyon]

I found this book to be very helpful as well. The chapter on testing was outstanding too.

[optymizer]

There's no 'really advanced HTML'. There are the standards. Personally, I found that writing a parser for a language does a good job at exposing you to the low-level details, which is what the 'advanced' part usually relies on. Otherwise, you're probably looking for HTML (architectural) design patterns.

[pault]

Last time I checked, gmail was still using tables for layout.

[wmeredith]

I would say that ignoring implementation dogma and going for the best solution to a problem definitely falls under advanced development. It's certainly not something you see coming from developers with a few flavor of the month tutorials and maybe a site build or two under their belt.

[saint-loup]

Gmail uses tables for the list of mails, which makes sense, but there are also tables for things like the logo. I'm not qualified to assess the work of the team behind Gmail, but it's curious notheless.

[pault]

I agree, I just don't think gmail is a good example of the "really advanced HTML/CSS" the parent is looking for.

[krsunny]

And grooveshark uses bootstrap