Posted on September 14th, 2009 by Tom Arah

Can Your Browser Do This? Adaptive Layout

Recently I wrote that what makes RIAs (Rich Internet Applications) different from browser-native web applications isn’t rich functionality or rich content but rich design. Moreover I argued that only a player-based approach (effectively Flash/Flex or Silverlight/WPF) can provide the platform necessary to take web design to the next level.

As I expected, the feedback to the piece centred on the best way of blocking Flash content as it always does whenever I mention the technology. It’s hardly surprising as the first thing that comes to most people’s mind when you mention Flash is irritating banner ads specifically intended to distract you from reading the real content of the page – the absolute definition of bad design.

However in the context of a RIA, Flash/Flex is capable of so much more – producing an end user experience that the browser alone can never hope to match…

To begin with, it’s important to realise that Flash/Flex isn’t inherently “flashy” – it’s up to the designer how they put the platform to use and any decent designer knows that less is usually more.

In fact one of the great strengths of a player-based approach is the smooth and sophisticated streamlining it enables. While technologies like AJAX have allowed browser-based design to paper over the inherently page-based nature of HTML content, this just isn’t an issue for a player. At its best, the browser can offer extraordinary functionality but this will always feel clunky compared to a player-based application – just compare Google Docs to Adobe Buzzword to see the difference in action. Ultimately only the player-based RIA can deliver a truly desktop-style experience.

The design strengths of the player don’t just add to functionality; they are crucial when it comes to dealing with content. Here CSS (Cascading Style Sheets) has worked wonders for the browser enabling it to graft on layout and typographic control to the presentation-neutral HTML, but this is still rudimentary. The difference between the browser and player is made clear when you access the New York Times website and then read the same content via the AIR-based Times Reader application (there’s a free taster version).

At first they might look pretty similar – apart from little things such as the live crossword and the fact that the whole reading experience is tighter and more enjoyable and works offline. The most fundamental difference is hidden unless you happen to resize the application. If you do, you’ll see that the layout automatically updates in real time – increase the application width and the columns will widen and then at the tipping point of comfortable reading another column will appear and any images will intelligently resize themselves accordingly.

Of course this adaptive layout isn’t really intended for such resizing on-the-fly (though it is quite addictive). The real purpose of adaptive layout is to ensure that whatever device you are accessing content by – mobile, notebook, desktop, TV or projector – the layout and design and so end experience are optimised. This isn’t a question of flashy bells-and-whistles it’s absolutely fundamental: it’s automatic and universal good design for any device that supports the Flash player.

As we move on from the early days of the Web, from simple desktop-based browsing to advanced desktop-style reading and doing, the time has come to stop dismissing Flash as just an irritating distraction. Thanks to its adaptive layout capabilities, Flash/Flex sets a new benchmark for the best possible cross-platform cross-device design.

Surely you wouldn’t want to block that?

Tags: adaptive layout, air, browser, digital design, Flash, ria, times reader

Posted in: Real World Computing

Permalink

Follow any responses to this entry through the RSS 2.0 feed.

Social Bookmark this article: What is this?

You can skip to the end and leave a response. Pinging is currently not allowed.

15 Responses to “ Can Your Browser Do This? Adaptive Layout ”

David Wright Says:
September 14th, 2009 at 1:30 pm
You also have to contend with Flash Cookies – web site developers have cottoned onto the fact that a lot of people block cookies, but most don’t block flash, therefore they use Flash cookies, even if the site itself doesn’t make use of Flash (in any other way), because they can be pretty sure you will have Flash installed (smartphones and FlashBlock users are starting to upset that applecart).

That is why I use FlashBlock and NoScript. I get to decide which bits of the site are really important and worth running. If a page is made up of 6 flash elements, I can chose to only load the one or two elements that I really need to ensure I can get around the site and do what I need.

That saves bandwidth, it saves processing power – especially if you have 20 or 30 tabs open!

The problem is, a majority of sites use a flash object to accomplish what a couple of jpegs and some CSS encoding could accomplish!

I agree, Flash has its uses, but it gets abused much more than it gets used, which is why blocking Flash (and Java, Silverlight etc.) on a selective basis is a growing trend among people who know what they are doing.

