20 Things I Learned About Browsers and the Web
November 18, 2010 10:44 AM   Subscribe

20 Things I Learned About Browsers and the Web (SLH5P) Warning: A modern browser is required.

SLH5P - Single Link HTML5 Post
posted by purephase (78 comments total) 11 users marked this as a favorite
 
Thing number 1: "People would find this interface annoying in flash, but do it in JavaScript and call it HTML5 and they give it a free pass!"
posted by Artw at 10:47 AM on November 18, 2010 [34 favorites]


This website (20thingsilearned.com) is asking to store data on your computer for offline use.

I'm old, but running FF 3.6.12 with NoScript. Is this what HTML5 looks like?
posted by Gator at 10:48 AM on November 18, 2010 [2 favorites]


#2: Websites are not books, are not like books, and shouldn't be formatted as if they were books.
posted by MrMoonPie at 10:48 AM on November 18, 2010 [38 favorites]


Flash is hideous as far as accessibility goes, HTML5 is a lot better there.
posted by bjrn at 10:50 AM on November 18, 2010


It doesn't recognize FF 3.6.12. Too modern?
posted by DU at 10:50 AM on November 18, 2010


I tried reading this on my Android phone but no dice. They apparently assume that you're using a non-modern device.
posted by Sir Cholmondeley at 10:54 AM on November 18, 2010 [2 favorites]


but but .. It's HTML5. The browser now contains a mini database instead of using flat files! All that stuff we used to have to use a plugin to do? Its all in the browser now, programmable by javacript!
posted by Ad hominem at 10:54 AM on November 18, 2010


I didn't like that this website tried to store data on my PC for offline use... Actually, what the hell is that? :) Never seen this before
posted by ellipticals at 10:56 AM on November 18, 2010


HTML5 Local database, most likely. It makes cookies look pretty lightweight.
posted by Artw at 10:58 AM on November 18, 2010


Oh, when you say browser you mean the internet?
Yes, mother.
posted by Elmore at 11:00 AM on November 18, 2010 [2 favorites]


Oh wait, I get it now. No, I wouldn't let the site "store" anything for offline use, so I clicked "not now" on that, but I peeked at the source code. It's some sort of fancypants ad for Chrome, isn't it?
posted by Gator at 11:00 AM on November 18, 2010 [3 favorites]


3.8MB
Thats a fair amount of data to store without asking thanks.
This site makes me feel filmy and dirty, like marketing is happening.
posted by Don't_deceive_with_belief at 11:01 AM on November 18, 2010 [6 favorites]


Flash is hideous as far as accessibility goes, HTML5 is a lot better there.

Anything that throws up a "your browser does not have all the fancypants modern features i require! I will now shit the bed, roll over and die!" message, when what it's try to do is show you some formated text is somewhat questionable in terms of accesibility.
posted by Artw at 11:03 AM on November 18, 2010 [18 favorites]


Well at least one can navigate using the browser's forward and back buttons, and bookmark the page. So in that regards, it beats Flash hands-down. But putting what would have otherwise been a single page, or two, as a flippy-book? I thought we have moved away from the paradigm of forcing new information into old contextualizations.
posted by Old'n'Busted at 11:05 AM on November 18, 2010 [2 favorites]


The site is hilariously bad and pretty much unnavigable in Lynx, so I wouldn't be so quick to assume it's accessible at all.

(I know Lynx is probably not the state of the art in terms of accessibility for visually impaired users, but I assume Lynx + screen reader is still pretty popular.)

Whatever happened to graceful degradation?
posted by kmz at 11:07 AM on November 18, 2010 [5 favorites]


It feels like a bad powerpoint.
posted by domnit at 11:09 AM on November 18, 2010 [1 favorite]


Whatever happened to graceful degradation

You need to drink whisky with me.
posted by everichon at 11:09 AM on November 18, 2010 [14 favorites]


Boy, my Firefox and NoScript didn't like that site. Yes, I chose not to allow this site to store data on my machine. I am looking at a blank screen, titled " 20 Things About Browsers and the Web"...with the status bar at the bottom quietly indicating "Scripts Currently Forbidden | SCRIPT:4 | OBJECT:1"

Seems I have learned more about browsers and the web than this guy has.
posted by Xoebe at 11:09 AM on November 18, 2010 [8 favorites]


