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 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...
Responsive web design is widely thought of as a design trend, but it’s much more than that. It is an approach to web development that allows a website to break itself down smoothly across multiple monitor sizes, screen resolutions, and platforms, be it a computer, tablet or mobile device. It allows the developer to create a site that is optimized for each platform, both in navigation, readability and load time. In this tutorial, we take a look at what responsive web design entails for the developer....
Last week we discussed how important navigation is to a website and how developing an interactive navigation system will help give a clean, minimalist website a bit of character and make it feel modern and current. It’s too easy to make a clean website look dated and as though it were developed in the 90’s, so by injecting modern user interfacing techniques that are popular today you’re able to put the viewer at ease and reassure them that the content is fresh and up to date. We’ll pick up where...
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...
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...
Image slideshows are a dime a dozen on the web. You see them used for advertisements, featured articles, product showcases, and plain old photo reels. Today, we're going to quickly implement a slideshow using the jQuery plugin Cycle by Mike Alsup. Cycle is a great plugin with years of development behind it. We're going to use the Lite version. It lacks some of the features of the full version (like different transitions), but it is super lightweight. While the full version is 49kb, the lite version weighs...
With an emerging market of innovative mobile devices it has become more important to create responsive designs. In my last article (Part 1) we started with the setup of our HTML and our media queries. The pad.css was the easiest to format due to the change in the screen resolution. I saved the formatting of the handset for the last part of this series because it's the device that will start to see changes to our fluid layout. Every site developed without flash content is mobile compatible but is the content...