Use of CSS3, HTML5 and jQuery

Popular Web Design Trends 2011 - Part 5

Websites have to be mobile-friendly, cross-browser-compatible and accessible on a large variety of devices like mobile phones and tablets. They need to be able to present all kinds of media including audio, video, galleries, walkthroughs and photos providing vivid experiences. Web designers are using CSS3, HTML5 and jQuery to address these issues and provide an option to Flash.  Thanks to JavaScript, dynamic websites are no longer the preserve of Flash-based websites. jQuery is a JavaScript library that simplifies web development.

Although Flash provides a great way to showcase dynamic content, it is possible to create zoom effects and Flash-like animations that are smoother and more subtle using CSS3, HTML5 and jQuery, without waiting for a page to reload each time. The <video> tag in HTML5 allows videos to be easily embedded and played in web pages without additional software. You can create text/images with moving backgrounds, character animation, galleries, slideshows and image sliders, auto-playing featured content sliders, flipbooks, etc.

 

This illustrated site features an animated man that moves smoothly downwards with vertical scrolling, providing alternative navigation and leading the eye to important elements like the Twitter bird at the bottom of the screen, and on through the rest of the site, to the portfolio slideshow and more social networking icons at the bottom of the page.

 

Ella is a web designer who enjoys playing in her HTML and CSS3 playground.  Her site is creatively illustrated and on rollover, the site menu and page headings show different behaviors.

 

This handy flipbook from Google presents attractive illustrations, animations on some pages and informative text on browsers and the web. It features page navigation in the footer and a menu in the header, and allows quick and easy sharing on social networking sites.

 

Note the use of a portfolio-in-a-box on the homepage which when clicked takes you to the design gallery with images that move on hover; elegant fonts, imaginatively used, and a minimalistic design sans clutter.

This site features hilarious illustrations (comments on “legwork” that promote the agency’s commitment and capability) and navigation  highlighting - a fixed menu footer  with “quivering text”, portfolio slideshow, dynamically generated blog content, smooth vertical scrolling, interesting animation effects on people – see team picture.

 

---

This page is a part of our series on Popular Web Design Trends 2011 which include hand-drawn design, mega design elements, parallax 3-D effects, mobile-friendly websites, use of CSS3, HTML5 and jQuery, social networking integration, minimalism, magazine-style layouts.

---

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!