I agree that Christian's proposal looks promising. I do take pause however at what Nico points out: that the OAE design relies on an increasing number of (small) images. While I generally think the OAE design work has been awesome, I wonder if a design that relies more on images will also serve a multi-device/multi-display strategy going forward.
On one hand: clearly different output scenarios sometimes call for very different designs, and thus one should not have to hamstring one design just so it can play well with others. On the other hand, given that we have limited design resources, any time we can kill two pigs with one angry bird is a win. Would a more style-based, less image-based design help OAE deliver better to a wider variety of clients? Perhaps the existing design work is better suited to a variety of clients than I imagine. I would love to have my anxiety assuaged. = nate On Mon, Apr 23, 2012 at 8:46 AM, Nicolaas Matthijs <[email protected]> wrote: > Hi Christian, > > I actually like this idea a lot, especially as we have a lot of smaller > images that we are using to support the design. > > During a previous performance sprint, we actually created CSS sprites for > the entire application, but as you say, they are hard to maintain and the > number of individual small images outside of sprites has increased > significantly since. So in terms of maintainability, this is potentially a > great solution. > > Currently, 55.9% of our requests and 42.8% of all data traffic are images. > This means that for an unprimed cache, this solution should actually make a > huge difference. For a primed cache, it will matter a lot less though (as > they should be cached from that point on), but for the sake of maintenance > it's probably still quite valuable. > > Once we get into the architectural work and have our measurement environment > set up, we can properly evaluate it and hopefully use it as well ... > > Thanks! > Nicolaas > > > On 23 Apr 2012, at 03:41, Christian Vuerings wrote: > > Hey, > > > Over the last couple of days / weeks, I've been thinking a lot on how we > might improve our performance on the UI side. > > One of my previous suggestions was to use CSS sprites. > While it would be a good thing to have, it can be tedious to make and it's > hard to maintain/update. > > An alternative solution would be to convert the images that we use in CSS to > data URIs [1]. > There is currently a library which would do this for us, called CSSEmbed > [2]. > > Benefits: > - Doesn't need any extra request, the images are embedded in the CSS (A > sprite would still require a request) > - Since the CSS is cached, the images are cached as well > - Way easier to maintain > - We would find images that are referenced in the CSS but not exist anymore > (found this while testing) > > I made a proof of concept (for the CSS files in /dev/sakai/css) on github > [3] which we could hook into our release build. > > Try it out by doing: > mvn clean install # will create the necessary folders > ant cssembed # replace the images in the CSS with data URIs > > Some extra features/comments: > - Browser support is ie8+ > - We can/should limit the size for which we allow generation of data URIs > > > -- Christian > > [1] http://en.wikipedia.org/wiki/Data_URI_scheme > [2] > Repo: https://github.com/nzakas/cssembed > Usage: https://github.com/nzakas/cssembed/wiki > Article: http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/ > [3] https://github.com/christianv/3akai-ux/tree/cssembed > _______________________________________________ > oae-dev mailing list > [email protected] > http://collab.sakaiproject.org/mailman/listinfo/oae-dev > > > > _______________________________________________ > oae-dev mailing list > [email protected] > http://collab.sakaiproject.org/mailman/listinfo/oae-dev > _______________________________________________ oae-dev mailing list [email protected] http://collab.sakaiproject.org/mailman/listinfo/oae-dev
