Tag Archives: scroll

Thumbnail

Scroll Bouncing On Your Websites




Scroll Bouncing On Your Websites

William Lim



Scroll bouncing (also sometimes referred to as scroll ‘rubber-banding’, or ‘elastic scrolling’) is often used to refer to the effect you see when you scroll to the very top of a page or HTML element, or to the bottom of a page or element, on a device using a touchscreen or a trackpad, and empty space can be seen for a moment before the element or page springs back and aligns itself back to its top/bottom (when you release your touch/fingers). You can see a similar effect happen in CSS scroll-snapping between elements.

However, this article focuses on scroll bouncing when you scroll to the very top or very bottom of a web page. In other words, when the scrollport has reached its scroll boundary.

Collecting Data, The Powerful Way

Did you know that CSS can be used for collecting statistics? Indeed, there’s even a CSS-only approach for tracking UI interactions using Google Analytics. Read article →

A good understanding of scroll bouncing is very useful as it will help you to decide how you build your websites and how you want the page to scroll.

Scroll bouncing is undesirable if you don’t want to see fixed elements on a page move. Some examples include: when you want a header or footer to be fixed in a certain position, or if you want any other element such as a menu to be fixed, or if you want the page to scroll-snap at certain positions on scroll and you do not want any additional scrolling to occur at the very top or bottom of the page which will confuse visitors to your website. This article will propose some solutions to the problems faced when dealing with scroll bouncing at the very top or bottom of a web page.

My First Encounter With The Effect

I first noticed this effect when I was updating a website that I built a long time ago. You can view the website here. The footer at the bottom of the page was supposed to be fixed in its position at the bottom of the page and not move at all. At the same time, you were supposed to be able to scroll up and down through the main contents of the page. Ideally, it would work like this:

Scroll bouncing in Firefox on macOS
Scroll bouncing in Firefox on macOS. (Large preview)

It currently works this way in Firefox or on any browser on a device without a touchscreen or trackpad. However, at that time, I was using Chrome on a MacBook. I was scrolling to the bottom of the page using a trackpad when I discovered that my website was not working correctly. You can see what happened here:

Scroll bouncing in Chrome on macOS
Scroll bouncing in Chrome on macOS. (Large preview)

Oh no! This was not what was supposed to happen! I had set the footer’s position to be at the bottom of the page by setting its CSS position property to have a value of fixed. This is also a good time to revisit what position: fixed; is. According to the CSS 2.1 Specification, when a “box” (in this case, the dark blue footer) is fixed, it is “fixed with respect to the viewport and does not move when scrolled.” What this means is that the footer was not supposed to move when you scroll up and down the page. This was what worried me when I saw what was happening on Chrome.

To make this article more complete, I’ll show you how the page scrolls on both Mobile Edge, Mobile Safari and Desktop Safari below. This is different to what happens in scrolling on Firefox and Chrome. I hope this gives you a better understanding of how the exact same code currently works in different ways. It is currently a challenge to develop scrolling that works in the same way across different web browsers.

Scroll bouncing in Safari on macOS. A similar effect can be seen for Edge and Safari on iOS
Scroll bouncing in Safari on macOS. A similar effect can be seen for Edge and Safari on iOS. (Large preview)

Searching For A Solution

One of my first thoughts was that there would be an easy and a quick way to fix this issue on all browsers. What this means is that I thought that I could find a solution that would take a few lines of CSS code and that no JavaScript would be involved. Therefore, one of the first things I did, was to try to achieve this. The browsers I used for testing included Chrome, Firefox and Safari on macOS and Windows 10, and Edge and Safari on iOS. The versions of these browsers were the latest at the time of writing this article (2018).

HTML And CSS Only Solutions

Absolute And Relative Positioning

