6 ms·
Non-blocking UI's with interface previews
- adambratt 12y agoI'm actually surprised I haven't seen this done more around the web. It does take more work to actually have to build everything twice (first placeholder, than actual filled content) but just using some CSS classes and any decent framework like Angular would make this pretty easy to do.
- spacecadet 12y agoWhat do you mean? It's everywhere, but like the author said, 'in a perfect world', really, most of the time you don't notice it. 'we' use angular on our project and it does this by 'default'. i.e. the HTML/CSS always loads right away while the dynamic content is loading in the placeholders, which in turn are the elements themselves that will be used. This article seems dated, 2000? I haven't worked on an AJAX app since that time, at least one with pinwheels and white pages...
- dhbanes 12y agoYou haven't worked on an AJAX app since 2000?
- eterm 12y agoI'd take his comment with a pinch of salt, that is years before ajax applications were even mainstream. gmail wasn't even released until 2004, and that was probably the first mass-market application that really unleashed the full power of ajax and made people stand up and notice.
- fryguy 12y agoXMLHttpRequest wasn't around yet, but there were certainly ways of doing AJAXy things before GMail was popular with things like invisible refreshing iframes. I worked on such an app around 2001-2002.
- spacecadet 12y agoWhat's your point with gmail? It wasn't the first AJAX app- Building HTML/PHP websites and using file uploads to a server allowed clients to edits web sites asynchronously. This is clearly before your time.
- spacecadet 12y agoNo I mean the way it was written sounded dated, 2000-ish. If you did a tiny bit of research you'd know. But you'd rather fire off a 1 liner response.
- adambratt 12y agoI meant using the content placeholders like Facebook does.
- pgl 12y agoPersonally I find the Facebook placeholders quite distracting. You still have to wait around for something to load, and scrolling down to see something that has loaded means you just have to remember scroll back up again if you want to see what was going to be there.
- TuringTest 12y agoI prefer that over the alternative, which is to start reading some post and having the rest of the loading content push what I'm reading below the fold.
- beowulfey 12y agoWhat about if instead of pushing the content down, you get pushed down with the content? If I'm remembering right, Twitter does something akin to that (at least on mobile)
- oneeyedpigeon 12y agoI'm beginning to think that this effect is deployed purposefully - witness the ad banner that doesn't display until the split millisecond before you click on the link that it pushes out of the way. Then again [1]. [1] https://en.wikipedia.org/wiki/Hanlon%27s_razor https://en.wikipedia.org/wiki/Hanlon%27s_razor
- delluminatus 12y agoMeteor -- the JS framework -- uses something much like this, which they call "latency compensation". It's a core part of their ideology. Data is prefetched or given default values that give the user at least something to look at until the actual data is fetched with AJAX. Beyond just using spinners, Meteor will populate the fields with client-side cached data that might be a little old, and then when it receives a response from the server it updates the client-side DB with the new data and refreshes the view. If the data hasn't changed at all, the process can be completely transparent -- just an instantaneous UI update. Because the Meteor framework encompasses both the client and server side, this can be "abstracted away" from the app developer. The abstraction isn't perfect of course but it makes it much easier to implement these kinds of ultra-responsive Web UIs.
- svachalek 12y agoI think this is my favorite feature of Meteor (which I've only used so far as playing around a bit). It's on everything, automatically, painlessly.
- philfreo 12y agoPinterest does something really clever related to this - not so much for data placeholder but for images. They have precomputed the dominant color for each image and show that color while the image loads. http://littlebigdetails.com/post/56782380031/pinterest-before-image-is-loaded-the-background http://littlebigdetails.com/post/56782380031/pinterest-befor...
- koyote 12y agoI believe Google images does the same. Not sure who was first though.
- michaelchisari 12y agoI just checked, and it doesn't look like they do.
- ChrisClark 12y agoThey do on the mobile image search at least. Large blocks of the dominant color first, then images load.
- elsurudo 12y agoThat's a really nice detail. I guess it's like the old "progressive" JPEGs from the dialup days, but the lowest level of them (1 pixel).
- archagon 12y agoOooh, that's a nice site. Gotta add it to my daily reading!
- gingerlime 12y agoTrello does the same
- callum_hart 12y agoThats well cool! Never noticed that before
- jonathantm 12y ago> "Front-end Fanatic" With that font? Have you actually tried to read that something with that font? My poor eyes! hashtagSadFace
- windsurfer 12y agoIs something wrong with your system? This is what I see: http://i.imgur.com/9yWsXIx.png http://i.imgur.com/9yWsXIx.png
- joeschmoe 12y agoThe contrast between the font and the background is low for the body text (65% alpha black text on solid white background), which makes it harder to read for people with poor vision.
- wodenokoto 12y agoI am of the opposite conviction of the author. I hate it when content is the last part to be loaded.
- nilliams 12y agoYou'd prefer to see nothing (or nothing but a spinner) until everything is available to be shown?
- JoeAltmaier 12y agoYou can't really win with web apps. A native app that painted either way would be called 'broken' and not pass QA. Yet we swallow things like this without blinking.
- nilliams 12y agoNot totally sure I get you, native apps tend to use a combination of placeholders and spinners too (when loading network content). Are you saying people are harsher in their judgement of web-apps, or more accepting?
- JoeAltmaier 12y agoVastly more accepting of web apps. Web apps stall, spin (or worse yet don't spin yet are unresponsive), paint in embarrassing frames and masks with old content showing through the holes, and on and on. A native app that did that would be criticized roundly; web apps get a pass for some reason.
- deleted 12y ago[deleted]
- solarexplorer 12y agoNot really. See Launch Images in iOS: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html https://developer.apple.com/library/ios/documentation/UserEx...
- elsurudo 12y agoI'm a fan of this approach – another good example (although a bit more subtle that Facebook) is Trello.
- callum_hart 12y agoCool I'll make sure I check out Trello!
- WhitneyLand 12y agoDon't see how this is different from ajax conceptually. It is mentioned that a single page application framework is required. While an SPA framework is preferred, everything seems pretty doable with JQuery, just not as nicely prescribed. The item individualized custom placeholders I haven't seen as a standard pattern, but I'm not sure it's worth the effort.
- leetNightshade 12y agoI'm not sure you understand the point of this post? We're not talking about AJAX or an alternative to it. This has to do with page layout and design in conjunction with delayed asset loading, whether it's slow loading or AJAX. I personally think placeholders/known sizes are a must in web design. It really annoys me when I'm reading something and it gets pushed down due to slow loading images, etc.
- WhitneyLand 12y agoYes, I understand this is a design issue not technical but AJAX is commonly associated with this, maybe I should have been more precise. Still, what is new here that is not found in many mainstream designs for years?
- ceejayoz 12y ago> Don't see how this is different from ajax conceptually. This is essentially a more user-friendly version of the common spinning .gif people use when they're making something load via AJAX.
- zawaideh 12y agoWe do this in Sandglaz. On page load the skeleton of the app is there without content, and once data is ready we render the rest.
- Klasiaster 12y agoyay, css spinners utilizing the full cpu time. anyway: it's worth to mention that specially for developing countries and other areas with bad link, this is an improvement and even construction of a website should acknowledge that things are slower than at your development setup.
- zerovox 12y agoInteresting to contrast this to what OS X(certainly Mavericks, maybe others) does. If you restart and opt to re-open previously open windows, they will open with screenshots of their previous states - only when you click on one will it dim the window and admit to you that it's not loaded yet. Personally, I find this a little irritating, giving the illusion that it's ready when it isn't. I find facebooks approach a little better, it doesn't pretend to be usable, but guides your eyes to the right part of the screen.
- beefsack 12y agoRegarding the apostrophe in the title, you generally don't put apostrophes when pluralising acronyms.
- ashmud 12y agoIt's a valid style. Although, it was already falling out of vogue by the time I was out of primary school. This was also around the time that many were changing over to a single space after periods and colons.
- PaulHoule 12y agoApps like this often look broken when they are loading (you see something like "0 results") and often don't give clear indication that this is normative, so often you don't know if this is yet another FUBAR app or if the server is slow or if you should just leave the US and move to a country which is not so dead-set against investing in broadband.
- rlaanemets 12y agoThis technique goes well with two-way binding libraries (Knockout, Angular etc). You give data fields default values as DOM is constructed and replace them with the real values after the actual data comes in. However, DOM reflow/layouting issues remain if some portions of data are conditionally displayed. Then some elements (placeholders) are hidden/removed after loading the actual data and that still causes the UI to jump around.
- STRML 12y agoYou can get a long way there with a server-rendered app, either via something like airbnb-style Rendr, PhantomJS (which has now hit 2.0), or React. Cache heavily if possible and you can get a really responsive render. It doesn't help of course for infinite scroll-style interactions, but nothing beats preloaded, static HTML! The difference, especially on slow mobile connections, is night and day.