You guys Just Dont Get It. Appl/Goog has made the OS obsolete with HTML5. You will do everything in the cloud, the local filesystem is dead. Computers are now an instant on ChromeOs/iOS device. Microsoft will have to abandon silverlight and re-write office to use HTML5 and ruby on rails in order to compete with google docs.
posted by Ad hominem at 11:10 AM on November 18, 2010 [3 favorites]


Metafilter: [number] link [thing] post
posted by Antidisestablishmentarianist at 11:10 AM on November 18, 2010


Artw you are both a hater and correct.
posted by GuyZero at 11:10 AM on November 18, 2010


Whatever happened to graceful degradation?

It doesn't let you be snotty about IE.
posted by Artw at 11:11 AM on November 18, 2010


In case anyone missed it: Published by the Google Chrome Team. ©2010 Google Inc. All Rights Reserved.
posted by domnit at 11:12 AM on November 18, 2010 [2 favorites]


Was this thing created by Adobe to make HTML5 look bad?
posted by DU at 11:13 AM on November 18, 2010 [3 favorites]


Artw you are both a hater and correct.

I'm am probably being unnecessarily a bit of an ass about this, but I have kneejerk GRAR when it comes to fashionable nonsense in web coding. I meam, as a demo piece it's quite nice and they probably learned a bunch doing it, but as a way of conveying information it's not that good, and on general principle I'm against using a complicated method of doing something that can be done better using a simple method, especially f you need to start excluding browsers as a result of it.
posted by Artw at 11:16 AM on November 18, 2010 [2 favorites]


Interesting that this site uses pretty much every Flash UI technique that is decried by designers but beloved by clients ("Ooooh! Make the page curl when it turns!").

From the content, it's obviously not targeted to designers or programmers. It's trying to suck in photographers, artists, restaurant owners, and everyone else who cries MAKE ME A BYZANTINE FLASH SITE FOR MY UNIQUE COLLECTION OF IMAGES. After viewing this they are sure to say I WANT A CONFUSING MESS DONE IN HTML5.
posted by benzenedream at 11:18 AM on November 18, 2010 [16 favorites]


<------------------Please open your browser window this wide ------------------------>
posted by monospace at 11:19 AM on November 18, 2010 [12 favorites]


Yeah I got the warning about local data. Why the hell do they need a database on my machine for me to read a book? I was able to flip the pages just fine without agreeing, though.
posted by delmoi at 11:19 AM on November 18, 2010 [1 favorite]


#2: Websites are not books, are not like books, and shouldn't be formatted as if they were books.

Usually I would agree with you, but this website does the book-like interface probably as well as it could possibly be done. It's easy to navigate, bookmarking and keyboard shortcuts work logically, the text and headers are fully selectable and searchable. The illustrations are put to good use, and the animated page turning is minimally intrusive (and slick - try turning multiple pages quickly and the animation follows along flawlessly).

The website is clearly designed to engage an audience that is not necessarily tech-savvy, and using a metaphor which makes the interface more familiar and intuitive for those users seems to be an understandable design decision in this case.

Certainly most websites should not look like books, but I think this website is an acceptable exception.
posted by oulipian at 11:20 AM on November 18, 2010 [3 favorites]


We ended up with all this junk in the browser instead of a plugin I can choose not to install because of Standards!!

Canvas is the new flash

Oh yeah, accessibility will shoot through the roof when "web apps" are a javascript widget set that just draws everything to the canvas instead of just using html
posted by Ad hominem at 11:23 AM on November 18, 2010 [1 favorite]


I was hoping we could have the Flash vs. HTML5 talk again.

meanwhile

#10 Many of today’s browsers, such as Firefox and Chrome, have begun building in a feature known as synchronization (“sync” for short).

um, last time I checked (a few months ago) Chrome's idea of sync'ing my bookmarks was to stuff files into a Google Docs folder - yes, it's as ugly an amateur hack as it sounds and yes, horseshit.
posted by victors at 11:26 AM on November 18, 2010 [1 favorite]




It doesn't recognize FF 3.6.12. Too modern?

Yep, same here.
Could anyone actually open this new paragon of the accessible web?
posted by Stagger Lee at 11:28 AM on November 18, 2010


