Articles > CSS

CSS

Creating a Responsive Website: The Footer Part 2

We’re going to pick up where we left off in our last tutorial on creating our responsive web design footer. In the last tutorial you may recall that we laid out the large version of our footer and inserted a Twitter feed as well.  In this tutorial we’re going to finish off our footer by making it responsive and plugging in the jQuery necessary to make our Twitter feed work. If your dog ate your work up until this point, you can download the source code here. Before we get started, let’s take another quick...
CSS

Developing a Responsive Website: The Footer

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...
CSS

Developing a Responsive Website Part 2: Navigation and Content

Now that we’ve got our background images squared away and set to break themselves down nicely across various devices and screen resolutions we can look in to populating our home page with some content. Let’s begin with our header. I always like using a separate file for all the things that will stay uniform throughout my site, header, logo, navigation, etc. That way if I need to make a minor edit down the road I just have to edit the header file, which is then pulled in to every page with a simple PHP include...
CSS

Developing a Responsive Website: Background Images

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”...
CSS

Designing a Clean Website: Gradients

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...
CSS

A Look at Responsive Web Design

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....
CSS

Designing a Clean Website Part 2: The Layout

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...
CSS

Designing a Clean Website: Navigation

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...
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress