Uglifying in Public

Website design for speed, accessibility, and staff delight



Cody Hanson and Eric Larson
Web Development
University of Minnesota Libraries

http://z.umn.edu/uglify

www.lib.umn.edu

Opinionated
design



(informed opinion)

"If your UX asks the user to make choices... even if those choices are both clear and useful, the act of deciding is a cognitive drain.


And not just while they're deciding... even after we choose, an unconscious cognitive background thread is slowly consuming/leaking resources, ‘Was that the right choice?’"


- Kathy Sierra, "Your App Makes Me Fat"

Responsive
Web
Design

Support All Devices

UMN Libraries: Devices

Fluid Grid

Fluid Grid

Mobile First

UMN Libraries: Mobile

Mobile First

  • Emphasize consistencyin your design
  • Prioritize your content
  • Work with real HTML/CSS/JS wireframes
  • Expect increased development time

Speed

whichloadsfaster.com

Dev
Priorities

Public Process

  • (Very) Early prototype
  • Rapid design iterations
  • Public URL to BETA site
  • Multiple feedback loops

Modern Web Standards

UMN Libraries: Mobile

Functional Prototypes

UMN Libraries: Beta 0.1.0

Accessibility-Minded Redesign

WebAIM: Accessibility

Performance-Minded Redesign

UMN Libraries: PageSpeed Beta 0.1.0

Feedback



UMN Libraries: Beta banner
Feedback survey
Feedback survey detail

b0.1.0

UMN Libraries: Beta 0.1.0

5.22

Frustrated feedback

b0.2.0

UMN Libraries: Beta 0.2.0

5.44

b0.3.0

UMN Libraries: Beta 0.3.0

7.44



Usability testing

8.333

b0.4.0

UMN Libraries: Beta 0.4.0

9

b0.5.0

UMN Libraries: Beta 0.5.0

Build Process

PageSpeed Insights

Recommendations

  • Reduce server response time
  • Prioritize visible content
  • Optimize images
  • Minify HTML, CSS, JavaScript
  • Leverage browser caching
  • Enable compression
  • Avoid landing page redirects
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content

Build Process

UMN Libraries: Build Process

^^ Code to MAKE your website awesome.

Build TODOs

  • Smaller HTML / CSS / JS files
  • Fewer HTTP requests
  • Optimized images
  • Cache-friendly, fingerprinted assets

Optimize images

TinyPNG

Optimize images

TinyPNG

Typical CSS & Javascript

Concatenate Assets

Concatenated CSS & Javascript

Concatenate Assets

Leverage browser caching

Regular

Leverage browser caching

Fingerprinted

Typical HTML

Typical HTML

Minified HTML

Minify HTML

PageSpeed Insights

Recommendations

  • Reduce server response time
  • Prioritize visible content
  • Optimize images
  • Minify HTML, CSS, JavaScript
  • Leverage browser caching
  • Enable compression
  • Avoid landing page redirects
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content

Speed Leaderboard

Speed Leaderboard

ARL Leaderboard

ARL Leaderboard

Tools &
Resources

Google PageSpeed

Google PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights

Google PageSpeed · UMN

Google PageSpeed Insights

Google PageSpeed · UW-Madison

Google PageSpeed Insights

GTmetrix

GTmetrix

http://gtmetrix.com/reports/www.lib.umn.edu/5jEMp3uN

WEBPAGETEST

WEBPAGETEST

http://www.webpagetest.org/result/140318_HP_SVY/

Kraken.io

Online image optimization

Kraken.io

https://kraken.io/

Kraken.io

Ex. U of Iowa Libraries

University of Iowa Libraries

https://www.lib.uiowa.edu/

Kraken.io

FF Plugin - Download them all

University of Iowa Libraries - Images

https://www.lib.uiowa.edu/

Kraken.io

UIowa - Kraked Images Results

University of Iowa Libraries - Images Optimized

https://www.lib.uiowa.edu/

Middleman

Middleman

http://middlemanapp.com/

Bootstrap

Bootstrap

http://getbootstrap.com/

LESS

Less

http://lesscss.org/

Bower

Bower

http://bower.io/

Uglifying in Public

Website design for speed, accessibility, and staff delight



Cody Hanson and Eric Larson
Web Development
University of Minnesota Libraries

http://z.umn.edu/uglify