Interesting how badly the "can this site store data?" prompt fails. It's really a security question, like "do you trust this site to store data? But because of how it's worded, it feels like a question you can't answer since you don't know why the site is storing data, or how much.
posted by smackfu at 11:36 AM on November 18, 2010 [1 favorite]


It's appropriate that the author's message should be framed in the format of a children's book as, much like a children's book, it glosses over a lot of very real and important things, hides all the dirty details, and leaves readers a bit more informed, but lacking important details.

The first that that should be readily apparent is that producing digital 2D representations that try to mimic real-world 3D objects doesn't work so well. And that's quite a big problem with the web.

Another thing noscript users will be immediately aware of is that this particular representation of what HTML5 can do also shows a fundamental web development flaw which is assuming your user base can support your single method of presentation. However many designers focus on presentation over content and leave a significant portion of the internet userbase unable to access the content.

I do like that the origins of the web as well as DNS and how it works are covered. I think anyone who access the internet should have a grasp of the fundamentals; an Internet 101 for the masses.

I like the attempt at training readers to parse the URL displayed in the address bar to spot obvious fake web sites. Information on how to handle and combat basic social engineering attacks like that would be my Internet 102 course.

Touting HTML5, however, is the wrong thing to do. HTML5 isn't official yet (and won't be for a few more years) and the spec may change. Promoting it now is inappropriate. Especially with all the issues over the VIDEO object and what formats will or will not be supported by a given browser.

Promoting "the cloud" is another problem I have with this. Yes, if your computer is broken or stolen your data is at least stored somewhere else. However the problem is your data is stored somewhere else. Who owns it? Who manages it? What happens if that company goes out of business? Is anyone data-mining your information? Can someone else gain access to your information? Given the Internet is global there's a good chance at least some of your data will wind up being stored in a country other than the one you live in. Laws in that country may allow for use of your private information in ways you assumed protected because of the laws in your country. It's a very messy thing that's only going to get worse, especially as China continues to grow in that sector.

I think a separate chapter is needed to specifically touch on the concept of trust. That, by default, everything on or coming from the internet should not be trusted. That you need to evaluate every situation where the internet is involved and understand whether or not you trust a given situation.

For example do you trust Google to store your documents? Perhaps simple documents with no sensitive information. But would you put your medical records on Google Docs (the "cloud" as it were)? Absolutely not!

Teaching that kind of trust based on a given situation is probably the single most important lesson not taught in any course, class, or gaudy HTML5'd online book.
posted by ruthsarian at 11:40 AM on November 18, 2010 [6 favorites]


This site is like a greatest hits list of things not to do with your website. Try to store unnecessary data, go wonky without javascript, give a snarky "use a better browser n00b" message, format a list in possibly the worst metaphor (book? Seriously? My *kindle* barely does that), use a two-column vertical format like a newspaper, use drop caps, go all horizontal scroll-bar-y on low resolutions, the list goes on. It's actually easier to use with the css turned off.

Oh, and each item is on a new page, one of the scummier things people invented to try maximizing ad revenue.

It makes me afraid to let it run scripts lest it spring some new hideousness on me. If this is an ad for Chrome, it's doing the opposite of what they want. Don't get me wrong, I'm perfectly happy to let a site do all sorts of scripted cookie-happy local-database-happy css3 canvas-laden funkery, it just has to let me know up front why I should let it. And yes, I'm using an up-to-date-version of Firefox.
posted by mrgoat at 11:42 AM on November 18, 2010 [1 favorite]


20 Things I Learned About Browsers And The Web, Or, Please Stop Using Internet Explorer Six You Dinosaurs, Or, How To Create Browsers And Influence People, Or, I Have No JavaScript And I Must Scream.
posted by The Lurkers Support Me in Email at 11:46 AM on November 18, 2010 [1 favorite]


20 Things Which Are Loosely Related to the Web at Large, Most of Which are Services and Things that Google Just Happen to Offer.
posted by metaxa at 11:53 AM on November 18, 2010


I forgot who said it, but someone very clever pointed out that a few years ago Google used to be company who's products focused almost entirely on the user experience wrt solving user problems but has since hit some kind of turning point and is now a company that emphasizes features and products that support their own corporate strategy.

If you were trying to make this case today you could very well point to this fluffery as the PR for that way of thinking.
posted by victors at 11:56 AM on November 18, 2010 [1 favorite]


