CODE TRICKS

Looking out for what other specialists are doing can sometimes be wonderfully helpful.
 
This weekend we came across a "listicle" (a new word describing a mix of an online article and a curated link list) on Smashing Magazine. The site caters to a worldwide base of web designers and developers and is very popular.
 
Although the connection might not be obvious at the very first sight, the topic that was tackled on that day could help to solve some of the challenges for multi-channel publishing of media content. The keyword is "Responsive Design".
 
CSS-Tricks: Responsive design and the media cloud
Responsive means that media content can be published in HTML including information about different screen sizes and devices. Currently, this is a problem, many well designed sites are close to unusable once the size of the glowing rectangle gets smaller.
 
Example: Responsive Design Testing (Matt Kersley) 
Seeing one website in different screensizes shows what the challenge is
 

 
Why this is relevant for cloud storage, too
So far, most web pages are more or less static. In order to prepare for proper presentation of content on different screen sizes (small phone, smart phone, tablets of various sizes and finally PC screens and even TV screens) usually the content files need to be produced in various versions. This presents a challenge for cloud storage, in fields like media, health and even business intelligence, where numbers are used in tables or charts.  
 
Using CSS snippets, one file can adapt to the screen
All this is solvable, using short but elegant snippets of CSS code. This in turn is potentially relevant to layers and use cases of VISION Cloud.
 
The background: One of the five innovations we want to tackle is computational storage. The term broadly describes techniques where an item can be automatically transformed in storage instead of a web of different servers and instances. An example would be HD videos, which, in order to be viewable on all screen sizes, must somehow be stored in different versions.
 
An HD video can be played on big PC screens, a smaller version on tablets and an even smaller version would be presented on mobile devices with low bandwidth. 
 
Reducing server load and number of file versions in storage
Such operations can easily call for considerable server ressources. Combining such tasks in an intelligent way with responsive CSS though solves many of the problems.
 
Check out the numerous examples how to handle content using short bits of code yourself - there are solutions for testing existing web pages, for fluid video, auto-resizing pictures and more. 
 
Not just for media clouds and media websites
These tricks can even be applied to other domains relevant for cloud computing and data analysis, such as dashboards for Business Intelligence. Here the CSS tweaking would ensure that tables and visuals would always resize to the best visual form, based on the screen size of the device. Cool stuff. 
 
Link to article:
Smashing Magazin, "Responsive Web Design Techniques, Tools and Design Strategies", (July 22, 2011)
 
Examples (taken from article above):
CSS-Tricks: Convert a Menu to a Dropdown for Small Screens 
Menu switches to dropdown 
 
CSS: Elastic Videos
resizing of video container along with the screen size
CSS-Tricks.com: Responsive Data Tables 
Tables morph into more readeable format on small screens 
 
Example website: Ampersand
(web page for an event resizing fluidly, via Eliot Jay Stocks)