850758 - research pros and cons for parallax scrolling on SEO and download flows

Status: RESOLVED WONTFIX

(www.mozilla.org :: Pages & Content, defect, P3)

Description

[Jennifer Bertsch [:jbertsch]]

Hi-

We are interested in possibly building off the work we did for the http://www.mozilla.org/en-US/firefox/partners/ site and explore using similar scrolling features to build the new "Firefox family page" - replacing the current consumer-focused Fx product pages on mozilla.org with a scrolling Firefox family page.

You can view preliminary work that Holly has done with Sean here:  http://cl.ly/0q321H3h1m2Z

I think some of the outstanding questions that remain are:

1.  How might this impact Fx desktop browser download?  The majority of downloads currently come from /new and /fx  Can these pages be incorporated into a parallax page and not lose their SEO value?

2.  If we decided to build /new and /fx into a parallax page, could they retain their URLs?

3.  Should we keep /fx and /new separate from the parallax user experience?  If yes, how should we architect the user flows?

Thx,
Jen

Comment 1

[Steven Garrity [:sgarrity]]

A few thoughts after having worked on the /firefox/partners site:

First, what is the goal we're trying to achieve? If that can be described well, then it is easier to evaluate if and how a long page with parallax scrolling would help achieve that goal. If we can't describe the goal, then we shouldn't be scrolling anything yet.

There also seem to be two key aspects of the /firefox/partners page that we have been generally labelling "parallax".

1. Single-page structure: First, there is the long single-page structure where major sections are scrolled through - rather than linking to separate pages.

