Hola! ¡Tenemos nuestra Comunidad en Español!

Redesigned About Page: Team Member Videos

Highlighted
Advisor

I recently redesigned our about page and replaced our team photos with HTML5 videos that look like photos (until you rollover them). We think this adds an extra layer of personality to our agency and really makes for a delightful experience.

 

The downside to this design is possible performance issues.  To counteract this I've disabled video preloading so it isn't too heavy on first load and used VP9 encoded WebM files. What do you think? Is it cool and unique or do you think the performance losses outweigh the benefits?

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
8 Replies
New Contributor | Platinum Partner

Nice work Stefen! They load fast, definitely add personality to your about page. Thanks for sharing this.

 

Steve

 

Advisor

Thanks for the feedback @stevejames!

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Top Contributor

Hey @stefen, this sounds like a great idea. I had a look and am on iPad so I couldn't see how they work in iPad. I clicked on a couple of images and they stayed as image, no video, so not sure if that's what you intended in mobile devices?

 

thanks for sharing the idea.


Samantha Alford
Did my post solve the issue? If so, please accept it as a solution!
Advisor

Hey @Samantha_Alford, thanks for the feedback. Due to lack of hover on mobile, we think this a fine fallback.  I think it's a good example of progressive enhancement actually.

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Top Contributor

Hey @@Steven, I thought that must have been the case. What I love is that the photos look stunning on iPad regardless, so it doesn't come across as "gymicky" on either device, it just looks classy and professional. Great job achieving both so seamlessly!


Samantha Alford
Did my post solve the issue? If so, please accept it as a solution!
HubSpot Employee

Woooah @stefen, love this! Really cool.

 

I did have performance issues with the videos though. The were a little jerky. Is it possible to make them gifs and on hover swap to the amimated gif rather than the static pic? Would that perform better. #IveNoIdea

Advisor

@NiallByrne Thanks for the feedback!

That might be a better solution. However, I think the primary issue lies on iOS/Safari and IE which don't support WebM videos. GIF's might be better than the MP4 files but I doubt they would perform better or be a smaller file size when compared to the WebM videos. And our video guy is extremely persistent about keeping the resolution/quality very high 😣 😞 😒

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Occasional Contributor

very creative! Had a small jerk on the hover before the video started playing but the quality and all was great. Smiley Happy

 

Reply
0 Upvotes