CSS — Looking Good No Matter The Device

Whether a user is accessing your site from an iPhone, an iPad, or a PC, they will expect a good user experience. There are a few tools in CSS that allow you to design a flexible site to ensure a great experience for all users regardless of their device.

Adding Responsive Images:

Responsive images will automatically adjust to the size of the user’s screen. This is useful for creating aesthetically pleasing web pages no matter which device is being used. It is very easy to make images responsive:

Believe it or not, this is all you need to keep your image looking great on phones and MacBooks alike!

Media Queries:

Media Queries allow the content of your site to change displays based on the viewport size of the user’s device. As you may know, a viewport is a device’s viewable space on a webpage.

Media Queries are convenient because you can apply as many styles and selectors as you would like. They consist of a media type that should match the type of device on your document, and the corresponding styles will be applied.

High Resolution “Retina” Images:

Different devices have varying pixel densities. Images may seem pixelated if they are not high resolution and are being presented on a high-res display. Apple created the “Retina” display which gives the user noticeably higher pixel density.

In order to make images appear nice even on Retina display is to adjust the height and width of an image to be half of the size of the original file. Let's say, for example, that an image is 600px X 600px. We would give this image a high-resolution display by doing the following:

See? Easy.

Software Engineering Student @ Flatiron Denver. Located in Austin, TX