Hmmmm... Google wants to store data on my computer.

Remembers GoogleToolbar.

Fuck no.
posted by Splunge at 11:58 AM on November 18, 2010 [3 favorites]


> Anything that throws up a "your browser does not have all the fancypants modern features i require! I will now shit the bed, roll over and die!" message, when what it's try to do is show you some formated text is somewhat questionable in terms of accesibility.

That's not due to HTML5 though, that's due to the unwillingness of the developer to make the site accessible.
posted by bjrn at 11:59 AM on November 18, 2010 [1 favorite]


Whatever happened to graceful degradation?

Didn't it get eaten conceptually by progressive enhancement a couple of years back?

Not that this site seems to care about either.
posted by Sparx at 12:02 PM on November 18, 2010 [1 favorite]


The key issue in web accessibility: if something is accessible by default, it will be accessible. If it can is not accessible by default, even if it can be made accessible, it will not be accessible. So "HTML5", since "HTML5" means "HTML5+CSS3+Loads of JavaScript" is bad. Sure, there are lots of new funky ways you can make HTML5 more accessible than HTML4, but no-one will use them properly and they will never be used consistently. Exactly like Flash, in fact.

Put it another way: it's kind of hard to make a website that's inaccessible* in HTML2 unless you use lots of IMG elements without alt attributes. It's really easy in HTML5 with JavaScript and CSS and it's going to get easier and easier from your keen developers and website creation IDEs and WordPress-style content creators. Sure, four websites will use all the funky features in HTML5, but that's not going to help most screenreader users stuck with all these interactive confusing CANVAS-using sites.

Ah well. The world moves on, and assistive technology vendors will catch up as best we can. On the plus side, maybe if every application goes into the cloud, and is rendered by a browser that in turn complies with your system's accessibility standards (e.g. UI Automation on Windows) then maybe every application will suddenly become accessible? And the increased use of things like WordPress means there's a single point of lobbying to improve accessibility. So that's good.

* I'm doing the classic and wrong "accessibility = screenreader users" thing here, by the way. Video is way more accessible for sign-language users and people who can't read, for example, so Flash is great for them. But that's another discussion.
posted by alasdair at 12:08 PM on November 18, 2010 [1 favorite]


You guys Just Dont Get It. Appl/Goog has made the OS obsolete with HTML5. You will do everything in the cloud, the local filesystem is dead.

I didn't like that this website tried to store data on my PC for offline use...

Heh.

The use of a centuries old metaphor to structure a relatively recent information technology is ironic. I guess the target audience aren't people who use computers much.
posted by ZeusHumms at 12:10 PM on November 18, 2010


I use Chrome, so I didn't have any problems. It loaded quickly. The children's book layout is delightful and fun. It's not useful, of course. But, I still like it a lot. So there's THAT.
posted by hanoixan at 12:13 PM on November 18, 2010


I love how The same set of technologies get rechristened every few years. First it was DHTML, then it was "Ajax" (a part of Web2.0!) and now HTML5.


Speaking of synching bookmarks. Are there any good sync tools that let you synch to your own server?
posted by delmoi at 12:17 PM on November 18, 2010


I should add that this website is pretty accessible for screenreader users, hooray! Though it doesn't zoom well - starts overlapping. My text browser displays a whinge on every page about needing a different browser, which is a pain if you're a screenreader user, but there are headings and the text content renders just fine. I'm not hating on Google in particular. I just see the HTML5 = automatically-better accessibility argument as being wrong-headed.
posted by alasdair at 12:17 PM on November 18, 2010


This is...stupid. Lovely tech demo, but the flipping book interface doesn't fit well on the web and especially for this subject.

I suggest we take off and recode the site from orbit.
posted by nomadicink at 12:18 PM on November 18, 2010 [1 favorite]


I wish Mozilla would start their own search engine. It would be cool to have a search engine run by a non-profit.
posted by delmoi at 12:20 PM on November 18, 2010


Isn't Google paying Mozilla for being the default search pretty much how Mozilla manages to keep itself afloat?
posted by kmz at 12:22 PM on November 18, 2010 [1 favorite]


Page Down doesn't do what it should.
posted by scruss at 12:23 PM on November 18, 2010 [2 favorites]


