A while back we took A Look at Responsive Web Design and how different designers utilize it in different ways. Now that we’ve seen a few examples in action, let’s create a responsive website of our own. In this installment we’re going to set up the structure of our homepage and add in a few media queries that will help the site load quicker, navigate better, and keep our desired appearance across multiple devices, platforms, and resolutions. Before we dive in to the HTML, let’s cover the “viewport”...
This week we’re going to finish up our series on how to develop a clean website by laying out a secondary page. We’re going to include a secondary navigation bar along the top of our design, as well as include all of our text for the section on one page. This will eliminate the unnecessary loading of other pages when all that’s changing is the text. It will allow the visitor to browse your site quicker and be less work for you to develop. When all is said and done, this is what you’ll have developed:...
This is our third installment of how to design a clean a minimalist website. First we looked at navigation and how to make an accordion style drop-down menu with pure CSS3. Then we moved on to laying the site out and went over rounding corners and applying drop shadows with CSS3. Now we’re going to look at how to create a gradient with CSS3 and apply that to a few of the elements in our homepage. We left off in part two after we pulled our header, navigation and main image in to our layout. Now that we have...
The new HTML5 Markup Language has introduced several new element features not available in HTML4, for example elements like header, section, nav, footer, aside, and article. Where these new tags will work in Opera, Safari, Chrome or Firefox they will not function in Internet Explorer (version 8 and earlier). The problem is that due to the way parsing works in IE, these elements are not recognized properly. This tutorial explains how to get HTML5 tags to work in IE8 and its earlier releases. It is possible...
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...
There are two things which look and act similar but are different, gadgets and widgets. Widgets can be referred to any icons or graphical interface element that is operated by a computer or internet use to execute a preferred function online or on the computer. You can add a widget in all kind of web pages. A gadget acts just like a widget, often fulfilling the same purpose, but it is proprietary or called to be self-contained. It only works on a certain website or a specific set of websites. For example, OpenSocial...
jQuery is an actively-developed JavaScript library with a fairly rapid release cycle. As well as general enhancements, performance tweaks and bug fixes, new methods are frequently added to the library. In this article we’ll take a look at the new methods that have been added to the 1.6+ release and some of the enhancements. Delaying the ready event with the holdReady() method ... The holdReady() method is used to delay the firing of jQuery’s ready event, a cornerstone event which is popularly...