At this point we’re just about done with the homepage of our responsive website. We’ve got our navigation in place, our background images resize nicely, and our other elements are able to resize and adjust to various screen resolutions. Today we’re going to focus on tying the page off with a footer. I’ve always admired sites that put some thought in to the bottom of their page design. There are certainly times when a footer requires nothing more than some basic contact info and maybe a copyright...
Geolocation is one of the most exciting features offered by HTML5. Using some relatively simple JavaScript code, you can create Web applications that determine various aspects of the user location, including longitude, latitude and altitude plus more. Some Web applications can even provide navigation functionality by monitoring the user position over time, integrating with map systems such as Google Maps API. As with all HTML5 functions, you cannot yet rely on browser support. Where browser...
Responsive design is a hot topic of web development these days, and with a simple (and now well supported) way of handling the ‘one site for all clients’ model (and I mean clients as in browsers/platforms/devices, not the people that give you money in return for a web site) it should well be. Redirecting mobile users to /m/ or some other cut-down area of your site is becoming a technique of the past. Using collections of utilities, such as the excellent 320&up, makes building responsively much...
The latest version of jQuery, version 1.7.1 at the time of writing, has completely overhauled its event system, giving us just two new methods to replace all existing event methods such as bind(), live() or delegate(). Event handling has been a core part of jQuery for a long time, but over the years the jQuery event landscape has flourished and grown, with successive releases increasing the number of methods for handling events. The new event methods on() and off() condense these different methods...
There is one design style that can withstand the fluctuating trends that come and go in the design world, and that is to have a clean, simple, minimalist site. Think of sites like Apple, Amazon, and The New York Times. One thing you will notice that they all have in common is perfectly executed use of white space. However, there are some very subtle guidelines to follow or tips that you should consider when designing your own clean website. This tutorial will take you through the development process and...
This is the second part in our introduction to HTML5's video API. In part 1 of this series, I introduced you to the basic markup we'll be using to play the video, then I helped set up a simple script with which we were able to make the controls visible, while ensuring that the native controls will still be visible when JavaScript is disabled. We also touched on the use of JavaScript's addEventListener method, along with our first look at the video API -- the canplaythrough event. Let's dig a little deeper into...
Since the late 90s, when embedding media elements like audio and video clips into web pages, developers have had to rely on third party plug-ins. Flash has become the go-to method for nearly all video sites, and has been widely used for audio embedding as well. Because of the nature of the Flash plugin, this has limited the accessibility of embedded media. With the introduction of the HTML5 media elements API, this has all begun to change. Now, many libraries and video players are being introduced that...
jQuery is great for adding enhancing effects that would otherwise be impossible with just HTML and CSS. In this tutorial we're going to use jQuery and two plugins to gradually change a website's background as the user scrolls the page. We'll be using the Color Animation and Waypoints plugins. The Color Animation plugin adds animations to the color properties of elements. jQuery already includes an animate function, this plugin simply extends it. The Waypoints plugin allows us to execute a function...