5

I am creating a website where I output 10 posts when user comes to the website and then I fetch +10 more if they click the button to do so.

I output each post in two parts - the main one and the second one. The main one is just a small post (without extra info etc) and the second one is where users can see all the information in full screen. I have used some JavaScript for toggling css when user clicks on the main post.

The thing is, every single post has a second section which is hidden and you can see it only when you press on particular post.

Is it worth making the user wait 1 or 2 seconds up front while the content is downloaded in order to have instant access to it all later, or is it better to make the initial page load as soon as possible and have spinners on every click while requesting more content?

  • 2
    It is user experience question as my question is related about the performance and what user would prefer regarding instant information or a bit of loading pop-up (attached code is just as a refference) – StuckBetweenTrees Jan 26 '15 at 21:50
  • @StuckBetweenTrees So your question is whether a user wants to wait or get instant results. Guess? – Jonathan Jan 26 '15 at 21:52
  • Well I am not sure if its a good user experience using css instead of jquery, don't know which one would take longer to wait..because i believe to create extra class for each post will take longer than single post class.. – StuckBetweenTrees Jan 26 '15 at 21:55
  • 1
    I edited the question to focus on the user experience part of the question... Wait a few seconds up front to have instant feedback later vs. Wait a little bit for every action? – DaveAlger Jan 26 '15 at 22:15
  • Great stuff,DaveAlge. I am not good at pointing out what I actually need to ask, you did a better job than me regarding this question – StuckBetweenTrees Jan 26 '15 at 22:18
4

I'm breaking down the UX part of this into two things:

  • Javascript running in browser
  • speed of CSS vs. speed of jQuery
  • mobile loading

The first one is easy: people don't really disable CSS, but they do disable Javascript, so you're more likely to have a compatible website if you avoid Javascript and use CSS.

However, hardly anyone disables Javascript - the UK government noted that only 1.1% of users don't run Javascript. It's an even smaller amount if you're creating a website for typically web-savy users.

For the second part, Jakob Nielson proved the human response to loading in his load time research. If you're AJAX runs quicker than 1 second, your user should feel fine. Quicker than 0.1 second and they'll feel great (CSS).

Finally, if you're designing for mobile, you'll want as few a loads as possible, due to intermittent internet connections. Again, CSS is already loaded in the page, so it's a benefit.

  • You're welcome! As an aside, you should also take in to account cleanliness of code and ease of management. In my experience, most CSS solutions are actually better, but if you're coding around-the-houses to use CSS instead of Javascript, it may be more trouble than it's worth! – Jacktionman Jan 26 '15 at 22:12
  • Well I am looking at this moment to drop off the jquery toggling function and use pure css to toggle other class like so: codepen.io/surjithctly/pen/pLDwe – StuckBetweenTrees Jan 26 '15 at 22:14
  • @StuckBetweenTrees - Only problem is that you are requiring CSS3 for it to work. IE still has ~56% of the market share. IE9 and below won't run your code. That's 30% right off the bat that won't see your pop ups. – Code Maverick Jan 26 '15 at 22:27
  • @CodeMaverick makes a good point. I had a similar issue with the summary/details tag in HTML5. In the end I added Javascript back in as a backup - then you've covered almost all of your bases. – Jacktionman Jan 26 '15 at 22:32
  • Well thats right, that bloody IE still alive and makes harder life for everyone..But I guess using jquery to toggle css is better than css toggling, as more people are using IE than people who disabled javascripts .. – StuckBetweenTrees Jan 26 '15 at 22:37
2

"It's all about how you load your content and how you fall back gracefully."

Your answer probably lies in both, so first let's talk about:

The HTML5 Shiv


The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.

What do these files do?

html5shiv.js

  • This includes the basic createElement() shiv technique, along with monkeypatches for document.createElement and document.createDocumentFragment for IE6-8. It also applies basic styling for HTML5 elements for IE6-9, Safari 4.x and FF 3.x.

html5shiv-printshiv.js

  • This includes all of the above, as well as a mechanism allowing HTML5 elements to be styled and contain children while being printed in IE 6-8.

Who can I get mad at now?

HTML5 Shiv is maintained by Alexander Farkas, Jonathan Neal and Paul Irish, with many contributions from John-David Dalton. It is also distributed with Modernizr, and the two google code projects, html5shiv and html5shim, maintained by Remy Sharp.

If you have any issues in these implementations, you can report them here! :)

For the full story of HTML5 Shiv and all of the people involved in making it, read: The Story of the HTML5 Shiv.

Later on he goes on to mention ...

Modernizr is developed by the same people as html5shiv and can include the latest version in any custom builds created at modernizr.com.


Now, since Alexander mentioned it, let's talk about:

Modernizr


Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Why use Modernizr?

Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

How it works

Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on. Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources.

Check out the full list of features that Modernizr detects, or learn more about conditional resource loading with Modernizr.


Now, once again, since we are talking about Modernizr and Paul Irish, let's talk about:

HTML5 Boilerplate


HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

This project is the product of many years of iterative development and combined community knowledge. It does not impose a specific development philosophy or framework, so you're free to architect your code in the way that you want.

Features

  • HTML5 ready. Use the new elements with confidence.
  • Cross-browser compatible (Chrome, Firefox, IE8+, Opera, Safari).
  • Designed with progressive enhancement in mind.
  • Includes Normalize.css for CSS normalizations and common bug fixes.
  • The latest jQuery via CDN, with a local fallback.
  • The latest Modernizr build for feature detection.
  • Placeholder CSS Media Queries.
  • Useful CSS helpers.
  • Default print CSS, performance optimized.
  • Protection against any stray console statements causing JavaScript errors in older browsers.
  • An optimized Google Analytics snippet.
  • Apache server caching, compression, and other configuration defaults for Grade-A performance.
  • "Delete-key friendly." Easy to strip out parts you don't need.
  • Extensive inline and accompanying documentation.

HTML5 Boilerplate v4 provides legacy browser support (IE 6+, Firefox 3.6+, Safari 4+), but is no longer actively developed.

Documentation

Take a look at the documentation table of contents. This documentation is bundled with the project, which makes it readily available for offline reading and provides a useful starting point for any documentation you want to write about your project.


And since HTML5 Boilerplate is no longer being actively developed, I just go to:

Initialzr


Initializr is an HTML5 templates generator to help you get getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!

Initialzr Steps


Assuming your are still with me and read all of the above, it's:

Question and Answer Time


Q. What is considered best practice when it comes to where your scripts are placed on your page?

Hover the quote block below to view the answer:

A. At the bottom of your page, right before the closing body tag.


Q. Why you ask?

Hover the quote block below to view the answer:

A. Well, plain and simple, so your users aren't staring at a blank screen while your scripts haven't completed downloading and/or run yet due to one or more of them hanging.

Remember, JavaScript is synchronous.

This allows your user to watch the content render, and while your user is watching the content render, your scripts are being downloaded, one or more at a time depending on the browser, so that by the time your content finishes rendering and your user wants to interact, your scripts have been downloaded and run so that the page is ready to be interacted with.

This best practice was taught to us by Paul Irish and the team at HTML5 ★ BOILERPLATE and as far as I know, they were the first to create a template, bootstrap, or boilerplate, whatever you call it nowadays.


Summary


  1. Use Modernizr:

    • It is developed by the same people as HTML5 Shiv.

    • It uses feature detection and provides a graceful fallback for browsers that fail the tests while browsers that pass get to experience the fullness of your imagination.

  2. Place your scripts (other than Modernizr) at the BOTTOM of your page:

    • Allows the user to see content rendering while scripts are loading in the background.
  3. I didn't get a chance to talk about this, but for the future:

  • 1
    I am appreciated once again for preparing this handy information and your time working on it. It was nice to read it and sure it helps me with my ongoing development process of my website. Thank's @Code Maverick, great work. – StuckBetweenTrees Jan 27 '15 at 2:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.