One of the first things I tried, was to use absolute and relative positioning to position the footer because I was used to building footers like this. The idea would be to set my web page to 100% height so that the footer is always at the bottom of the page with a fixed height, whilst the content takes up 100% minus the height of the footer and you can scroll through that. Alternatively, you can set a padding-bottom instead of using calc and set the body-container height to 100% so that the contents of the application do not overlap with the footer. The CSS code looked something like this:

html 
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;


body 
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  height: 100%;
  overflow: hidden;


.body-container 
  height: calc(100% - 100px);
  overflow: auto;


.color-picker-main-container 
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;


footer 
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;

This solution works in almost the same way as the original solution (which was just position: fixed;). One advantage of this solution compared to that is that the scroll is not for the entire page, but for just the contents of the page without the footer. The biggest problem with this method is that on Mobile Safari, both the footer and the contents of the application move at the same time. This makes this approach very problematic when scrolling quickly:

Absolute and Relative Positioning
Absolute and Relative Positioning.

Another effect that I did not want was difficult to notice at first, and I only realized that it was happening after trying out more solutions. This was that it was slightly slower to scroll through the contents of my application. Because we are setting our scroll container’s height to 100% of itself, this hinders flick/momentum-based scrolling on iOS. If that 100% height is shorter (for example, when a 100% height of 2000px becomes a 100% height of 900px), the momentum-based scrolling gets worse. Flick/momentum-based scrolling happens when you flick on the surface of a touchscreen with your fingers and the page scrolls by itself. In my case, I wanted momentum-based scrolling to occur so that users could scroll quickly, so I stayed away from solutions that set a height of 100%.

Other Attempts

One of the solutions suggested on the web, and that I tried to use on my code, is shown below as an example.

html 
  width: 100%;
  position: fixed;
  overflow: hidden;


body 
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;


.body-container 
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;


.color-picker-main-container 
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;


footer 
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;

This code works on Chrome and Firefox on macOS the same way as the previous solution. An advantage of this method is that scroll is not restricted to 100% height, so momentum-based scrolling works properly. On Safari, however, the footer disappears:

Missing Footer on macOS Safari
Missing Footer on macOS Safari. (Large preview)

On iOS Safari, the footer becomes shorter, and there is an extra transparent (or white) gap at the bottom. Also, the ability to scroll through the page is lost after you scroll to the very bottom. You can see the white gap below the footer here:

Shorter Footer on iOS Safari
Shorter Footer on iOS Safari.

One interesting line of code you might see a lot is: -webkit-overflow-scrolling: touch;. The idea behind this is that it allows momentum-based scrolling for a given element. This property is described as “non-standard” and as “not on a standard track” in MDN documentation. It shows up as an “Invalid property value” under inspection in Firefox and Chrome, and it doesn’t appear as a property on Desktop Safari. I didn’t use this CSS property in the end.

To show another example of a solution you may encounter and a different outcome I found, I also tried the code below:

html 
  position: fixed;
  height: 100%;
  overflow: hidden;


body 
  font-family: sans-serif;
  margin: 0;
  width: 100vw; 
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;


.color-picker-main-container 
  width: 100%;
  font-size: 22px;
  padding-bottom: 110px;


footer 
  position: fixed;

This actually works well across the different desktop browsers, momentum-based scrolling still works, and the footer is fixed at the bottom and does not move on desktop web browsers. Perhaps the most problematic part of this solution (and what makes it unique) is that, on iOS Safari the footer always shakes and distorts very slightly and you can see the content below it whenever you scroll.

Solutions With JavaScript

After trying out some initial solutions using just HTML and CSS, I gave some JavaScript solutions a try. I would like to add that this is something that I do not recommend you to do and would be better to avoid doing. From my experience, there are usually more elegant and concise solutions using just HTML and CSS. However, I had already spent a lot of time trying out the other solutions, I thought that it wouldn’t hurt to quickly see if there were some alternative solutions that used JavaScript.

Touch Events

One approach of solving the issue of scroll bouncing is by preventing the touchmove or touchstart events on the window or document. The idea behind this is that the touch events on the overall window are prevented, whilst the touch events on the content you want to scroll through are allowed. An example of code like this is shown below:

