Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Ways To Reduce Content Shifting On Page Load

Have you ever opened a website, started reading and, after some time had passed and all assets had finished loading, you found that you’ve lost your scroll position? I undergo this every day, especially when surfing on my mobile device on a slow connection — a frustrating and distracting experience.

Every time the browser has to recalculate the positions and geometries of elements in the document, a reflow happens. This happens when new DOM elements are added to the page, images load or dimensions of elements change. In this article, we will share techniques to minimize this content shifting.

Further Reading on SmashingMag: Link

Media Link

When a website loads, it takes some time until the images are loaded and the browser is able to calculate the space needed. The following GIF, recorded with the throttling set to 3G, demonstrates the effect.

One way to avoid this is to set a fixed width and height for all images, but this isn’t practical for responsive websites because we want images and videos to adapt to the available space.

Intrinsic Ratio Link

With intrinsic ratios4, also referred to as the padding-bottom hack, we can define the sizes that our media will occupy.

5
Formula for intrinsic ratio

The formula for getting the value for padding-bottom is this:

(height of the asset / width of the asset) * 100(%)

If we have an image with a width of 1600 pixels and a height of 900 pixels, then the value would be this:

 (900 / 1600) * 100(%) = 56.25%
 

Here is a Sass mixin we can use to define the aspect ratios of our images, videos, iframes, objects and embedded content.