One thing I learned about browsers and the web... clicking on things on the web can make the browser crash.
posted by mmrtnt at 12:23 PM on November 18, 2010 [2 favorites]


this website does the book-like interface probably as well as it could possibly be done.1
posted by MrMoonPie at 12:31 PM on November 18, 2010


"As you sit hunched over your laptop at home watching a YouTube video or using a search engine, you’re actually plugging into the collective power of thousands of computers that serve all this information to you from far-away rooms distributed around the world. It’s almost like having a massive supercomputer at your beck and call, thanks to the Internet."

No, not really. You have access to a lot of *storage*, but none of the processing power of a supercomputer. Whenever you hear cloud evangelists go off, this is something they ALWAYS seem to gloss over.

Someone should really redo Aristophanes' "Clouds" for the modern era, with MBA-speaking technoevangelists in place of Athenian intellectuals. Because the fart joke is right there in the title, over 2,000 years old.
posted by Eideteker at 12:46 PM on November 18, 2010 [2 favorites]


Running a search query uses a lot of computational power as well as accessing a bunch of storage. Plus there's stuff like App Engine and EC2 so I don't know why you think you're not using CPU cycles in the cloud.
posted by GuyZero at 12:57 PM on November 18, 2010


At least the illustrations were great.
posted by Scoo at 1:21 PM on November 18, 2010


GuyZero, you are, but you're still bottlenecked by your home computer's processing power on many things.
posted by Eideteker at 1:27 PM on November 18, 2010


I find it appropriate that, with Firefox and Noscript, the site shows nothing of substance.
posted by dirigibleman at 1:40 PM on November 18, 2010


What about speed? If traffic on the Internet were akin to a stream of water, the Internet’s bandwidth is equivalent to the amount of water that flows through the stream per second.

Hm, if traffic on the Internet were akin to a stream of water, wouldn't that make bandwidth something like a series of tubes?
posted by outlandishmarxist at 2:11 PM on November 18, 2010


I like the look of the page, but everything else about it is a steaming pile of crap.