// Prevents window from moving on touch on older browsers.
window.addEventListener('touchmove', function (event) 
  event.preventDefault()
, false)

// Allows content to move on touch.
document.querySelector('.body-container').addEventListener('touchmove', function (event) 
  event.stopPropagation()
, false)

I tried many variations of this code to try to get the scroll to work properly. Preventing touchmove on the window made no difference. Using document made no difference. I also tried to use both touchstart and touchmove to control the scrolling, but these two methods also made no difference. I learned that you can no longer call event.preventDefault() this way for performance reasons. You have to set the passive option to false in the event listener:

// Prevents window from moving on touch on newer browsers.
window.addEventListener('touchmove', function (event) 
  event.preventDefault()
, passive: false)

Libraries

You may come across a library called “iNoBounce” that was built to “stop your iOS webapp from bouncing around when scrolling.” One thing to note when using this library right now to solve the problem I’ve described in this article is that it needs you to use -webkit-overflow-scrolling. Another thing to note is that the more concise solution I ended up with (which is described later) does a similar thing as it on iOS. You can test this yourself by looking at the examples in its GitHub Repository, and comparing that to the solution I ended up with.

Overscroll Behavior

After trying out all of these solutions, I found out about the CSS property overscroll-behavior. The overscroll-behavior CSS property was implemented in Chrome 63 on December 2017, and in Firefox 59 on March 2018. This property, as described in MDN documentation, “allows you to control the browser’s scroll overflow behavior — what happens when the boundary of a scrolling area is reached.” This was the solution that I ended up using.

All I had to do was set overscroll-behavior to none in the body of my website and I could leave the footer’s position as fixed. Even though momentum-based scrolling applied to the whole page, rather than the contents without the footer, this solution was good enough for me and fulfilled all of my requirements at that point in time, and my footer no longer bounced unexpectedly on Chrome. It is perhaps useful to note that Edge has this property flagged as under development now. overscroll-behavior can be seen as an enhancement if browsers do not support it yet.

Conclusion

If you don’t want your fixed headers or footers to bounce around on your web pages, you can now use the overscroll-behavior CSS property.

Despite the fact that this solution works differently in different browsers (bouncing of the page content still happens on Safari and Edge, whereas on Firefox and Chrome it doesn’t), it will keep the header or footer fixed when you scroll to the very top or bottom of a website. It is a concise solution and on all the browsers tested, momentum-based scrolling still works, so you can scroll through a lot of page content very quickly. If you are building a fixed header or footer on your web page, you can begin to use this solution.

Smashing Editorial
(rb, ra, yk, il)


Source:  

Scroll Bouncing On Your Websites

How To Build A Skin For Your Web App With React And WordPress

So you’ve trained yourself as a web engineer, and now want to build a blazing fast online shop for your customers. The product list should appear in an instant, and searching should waste no more than a split second either. Is that the stuff of daydreams?
Not anymore. Well, at least it’s nothing that can’t be achieved with the combination of WordPress’ REST API and React, a modern JavaScript library.

View the original here: 

How To Build A Skin For Your Web App With React And WordPress

Thumbnail

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

It’s Day 3 of Product Marketing Month. Today’s post is about discovering new use-cases for your products that can be useful for different functional users in your customer’s company. — Unbounce co-founder Oli Gardner

If you read the opening post of Product Marketing Month, you would have read about the concept of Productizing Our Technology (POT).

Productizing Our Technology
By taking our core tech, combining the available features, with new jQuery scripts, CSS, and some 3rd-party integrations, it’s possible to create a plethora of new “mini-products” that if embraced by the community, could inform future product direction.

When we created an initial list of product ideas, expanding upon what the base product can already do, I realized that — as we’ve moved from a single product to multiple — we’d not changed our perception of who the functional buyer persona is.