NoScript and FlashBlock are pretty essential to browsing these days. With the resurgance of URL shortners, half the time you have no idea where you are going to land. Either you take precautions or you don’t click on links…

I also get to decide on who can run scripts. For example, I can let the content provider run their scripts and objects, but block doubleclick or google-analytics from running scripts or objects. That doesn’t stop them serving up static ads, but it does stop them from annoying me too much…
John Says:
September 14th, 2009 at 3:41 pm
Actually CSS allows content to resize dynamically to the width of the browser window only IE 6 doesn’t support it. There’s no need to use Flash to get resizeable content and layouts. Also if SVG had better support in browsers we could enjoy vector images everywhere.
Tom Arah Says:
September 14th, 2009 at 4:27 pm
David – this was meant to be an article about the strengths and benefits of Flash; not how best to block it Moreover, the way you describe it, your approach sounds a very distracting way of trying to concentrate on the core page content.

John – you’re right that CSS does offer the possibility of basic adaptive layout eg http://www.brandspankingnew.net/specials/adaptLayout/adaptive_columns_01.html but it’s nothing like what I’m talking about in terms of reflowing text and pictures within an optimal paginated screen layout.

And, as you highlight, a fundamental problem with multiple browsers as opposed to a single tightly controlled cross-platform cross-browser player is support. There would be no point in one browser trying to implement serious adaptive layout, they would all have to and in exactly the same way. That just isn’t going to happen. CSS has done brilliantly to get us where we are but I don’t think it can realistically take us forward.

As for SVG I was a major fan when it first arrived but, again being realistic, it’s a technology whose time has come and gone.
John Dowdell Says:
September 14th, 2009 at 7:59 pm
Don’t worry, Tom, with a Greasmonkey script I’m pretty sure you can block people who habitually block conversations by mentioning Flash blockers….

I’m glad you caught the improvements in text layout. The reflow engine is actually quite sophisticated, using expertise from the Adobe InDesign team to create multilingual hyphenation engines that make the better layout possible.

The new opensource “Text Layout Framework” showcased in the New York Times Reader also supports many other professional typographic features, onscreen for the first time:
http://labs.adobe.com/technologies/textlayout/

jd/adobe
Kevin Partner Says:
September 15th, 2009 at 10:49 am
You’re right, John, the Text Layout Framework is the single most exciting thing to happen in Flash development for years (except, perhaps, the introduction of AS3).

I agree with Tom that the Flash player has the power to provide a true desktop-like experience and the added bonus that it’s relatively simple to “spin off” a desktop version via Air.

It all comes down to the purpose of the site. If it’s an information site that needs good SEO and which can be accomplished well in CSS and XHTML then go that way.

If you need rich functionality (and the sort of rich design Tom is talking about) then Flash is by far the best option.

One of my sites, Passyourtheory, uses an AS3 based Flash multiple choice test that knocks our competitors into a cocked hat when it comes to both presentation and functionality. I’ve also used Flash to develop an elearning engine and am currently developing a design-related product in Flex/Flash Builder 4. Recognising which tool to use in which circumstance is key: I’ve never built an entire site in Flash but the key components use its rich feature set and the benefits of getting around HTML’s statelessness.
Kevin
infernoz Says:
September 16th, 2009 at 7:11 am
Flash maybe cleaner for some stuff, but:
* It is far less secure than HTML and other plugins, and can seriously compromise browser, OS, and Real-World security.
* It is a pain to keep up-to-date
* It is less usable for common browser tasks, like moving sub content/references to other bowser tabs, saving stuff, etc.
* It can easily hang or crash browsers.
* There is still no native 64-bit version, for 64-bit OS/Browsers.

Stable 64-bit Firefox builds already exist and 64-bit Java works fine in them, unlike Flash, so it is about time Adobe got their finger out!
infernoz Says:
September 16th, 2009 at 7:13 am
Flash maybe cleaner for some stuff, but:
* It is far less secure than HTML and other plugins, and can seriously compromise browser, OS, and Real-World security.
* It is a pain to keep up-to-date
* It is less usable for common browser tasks, like moving sub content/references to other bowser tabs, saving stuff, etc.
* It can easily bog-down, hang, or crash browsers.
* There is still no native 64-bit version, for 64-bit OS/Browsers.

