Tips, web design book reviews, resources and observations for teaching and learning web development.
The Tech Gender Gap in 2013: Is It Changing? The article cites a few hopeful trends.
Screen-Less Mobile Computers: Talking Changes Everything. Can we talk? (Again, I’m reminded of the TV series Eureka.)
Domain Registrars: Who’s the Fairest in the Land? Spoiler alert – it isn’t Go Daddy. But I see the company I use in this list.
Do you want to put a video background on your website to achieve the same impressive design results showcased by sites such as Razorfish and Random Dance? It’s really not difficult to do, so long as you have a cursory knowledge of how to edit HTML files and upload Javascript files.
One way to add a video background to your website is to use the video embed HTML5 feature along with a bit of CSS3 to help your video maintain its position. Though this is an option, it’s not an ideal solution because it doesn’t allow you the control you need to make your videos interactive (if desired) or to determine what device your website is being loaded on. The latter is critical, because many devices won’t run background videos.
The best method is to employ Javascript to load your background video. Javascript can determine what device is being used, and then load an image when background videos cannot be played.
There are many different scripts out there for loading videos, and each can be customized to serve your own purposes. However, there are two scripts I recommend, depending on your video source.
Developed by John Polacek at Draftfcb Chicago, this script makes it simple for you to add a background video to your website. You’ll need the jQuery, jQuery UI, and jQuery imagesloaded libraries and plugin to use the script. With this script, you can load videos from any source (though the author recommends Vimeo), and you can even add an interactive playlist.
This is a simple script that’s likewise easy to use; it will call YouTube videos to be loaded as your web page background.
As with any web implementation, test your new video background to make sure it plays on all major browsers and responds as it should (such as with image replacement) on different devices and operating systems. Don’t be afraid to play with the code to add features you want to use, and make it your own! And, if you’re more a designer by heart, you can always hire a freelancer to install these scripts for you.
They’re relatively simple, so an experienced coder should be able to implement them rather quickly and with minimal charge.
Do you have a preferred method of loading videos as web page backgrounds? Have I missed anything that should be included? Let me know in the comments!
Guest Author Brian Morris writes for the PsPrint Design & Printing Blog. PsPrint is an online commercial printing company. Follow PsPrint on Twitter @PsPrint and Facebook.
There are a number of posts here at Web Teacher that provide information for front end developers about how to use ARIA-WAI in a page design to increase the accessibility of the page. Here’s a list of some articles I wrote. There are also many links to ARIA posts in my useful links category.
ByPeopleByPeople is a new site that bills itself as “what web ninjas have been waiting for” is in a prelaunch phase. As part of the launch build up they published a terrific post: Web and Design Trends 2013. This post is a perfect complement to the roundup of responsive (adaptive) images post I wrote yesterday, except it talks about trends in all areas of responsive design. Typography, content, images, even email. There are some good resources I didn’t put in my post from yesterday.
There are prelaunch giveaways of some web goodies you might want to grab.
The post itself is worth a read, but I’m also planning to keep an eye on the site after it officially launches. It may be a great resource.
While responsive web design has taken off like a rocket, the question of what to do with images in a design that adapts to any device that might be used to display it is still under investigation. I’ve gathered some resources to help you understand the issues and see some of the tests and demos that have be done.
I don’t think we have a final answer that will become “best practice” yet, but there are a lot of great minds grappling with the issues.
Navigation in Lists: To Be or Not to Be is an important post by Chris Coyier. It talks about how using an unordered list as navigation may not be the great idea we thought it was. If you, like me, use unordered lists in all your navigation, you need to read this post.
If you haven’t checked out the new blog Women and Tech you must look at it. Amazing design and functions. Why not read their latest interview while you’re there: Christina Truong.
The Chinese New Year is coming. It will soon be “my” year for great good fortune – the year of the snake. Here’s a look at how Apple thinks about the marketing opportunities in the celebration of the Chinese New Year.
I’m thinking about older posts here on Web Teacher that would be of value to anyone learning either beginning or advance Dreamweaver techniques. This seems like a good time to point out some perennial favorites.