If you look at the table below, notice how product #1 is a standalone landing page used primarily for paid ad campaigns, but products #2 and #3 are designed to be used primarily on your website.

PRODUCT
#1 Landing Pages #2 Popups #3 Sticky Bars
Primary Use Case Use standalone landing pages to convert more of paid (AdWords) traffic. Use on website pages to convert more organic traffic. Use on website pages to convert more organic traffic.
Primary Persona Campaign Strategist Website Owner Website Owner
Secondary Persona Designer Campaign Strategist Campaign Strategist
Tertiary Persona Copywriter Web Designer / Developer Web Designer / Developer

Note: that for the personas listed, these are intentionally general, as it’s still part of our discovery. My goal is simply to show that they are most likely different.

We didn’t immediately realize that the teams using these products may not even be in the same department (marketing vs. web team vs. software development), for example. Or if they are in the same department (marketing), they might not work together on a daily basis.

This is a huge problem because it assumes that someone who runs paid campaigns is also going to be optimizing the organic traffic to a website, and is no doubt one of the reasons for low adoption of product #2 and #3.

A WTF Moment – How Could We Be So Blind?

When we talked to our customers and community members, we uncovered a startling fact: most people thought that the new products could only be used on Unbounce landing pages.

WUUUUTTTT! Not true.

Yes, you can, if you want. But the primary use case for the new products is for your website. We really didn’t see this misconception coming, which shows how important it is to always talk to your customers.

Who uses your products?

If you have more than one product, or if the users of your single product have different job roles, are you targeting and communicating with them in different ways? Or have you assumed that everyone will understand the same messaging?

Web developers are not very likely to be downloading an ebook about marketing, and thus will not be on our mailing list to hear about new products that could, in fact, make their job easier and more productive.

So, today, I’m going to share some of the functional use cases of popups and sticky bars that would be used by the UX and web teams that work on and manage your website. This is a very different market than we normally speak to, but super important as some of our research has indicated after the initial launch.

As I explore these use cases, try to follow along with your own products, to see if there are ways that you can create new mini products from the technology you possess.

Productizing Unbounce Technology
(Click image for full-size view)

Across the top (in yellow) are the core products, their features (such as targeting, triggers, display frequency), and the different hacks, data sources, and integrations, that can be combined to produce the new products listed in green in the first column.

To recap, each mini product is labelled as either NOW/MVP/NEW depending on how easy it is to create with our current tech:

NOW: These products are possible now with our existing feature set.
MVP: These products are possible by adding some simple scripts/CSS to extend the core.
NEW: These products would require a much deeper level of product or website development to make them possible. These are the examples that came from “blue sky” ideation, and are a useful upper anchor for what could be done.

The core technology is denoted as LP (Landing Pages), POP (Popups), SB (Sticky Bars).

In the table below you’ll find 25 of the ideas we came up with — that I selected from of a total of 121.

