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

• Redesign - last half of last year
• Principles
• Process
• Tools/techniques

www.lib.umn.edu

• 3+ year old design (it had been an eventful three years)
• Aborted contractor agreement
• ILS/discovery layer changes
• Why not one more change?

Opinionateddesign

(informed opinion)

• Often used to describe Rails
• Expertise-driven
• Data-driven
• We're not great at this. If you want more info, get a time machine...

"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

• Mobile first
• Speed

Fluid Grid

Mobile First

• Mobile first

Mobile First

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

• Mobile first

Speed

whichloadsfaster.com

Dev Priorities

Public Process

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

Modern Web Standards

Functional Prototypes

Accessibility-Minded Redesign

Performance-Minded Redesign

Feedback

b0.1.0

5.22

b0.2.0

5.44

b0.3.0

7.44

Usability testing

8.333

b0.4.0

9

b0.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

^^ Code to MAKE your website awesome.

Build TODOs

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

Optimize images

Optimize images

Typical CSS & Javascript

Concatenated CSS & Javascript

Leverage browser caching

Regular

                    
                        <link rel="stylesheet" href="css/all.css">
                    
                

Leverage browser caching

Fingerprinted

                    
                        <link rel="stylesheet" href="css/c06fa4a2.all.css">
                    
                

Typical HTML

Minified 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

ARL Leaderboard

Tools & Resources

Google PageSpeed

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

Google PageSpeed · UMN

Google PageSpeed · UW-Madison

GTmetrix

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

WEBPAGETEST

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

Kraken.io

Online image optimization

https://kraken.io/

Kraken.io

Ex. U of Iowa Libraries

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

Kraken.io

FF Plugin - Download them all

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

Kraken.io

UIowa - Kraked Images Results

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

Middleman

http://middlemanapp.com/

Bootstrap

http://getbootstrap.com/

LESS

http://lesscss.org/

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