JSFoo 2017

However well designed your user interface may be, at some point or other, the people using it are going to have to wait for something to load. Skeleton screens are an effective alternative to progress bars and wait indicators to improve perceived performance.
This talk covers every aspect of skeleton screens from psychology to design to putting them in action with JavaScript.

Outline

This talk is an extension of the article How to Speed Up Your UX with Skeleton Screens https://www.sitepoint.com/how-to-speed-up-your-ux-with-skeleton-screens/. The article has proven very popular on SitePoint with over 15,000 views and comes in first on Google when searching the phrase “skeleton screens”.

Beyond the scope of the article, the talk demonstrates how to implement skeleton screens with provided source code. Skeleton screens are an important tool for improve perceived page load.

Abstract:

• Psychology of Waiting
• Skeleton Screens in the Wild
• Making it Happen:
  • Design
  • Code

Speaker bio

Chris started out as a web developer when Netscape ruled the world and is currently an engineering manager at CXA in Singapore. He has written for Net Magazine and SitePoint, and founded community group Singapore CSS because someone had to.
Aside from musical distractions and accumulating frequent flyer points, Chris and his wife Sarah can be found in the company of their small human.

Links

• Conference Talks:
• Access All Areas (CSSConf Asia 2016) http://www.slideshare.net/cliener/access-all-areas-cssconf-asia-2016
• Bad Form (Form, Function & Class Manila 2016) http://www.slideshare.net/cliener/bad-form-form-function-class-2016
• Access All Areas (Meta Refresh Bangalore 2016) https://www.youtube.com/watch?list=PL279M8GbNsetaSApFvU2K1LMnuNTY7khZ&v=q38zE3-IHGY
• http://www.slideshare.net/cliener/access-all-areas-66116620
• Bad Form (JSConf Asia 2014) http://www.slideshare.net/cliener/jsconfx
• https://www.youtube.com/watch?v=G7PBTOdAqrU&index=12&list=PL37ZVnwpeshE_Um4wU9fSn6xB5VB_61R-
• Validating forms (and more) with the HTML5 pattern attribute (Web Directions South 2013) http://www.slideshare.net/cliener/validating-forms-and-more-with-the-html5-pattern-attribute
• http://www.youtube.com/watch?v=Wdg5i01LbG4
• Web Forms People Don’t Hate (Edge of the Web 2013) http://www.slideshare.net/cliener/web-forms-people-dont-hate
• Building & Breaking Web Forms (Web Directions South 2012) http://www.slideshare.net/cliener/building-breaking-web-forms-with-quaidjs
• Sites:
• https://www.slideshare.net/cliener/
• https://engineers.sg/presenter/cliener/
• https://twitter.com/cliener/
• https://github.com/cliener/
• https://cliener.tumblr.com/
• https://www.linkedin.com/in/chris-lienert-194248100/
• Articles:
• How to Choose the Right Front-End Framework for Your Company (SitePoint, March 2017) https://www.sitepoint.com/choose-the-right-front-end-framework-for-your-company/
• How to Speed Up Your UX with Skeleton Screens (SitePoint, July 2016) https://www.sitepoint.com/how-to-speed-up-your-ux-with-skeleton-screens/
• Build Better Web Forms (NET Magazine April 2013) (reformatted online: http://www.creativebloq.com/javascript/build-better-web-forms-javascript-10135045)