With over 9 billion indexed sites on the web and counting, sites are having to do more to get noticed and encourage users to spend time on them. Color is becoming more and more important in making your page stand out. Here are some sites that do just that: use interesting colors in unusual combinations to stand out from the billions of standard color schemed sites out there.

The web development community has come up with endless solutions, best practices, and tools for coding a responsive design with ease. While the vast majority of websites can be made responsive now, it’s time to push the envelope further. It’s easy to pay attention to great coding best practices, but sometimes the best design practices for various screen sizes get pushed aside. Many resources on responsive design cover the basics. With various screen sizes coming out each day, and even the big players like Apple switching things up with the new iPad mini, you need to evolve the way you think about design and the user experience as well.

Designing websites for smartphones is easy compared to retrofitting those already in place. More than that, it’s embarrassing how, almost eight years after CSS gained practical acceptance, a lack of foresight haunts those of you who write HTML. Converting older websites to responsive design causes headaches not because small screens are difficult, but because most HTML documents were written under an assumption about screen size.

Responsive design is the process of arranging the layout in a way that all the important information is presented in a user readable way in any kind of device or screen size. Most designers will choose a grid based layout since it’s easier to handle grid based layouts in different kind of devices. It’s your decision to choose between a fixed or fluid grid to design the layout. Throughout this tutorial Rakhitha Nimesh is going to focus on fluid grids and their importance in responsive design.

Resolution is a funny thing to measure; it’s not a physical size change, but a clarity change. It’s not making images, brighter, or more rich in color, but making them denser. Of course, when designers get a taste of high-resolution displays, they’re hooked. And they all want their websites (and the websites of their clients) to look awesome on the devices that are sporting these displays. Many web designers are racing towards that goal by creating images for each new resolution that comes out.

Since the release of iPhone 4 and the iPad 3, Apple has doubled the resolution of the displays, which are now 640 x 960 pixels (iPhone 4 and 4s), 1536 x 2048 pixels (iPad 3), and 640 x 1136 pixels (iPhone 5). To keep a good-looking user interface for both the old as well as the Retina resolution, Apple decided not to resize all graphics or make use of scalable image formats (such as SVG), but instead it now requires two sets of graphics for each device. When building an app for iOS, you have to provide the normal-sized and double-sized images for each graphic. This is where the strongest Adobe Fireworks feature comes in.

Creating a web design using transparency can be both beautiful and tricky. Transparency is the effect created when a color block, text or image is made thinner or desaturated so that the color is diluted and what is behind it shows through. The effect can be quite stunning when executed properly – creating a great place for text or as a way to bring focus to a certain part of an image. Designers must be careful though when using transparency. The effect can be tricky to do well, as readability is often a concern. Transparent boxes and text at the wrong levels can also be distracting and take away from the overall design.

A responsive layout is in theory always better than an adaptive layout, but in some cases an adaptive layout is a more pragmatic solution. An adaptive layout will give you more control over the design because you only have a handful of states to consider. In a responsive layout you easily have hundreds of states — sure, most of them with very minor differences, but they are different nonetheless — which makes it harder to know exactly how your design will look.

Last time, Jamal went over media queries. This is an important aspect to know of Responsive Web Design (RWD from now on) because it is this CSS declaration that allows for the different layouts to appear at different screen sizes. Hmm, now what about different screen sizes? To make it easy to understand, lets look at this using an analogy. So, imagine that RWD is a blueprint for a wonderfully new house. The foundation, which the rest of the house depends on, would be media queries. After the foundation comes the first level of the house, which sets the tone for how the rest of the house will be built. In this house, the first floor would be break points.

Michael John Burns has shown us how to convert a PSD file to working HTML/CSS. Now, in this tutorial he will teach you how to make it Responsive by using Media Queries. Media Queries will change the look of the website depending on the screen resolution of the device: desktop to a mobile resolution by tweaking the CSS for a variety of viewports. By the end of this media queries tutorial you will learn how to convert any website into a responsive website.