Site Menu

5 Ways to Make Your Website Look Awesome with HTML 5

February 18, 2014 0 Comments

HTML 5 has been around for years, but as of July of 2014 the W3C (World Wide Web Consortium) plans to make it the new web standard. HTML 5 has a lot of really cool features, but today I’m going to focus on the aesthetic improvements that this new technology has made possible.

Video Backgrounds

Screen Shot 2014-02-17 at 1.00.40 PM

This example is from Spotify. If you click on the link you’ll actually see the video on the background playing.

Pinned Elements

A pinned element stays in the same spot as you scroll down. In this example you can see the logo of this university is on the bottom-left corner no matter how much you scroll through the page. This is a really cool technique to place calls to action that follow your visitors as the browse your website.

Animations on Mouse Hover

Screen Shot 2014-02-17 at 1.08.24 PM

A moderate level of animation can make your website a lot more dynamic and engaging. Check out Wevseen and hover your mouse over the two boxes at the top to see what an HTML 5 animation looks like.

Fixed Background Images

Screen Shot 2014-02-17 at 1.12.44 PM

When you scroll down or up on a page, fixed background images stay in the same spot. This is a really cool effect because when your text and images scroll at different speeds the whole website looks more interactive and engaging. You can see an example here.

Fully Animated Websites

Screen Shot 2014-02-17 at 1.16.25 PM

This website is a great example of what’s possible with HTML 5. These sorts of animated websites are very effective if you have a story to tell and want to walk your audience through it. A fully animated site like this one might not be right for you, but you can certainly use only some of these elements to make your website more captivating.

Tags:

Zeke Camusio

About the Author

Zeke Camusio is a serial entrepreneur, marketing speaker, author of The Internet Marketing Bible and CEO of Digital Aptitude, a data-driven digital marketing agency in Portland, Oregon.

Contact Us

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>