design/developing question for all

Hi all, I wanted to find out if it's possible in terms of a design point of view using HTML/CSS/AJAX/JQuery. The client is an Architech so design and functionality is crucial to what they want (they have designed a draft in Powerpoint). Basically they want it ONE page so that content transitions are smooth. And they want it responsive (and smooth on phones, tablets). They want a few parallax effects when scrolling down on some content and they also want sideways scrolling on some other content. Then menu navigation system will primarily be on a right side (transparent column that slides in and out of browser view) and content would scroll under this navigation. In terms of content there maybe something like 60 or so projects in their portfolio, so Im thinking something like AJAX to load in the content when needed. I've never done a website with this type of navigation before and wanted to know if its possible/viable on ONE page. (I guess the content would be still split into different files and loaded up via AJAX) but they want everything smooth transitions (fade transitions and sliding content transitions).

So is this possible with one page? (considering fades of backgrounds/content and sliding left/right animation of content as well as parallax scrolling of images on some parts, also popup boxes of content) Even with AJAX (considering the amount of code on one page) would it be too jittering rather than smooth?

Chris

It is possible, but a nightmare from an SEO perspective. AJAX can be used to load content dynamically into a single page if you aren't worried about SEO, but then getting direct links to content outside of the navigation and SEO content to load properly will be a bear. It is of course all possible, but highly technical and complicated.

I've recently gone down this path for one page sites, and responsive. The issue in the past was poor SEO, as Ray notes. However, my research indicates that if "sections" are used and h1 in each section, SEO is OK. A colleague ran some extensive testing on this theory and he was satisfied.

I have a couple of sites in play using one page set ups. I haven't tried the parallax effect yet due to viewing on smart phones, but I do have scrolling to sections on some of them.

Not all of these are live yet, but you can check out some attempts if you are interested.
http://spectrumdesignbuild.com
http://ddhdesign.com/2014NEWBASE.php (not live yet)
http://smart-candy-shopper.com/index.php (top page only, then leads into PowerStore)
http://michaelstadler.com (jumps not scrolls)

HTH

using php/mysql for content on pages...

This might help with the SEO issues: http://www.awwwards.com/seo-tricks-for-one-page-websites.html

Nice sites Patrice :)

Ray, I may have another developer building the core for me as Its something I never done before (I have done 1 page websites before and those are easy, but this project is very different). I'm going to make sure client understands the SEO concerns, I am sure they will understand as they do realize technology constraints.

Further to my initial description, I wanted to expand on it..The background will cycle automatically (smooth fade) through other backgrounds.
One the right hand side will be a "Menu" link and when user clicks on it a side bar slides from the right (above background and with 50% translucency). when the user clicks on a link inside this side bar then the side bar closes and the content is update. Even though I am using parallax content, its not on every section of content. so for example the homepage will contain a parallax background then displaying text under it. But its not like a traditional parallax one page layout where you can keep scrolling down to see all of the websites content. This is where it differs from that.

The main concern for client is smoothness of content fading and sliding in/out they want the website to be smooth on desktop as well as mobile devices. I'm wondering if something like Adobe Edge Animate is best for this type of project rather than dreamweaver. and then for the backend use dreamweaver/webassist extensions to create the admin stuff as they want it all content managed.

Chris