Stable 64-bit Firefox builds already exist and 64-bit Java works fine in them, unlike Flash, so it is about time Adobe got their finger out!
David Wright Says:
September 16th, 2009 at 9:21 am
Tom,

My point was more that Flash gets abused much more than it gets used these days.

Mix in heavy processing Flash objects with tabbed browsers and it can quickly grind a machine to a halt – and the majority of that is adverts and animated menus!

With FlashBlock, the flash doesn’t load until I actually need it. If I have 20 tabs open with embedded video, they don’t start loading or streaming. I can read the surrounding text and decide whether I want to load the video.

The same for Flash game sites, the game gets loaded, the half a dozen flash adverts and the flash chat console don’t get loaded, meaning the machine stays more responsive.

Like I said, Flash does have its uses, but it is getting a bad reputation for security and being used where it isn’t needed that people are getting fed up with it!

I tend to avoid sites with Flash, if I can, which is a sad situation for Adobe and serious Flash developers.
Tom Robinson Says:
September 18th, 2009 at 11:30 am
Tom,
With your background in DTP, and interest in RIA’s, you might be want to take a look at Prinkk, which offers users a simple DTP tool, using the text handling functionality in Flash Player 10.
Tom, Prinkk
Neolander Says:
September 20th, 2009 at 8:40 am
“And, as you highlight, a fundamental problem with multiple browsers as opposed to a single tightly controlled cross-platform cross-browser player is support. There would be no point in one browser trying to implement serious adaptive layout, they would all have to and in exactly the same way. That just isn’t going to happen. CSS has done brilliantly to get us where we are but I don’t think it can realistically take us forward.

As for SVG I was a major fan when it first arrived but, again being realistic, it’s a technology whose time has come and gone.”

=> So you think that the way to go for the internet is a technology owned by one company, requiring software that costs thousands of dollars for web devs ? A technology that kills normally-powered computers when used together with tabbed browsing ? That doesn’t work properly on most mobile hardware and linux (because of extreme performance flaws and very bad interactions with site contents like javascript&CSS menus) ? That produces extremely inconsistent ergonomy by not working together with the browser’s base functionalities (previous/next page, reload, favs…) ? That does not permits anyone interested in checking how websites works in order to make his own website to do so ?

This is quite an interesting point of view…
Neolander Says:
September 20th, 2009 at 9:06 am
-thousands +hundreds ^^ Flash is painfully expensive, but not up to THAT point !
Mike Walton Says:
September 20th, 2009 at 5:33 pm
@Neolander – It’s true that Adobe’s Flash products do cost $ where there are plenty of free products for HTML and CSS but Flash is capable of much more than these. And much like a lot of other development tools for more capable languages such as the full version of Visual Studio, they do cost $. However, on a tight budget, there are lots of free tools. For example, there is Flash Develop for application development or haXe for compiling swfs, both open source products.

Solutions exist for allowing browser base functionalities to work seamlessly with Flash. SWFAddress takes care of this for basic Flash apps and Flex has the same kind of technology built into it. Handling browser functions within a Flash app can even make transitions between “pages” completely seamless and do it without requiring a page reload.

Having said all that, I don’t see Flash replacing the need for traditional browsers. Browsers are the standard for web viewing and aren’t going away anytime soon. I see Flash much more likely to become more and more like a desktop application platform. With the release of AIR, more and more companies are releasing products for desktop usage. This technology is making it easier to write applications that don’t need net connections, which browsers by nature will likely never overcome.
Jens Ayton Says:
September 21st, 2009 at 8:49 am
When I think of Flash, I don’t think of ad banners. I think of a CPU-hogging, inefficient piece of junk which crashes more than all other software I use put together. Not only that, but its text and graphics rendering quality are inferior to that provided by my platform and, thus, my web browser.

(Incidentally, this form claims my name will not be published. I believe it’s lying to my face.)
disque dur externe Says:
September 22nd, 2009 at 4:41 am
The only problem with player-based approach is that it takes more time in loading the web page.
John Chaytor Says:
October 5th, 2009 at 7:54 pm
To David Wright.

I use the best blocker that has ever been invented – my brain.

I can go to a site and easily ignore all those adverts flashing at me. When a popup does appear I just cancel it and never know what it was about.

No need to consciously make decisions – filter using your own brain!!!