2. Fancy scrolling effects: Second, there is the actual parallax scrolling effect (where elements scroll at varying rates to create a sense of depth.

These tend to go together, but don't necessarily need to.

If we did want to use a combination of the two for something like the Firefox Family site, I would recommend some changes compared to what we did for /firefox/partners/

* We should not load all content from all pages as a single large HTML page. This is slow, and and requires 'jumping' to an anchor point for sections other than the first page.

* Each section should have a distinct URL that loads only the contents for that page, with content/assets for other pages loaded on demand (or maybe after the original page has loaded. This method preserves the fast loading and search-friendliness of distinct pages/URLs, but can still provide a smooth/seamless transition between pages.

* Switching between major sections should be horizontal rather than vertical. Horizontal scrolling allows each 'page' to vary in height, and allows each 'page' to be positioned at the top of the view-port on page load. Vertical scrolling through section as used on the /firefox/partners/ page introduces a difficult initial page load when not on the first section, and can be complicated with sections varying height. For an example of horizontal scrolling of pages, see http://www.vizio.com/costar/overview

Comment 2

[Jonathan Petto [:jpetto]]

Steven's points above are spot on. I really think we should start where his comment starts - defining the goal.

Based on the PDF linked above, it looks as though the goal is to provide a more streamlined and cohesive browsing experience between all Firefox products. This sounds like a great idea to me, though I don't think vertical scrolling between products is the best option.

Can we get confirmation that that is indeed the idea driving this effort?

Using a horizontal style navigation would allow us more flexibility in individual product layout, allow easier use of distinct real URLs (which would improve/not harm SEO), both of which  would lower code complexity.

A horizontal navigation/lazy content load would make the sliver view/section cue (as described in the PDF) a bit more difficult. Perhaps we could provide a sliver view to the left or right, using the appropriate product icon instead of a sliver of the actual content?

If I had to chime in from a beginning prototyping perspective, I would follow Steven's lead and suggest something like the VIZIO page (http://www.vizio.com/costar/overview) as a starting point. Using products as navigation tabs, we could keep the product pages separate on the back-end while building a common shell for presentation.

Comment 3

[John Slater]

(adding Ty as well...Ty, definitely read through this thread when you get a chance)

Jon & Steven, thanks for the great feedback. Really helpful. To step back, the overall goal is to remake the Firefox website to reflect the current (and future) state of the product. In other words, the basic architecture of the site states back several years to when Firefox only existed as a desktop browser. Other products have been bolted on, but it's getting awkward and the upcoming FxOS launch presents an opportunity (and a need) to fix the situation.

In other words, now that "Firefox" is a desktop browser, a mobile browser, a mobile OS and an app marketplace, we need to make sure that the site reflects that by giving each product its own section within the larger site, but also by linking them together in some larger, more meta way. So, if a user wants to download desktop Firefox or learn more about it, they ought to have a completely self-contained experience within that section of the site...but, they also ought to be able to jump over to Firefox for Android and have a parallel experience there if they're interested.

As far as vertical vs horizontal scrolling goes, our initial thought was that the general framework of the MWC site would be an interesting starting point. It's of course not totally the same - there are a many other considerations around SEO, redirects, page load time, download flows, etc that the MWC site didn't have - but we like the idea of it.

That said, nothing is set in stone yet so we should continue discussing for sure. Given some of the thoughts from comment #1 and comment #2, I'd suggest having a meeting about this sooner rather than later. Would be a lot easier to talk through stuff rather than type it.

Comment 4

[Jennifer Bertsch [:jbertsch]]

I've scheduled a meeting for March 21.

Comment 5

[Holly Habstritt Gaal [:Habber]]

Everything said so far is spot on. I'd just like to add that we shouldn't approach this as a goal to make a parallax or animated site. (not saying we are, but want to make sure this is clear) With the MWC site we had a story to tell and adding the animation of the phone as you scroll down the page both allowed us to do this, while having a nice cue to get users to scroll. We could do a similar thing here with parallax and animation if it makes sense, but it is not a requirement to do so. If we add animation (possibly parallax) I would suggest keeping it subtle.

I would also add one big difference in this experience versus the MWC page which changes both the flow and some things on the dev side: Each section should be able to be entered independently. One way we discussed is appending a fragment identifier (ie: #FxOS) to the URL so that it can be independently reached via search. This also allows us to have vanity URLs that redirect to the sections and/or redirect any pages that that may be eliminated by creating this family page.

Comment 6

[John Slater]

+1 to everything Holly said.

Also, to clarify a bit more, the concept of this Firefox Family page (or series of linked pages) was more inline with the description of the single-page structure from comment #1 rather than the parallax-style fancy scrolling. The parallax worked for the MWC site because there was a thematic element (the phone) that tied all the screens together. In this case, we wouldn't necessarily have that, so it's more about creating the "one product family" feel that I described in comment #3.

Hope that makes sense.

Comment 7

[Jennifer Bertsch [:jbertsch]]

closing.  good conversation on march 21.

Comment 8

[Carla Dawson]

Hi Jennifer,
I know you closed this but I really think I have some information that is great. 

We noticed that 99% of Parallax Scrolling Sites do not do onsite optimization. As an SEO agency we wanted to challenge this and we did but creating an SEO Parallax Scrolling Website

You can see it here. www.posicionamientowebenbuscadores.com
We used parallax scrolling as a design concept to be applied to each URL rather than putting the whole website on one URL. 
http://www.posicionamientowebenbuscadores.com/blog/tutorial-seo-parallax-scrolling/

Here is a tutorial. It is in spanish but the graphics are pretty good. You should be able to get the gist.

Comment 9

[Carla Dawson]

(In reply to Carla Dawson from comment #8)
> Hi Jennifer,
> I know you closed this but I really think I have some information that is
> great. 
> 
> We noticed that 99% of Parallax Scrolling Sites do not do onsite
> optimization. As an SEO agency we wanted to challenge this and we did but
> creating an SEO Parallax Scrolling Website
> 
> You can see it here. www.posicionamientowebenbuscadores.com
> We used parallax scrolling as a design concept to be applied to each URL
> rather than putting the whole website on one URL. 
> http://www.posicionamientowebenbuscadores.com/blog/tutorial-seo-parallax->scrolling-espanol/
> 
> Here is a tutorial. It is in spanish but the graphics are pretty good. You
> should be able to get the gist.

Comment 10

[Carla Dawson]

HI Jennifer,
I posted the wrong URL above. Sorry. This is the correct one
http://www.posicionamientowebenbuscadores.com/blog/tutorial-seo-parallax->scrolling-espanol/

Comment 11

[Carla Dawson]

http://www.posicionamientowebenbuscadores.com/blog/tutorial-seo-parallax-scrolling-espanol/

Comment 12

[Carla Dawson]

Hi Jen,
Here is the tutorial in English I think you will find this SEO Parallax Scrolling tutorial helpful
http://www.seobuzzinternetmarketing.com/blog/how-to-create-a-parallax-scrolling-website-with-seo/


(In reply to Jennifer Bertsch [:jbertsch] from comment #0)
> Hi-
> 
> We are interested in possibly building off the work we did for the
> http://www.mozilla.org/en-US/firefox/partners/ site and explore using
> similar scrolling features to build the new "Firefox family page" -
> replacing the current consumer-focused Fx product pages on mozilla.org with
> a scrolling Firefox family page.
> 
> You can view preliminary work that Holly has done with Sean here: 
> http://cl.ly/0q321H3h1m2Z
> 
> I think some of the outstanding questions that remain are:
> 
> 1.  How might this impact Fx desktop browser download?  The majority of
> downloads currently come from /new and /fx  Can these pages be incorporated
> into a parallax page and not lose their SEO value?
> 
> 2.  If we decided to build /new and /fx into a parallax page, could they
> retain their URLs?
> 
> 3.  Should we keep /fx and /new separate from the parallax user experience? 
> If yes, how should we architect the user flows?
> 
> Thx,
> Jen

Comment 13

[Mike Alexis [:malexis]]

closing old Fx Family bugs. Started over for 2015: https://bugzilla.mozilla.org/show_bug.cgi?id=1122299