# Product Name Product Description Where Used Core Tech Core Features Extras
NOW: Can be built with existing features
1 Microsites By using the URL targeting feature, a single Sticky Bar with links to multiple Landing Pages can effectively create a microsite. Landing Pages LP + SB Targeting: URL
Trigger: Entry
N/A
2 EU Cookie Law Bar You’ve probably seen them all over the place. “All websites owned in the EU or targeted towards EU citizens, are now expected to comply with the law.” The EU has always been very strict and this requirement is why these bars have been popping up everywhere. Good news is, they’re wasy to make with geo-targeting. Website SB Targeting: Geo
Trigger: Entry
N/A
3 Two-Step Opt-In Form Instead of showing a lead gen form, you use a button or link that shows the form in a popup when clicked. This can help remove the perceived friction that a form conveys, and applies a level of commitment when the button is clicked that makes people more likely to continue and fill out the form. Website, Landing Pages POP Trigger: Click N/A
4 Cart Abandonment Use an exit Popup on your ecommerce product/cart/checkout pages to provide an offer to encourage a purchase. Website POP Trigger: Exit N/A
5 Multi-location GEO Redirect If you have websites for multiple countries, you can present the entry Popup that uses geolocation to ask if the visitor would like to visit the site in their own country. Website POP Targeting: Geo
Trigger: Entry
N/A
6 Poll/Survey Add a form to a Popup of Sticky Bar to present poll or survey questions. Website POP or SB Trigger: Entry, Exit, Scroll Down, Scroll Up, Delay N/A
7 NPS Survey Present a Net Promoter Score in a Sticky Bar to ask your visitors and customers to rate how likely they are to recommend your product or brand to others. Website, Landing Pages SB Targeting: None, Cookie
Trigger: Exit, Scroll, Delay
N/A
8 Outage Notification Present an entry Popup or Sticky Bar when there is site maintenance happening. SB or POP Website Targeting: URL, Cookie N/A
9 Tooltips Present a popup when someone clicks to show more info/instructions. Website, Landing Pages POP Trigger: Click N/A
10 Referrer Contextual Welcome Present a contextually relevant message to people arriving from another site. Website, Landing Pages POP or SB Targeting: URL, Cookie, Geo
Trigger: Entry
N/A
11 Co-marketing Contextual Welcome Present a contextually relevant message to people arriving from a campaign run by you and a comarketing partner. This could show the relationship (both logos) and the joint offer. Website, Landing Pages POP or SB Targeting: Referrer, URL, Cookie
Trigger: Entry, Scroll Up, Scroll Down,
Exit, Delay
N/A
12 Mobile GPS: Closest Store Present a Sticky Bar when someone on a mobile site would benefit from knowing where the closest store is to them (potentially with an incentive to visit the store). Website, Landing Pages SB Trigger: Entry, Scroll Up, Scroll Down,
Exit, Delay
N/A
13 Holiday Hours Announcement Show details of changes in store hours. Could be used on exit to provide some urgency “We’re closing in 1 hour”. Website, Landing Pages SB or POP Trigger: Entry, Exit N/A
MVP: Can be built with existing features
14 Sticky Navigation By removing the standard close button [x] from a Sticky Bar and adding smooth scroll anchor links, you can create a sticky navbar which can help increase page engagement. Website, Landing Pages SB Trigger: Entry CSS: Hide close button
Javascript: Smooth scroll
15 Mobile App-Style Navigation By placing a Sticky Bar at the bottom of the page (on mobile), using icons/text, you can create a mobile experience that looks and feels like an app. Check out plated.com on your phone as an example. Adding smoothscroll Javascript lets you use the nav to scroll up and down the page. Mobile Website, Mobile Landing Pages SB Trigger: Entry CSS: Hide close button + mobile only
Javascript: Smooth scroll
16 Mobile Hamburger Menu A hamburger menu is the three lined icon that opens up a navigation menu. They typically slide in and out from the left side or top.Check out a demo in the Unbounce Community. Mobile Website SB Trigger: Click jQuery: Slide in/out
17 Progress Bar Similar to a microsite, a progress bar could be targeted to appear on several pages. Using cookie targeting and CSS the progress bar could be updated to show which pages (steps) have been completed and which steps are remaining. Website, Microsite, Landing Pages SB Targeting: URL, Cookie jQuery: Set/Read cookies
CSS: Prev/next step visual state
18 “Maybe Later” Maybe Later is a new concept for ecommerce entrance popups that I will explore in depth on day 9 of Product Marketing Month. A large number of ecommerce sites have discounts/offers that show on arrival. This can often be a major disruption to the experience, even if the offer is of interest. The way ML works is that the popup would present 3 options: Yes/No/ML. If “Maybe Later” is clicked, the Popup closes and a persistent Sticky Bar appears at the bottom of the page to act as a subtle reminder of the offer – ready for when the visitor wants it. Website POP + SB Targeting: Cookie jQuery: Set/Read cookies, Log “Maybe Later” click
19 Video Interaction Offers Having a CTA embedded in a video is great, but it’s very limited in its ability communicate more than a few words.This product idea enables you to launch a popup when the video is complete, or when it’s paused, or when you’ve watched a series of videos. It’s seriously badass. Click here to visit a demo of this concept (created by Unbouncer, Noah Matsell). Website, Landing Pages POP Targeting: Cookie jQuery
20 End-of-video Talk to Sales Present a popup to someone who completes a video such as a demo. Website, Landing Pages POP or SB Trigger: Custom script jQuery
21 Sticky Video Widget You may have seen this on news blogs, where a video at the top becomes a smaller video stuck to the side or bottom of the window as you scroll. It’s a great way to ensure higher engagement with the video. Noah made a demo of a sticky video widget in the Unbounce community. Blog SB Trigger: Scroll CSS
22 Guided Tour Show a popup that begins a guided tour of the page/product. If you close it, the tour is over. If you click a next button it closes and a new popup is opened, positioned close to the feature it’s describing. Website, In-app POP Trigger: Click jQuery
NEW: Can be built with existing features
23 Ship it Faster By setting a cookie based on the shipping method on an ecommerce site, an exit Popup or Sticky Bar could be used to suggest a different shipping method (more expensive) to get it delivered faster. A smart upsell feature. Ecommerce Website POP or SB Targeting: Cookie
Trigger: Exit
Feature: Dynamic Text Replacement
jQuery
24 Out of Stock By setting a cookie based on stock availability on an ecommerce site, an exit Popup or Sticky Bar could present an email address field to ask if the visitor would like to be notified when the item is back in stock. Ecommerce Website POP or SB Targeting: Cookie
Trigger: Exit
jQuery
CSS
25 Sold Out: You Might Like By setting a cookie based on stock availability on an ecommerce site, a Popup or Sticky Bar could be shown that presents a set of recommended products related to an out of stock item. Ecommerce Website POP or SB Targeting: Cookie
Trigger: Exit
Feature: Dynamic Text Replacement
jQuery
CSS

