Responsive web design is the new standard. We expect websites to read well on  a variety of devices, from the 27 inch screen of our computer down to the 3 inch screen of our smart phone. In order to standardize how a user experiences the website, developers and designers must work together. When designing a responsive site developers must account for a variety of devices and therefore must tailor the design and layout of the site to each of these devices.

There are two general categories for responsive sites. The first contains basic responsive sites that rely on media queries, a form of screen size detection, and will shift parts of the site around as the screen width grows and shrinks. The second contains the fluid site, which behave exactly as they sound, widths and sizes change fluidly with the window size. Everything slides around and adjusts seamlessly. Fluid designs are a little bit trickier because the designer must define a breakpoint, a size at which an element will stop resizing and will shift its position in the flow of the layout. For instance, a two column layout will become a single column layout, as one column will shift below the other. The best design, though, is one that uses both of these aspects and takes advantage of both media queries and fluidity to render well on all devices.

The easiest way to implement media queries and fluidity is through a framework. There are many different frameworks. The most complete include: Twitter Bootstrap, ZURB Foundation, and Skeleton. There are also many lighter weight options, which only develop a responsive layout, as opposed to offering full styling of the websites design. The next time you browse a website, resize it to see how the elements react and interact.