Sad but true, I remember dial-up. In those days people were annoyed if a page took more than a minute to download and pop-pups where one of the most oft complained about ‘features’ of web design.
You know, while pop up were annoying and did consume bandwidth there are two current popular design trends I just don’t get; both, quite often, rely on ajax.
One is the ‘lightbox’ pop-up. Why is it any better to have an add display DIRECTLY on to of the content you want to see? Hunting for the “close” button… is no fun either… BAD. It makes wish for the old pop up days. at least they were clearly marked and easy to close. Also, because many of hese are dynamically generated via AJAX, they cause page delays for even well coded pages.
Speaking of which…
It’s general knowledge that one tries to serve only the data the user is requesting in order to conserve bandwidth. Thus, We have techniques like ‘thumb-nailing’ ( am including text blurbs /intros in this as well) When you think about it may seem counter intuitive at first… serve a BUNCH of scaled down content so that the user can select the one he/she actually wants to load. I am probably doing a horrible job of describing this, but hopefully you have the image ( pun) of what I am trying to convey.
Another big thing was to reduce clicks and scrolls.
Now put this all together… and here is the new trend I was trying to mention: using AJAX to load ‘everything’.
That thumbnail gallery… is now based on a script, so are all the “article previews” and when you scroll down … another script loads more of the content.
If you go by what clients are requesting these days… this is the way web ought to be? I really dislike this.Navigating through a site that functions this way seems slower to me ( this may be an illusion… but ‘feeling’ is part of the UX). It also seems risky (in the case of ads for example) to depend on another external server before the actually user content is displayed.
And finally, there is the fact it it makes the page JS dependent… I thought we were trying to avoid that in the first place. But I have stumbled onto a few sites that are "essentially’ blank DIVs and a script. I dunno, but I like being able to ‘view source’… and find the same content there as what is displayed.
So I was wondering what are the forum expert’s take on these trends? Do you favour or advice AJAX for loading content ( as opposed to a ‘next page’ link) or avoid it like the plague?
Heh heh, who’s “we”? That’s the theory, but the majority of web designers don’t seem to give a rat’s tail about this. I’m amazed at how many sites are unnecessarily JS dependent. I generally find them to be slow and clunky, so I don’t see what the attraction is.
Most of the time I surf without JS enabled so that in itself tells you something and I agree most Lightboxes are just as bad a popups. Yes a lot JS kills slow connections too. A simple page should never be JS dependant regarding core functionality such as navigation that is should be a ‘no brainer’.
Ajax is the new Flash – great potential in a very small number of applications, but misused to a vastly greater extent on websites where it has no place or purpose whatsoever.
Sometimes lightboxes are very useful, where they perform the function of a modal dialog box, but all too often they are completely unnecessary. Lightbox photo galleries annoy the hell out of me, and I’m really glad that Opera gives me the option to (a) turn off Javascript for sites that I visit regularly that do that, and (b) open the full photo in the current tab as and when I want to. Sites like Facebook and Twitter that only load partial content and then load more as you scroll down are a pain in the wossnames, and make it really difficult to find particularly content when you look for it.[/FONT]
I am split on the lightbox gallery issue. What I really hate is the lightbox pop-pup. Going back to the gallery dilemma, aesthetically, light boxes are a nice UI/UX… IF the list is small and you have preloaded some , if not all of the content. But really that’s what I meant in my OP. It seems that in an attempt increase ease of use, reduce clicks and reduce bandwidth usage… a trend has com about that does just the opposite, to the point in which we are ajaxing thumbnails one at a time… and you cant scroll down to 80% f a page without setting off a “load content” script ( that in which keeps you from reading the content you actually scrolled down to see). The thing is , because site like FB, Twitter, etc are implementing these techniques ( and that is still bad UX even for them) clients are asking for the same in their “6-page” sites.
I guess this is where education comes in. I’ve been watching Boag’s videos of late, where he says—don’t tell the client “No”, but rather ask questions, point out the cons, present them with the full disaster, and let them decide that it’s the wrong thing to do.
With something like search results or tweets, it can make a lot of sense to not load all 52,000 things on first page load. If the user scrolls down further, they want more. Ideally this should simply be Hijax-ing a “pager”(a page of x-number items with a button/link to the next “page” of x-number items). A well-done forever-scroll does this.
My problem with forever-scrolls is I can’t CTRL-F. Often when looking for a tweet over an article I read, I have to first scroll a lot to about where I think I may have already passed the keyword, then CTRL-F my keyword. If I do it too early, I seem to lose forever-scroll ability. To restart it, I have to refresh the page… which brings me back to the top. Sigh.
Ajax should make the page faster, simply because you’re not needing to download the entire page or submit an entire form, you send a small amount of data and get a small amount of data back, that’s the idea.
There are cases where things initialize onload and then request more data, like backbone. This obviously has a slower initialisation time but makes subsequent state changes on the client faster and more responsive.
The industry seems to have moved passed the days of making js just icing on the cake, today it’s as essential to most applications being built as HTML and CSS are. It took me a while to come around, but I too don’t bother making things work without js anymore. If something works perfectly fine without js I won’t reach for it, I do add javascript last but if I know the page is going to make heavy use of ajax / drag and drop / interactive graphics I won’t bother making a version that will allow the same data transformations without js.
Web apps don’t just change the state of data, they provide an experience. The experience for the majority of the users is where I want to focus my time and effort.
Mark brown: I generally agree with your post, though here:
So far the sites I’ve built weren’t there to entertain, but to get stuff done, so “providing an experience” was after #1 (works for everyone). I don’t consider websites like Twitter to be there to get things done though, but to provide an experience, so there’s an example of why ajax-only.
However because this experience provider has become so ubiquitous in the lives of certain segments of society, when the disabled using weird AT and others wanted to join, someone had to make plugins and APIs to make Twitter “work” for them (EasyChirp for example, or the mobile version). I think this is always going to make me sad on some level. If it was something I built, and someone had to (and did) come in and fix it to make it work for more people, I would feel shame.
Yeah, if it’s used this way then the 200ms handshake stuff should not matter to the perceived speed to the user. It’s that people aren’t careful like that on a lot of sites: they don’t start with a page and ajax-in bits of stuff: they start with nothing at all and call everything in bit by bit. Now you have a gazillion HTTP requests and your network speed, rather than your browser’s JIT JS compiler speed or CSS rendering speed, is the issue.
I think if you’re able to call something “too much” then it’s very likely to easily be “worst-practice” anyway, rather than a tool or a piece of software itself being bad.
The issue here with AJAX seems to be, developers should use it appropriately, period. Same as with anything else out there.
Yeah… was typing on my tablet and half asleep, am bad enough with a real keyboard ( am also ashamed about the typo)
What I was think that AJAX is a wonderful thing; in moderation a best practice for increased functionality, browser compatibility, and enhancing UX. But I think now there is too much of it. That what i meant by (am paraphrasing clients) ‘We don’t need the site to have any pages content can load as you scroll …like FB’" ( This is wrong is so many levels… and maybe they were also angling to say… but ‘you only really designed TWO pages’, but that’s another issue all together ). There is the well meaning key logger script/live preview fr comment in some blocs and contact forms… I mean,really? The fact that people think that “popups” are extinct, because the new incarnation do not “pop up” but are infac’t constantly loading advertising or other content via… you guessed it AJAX.
I was serious, i have viewed some pages whose code WAS an AJAX loader ( basically document.write )… I really pondered if there was a backup mech in case someone wanted to view a pain text page w/o js on?
I think AJAX was wonderful when it as limited to and onload, onchange, onclick type events. You could say now that the trend is going to wards infinite loading time since AJAX triggering events are continuous.
The issue here with AJAX seems to be, developers should use it appropriately, period. Same as with anything else out there.
O wise kitty… a very good statement, but again I wonder if this is just developers having to succumb to client requests that are essentially aggregation of bad practices from other sites.
The commercial web author is employed (hopefully because they know more about good ‘web design’ than the client) it rests upon their [web master’s] shoulders ultimately to educate and use best practice though some obviously take short-cuts and cut corners.
Properly scaled AJAX should not be very slow and cause any harm, but I agree that it is on developers shoulders. In many cases, there is just not enough time or budget to make everything perfect. Like everywhere corners are cut.
Right there you hit on a LOT of the problem right now – because people talk about dialup like it’s past tense; when massive swaths of the US still only HAVE dialup – nothern New Hampshire, Western Maine, The Dakotas, Utah… You get more than 20 miles from a “city” and if you are LUCKY you might be able to get 768kbps DSL. While I can get 22mpbs here in west donkey-plow New Hampshire, I travel 40 to 50 miles north a 33.6kbps dialup is a good day!
… and that’s before we talk people on metered connections like our friends in Canada, usage throttled connections like our friends down in the Land of Oz, people tethering to phones in areas where that’s the only connection they can get… or just people like me who don’t have a 22mbps connection to have websites behave slower than they did 15 years ago. That’s 392 times faster a connection, why am I still seeing >30 second page loads on websites?!?
It sure as high explosive double hockey sticks got nothing to do with improved functionality.
Welcome to my world.
The standard lightbox implementation is one of my biggest pet peeves. Honestly, it pisses me off and ALL it’s managed to do is train me to always middle click on images to open them in a new tab. With galleries the middle click to open in new tab in the background is actually one of the best bits of functionality you can get. Just open all the thumbs you want to look at in one fell swoop, then tab through them. Admittedly in Opera I have added functionality for that since I turn off the ‘close button’ on each tab, and have added ‘close and go to previous’ and ‘close and go to next’ custom buttons.
Of course, crappy ligthbox-style implementations that break middle clicking and don’t even work with scripting off – those just grind my gears.
But most of my problem with lightbox isn’t so much the effect itself as the other things it tends to break/make painful… like actually viewing the image at actual size, like zooming and panning; though again, as a Opera user I’m used to an in-built image viewer that’s far, far superior to most of what’s implemented in other browsers in terms of pan and zoom.
You’re right about the hunting for the close – a lot of times I can’t find it because they constantly move it.
… and that’s before we talk animation effects that on anything less than a core2 is cpu chewing at best, painfully slow at worst,
I started working on my own lightbox implementation back in november to try and address the problems I had with it. You can see it in action on my programming page: http://www.deathshadow.com/
Click on the screenshot thumb for paku paku to see it working. I tried to ‘fix’ a lot of the problems and implement what I consider ‘missing’ functionality from most… like zooming, click and drag panning, etc. If you click outside the image’s view area it closes, in addition to the prominent close and help buttons. The zooming has buttons, and is aware of the mouse wheel.
Even so, I’m not wild about it; I’d probably not use it on a real website, if for no other reason than it breaks forward/back.
(It’s a bit slow right now because I’m trying out CSS3 effects – killing all the box-shadows makes it behave quite nicely… even with the CSS3 it’s perfect in IE… Everywhere else, not so much)
About… five years ago Dan Schulz called AJAX “The new framesets” – and that was NOT intended as a compliment. While it is very nice for certain things like say… inline editing of posts on a forums, using to to replicate framesets, using it to load content into tabs, and every other ‘gee ain’t it neat’ idiotic overuse of it are flat out accessibility train wrecks; you lose the ability to hotlink to the content being loaded via AJAX (which means it’s MORE broken than frames!), there is no content scripting off, and for all the talk of ‘saving bandwidth’ in most cases it takes as much or more once you figure in the size of the scripting.
A perfect example of this is the train wreck of useless garbage Microsoft has turned hotmail into. Megabyte plus of scripting, breaks forward, back, middle click, is constantly having to be patched over and over every time a new flavor of the month browser comes along… webmail on the whole is having all of it’s usefulness and functionality trashed by the scripttards who seem to want to throw it at everything.
To the point I’ve gone back to using mail clients; a technology I had abandoned for being useless compared to webmail some decade ago. Now it’s flipped back the other way.
Though admittedly being a Opera user, I have a really good mail client built into the browser.
… and that’s the ideal, and in some cases; forum quick reply and inline edits for example, it works like a charm and isn’t obtrusive.
But far, far too often people seem to dive for it before even THINKING if they actually need it or not, or could better benefit from optimizations elsewhere (like say, practicing separation of presentation from content, semantic markup and in general not writing half-assed markup!). In a lot of ways the way many people are using AJAX is akin to white-space stripping – they’re using it as a duct-tape and bailing wire fix at best, sweeping problems under the rug at worst.
The same people with code to content ratios in excess of 20:1 and then dive for white-space compression to hide their ineptitude are the exact same type of developers loading pages down with AJAX and other scripting. The net result is making it consume more bandwidth and destroying a good user experience, while they were sold on said technologies having the exact opposite effect.
As others have already said, the problem isn’t with the technology, it’s people diving for it before even thinking about if they need it. Javascript as a whole seems to have a massive bullseye painted on it for that. For every site where it makes sense and is really cool like Google Maps, there are dozens of sites that aren’t fit to wipe with.
NOT to use start turning this into my poster child for everything wrong with people diving for AJAX or even javascript in general:
Just the main page, markup: 1.29 megabytes (was 3.2 megs just a couple days ago, so I guess they’re trying… and still failing) for a page that’s 8k of plaintext… Over a megabyte of that is javascript INLINED IN THE MARKUP! This is the scale of ineptitude I’m talking about when it comes to diving for the javascript for NOTHING.
… and that’s BEFORE we talk about the 300k of scripting in 7 separate files external to the document, and 12 images on a page that only appears to use one… or the TEN SEPARATE STYLESHEETS.
Laundry list of how NOT to use javascript on a website; though that seems to be what that entire ‘language’ is built around as it’s core ideal.
Again, it’s like whitespace compression; where someone who has 50k of HTML and 60k of CSS for 5k of plaintext typically just strips the whitespace from their rubbish code instead of just fixing the blasted thing; it’s covering up ineptitude and will never deliver what taking the time to write HTML with a bit of common sense would. These same people will take that fat bloated rubbish HTML, toss a bit of AJAX on to load it, and placebo effect themselves into thinking it made the slightest bit of difference when really, it’s still a slow fat bloated pig, it’s just now a fat bloated slow pig with Javascript.
But again, the problem isn’t the technology, it’s how you use it.
I have another search complaint. This time it was LinkedIn.
I was scrolling down looking to see if someone had mentioned audio manipulation in Python. I had to click a “see more” button several times… this loaded more posts via JS rather than a page refresh (this being good since I am not brought back up to the top of the page).
I was opening promising links in a new tab, but one of them I accidentally hit it and it opened in the current window. This was not my intent, and I hit the back button.
LINKEDIN Y U NO KEEP MY OPEN CONTENT??? This only seems to happen on web pages where, instead of relying on my browser’s built-in cache of the page, forces a total and unnecessary reload of the whole page. To get back to where I was (which the Back button should take me to, always), I again had to re-click the “see more” button several times. This is wrong. Ajaxy developers, beware: don’t mess with my back button. Make it work. I don’t care how. M0AR WHINE AND CHEESE!!!
The commercial web author is employed (hopefully because they know more about good ‘web design’ than the client) it rests upon their [web master’s] shoulders ultimately to educate and use best practice though some obviously take short-cuts and cut corners.
Sadly, clients will say to this that they hire you to make happen what they want, how they want it, and at the price done, not ‘to go to school’. While you may have a point , the clients who are willing to do a reasonable, if not dreamy amount of PROPER listening are about 1-3%. While this behaviour is actually present in ALL fields ( I had a client in my print days who commented to my boss I was childish, arrogant, and hard to work with because I tried to gently explain that ‘the human eye needed contrast to see’[no GD jargon] when she INSISTED I make a 1 color sign for her that would be readable at 20 yards, and have the lettering/images be blue with the background the same shade and color ( since it was a one color job) blue]
By contrast, I had a killer ad design, that because of the idea being conveyed used 15 typefaces as a graphic. The client nixed it because he had read online that “using more than two fonts was bad graphic design.”
A client will Google the phrase " whats possible with CSS" , not “browser support” or " CSS best practice" There in client -developer-selection criteria begins to conflict with good design.
I really wish that when someone posted a demo about what new thing can be done… they would ALWAYS INCLUDE and BEGIN WITH an explanation of when it can’t and shouldn’t be used and followed with when it can be used, before they explain what it does and how its done. Yeah it’s irksome since as developers we should already know this stuff, but as developers we we will also read and understand the whole article while the myriad of project managers are just looking to find a “looky what that does”.
I have been a room where a client as for a FULL FLASH iPhone site. When the developer pointed out that iPhones did not support Flash (in a progression of client requested explanations that went from simple to technical but left the client more stupefied with each answer and at some point dealt with the inner electronics an power consumption requirement s of an iDevice) I simply asked where he had gotten or seen ( since I seldom come a cross with an original client request) … and he essentially pointer our browser to a ironic web cartoon which was a developer trying to explain that there was no support for flash on the iPhone. Moral of the story? Clients read ‘tutorial’ pages too… well at least the first 3 sentences.
But I digress. ==:)
LINKEDIN Y U NO KEEP MY OPEN CONTENT???
That or the page jump thing are my two biggest peeves ( followed by the loader image miming up any time I scroll, it’s not bad on my private cable connection… but again I figure woe be to those that are on a busy network, use DSL or dial up)
Again, it’s like whitespace compression; where someone who has 50k of HTML and 60k of CSS for 5k of plaintext
Exactly my point, but about the use of AJAX… All this done to avoid having the user CLICK/REFRESH? Let me clarify it’s not like I can’t see when saving a click or refresh ( outside of a form) would enhance the UX, but that these situations are a 1/20 deal… not the use for everything.
I predict the next travesty: js based auto refresh blogs…
“Hey I was reading that!!!”
" But we saved you from having to click ‘refresh’ like a dork to get to our LATEST post"
blah
I truly believe above demo is an awesome solution.
Also, I’ll use AJAX if it saves few clicks and makes the UI more intuitive. One thing I try to avoid is AJAX refresh mechanism… one or two widget is ok…but I don’t want 20 ajax refresh going on for every second! (example: AJAX chat).
I’m sure, you guys would disagree but I love the special effect like drag-n-drop. It makes the UI more intuitive. For example, if I can use touch screen then I want to drag an item and put it into the cart. To make this happen, you need DHTML. My gut tells me that in HTML 10.0 (if I ever live that long) will be very AJAX like.
Methinks we have different definitions of the word “awesome”. That fat bloated slow inaccessible train wreck is another poster child for “how not to use web technologies”.
was typing on my tablet and half asleep, am bad enough with a real keyboard ( am also ashamed about the typo)