#responsiveimage

RESPONSIVE IMAGE BANNER CASE STUDY

Background

Responsive websites rely on banner images that are dynamic and fluid enough to be visually responsive to any screen, from small to large format. There are plenty of techniques that involve cropping and resizing to fit within the screen. I've combined those two to form a hybrid solution that works well for responsive banners.

Details

Before going into the details of responsive banners, you have to look into your website's analytical data and figure out breakpoints for your responsive site. You'll notice there are maximum and minimum screen resolutions that viewers use. They should be set as end break points. This also goes without saying that you should still look at the current standard break points as your guideline.

Your website should have its minimum width the same as the smallest size of that particular screen. For this example, let's focus on the large screen.

You've determined that the large breakpoint is at 1024px or 64em. This will be the responsive banner's smallest cropped size, anything lower than that value, it will either have to be resized or swapped using media queries. This will also be the banner's text safe area.

When resizing from the breakpoint, text and buttons on the banner should adjust along with it. Relative positioning and percent sizing will make those elements fluid. They should dynamically adjust until it reaches the maximum content width, which is basically the largest width of the website.

The banner can be extended beyond the max content width in order to cater for higher resolution monitors. However, It should only be the background image that should extend past it.

This method does not require JavaScript in order to work. Head over to Coastal.com to see it in action.

Services

CSS @media queries

Fluid images

Foundation

SVG