close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

design/developing question for all

Thread began 12/29/2014 7:31 am by Christopher West | Last modified 12/30/2014 1:17 pm by Ray Borduin | 417 views | 4 replies |

Christopher WestCommunity Expert

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

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

Patrice

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...

Sign in to reply to this post

Patrice

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

Sign in to reply to this post

Christopher WestCommunity Expert

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

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...