I (literally - 10 minutes ago) finished a web site for a client - 20 pages long with over 400 images (he's a photographer) and guess what? It works on any browser you visit with back to IE 6. It works with or without javascript enabled. It passes every accessibility test. The entire site is valid XHTML 1.1 Strict and the Css is all valid. No hacks, no requirements, no gimmicks. No Flash. No Silverlight. But it's still nice to look at, and it presents all the info conveniently and quickly.

It's not the bow, it's the hunter.
posted by Benny Andajetz at 2:42 PM on November 18, 2010 [6 favorites]


I thought we have moved away from the paradigm of forcing new information into old contextualizations.

If by "have moved away from" you mean "have been continuously dealing with for 50,000 years," then yeah.
posted by DLWM at 2:50 PM on November 18, 2010 [1 favorite]


Did you implement a CMS, Benny Andajetz? Or is it just HTML?
posted by sonic meat machine at 2:55 PM on November 18, 2010


Did you implement a CMS, Benny Andajetz? Or is it just HTML?

Just HTML.

I downloaded Drupal a few days ago and plan to play around with it, but I have yet to use a CMS.
posted by Benny Andajetz at 3:16 PM on November 18, 2010


3.8MB
Thats a fair amount of data to store without asking thanks.


Since the majority on this thread seem to be Firefox users: in Chrome there is no prompt for letting particular sites store information, but you can turn the whole feature off.

Why the hell do they need a database on my machine for me to read a book? I was able to flip the pages just fine without agreeing, though.

They don't, but they need to store data on your machine to allow you to read when you've got no network connection, like you can read a book when you have no network connection, or like you could read a book on your iPhone Kindle app without having a network connection. This functionality is all about enabling these use cases in open, standard HTML rather than seeing it necessarily pushed into proprietary apps.

In this case though it's obviously not really necessary, it's just for demonstration.

The site is hilariously bad and pretty much unnavigable in Lynx

It loads OK in elinks, but all the links just reload the page, I assume that's what you're seeing in Lynx? Also in Firefox with View -> Page Style -> No Page Style selected it's pretty bad. They seem to have gone with a bit of a weird URL scheme with fragment identifiers (the bit after #) which include a path fragment. Not sure if this is supposed to be some cunning HTML5 thing, I know there is some stuff in the spec to do with fragment identifiers (window.onhashchange) but I haven't got round to looking at that yet.
posted by robertc at 4:49 PM on November 18, 2010


Justified text on the web is an abomination.
posted by marble at 5:12 PM on November 18, 2010


For example do you trust Google to store your documents? Perhaps simple documents with no sensitive information. But would you put your medical records on Google Docs (the "cloud" as it were)? Absolutely not!

FWIW, digitized medical records are not going to work in Google Docs anyway. It's an entirely different concept. Medical records are stored in databases and formatted by the client software.
posted by krinklyfig at 5:24 PM on November 18, 2010


Today's screenreaders are more advanced than Lynx; they ride on top of modern browsers. Whether it works in Lynx is no longer a valid measure of whether a site is accessible. The presence of JavaScript does not mean that a site is de facto not accessible.
posted by nev at 5:29 PM on November 18, 2010


They seem to have gone with a bit of a weird URL scheme with fragment identifiers (the bit after #) which include a path fragment.

Most Ajax-heavy sites work this way, including Gmail. Installable HTML5 webapps are generally single HTML pages and use fragment identifiers (hashes, in web parlance) to implement navigation.
posted by nev at 5:34 PM on November 18, 2010


Works fine in Opera 10.63. Now, someone tell Google that Opera is modern browser and Gmail should be made to work in it.
posted by bryon at 7:47 PM on November 18, 2010


Most Ajax-heavy sites work this way, including Gmail. Installable HTML5 webapps are generally single HTML pages and use fragment identifiers (hashes, in web parlance) to implement navigation.

Yes, I know, I just hadn't noticed the use of (what I would consider) 'control characters' in the fragments, which implies IDs like this somewhere along the line if it's going to degrade gracefully:

<div id="my/fragment/identifier">

I hadn't even realised that was valid.

For what it's worth, I can't find the fragment identifiers this morning - everything seems to be based on absolute URIs instead, has there been an update?
posted by robertc at 2:21 AM on November 19, 2010


The same set of technologies get rechristened every few years. First it was DHTML, then it was "Ajax" (a part of Web2.0!) and now HTML5.

WTF are you even talking about? I don't get a point or how those things are the same thing. That's like suggesting anything built with hammers and nails are all the same.

The children's book nature of this made it come off as a disturbing marketing piece. "Please sit your children down and walk away while I teach them why we should always trust cloud computing."
posted by yerfatma at 5:56 AM on November 19, 2010


They seem to have gone with a bit of a weird URL scheme with fragment identifiers (the bit after #) which include a path fragment.

Interestingly, if you use Google Chrome to view it, you get nice URLs, like "http://www.20thingsilearned.com/open-source/2". Apparently you can't normally mix a URL change with AJAX, since changing the URL will trigger a full page refresh.
posted by smackfu at 6:41 AM on November 19, 2010


Delmoi - Xmarks allows the option of syncing to your own server.
posted by stratastar at 7:25 AM on November 19, 2010


Also, Firefox 3.X is not "modern", I think you need to be running 4 to get the fancy pants parts.
posted by stratastar at 7:26 AM on November 19, 2010


Of course, 4 is still in beta.
posted by Gator at 7:30 AM on November 19, 2010


Interestingly, if you use Google Chrome to view it, you get nice URLs

Ah, that might be it - yesterday I was looking at it in Firefox and today I was looking at it in Chrome.

I'm fairly sure it's using history.pushState but I haven't managed to unwrap the code to figure out exactly how.

There's a slightly more readable explanation here:
Perhaps the most interesting feature of the new pushState() and replaceState() interfaces is the optional url argument. For the first time, web developers are able to change the effective URL to represent a change in application state without navigating away from a window context. It's very powerful. The location bar, bookmark service, and HTTP-Referer all reflect the new URL.
posted by robertc at 3:47 PM on November 19, 2010


Like the browser db I wonder what the implications of that will ve in the hands of spammers, jerks, blackhat SEOs and advertising consultants.
posted by Artw at 5:54 PM on November 19, 2010 [1 favorite]


With new features come new $pL0itZ. Embrace the future!
posted by ostranenie at 8:43 AM on November 20, 2010




« Older Cam Newton   |   The uneven waters of music rediscovery Newer »


This thread has been archived and is closed to new comments