Target device is a really important consideration for the interface designer particularly in the current ever-changing-screen-size environment. The goal is to provide the optimal user experience regardless of which device is being used, be it a desktop computer, laptop, tablet or cell phone.
In the past, a designer might need to design for a couple of screen sizes, perhaps a large desktop and a laptop. The solution for this change in screen size was to use a fluid rather than fixed layout.
Fixed and Fluid Layouts:
When screen layouts were built using traditional HTML tables, designers frequently assigned fixed numbers to the columns. This meant that regardless of screen size, the layout stayed the same width (great for designers who hated to see their layout change!!). As new screen sizes came on the market, a new "fluid" layout technique was developed. Fluid layouts were based on percentages rather than fixed numbers so as a screen changed size, the layout adapted accordingly.
Unfortunately, fluid layouts just couldn't accommodate the radical changes in screen size that came about with the boom in mobile technology. Mobile users were having to scroll or drag around these large dimensions to look at different parts of the layout and to access the navigation. There was a need for a more "adaptive" approach!
Adaptive Layouts (AWD):
These screen layouts are designed to adapt to a specific device. There may be 4 or more different layouts that display based on a media query when the user first visits the site. Generally, after the media query, the correct screen layout is served to the target device. The standard sizes are: desktop, tablet (landscape and portrait), and mobile phone (i-phone). This strategy enabled mobile users to see a much simpler layout with interface and navigation designed to better suit their needs. This was a huge improvement until more and more devices came on the market and standardized screen sizes for tablets and mobile phones went out the window. Enter the responsive layout!
Responsive Design (RWD):
Responsive layouts don't target specific devices. Instead, responsive designs (like fluid layouts), are built using percentages. They scale based on screen size and have pre-determined "break points" which make the content stack into a narrower columns. Designers can also create menus that compress to a drop down format, designate when certain content should be hidden (from smaller devices) and resize graphics/images to fit smaller screens. This gives the flexibility of designing to fit a screen without having 4 different layouts based on media type. Bootstrap is a tool that designers and developers often use to create responsive designs.
Here is an example of responsive design. Try looking at this on your computer and then on your mobile device! Or just use a browser resizer (try the Chrome resizer extension) to see what how this layout reacts to different widths.