How Do I Make An Image Change In Size Depending Upon Whether It's Viewed On Computer Or Phone

Few things are as annoying on the web as having the page layout unexpectedly change or shift while you're trying to view or interact with information technology. Whether you're attempting to read an article as information technology wriggles effectually in front of you, or you endeavor to click a link only to have another one push it out of the style and take you lot off to somewhere unexpected, it'south e'er frustrating.

This layout shifting is peculiarly frustrating on mobile devices, where a big enough modify can push button all familiar content off-screen and cause a visitor to completely lose her bearings. I would argue that shifting the page layout later on the initial render (without relevant user interaction) may be the single most unpleasant user feel a site can create. I'm surprised to encounter it happen even on really big-name sites that are otherwise very well fabricated. The expert news is that it's fixable.

Luckily, modern browsers don't perform initial render until the way sheets have finished loading, which means that with some clever CSS we tin can do a lot toward fixing this trouble.

What causes layout shifting?

Most commonly, it'south the upshot of loading Ajax partials. Ajax is asynchronous, meaning nothing is waiting for it to finish. Simply when information technology does stop, and the results are plopped into the document, it can cause re-layout and push other elements around.

It'southward especially common with ads but can happen with any layout-affecting content that loads after initial render, including images or even fonts.

I've run across this problem on sites I work on myself

The first time I encountered this problem actually wasn't for ads or images, but for rendered templates from our own server. I was working at Broadleaf Commerce, on a preexisting Admin interface that we were adding features to. We didn't want to rebuild the whole affair using something similar Angular, but nosotros did desire some of the content to be able to update without a page refresh. We created Ajax containers bound to server routes that would re-return and send back but a section of the page. It worked quite well, but in some cases, we had multiple of these sections going down the page with static headers in-between. A few seconds afterward initial visit the headings (and sometimes other static content) would all jump downwards – exactly the jarring layout shifting experience we're trying to avoid.

Fixing with `min-height`

To fix it, I used the browser's DevTools to mensurate the top of the resulting content and hardcoded it as a min-height for the container in the CSS.

Imagine this widget was Ajax'd in. We could measure the size of it here and set `min-acme: 363px` on a placeholder element.

This meant that the surrounding layout began in more or less the country that it would end upward, with the simply change existence the interior of the content boxes. I also set a background color for the containers to advise that something would go there. These elementary additions made the interface much more physical and anticipated. One could fence whether hardcoding the minimum height is wise, given that it decouples the layout from the content. This is why nosotros used min-elevation instead of height. If the content ends upwardly making the element taller, it can still do that, which isn't groovy, only information technology'due south slightly better than doing nothing.

Here's an example of what this would wait similar (rerun to see delayed advertizing loading):

See the Pen Avoiding Content Jumps by CSS-Tricks (@css-tricks) on CodePen.

Some other Example: A Tertiary-Party Widget

Another fourth dimension, I was working on a client site who wanted to use the Braintree driblet-in UI (https://www.braintreepayments.com/products-and-features/driblet-in-ui) for their checkout page.

It's a great little widget, but you'll notice that even on Braintree's own site the content gets pushed effectually when the widget expands. To Braintree's credit it does and so with a shine transition which helps maintain some continuity, only the page I worked on still benefitted from a wrapper element with a min-peak, keeping something as fundamental as the checkout push button from moving around unexpectedly.

Fixing with Transitions

Using smooth transitions can make an unexpected content change a lot less jarring.

          .ad-wrapper {   height: 0;   overflow: hidden;   transition: peak 0.66s ease-out; } .ad-wrapper.loaded {   peak: 100px; }

Run across the Pen Fugitive Content Jumps by CSS-Tricks (@css-tricks) on CodePen.

The downside is that they only work when yous set dimensions explicitly; min- properties and content-derived layout changes won't transition. Withal, transitions tin be used in cases where you accept unpredictably sized content and yous don't mind using JavaScript to query its size and smoothly resize the container accordingly.

Another Example: Font Loading Shifts

In a more than unusual case, I was once working on a client site that prominently used a horizontally condensed font. The problem was that it had to be loaded in, so afterward a few seconds, nearly all of the site content would suddenly change size. It wasn't as drastic of a shift as the above examples, but since it affected nearly everything on the page it was much more of an eyesore. In the end I constitute this really swell article that supplies a verbose but effective font-family argument that covers websafe condensed fonts for all major platforms. But before finding that, min-height was once over again my friend.

Examples From Effectually The Web

The Verge (mobile)

I notice on The Verge that

Their ad at the top is sometimes a modest banner and sometimes a larger ad
They seem to already be using a min-tiptop technique for the banner-sized advert

It's possible that their ad API doesn't tell them what size the advert will be. If it does, they should adopt the min-height appropriately. If this isn't possible, they might already exist doing all they can with pure CSS. Although even then, I would fence that from a UX perspective, a actually large advertizing should go further down among the content instead of at the very top, and the banner would be more appropriate at the peak. And then again, showing the user a nearly total-screen ad every bit shortly every bit they visit the chief page is probably a lucrative source of revenue.

Kotaku (mobile)

Worth noting on Kotaku is that at that place's no ad at the very meridian of the main page, then when you lot first visit it there isn't a jump. However, if the page ever loads while already scrolled down a way (such as afterward pressing the back button when you've finished reading an article), there is some massive, disorienting jumping acquired by large ads brindled throughout the mail service stream. They all seem to be the aforementioned size, so this would be a simple set.

Summary

One of the most of import things to keep in mind when designing any user experience is expected behavior. Nosotros expect that clicking a blue, underlined segment of text will take us to another page. If it instead opens a modal or does nothing at all, we have a confusing and frustrating user experience. The same is true of navigating the folio nosotros're already on. When nosotros run across an article appear in front of us, we expect it to sit down still unless we scroll it. When we see a link or a button, we expect information technology to still be in that location when we accomplish to tap on that spot. Violations of these basic assumptions are at best unpleasant, at worst frustrating or even disorienting.