In this 3-question interview, Ryan tells us about the worst and best web trends in higher ed, a great tool and shares a top 3 of favorite higher ed websites.
1) What are the worst and best design trends used on higher ed websites?
Big videos are the worst design trend. The average web page size weighs in over 2MB. When recruitment efforts are focused on international and rural students, high speed connections can’t be taken for granted. Site performance must be a higher priority. Even with 5G around the corner, users increasingly expect sites to load instantly. Hero-sized videos that go on for 20 or 30 seconds – or longer – just feel gratuitous at this point.
The best? Little videos! Instead, I’m intrigued by videos that are all around smaller in size – shorter length, smaller dimensions, fewer bytes. For example, I love the use of cinemagraphs on sites like TQ but these could be made much smaller by using .mov files instead of animated GIFs. If/when the HEVC format takes off, the file size shrinks even more dramatically. Video doesn’t have to be the first thing you see on a page either. Locate it “below the fold” and lazy load it for even better performance results.
2) What are your top 3 favorite higher ed websites?
Yale
When Matthew Carter and Tobias Frere-Jones design your school typefaces, you already have a head start. Yale’s solid typographic hierarchy is balanced with an exemplary use of white space. No need to get carried away with flashy gimmicks when you have design executed as well as this.
Princeton University
Like Yale, Princeton’s site avoids superfluous distractions and focuses on clean, well-designed content with sections that occasionally bring to mind Swiss / International style layouts. One of those sections – the Libraries section on their Academics page– even includes a carousel. *gasp* So many sites get the deservedly-maligned carousel so wrong, but Princeton gets it right. No marketing headlines, no calls to action, just pretty pictures.
The Harvard Gazette
This university news site breaks out of the mold of stodgy web design with asymmetrical layouts and quirky but tasteful typography. With touchscreens on so many devices these days, hover effects can often feel tacked on like an afterthought. However, the hover effects on this site are restrained but effective. For example, hovering over an image increases its brightness with a CSS filter. And in the list of Latest and Trending articles, a thumbnail image is displayed on hover, bringing the user’s attention to a single article at a time.
No hover? No problem. All of the content is still present on touchscreens. Progressive enhancement FTW! See also: The Engine (MIT) and News @ Northeastern.
3) What’s your favorite tool for web work?
Contrast
This macOS app does one thing but does it so well. Compare the color contrast of any two colors on your screen with a Photoshop-style eye dropper for WCAG compliance. If you’re in higher ed and don’t care about accessibility, you should. (Honestly, how have you gotten this far if you don’t?) This tool makes color-contrast compliance easy.
A conference focusing on higher ed WEBSITES?
The 2019 Higher Ed WEBSITES Conference is a must-attend event for higher ed web professionals and teams looking for inspiration, ideas and best practices to kick off their summer projects.
Read below what a few of your higher ed colleagues who attended the 1st edition of the Higher Ed WEBSITES Conference say about the experience.