As you can see, there are a ton of new use cases for the products, which are useful to a completely different set of functional users. Unless we do something to specifically target these new functional users, adoption won’t be our only problem, acquisition will be too.

How can you target different functional users?

Approach 1: Product Pages for Organic & Paid Traffic

One way to start validating these use cases is to create new product pages for them to see if you can attract some organic traffic. In our case, this would allow those searching for this type of product to arrive on our website where we may be able to demo the product as part of the experience.

Approach 2: Cross-Function Advocate Email Marketing

Another approach is to explicitly connect the different team members, through suggestive email copy. For instance, we could email our customers and educate them that our product can help others on their team – getting the conversation started. This has the benefit of communicating through an established brand advocate.

Prioritizing Product Development

One of our goals with POT is to gather insights into which new product ideas are in demand. There will without question be an increase in technical support questions based on the implementation requirements of these ideas, but I consider that a good problem to have. If there’s enough call for full productization, that’s a great way to increase adoption and the stickiness of our products.

How many new products could YOU build?

I’d love to hear in the comments how you can imagine doing this with your own software/products/services. Please jump into the comments and let me know. If you’re worried about your competitors stealing your ideas (I definitely thought about that when I decided on this approach – but I’m erring on the side of our core Transparency value), you could simply mention how many you think you could come up with, which is also very cool.

Now, everybody POT!
Cheers
Oli Gardner

p.s. Tell your web/UX teammates about this blog post :D

View original: 

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

From Idea To Reality: Designing An App With Sketch And Xcode

Everyone has an idea for a mobile app, from your mom to the guy you met in line at the grocery store. You might even be one of those people, if you are reading this tutorial. Building your own app really gives you the ability to create anything you can imagine. For some people, the idea is the easy part; when it comes to making it a reality, they have no clue where to start.

Read this article: 

From Idea To Reality: Designing An App With Sketch And Xcode