Iframes have always been frowned upon by web-purists (confession: myself included). But things are never black and white and sometimes iframes can be the best solution for a problem (you could substitute “‘iframes” with “Flash” in the previous 2 sentences, but that’s another discussion). So here are 5 quick tips which might lessen some of the SEO- and usability-problems associated with the use of iframes;
1. Google loves doesn’t hate iframes done right!
Although Google is rather vague about the subject, iframes and SEO do not have to be mutually exclusive. But you will have to make sure it’s your main page that shines in search results, not the iframe-content. The main page (where the iframes are defined) has to be more then a mere placeholder for one or more iframes. Migrate as much information (titles, description and other text) from the iframe-content to your main page, which should describe what goes on in the iframe(s). Use the iframe title-property and insert alternative content between opening and closing iframe-tags. A quick example:
<h2>Calculate your mortgage rate</h2>
<p>Calculating your mortgage rate was never easier; just enter the loan-amount and the duration below!</p>
<iframe src=”http://page.url/iframe-container-page1″ … title=”Calculate your mortgage rate here”>Your browser does not seem to handle frames properly, but you can calculate your mortgage rate <a href=”http://page.url/iframe-container-page1″>here</a></iframe>
2. Own the stage
Avoid visitors viewing the iframe-content out of the context of the main page (e.g. because they followed a link in search-results). Add javascript to the iframe-content to check if it is accessed stand-alone and redirect to the main page (or explain and provide link to the main page) if that is the case.
When a visitor clicks a link at the bottom of a long page inside an iframe and the target is a shorter page inside the same iframe, then he/she will see a blank page which is … well not very usable, no? The (hackety-hack) solution; tell the browser to scroll to the top of the iframe each time a new page in it is loaded, by calling the function below (with the iframe id as parameter) when the iframe’s onLoad event fires:
<script>
var firstrun = new Object();
function frameMagic(el) {
if (typeof firstrun[el] === ‘undefined’) { firstrun[el]=true; }
else { document.getElementById(el).scrollIntoView(); }
}
</script>
<iframe id=”iframe” onLoad=”frameMagic(‘iframe’);”>
4. Your users really do need scrolling=”auto”!
Help your visitors access all iframe content no matter what configuration they’re using: don’t disable the iframe scrollbars! Disabling them will render the iframe partially inaccessible for some of your users, because the size your iframe-content needs depends on things outside your control such as operating system & versions (e.g. font & screen resolution), browser (e.g. css-implementation) and browser configuration (e.g. non-default font-size). Instead define a reasonable iframe-width and height, make the iframe-content width flexible (fluid) and let the browser decide if a vertical scrollbar is needed.
5. Smart sizing without scrollbars
If you really really really don’t want scrollbars, if you want your iframe to adapt to the size needed by the iframe-content automatically and if you’re not afraid to experiment; there are some nifty javascript-solutions that allow the iframe-content to communicate the required height to the main page. Check out Framemanager (stand-alone, has some issues though) and the JQuery-postmessageiframe-example (which does everything in javascript, which isn’t really ideal from an accessibility point of view).
Conclusion: iframes aren’t necessarily evil (either), but you’ll have to make a small effort to render them somewhat SEO- and user-friendly.
Being “the computer guy” in the family might be a pain in the ass sometimes, but trying to help out users that are not tech savvy can be very revealing. Yesterday my father-in-law asked me to take a look at his computer, there was something about the browser that was not right. Turned out he let Google lure him into downloading Chrome and making it the default browser. What bothered him most about Chrome was the lack of menu’s (file|edit|…|help), while a lot of the us (the in-crowd) consider the minimal use of chrome a plus. Usability is not only about clean, simple UI’s, but also about not breaking novice users’ expectations of how your application looks and behaves.
Anyway, I showed him IE8 and Firefox 3.5 (both were installed as well) and he recognized Firefox as the browser he was most familiar with. So I uninstalled Chrome, hid IE8, upgraded him to FF 3.6 and also installed the “Vacuum Places improved” and NoScript add-ons.
“Vacuum Places improved” cleans up the places sqlite database where Firefox stores bookmarks and history and which can become very big over time. When tweaking the options (“hide icon” and “auto-vacuum every 20 browser starts”) it was a great way to invisibly tune browser performance, but it turns out Firefox 3.6 vacuums places.sqlite automatically (when idle, every 1 to 2 months). So Pierre, if you ever read this; remind me to uninstall “Vacuum Places improved” next time!
NoScript is a whole other beast; it is a add-on for the security-conscious tech-head, which by default disables javascript, flash, java, … It’s a great add-on, but it is very disruptive and as such totally unfit for novice users. Unless you change the configuration off course, because modifying these options makes NoScript a must-have addon for both you and your grandma;
Although the first option specifically claims it is dangerous to do so, these changes render NoScript into an add-on that provides a lot of extra security (protecting against clickjacking, cross-site scripting and implementing support for x-frame-options and Strict Transport Security) without bothering users with new UI-elements containing incomprehensible questions, messages or options.
Because web security is not only about protecting against threats, but also about not breaking novice users’ expectations of how your secured browser (and the web) looks and behaves.
After looking into ways to call the YouTube mp4-file from within a Video for Everybody html-block (which is not possible, Google protects raw video-files using what seems to be a session-based hash that has to be provided in the URL), I decided to take another (dirty) approach; faking it!
The solution is entirely javascript-based and is as un-elegant as it is simple; create a html-file with a script include of http://futtta.be/newTube/newTube.js and a div with “id=newTube” containing a link to a YouTube-page and the script automagically takes care of the rest. Check out http://futtta.be/newTube/ to see it in action.
The result is an embedded YouTube player which will display the HTML5-version if you’re running a browser which supports mp4/h264 playback (i.e. a recent version of Chrome or Safari) and if you enrolled in the beta. If either of these preconditions aren’t met, you’ll just see the plain old Flash-player.
Don’t get your hopes up, in reality newTube is probably pretty useless (for reasons I’ll get into in a follow-up post, when I have some time to spare that is). You’ll have to wait for someone (YouTube, Dailymotion, Vimeo, … are you listening?) to offer real embeddable html5-video (with support for both mp4/h264 and and ogg/theora).
But I did have fun creating the very first html5-capable embedded YouTube-player
Some people seemed all too happy to dismiss my post as being plain old Flash-bashing. Sorry to disappoint you, but I”m not saying Flash is evil or that it will (or should) disappear altogether. Next correction: I do have Flash player installed and in general I do know if a application is made in Flash or not. Heck, the web has been my job for more than 10 years now and Flash has been a point of interest for quite some time already. And yes, there indeed are innovative web applications and games that are build in Flash. That being said, I do think (because of accessibility, SEO and some more philosophical reasons) it’s best to avoid using Flash to develop a site’s core functionality if the same can be achieved with non-propriety, standard web technology.
It’s not about Flash vs HTML5
The comments on last week’s blogpost seemed to focus very much on the individual merits (or lack thereof) of HTML5, CSS3 or Canvas, as if these are islands with no history and no connections to the web mainland. This is, off course, wrong; these “new” technologies just happen to be the most recent evolutions of the core components of the rapidly evolving ecosystem that is the “open web”. Moreover, with HTML, CSS and Javascript being the brick and mortar, libraries such as JQuery, Dojo and YUI are the “prefab” building blocks of open web development, offering plug&play components to efficiently build cross-browser rich web interfaces. So the discussion is not about Flash vs HTML5, but about the choice between Flash and the powerful “open web technology stack”.
about:evolution
“The only constant is change” and that’s all the more valid on the web. Flash has an important role to play in this respect, having pushed the boundaries of web-based UI’s for many years. But as some of the cutting-edge features that once were only available in Flash, can now be created more efficiently using non-propriety technology, there’s a shift towards the use of those open web components (e.g. the Flash carousel on National Geographic website that was shown in the Adobe video from my previous post has been replaced by a JQuery implementation).
I believe (and that’s what the previous post was about) this trend will continue in 2010 because of features of HTML5, CSS3, canvas, … becoming available to a wider audience either natively (in new browsers) or through libraries that provide cross-browser compatible implementations. And yes, I’m afraid that in my book that means Flash will become less relevant (“irrelevant” in my previous post being an obvious hyperbole).
Despite great efforts by Adobe, Flash on the mobile web (i.e. in a browser, non-browser implementations are irrelevant in the discussion about “open web vs flash”) remains almost non-existent. The fact that Apple continues to refuse Flash for the iPhone only makes this worse, due to the seemingly untouchable “game-changer” status of their phone and due to the fact that more than 60% of all mobile pageviews originate from their mobile devices.
To sum it all up: when Adobe Flash evangelist Serge writes “Flash Player has it’s place on the web today and in the future” I can only agree. But I’ll bet you that place in the future will be less prominent than the one it holds today.
My 2nd prediction for 2010 (the first one being ‘offline is the new online‘): the glory days of Flash are over. The reason for this is twofold; the mobile web and the strong advances “open web” technology is making.
Open web moving in, fast
Remember the days when everybody wanted to spice up otherwise dull websites with “a flash splash page” and “flash menu’s”? Now menu’s are built in accessible, SEO-friendly HTML once again, using CSS to add style and even behavior, adding some Javascript if magic dust is required . And splash pages, well, those were pretty useless to begin with. Adobe Flash’s stronghold now is video playback and animation, but they’re bound to eventually lose that battle as well.
HTML5’s canvas (cross-browser javascript-able 2D bitmap-based graphics) is gaining a lot of momentum. Check out the applications and games on http://www.canvasdemos.com/ to see just how much can be accomplished now, in today’s browsers (really, go check out those demo’s, some are mind-boggling)
Adobe’s answer; mobile banners & deploy to Appstore
So with a Flash-less mobile web and with strong browser-native competition for both multimedia and graphics on the “normal” web, how does Adobe see it’s future? Well, they plan to roll out “iPhone packager for Flash” in CS5, allowing any Flash developer to publish to the AppStore, but there’s still no news about in-browser Flash on the iPhone.
For non-Apple devices, Adobe is boasting a preview version of Flash 10.1 in a mobile browser (the Android 2.0 browser on Google Nexus One in this case) with this promo video;
I don’t know about you, but somehow a sub-par game, web video and banners don’t convince that Flash has a bright future ahead. Not on mobile and maybe even not on the open web as it’s shaping up to be.
But maybe you think Flash will remain in the spotlights despite all of this? Why? Let us know in the comments!
That’s the bad news, but let me share some good news with you as well; you can do cross-browser persistent data storage right here, right now! All you need to build a html5 webdb-alternative is old-fashioned javascript arrays and objects and related functions, some json and last but not least Paul Duncan’s persistjs (don’t download it there though, use the more recent version in the repository instead), a little javascript library that goes a long way to provide precious cross-browser persistent storage.
Simplified, your offline-enabled webapp would have to;
store data in an array (or in objects in an array)
do CRUD using your standard javascript functions (you could turn to something like jlinq to do more advanced things)
use JSON.stringify (native or from json2.js) to turn the ‘repository’ into a string
store the resulting JSON-string with persistjs’s store.set
close tab or browser
retrieve JSON-string when user returns with store.get
So there you have it, basic cross-browser (*) persistent data storage without html5 webdb. Just sprinkle some appcache-magic (adding Google Gears LocalServer-support is trivial) on top to store html, js, css, … in your browser and you have a fully offline-enabled webapp.
(*) tested successfully in Firefox 3.6b5, Safari 4.0.3, Chrome 3.0.195.38, IE8 and MSIE6 (with and without Gears), IE7, the Android 1.5 browser on my HTC Hero and in iPhone’s Mobile Safari. I’ve got some weird bug in Opera 10.10 that I can’t seem to iron out though, but feel free to tell me what stupid mistake I made.
With a notoriously bad reputation for security (or the lack thereof) in Internet Explorer, Microsoft claims to have invested a lot in IE8 security in general and specifically in browser enforced website security. Indeed, according to the product site, IE8:
[...] helps protect you from today’s threats, including malware and phishing, as well as emerging threats that can compromise your computer without your knowledge. Other browsers either don’t offer you this level of protection or require you to download and configure third-party add-ons to get it, but with Internet Explorer 8 you get it right out of the box, and turned on by default.
Smartscreen filter is the name for the Microsoft technology that uses an “in-the-cloud reputation database” which is contacted by the browser to assess the trustworthiness of a URL. Using that information, access to dangerous sites and downloads of malware can be blocked. The system is very similar to Google Safe Browsing that is implemented in Firefox, Chrome and Safari, but Smartscreen seems to be better in stopping malware from being downloaded. On the other hand the 2nd NSSlabs-study deemed both as effective when it comes to blocking access to phishing sites. Based on these (MS sponsored) results one could conclude that IE8 might have an advantage over the competition, but I for one would be very interested in an updated version of these tests with cooperation from the other browser-makers.
XSS-filter
IE8’s XSS-filter offers protection against type1cross-site scripting attacks. Although it offers no protection against (less common) type0 and type2 xss-attacks, the mere fact that IE8 does offer out of the box XSS-protection is a big thing. Except … except apperantly there’s a serious bug in IE8’s XSS-filter, that can be abused to do cross-site scripting. Microsoft has not yet confirmed or fixed the bug, leading some sites (e.g. Google) to disable the XSS-filter by adding “X-XSS-Protection: 0” to the http response header. Now isn’t that ironic?
Clickjacking defense
Microsoft also included clickjackingdefense in IE8, by letting website owners define whether or not their pages are allowed to be included in (i)frames. This can be done by simply adding “x-frame-options” to the http response header with values “deny” to deny a page from being shown in any frame and “sameorigin” to limit framing to pages from the same domain. x-frame-options however does not protect against clickjacking with flash or other embeds.
But where’s the competition?
So what’s available in Firefox, Chrome and Safari apart from the Google Safe Browsing implementation? Nothing much up until now, I’m afraid …
At Mozilla smart guys are working on “Content security policy“. CSP is a declarative server-driven anti-XSS framework, with policies being pushed through HTTP headers. Although the policy may require non-trivial website changes because inline scripts will be disallowed by default, it certainly has potential (to the extend Microsoft is said to be interested). But CSP is not there yet, now is it?
Over at Google, engineers are including (type1)XSS-protectionand support for theStrict Transport Security spec (forcing a browser to load a site only over HTTPS by issuing an http response header)in the dev-channel builds of Chrome 4. As some may have noticed while looking for Google Talk’s chatback badge last week, x-frame-options (as anti-clickjacking measure) has already been implemented in Safari4 and Chrome3 as well. So especially Google is trying to make some serious progress, but Chrome 4 can hardly be considered granny-ready, can it?
That leaves us Firefox with the NoScript extension, but I’ll come back to that combination in a minute.
IE8 the safest browser?
OK, this might hurt, but let’s give credit where credit is due; IE8 indeed seems to offer the best out of the box protection against malicious websites. It is the only browser to come with good phishing- and malware-blocking (Smartscreen) combined with (limited and currently broken) protection against some types of XSS and clickjacking-attacks. So thank you Redmond for setting the example!
The only alternative: Firefox + NoScript
Firefox does not offer the out of the box protection IE8 does, but when combined with the NoScript extension, it really is the only readily available alternative (Lynx not withstanding). NoScript offers superior protection against XSS, clickjacking and a host of other threats.
Even if you’re only vaguely security-conscious, installing Firefox and NoScript should really be your first choice. Depending on the level of protection you want, you can use the default but disruptive whitelist configuration (which blocks all javascript and flash) or switch to the less secure “Allow scripts globally” mode. But whatever configuration you choose, anti-XSS and clickjacking protection are always enabled.
It really is beyond me why NoScript’s Clearclick and anti-xss aren’t in Firefox by default, especially since they seem complementary to CSP, as they’re barely disruptive for a novice user and (last but not least) as Mozilla could easily one-up Microsoft this way? Anyone?