@mixin aspect-ratio($width, $height) {
  position: relative;
  padding-bottom: ($height / $width) * 100%;
  img,
  video,
  iframe,
  object,
  embed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.ratio-sixteen-nine {
  @include aspect-ratio(1600, 900);
}
<figure class="ratio-sixteen-nine">
  <img src="waterfall.jpg" alt="Waterfall in Iceland">
</figure>

To make the experience even better, we can style the placeholder by adding a background to the wrapper.

figure {
  background: #ddd url(camera-icon.svg) no-repeat center center;
}

For images, we can use an icon to indicate to users that an image will appear. By implementing aspect-ratio placeholders, the user can decide whether to wait for the image or continue reading, all without losing their current scroll position.

Placeholder picture6
(View large version7)

Widgets Link

In addition to media content, your website might be using widgets or third-party content that is added via JavaScript and that would also shift content if not handled carefully.

Advertisements Link

Although a lot of websites are responsive these days, most ads still have a fixed size. For a responsive website, we can use placeholders in our HTML, in which we load the predefined ads if they match the specified screen size.

/* On small screens show 320x250 banner */
@media all and (max-width: 500px) {
  .ad-container-s {
    width: 320px;
    height: 250px;
  }
}

/* On medium screens show 728x90 banner */
@media all and (min-width: 800px) {
 .ad-container-m {
   width: 728px;
   height: 90px;
 }
}

In our example, we have one medium rectangle (300 × 250) and one leaderboard (728 × 90). On small screens, we would show the rectangle, while on bigger screens we would show the leaderboard. By setting fixed dimensions for the placeholder, the loading of the ads won’t trigger a content shift.

Advertisement8
(View large version9)

Many people will never see the ads, but only the empty placeholder, because they will be using an ad blocker, or the advertisement won’t show up for other reasons. Therefore, you should style the placeholder to indicate that there is normally an ad. If you are already using an ad-blocker detection script, you can replace the placeholder with a message or a promotion of your products10.

Users might even rethink the use of an ad blocker on your website if the ads have one less disadvantage — that distracting jump effect.

Dynamic Content Link

For other widgets, we might not know their exact sizes beforehand, but we can define the minimum heights the widgets will require.

.widget {
  min-height: 400px;
}

By using min-height, we will reserve enough space for most cases and avoid a big jump if the widget needs more space.

Finding the right size for min-height takes some time, but users will be thankful that their reading experience has not been abruptly interrupted.

Web Fonts Link

Fonts have different x-heights. Therefore, our fallback font and web font will take up a different amount of space.

Currently, one best practice11 for loading web fonts is to use the Font Face Observer12 script to detect when a font has loaded so that it can be applied in the CSS afterwards.

In this example, we are applying the webfont-loaded class to the html element once the web font is ready to use.

var font = new FontFaceObserver('Lato');

font.load().then(function () {
  document.documentElement.className += " webfont-loaded";
});

In the CSS, we apply the web font once it has successfully loaded.

p {font-family: sans-serif;}

.webfont-loaded p {font-family: 'Lato', sans-serif;}

When the web font finally finishes loading, we will notice a quick jump. To minimize this, we can modify the x-height of the fallback font to match the web font as closely as possible, thus reducing the jump.

font-size-adjust Link

The font-size-adjust property13 allows you to specify the optimal aspect ratio for when a fallback font is used. For most fonts, the ratio is between 0.3 and 0.7.

To find the right aspect ratio for your web font, I recommend setting up your browser to show two paragraphs side by side, one with the web font and the other with the fallback font, and then adjust the property with your browser’s developer tools.

p {
  font-size-adjust: 0.5;
}

Because font-size-adjust is currently supported only14 in Firefox and Chrome (behind a flag), we can use a combination of letter-spacing and line-height to adjust the size of the fallback font in other browsers.

p {
  font-family: sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 0.95;
}

/* Older browsers */
p {
  letter-spacing: 1px;
  line-height: 0.95;
}

/* If browser supports font-size-adjust, use this */
@supports (font-size-adjust: none) {
  p {
    letter-spacing: 0;
    line-height: 1;
    font-size-adjust: 0.59;
  }
}

/* Once the web font has loaded, apply this */
.webfont-loaded p {
  font-family: 'Lato', sans-serif;
  letter-spacing: 0;
  line-height: 1;
}

Here, we are defining letter-spacing and line-height as a fallback first, and we are using @supports15 to feature-detect and then apply font-size-adjust if it is supported.

We won’t get a perfect solution for all fonts, but it will minimize the distraction when the typeface changes.

Layout Link

Until now, we have covered media, widgets and fonts, but the content could also shift when the CSS for the main layout gets applied.

Flexbox vs. Grid Link

Flexbox can cause horizontal shifting16, as shown by Jake Archibald.

With flexbox, the content controls how the layout is displayed, whereas with grid layouts, the layout is displayed according to the grid definition. Therefore, using grid for the main layout is better.

You probably won’t see the content shift if you’re developing on a fast machine with a great Internet connection, but users who are surfing on a slow connection will.

.wrapper {
  display: flex;
}

.sidebar {
  flex: 1 1 30%;
}

.content {
  flex: 1 1 70%;
}

/* Use grid instead of flexbox if supported */
@supports (display: grid) {
  .wrapper {
    display: grid;
    grid-template-columns: 30% 70%;
  }

  .sidebar {
    grid-column: 1;
  }

  .content {
    grid-column: 2;
  }
}

Support17 for CSS grid layouts isn’t very good at the moment, but it will increase in the next month when Safari 10 ships, and Firefox and Blink-based browsers will probably enable it by default. To be future-proof, we should use flexbox as our foundation and enhance the experience with a grid layout if it is supported.

Little Big Details Link

Changing CSS properties based on user interaction can often cause horizontal shifting. This can be avoided by using alternative CSS properties.

text-shadow for Bold Text Link

When changing the font weight of text, the size of the element will change and a content shift will occur.

a:hover,
a:focus {
  font-weight: bold;
}

@supports (text-shadow: none) {
  a:hover,
  a:focus {
    font-weight: normal;
    text-shadow: 1px 0 0 currentColor;
  }
}

Redrawing text-shadow can be computationally more intensive than changing font-weight, but it is the only way to prevent the jump effect when changing to a heavier weight of text.

Once again, we are using feature-detection to apply text-shadow, instead of font-weight, upon interaction from the user. Because @supports is supported by fewer browsers than text-shadow, we could also consider using Modernizr18 to detect the feature and apply the improvement in all supported browsers.

Small details will often make a good experience great. Your users will appreciate every content shift that is avoided.

Scroll Anchoring Link

Now that you’ve learned about ways to avoid content jumps, you might be wondering why browsers can’t prevent content jumps more efficiently.

The Chrome team recently introduced scroll anchoring19, which does exactly that.

Scroll anchoring is a proposed intervention20 that adjusts the scroll position to reduce visible content jumps.

At the moment, scroll anchoring is only available behind an experimental flag in Chrome, but other browser vendors have shown interest and will hopefully implement it in future.

Conclusion Link

As you can see, there are many solutions for avoiding the jump effect on page load. Yes, implementing all of these techniques would take some time, but it is totally worth it — until scroll anchoring is supported in more browsers.

If you take the time to avoid jumps by using the techniques mentioned above — defining placeholders, reserving space and preparing for fallbacks — then users will have a less annoying experience and will be able to enjoy your content without interruption.

How do you minimize content shifting on your websites? Have you discovered any particular tricks or techniques to prevent the jump effect?

(il, al)

Front page image credits: Rayi Christian W.21

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2013/05/the-state-of-responsive-web-design/
  2. 2 https://www.smashingmagazine.com/2012/11/embeddable-content-wordpress/
  3. 3 https://www.smashingmagazine.com/2016/09/content-security-policy-your-future-best-friend/
  4. 4 http://alistapart.com/article/creating-intrinsic-ratios-for-video
  5. 5 http://provide.smashingmagazine.com/padding-bottom-formula.svg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/08/placeholder-picture-large-opt.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/08/placeholder-picture-large-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/08/advertisement-large-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/08/advertisement-large-opt.png
  10. 10 https://www.smashingmagazine.com/2016/03/never-ending-story-ad-blockers/#prominently-highlight-your-products
  11. 11 https://www.zachleat.com/web/comprehensive-webfonts/
  12. 12 https://github.com/bramstein/fontfaceobserver
  13. 13 https://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop
  14. 14 http://caniuse.com/#feat=font-size-adjust
  15. 15 https://drafts.csswg.org/css-conditional-3/#at-supports
  16. 16 https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
  17. 17 http://caniuse.com/#feat=css-grid
  18. 18 https://modernizr.com/
  19. 19 https://developers.google.com/web/updates/2016/04/scroll-anchoring
  20. 20 https://github.com/WICG/interventions/blob/master/scroll-anchoring/explainer.md
  21. 21 http://tumblr.unsplash.com/post/89277673479/download-by-rayi-christian-w

↑ Back to top Tweet itShare on Facebook

Michael Scharnagl is a freelance front-end developer. He loves learning new things and finding techniques that challenge what we think is best practice, all with progressive enhancement in mind. You can find his writing on his blog, and follow him on Twitter @justmarkup.

  1. 1

    Nice, but that intrinsic aspect ratio hack isn’t very future proof as it doesn’t work with flex items.

    1
    • 2

      Not as shown in the article, that is true – although there’s another trick involving floating :before to get those flex items to behave.

      here’s a quick demo of the workaround/extention:
      http://codepen.io/krsdcbl/pen/wzwPyK

      2
      • 3

        Thanks for the demo. Haven’t used intrinsic aspect ratios in combination with flex before but it is great that there is a solution for that.

        1
        • 4

          Pleasure! There’s one caveat though, as it’s a floated pseudo causing the height, it won’t “lock” your boxes to that ratio but rather set them to “minimum aspect ratio”.

          Pos abs solution like in the original example will naturally counter that, but the little difference can make for interesting layout options as stretching flex items would adhere to the tallest box of their row, but rows with little content would never get crunched smaller than the imposed ratio.

          0
  2. 5

    Flexbox can cause horizontal shifting, as shown by Jake Archibald.

    That example by Jake Archibald is flawed. It uses flexible items with a growth/shrink factor of 1, while the sidebar containers have a known width. Set those factors to 0 and the horizontal shifting goes away.

    6
  3. 6

    I had to chuckle when I read the title of this post given that content shift is one of my pet hates on Smashing Magazine articles when banner ads load ;)

    15
    • 7

      I was hoping someone wrote this.

      0
    • 8

      I have also noticed big jumps while reading about avpiding content jumps on this very website. But on the otherwise we can’t just display viewers a preloader and let the wait before all the content is settled.

      0
      • 9

        “But on the otherwise we can’t just display viewers a preloader and let the wait before all the content is settled.”

        Why not?

        0
  4. 10

    Why is this seen as such a problem? If a User is on a slow connection and he can see a slow build up of the page, it’s logical that some shifting will occur because … well, the page is loading slowly. So I don’t think that any User is really expecting an undisturbring experience, as long the page isn’t fully loaded. It’s also not common sense to “use” something that isn’t finished.
    Yes, it’s great to think about such things, but don’t treat it as an absolut must use, because no, I don’t think it’s worth the time (that probably no client would pay for).
    And, to tell the truth: how often will this said shifting happen? If a developer is concerned about this shifting on mobile devices … then think about removing images altogether on those devices. Problem solved and bandwidth saved.

    It’s like on a crossover. Everybody knows, you can safely use and cross it when you have green lights (page loaded).
    The statement of this article is like a madman who says: “Go on, it’s OK to cross! Lights are red, but I jump on the street and try to stop the oncoming cars!”.
    And I guess no one would expect to be _not_ hit by a car (see shifting) eventually when doing this.

    -31
    • 11

      Every time the page shifts the browser has to re-render it. This is not good on low end mobile devices, or older PCs. This technique will help render time as well as perceived quality. It’ll also stop the user being frustrated by stuff moving around.

      6
      • 12

        “Every time the page shifts the browser has to re-render it.”

        So? How is that different (or harmful) in (re-)rendering a (new) page?

        “This is not good on low end mobile devices, or older PCs. This technique will help render time as well as perceived quality.”

        Because re-rendering is something, that a browser should never ever do, because it decreases their live span, wear the hardware or … or what is the “not good” with that?

        “It’ll also stop the user being frustrated by stuff moving around.”

        In all those years I never experienced a single client or user saying: “Those page jumps sucks!”. Probably because they don’t care and see it as it is: a short, very unfrequent sign of an unfinished load.

        -23
        • 13

          Just in case you’re really not trolling or looking for an argument, but actually don’t understand the underlying principles:

          Of course the browser doesn’t “wear out” – but eventually, your CPU or GPU does. And also, it doesn’t provide as much ressources to render this page in the first place.

          What is crucial, is that the browser doesnt render your page “at once”, but needs to run every instruction provided by the styles and apply them to matching pieces of the website. And it does so AS it encounters new instructions.

          So if your page takes ages to load ressources and therefore changes appearance as soon as it gets them, your browser needs to re-calculate everything it just had done to adjust the compelte image of the page.

          And this puts strain on your hardware, not only your patience.

          2
          • 14

            So you really want to say, that things like “page jumps” is something that harms hardware and drains resources, and because a browser does for what he is designed to do (draw webpages and stuff), it harms it … ?
            Really? Let’s talk about trolling …

            “[…] your browser needs to re-calculate everything it just had done to adjust the compelte image of the page.”

            Damn! I hope you only open one single page and NEVER any other page, because then your poor browser has to re-calculate everything from the previous page …

            Seriously guys … is this candid camera … ?

            -1
    • 15

      You expect me to not read the words right in front of my face because the page hasn’t fully loaded? I’m supposed to just sit there and pretend I can’t see the words because some ad network is slow-loading? You expect me to not get pissed off when the thing I started reading suddenly jumps off-screen? This issue is one of the main reasons I took the trouble to enable ad-blocking on my phone. Not addressing this issue directly harms site revenue, and chiding the end users for not following your rules is pointless.

      11
      • 16

        “You expect me to not read the words right in front of my face because the page hasn’t fully loaded?”

        No, I expect that you don’t make a big deal out of such minor “issue” (even that word is too big for this “behaviour”).

        “I’m supposed to just sit there and pretend I can’t see the words because some ad network is slow-loading?”

        You’re not supposed to pretend anything, you only should accept that those things can (and will) happen.
        And well, that’s also why everyone uses Ad-Blockers. If you don’t use on, then .. well … yeah, it’s possible you will experience page jumping. But anger about this is your selfmade “problem” and not that from the developer (because he is responsible for the website and not the technical delivering of or any ads on the website).

        “You expect me to not get pissed off when the thing I started reading suddenly jumps off-screen?”

        Yes, because every healthy human normaly _knows_ that this can (and will) happen, if something is _not finished_, so they can handle this. If one “get pissed off” from such absurd things, then he maybe should get help from a professional.
        Especially when this is not likely a case that rises on ever single page you visit.

        So, sure, you can eat from the ingrediences of a cake during the making of said cake, but then you can’t say: “What a shit cake, it doesen’t even taste like one.” Of course not, because it’s _not finished_.

        “This issue is one of the main reasons I took the trouble to enable ad-blocking on my phone.”

        See, what I wrote above, but why “trouble”? It’s normal these days.
        And I’m pretty sure it’s more because of “no one wants ads” and “don’t waste my limited bandwidth” than “jumping text”. In fact, I have never ever heard someone say: “I had to install an Ad-Blocker because of those damn page jumps …”.

        “Not addressing this issue directly harms site revenue, and chiding the end users for not following your rules is pointless.”

        What users do or not do is generally beyond every webdeveloper. They decide, they control. And no, no one is chiding the end users, because there exist no rule, as you claim.
        The whole article is about a tiny, tiny, tiny cosmetic hiccup, about generally no one cares (like I said: more than 8 years of web development on not one single user or client came up with this “problem”).

        And if one is so anal about this “issue”, heavens, then add jQuery, a few lines of code along $(window).load(…); , make a loading screen to your liking and *BAM*, it’s solved. No need for such an “creative” article (but that’s no offence on the autor).

        -24
    • 17

      @The Insaint: “Why is this seen as such a problem?”
      It’s a User Experience issue. In the end it boils down to conversion rate and happy customers. That’s our job, isn’t it? :)

      “It’s also not common sense to “use” something that isn’t finished.”
      That’s exactly the problem. Take a site fetching content from an external service. Like ads from an external ad service, external fonts, a map script or images hosted on an external CDN. The page may actually appear loaded and ready. But the content is shifted as the external objects are popping in one after the other.

      “And, to tell the truth: how often will this said shifting happen?”
      To me, nearly every time I read an online newspaper. Or several websites using custom fonts. And to some extent even UI/UX/webdesign magazines (best in class, right?).

      “… then think about removing images altogether on those devices. Problem solved and bandwidth saved.”
      While I agree this can be the right solution in some cases, I feel this approach generally breaks the concept of progressive enhancement. And if we’re talking about an ad service, you’d actually be your own ad blocker this way.

      8
      • 18

        “@The Insaint: “Why is this seen as such a problem?”
        It’s a User Experience issue.”

        Is it really? Or is it just a “pretended” issue?

        “In the end it boils down to conversion rate and happy customers. That’s our job, isn’t it? :)”

        Sure. But “happy customers” won’t turn “unhappy”, just because of irregular “page jumps”. And as long you make you content accessable, everything is fine. Everything else beyond this are just a list of layered boni on the experience. And to say the least, “jumping texts” are way, way off the list.

        “It’s also not common sense to “use” something that isn’t finished.”
        That’s exactly the problem. Take a site fetching content from an external service. Like ads from an external ad service, external fonts, a map script or images hosted on an external CDN. The page may actually appear loaded and ready. But the content is shifted as the external objects are popping in one after the other.”

        First, if you decide to load “everything” from external, sorry, that’s your home made problem, deal with it.
        Second, how much “external objects” can cause this shift in text? In actual fact only images that are inserted into the text flow. Everything else should not have an impact.

        “And, to tell the truth: how often will this said shifting happen?”
        To me, nearly every time I read an online newspaper. Or several websites using custom fonts. And to some extent even UI/UX/webdesign magazines (best in class, right?).”

        I’m also reading news sites in the morning, every single day. But I never experienced a (knowlingly) shift in text. And I don’t think that european websites are better build than american websites. Granted, my connection is not really slow, but anyway, never really noticed a shift.

        “… then think about removing images altogether on those devices. Problem solved and bandwidth saved.”
        While I agree this can be the right solution in some cases, I feel this approach generally breaks the concept of progressive enhancement. And if we’re talking about an ad service, you’d actually be your own ad blocker this way.

        You’re right on the ads, but again, that’s a home made problem and I don’t see, why a webdeveloper should fix a technical problem that’s not in his range. To a degree, he can predict his environment, the webserver. But he has no knowledge of the adserver and of course it’s nothing he can or even should care.

        What’s discussed here, is the direct result of your said “progressive enhancement”. First text, then images, then videos, etc. …
        Not long ago, the assumption was “make content (text) first accessable, _then_ go with images and stuff” … and everyone was OK with the “page jumping”. Because everyone said: “It’s important that everyone can read the text first. If an image is loading later, it’s OK, because then it fits into the content (and of course it has then to shift). If it’s not loading (ie. some error) then there are no “big, bad gaps” in the text flow.
        So the content of this artice drives this assumption somehow ad absurdum …
        Like I said, if this “page jump” is such an issue, go with a loader, like seen in almost every new wordpress themes nowadays. No need to break you head with math and additional CSS hacks that may not work everywhere.

        -19
    • 19

      You seriously need to do a little bit of UX research. You’d be astounded to find out how many tiny details make users decide to go elsewhere… such as too many page jumps!

      You can’t just tell users they are not visiting the web right… Just like you can’t just tell users they should like blue over red…

      If users get ticked off, then you need to do something about it. And that starts with finding out what ticks them off, and that something in this article is page jumps!

      It’s a fact, just accept it! (just like you want users to just get used to page jump :)

      9
      • 20

        “You’d be astounded to find out how many tiny details make users decide to go elsewhere… such as too many page jumps!”

        _One_ tiny detail does nothing, only a lot of tiny details. Or it has to be one really huge detail, like … not showing text at all for example. But certainly no page jumps that depends on so much more factors if it’s happening or not.

        “You can’t just tell users they are not visiting the web right”

        And I did wrote this where … ?

        “Just like you can’t just tell users they should like blue over red…”

        So … you use the color that (some) users want and not which one the CI of your client requires … ? You are very brave to dare this …

        “If users get ticked off, then you need to do something about it. And that starts with finding out what ticks them off, and that something in this article is page jumps!”

        Yeah, maybe I was wrong. Maybe european website _are_ better build than american ones. Till this article, i never ever had heard of this “issue” that seems to require some higher mathematics and additional CSS work. That could otherwise be solved with an banal loader script (with probably not much but less code than the solution in the article) an noone even considered.

        “It’s a fact, just accept it! (just like you want users to just get used to page jump :)”

        Nah, I don’t really have to accept anything, because we don’t have such “big problems” here with clients (or users). Maybe european users are way to relaxed to even bother on such things … :)

        -12
    • 21

      Pothi Kalimuthu

      August 31, 2016 3:58 am

      This video shows the effects of content shift (among others, such as ads).

      The Real Life Frustrations Of Trying To Read A Regional Newspaper Website Online

      2
      • 22

        Actually it shows what is (sad, disgusting) standard on websites, if you don’t use an Ad-Blocker … :)

        -3
    • 23

      I like how one of your solutions is to remove images. Why stop there? Why not just remove advertising too? And fonts! Who need’s those!? Tell you what, why don’t we just remove everything except the text itself?

      Oh, but this site needs to function as a business, create revenue? Screw that! Investors? Don’t care about those! What the users want to see? Who cares! No big deal! Problem solved!

      Face.
      Palm.

      2
      • 24

        Maybe you should read the details and look at the bigger picture instead of spitting out useless and polemic phrases.

        But to answer: Right, who needs ads, who needs fonts? Nobody.
        The text itself is in deed the _only_ content, that’s relevant. You are probably too young to know, how “Internet” was in the beginning and for what it was used for.
        Those things that you see now are only layers of a beautifuler presentation of the real content. And the thing is: you don’t have any rights to “must have it” nor can you “demand” it. If it’s there, be glad and thankful someone made it. If it’s not, then it’s just so and you have to accept it.

        “Oh, but this site needs to function as a business, create revenue? Screw that!”

        Absolutely right! This shitty commerce-thinking is the huge factor that cripples the internet and it’s content. Every dumb ass thinks he can make money the easy way, but instead ruins everything. In my opinion, if you can’t run a website on your own, then stay away because no one will miss you.
        Useing a free resource like “the Internet” to try to get money out of it, is just plain disgusting in my eyes.

        -4
    • 25

      Well, a lot of people already tried to explain this to you, but you have always something to argue. But just in comparaison, you say we shouldn’t care, because people know that they will have issues.
      So, why care designing good UX and, for example, explicit buttons. Why make a delete button red, and a validation button green? People know that they need to be careful in their action and they should read the buttons.
      Why make different assets for an image ? People know that there is images on the website and that it could take time to load.
      Why simplify people life? Why even care? Duh.

      0
  5. 26

    Although I’ve not written any HTML for a few years, it actually makes me angry that this problem still isn’t solved. You don’t need to simulate a 3G connection to see it happening – I get it in my wired 20Mbps connection.

    I have no problem with websites using ads to earn revenue, but if they can’t keep their pages still then I’ll block their ads or just use a different site.

    10
  6. 27

    Rachel Andrew

    August 29, 2016 10:15 pm

    Just a quick note – Safari isn’t shipping grid layout next month. It’s in the preview but that doesn’t mean it goes into the next version of Safari. See: https://twitter.com/grorgwork/status/766392584679755777

    I think it’s unlikely we’ll see Grid in mainstream production use before the beginning of next year. I try and keep this page up to date http://gridbyexample.com/browsers/

    As far as using grid over using flexbox that really depends whether you are creating a one vs. two dimensional layout. Performance of flexbox has improved a lot since that article you referenced but for 2d layout Grid should be better. There is some performance stuff here for anyone interested https://blogs.igalia.com/jfernandez/2015/06/24/performance-on-grid-layout/

    1
    • 28

      Thanks for the info, Rachel! Was not aware that not everything in preview will be shipped in the next version of Safari but I still have hope that Grid will make it.

      -1
  7. 29

    How do you minimize content shifting on your websites? Have you discovered any particular tricks or techniques to prevent the jump effect?

    It’s a constant battle and this article gives me some more techniques – thanks!

    The number of times I’ve clicked where I thought the interaction would happen, but instead click on something else … gah! – drives me nuts.

    Design can play a role in this battle – the positioning of interactive page elements. One example is placing a link above an asset that will load after the initial page render, rather than below it – a careful consideration of the placement of a primary action. Placing pagination above a list rather than below it etc.

    Other techniques are related to UX design – avoid page jumps on primary actions where possible – an example is form validation. The user clicks a submit button and the page jumps to display a validation message. The user should ideally be presented with the validation error within the region they clicked, or be presented with another action to view the errors that will then perform the page jump.

    Then there’s content ‘design’ – limiting the amount of content displayed and providing methods to view more. Avoid ‘infinite scrolling’ where possible, the overloading of a page with more content than is necessary.

    Other techniques to consider, especially for mobile devices, are fixed navigation elements that are context aware. As a user scrolls down a page, the fixed elements – for example, an action for viewing a news article – modifies to that content.

    2
  8. 31

    Dmitri Tcherbadji

    August 31, 2016 12:48 pm

    The problem happens consistently on Smashing Magazine. More than once I immediately go to “comments” section that disappears out of my reach no matter what I do as many times as there are images on the page. I don’t have time to read the content or comments but I *so* hope that this or similar solution will be implemented on SM!

    1
  9. 32

    What you’re writing about actually happens on THIS page.

    0
  10. 33

    Ironically, I had it on this site…

    0
  11. 34

    Would it help if JPEGs were saved in progressive format?

    0
  12. 35

    Software Arrogance

    December 3, 2016 10:50 pm

    One would think the arrogant youtube coders would know about this when it’s happening a million times/day on every channel’s home page load. But they’re too busy changing the site fonts for no reason and too busy changing everything else all around for no reason. Was on the left put it on the right. Was on the top put it on the bottom etc. Was blue make it red etc. Google UI arrogance and change-for-no-reason.

    0

↑ Back to top