CSS site style testing

Use the links below to re-style this entire web site to see how you can change the looks of a website with CSS while leaving the content in tact.


Purple Style
gzuslivz
Rolling Navigation Menu
Ugly with Motion

Videos

Videos are a powerful form of communication but keep in mind, that creating a high quality video is not cheap. It takes time and money. A 2 to 3 minute video could take you over 20 hours and could cost thousands of dollars to create in equipment alone. Sure you can just hit record on your phone (and phones offer great quality video these days) but that's not the end of the process.

Video design is similar to other design mentioned throughout this site. Have a reason for everything you put into a video. Be mindful of the quality and quantity of content. Be purposeful in everything you do. Decide on your them/style of a video (or video series) and be consistent.

A look at the use of videos on a website

Kirk's recommendations for shooting a video

Equipment that Kirk uses with approximate purchase price (mostly 4K)

ItemCost
iPhone 12 Pro Max 512GB $1,400
GoPro Hero 9 $400
DJI Mavic Air (drone) fly more combo $800
Nikon Z6 (Mirrorless) with prime lens $2,750
Apple MacBook Pro (Quad Core i7, 16GB RAM, 1TB SSD) $2,500
4TB USB-C external hard drive $120
4K TCL (TV/display) $280
Manfrotto MAMVH500AM MVH500A Fluid Drag Video Head with MVT502AM Tripod and Carry Bag $350
GVM automatic slider $400
DSLR Mini Ball Head w/ Quick Release Plate as Manfrotto 484RC2 $20
Tascam US - 16x08 USB audio interface $320
Tascam US - 2x2 USB audio interface $180
MXL 990 Condensor Microphone with shock mount $100
Apple Final Cut Pro (video editor) and Logic Pro (audio editor) bundle $300
Total$9,920

Some of Kirk's past equipment

YouTube embedded video with responsive design using videotitle and videoWrapper classes for styling

How to mic a large drumset (multi-cam and sound sample) (watch this video)

Self hosted video using videotitle2 and videoWrapper2 classes for styling

Self hosting may be a little scary because you use the bandwidth from your server to dish out content (i.e. the movie). This short video is 20MB and is in 4K. 20MB is very small for a movie. If you have a lot of people watching at once, it could affect your server. For that reason, I usually rely on YouTube to deal with videos.

People ask me about self-hosting videos though, so here's one where I do just that. YouTube offers closed captioning by default and you can even upload your own closed captioning file for each video. To meet accessibility standards, you should offer closed captioning. The "video_webvtt_file.m4v" video below has styling that makes it responsive, and a video_webvtt_file.vtt file (WebVTT) for closed captioning.

Notice how the closed captioning timing is set and how it doesn't necessarily relate to what's on the screen (although it should). You may need to turn on closed captioning to see it. For Chrome, use the 3 dots. For Safari, it's called "Subtitles" and is a bubble looking thing.

Movie with subtitles


Movie that starts and ends at a certain time, with options to watch other times


Video Content

For accessibility reasons, captions should be included with videos on the web. YouTube auto-generates captions, which can work but should be verified/edited by a human.

Supporting text options

Supporting text requirements

Lawsuits: not sure if you should caption your videos, just ask one of these places that got sued either because their content wasn't "accessible" or because their attempt at accessibility was lacking

Apple has offered a very good screen reader as part of their operating system for many years now and Google added a "Live Captions" in an accessibility setting in their Chrome browser back in 2020 but I wouldn't rely on those options for websites with videos when you can proactively create captions on your own

Video Request Guideline

Here is a list of questions (a ) that I have used in the past when people started inundating me with doing videos