Scrolling Website With Changing Content

etangins

Member
I've noticed, looking at the Webby Awards for navigation and in general, that it seems dropdown navigation bars are on their way out and that the new style is to have scrolling pages like below with as simple and few links as possible in the navigation bar.

http://www.imagineourymca.ca/
http://www.bryantparkhotel.com/#!action=page&id=2876
http://www.interior-id.com/about/realisation
http://www.ifc.com/back-to-portlandia/#book
http://dangersoffracking.com/

I thought for my next website, it might make sense to try something along those lines, of course the less complicated the better. I would want the page to either scroll (horizontally or vertically), or be able to change what is displayed on the webpage, without having to go to a new page. Can anyone point me in the right direction?
 

chrishirst

Well-Known Member
Staff member
All "fine and dandy" PROVIDED;


You do NOT want people to 'bookmark' specific URLs (pages)

You do NOT want visitors from Search to land EXACTLY on the URL (page) they expected.

You do NOT want people to "impulse buy" whatever you sell.


These design 'tricks' and 'kewl' effects distract visitors from the very reason you probably want visitors in the first place. AND the "constant scrolling" effects are ABSOLUTELY HORRENDOUS when trying to find something important on a smartphone sized 'touch' screen.
 

chrishirst

Well-Known Member
Staff member
And number four (Saved 'til' last to insert a "pregnant pause"):



You do NOT want to track what URLs on your site are converting well (or poorly).
 

etangins

Member
These websites were given webby awards, surely they must be good. My website is an informational website teaching coding to middle schoolers. It's for a web design competition. Is it wrong to say most websites are getting rid of lengthy dropdown menus and instead incorporating more content on one page?
 

Phreaddee

Super Moderator
Staff member
Is it wrong to say most websites are getting rid of lengthy dropdown menus and instead incorporating more content on one page?

Personally I've never liked mega drop downs
besides it causes headaches on smartphones and devices.
 

ronaldroe

Super Moderator
Staff member
These websites were given webby awards, surely they must be good.

Have you ever watched an awards show like the Oscars? Go see a few movies in the theater and then watch the Oscars. You'll be pulling your hair out by the end wondering how the most god-awful movies got the awards they received.

The answer to why is simple and comes in 2 parts. 1.) The people deciding the awards are the same people who were receiving them several years ago. There's no science or numbers involved. The movies aren't judged by audience reaction or some actual discussion about the mechanics of what scientifically makes a good movie. 2.) These awards are no more than a way for people to pat themselves on the back.

How do you think Woody Allen wins awards for every horribly boring, goofball movie he puts out?

How does that translate to the web? The people deciding who wins a Webby are the friends of the people who've managed to get themselves put up for an award. Nominations aren't based on user reactions, actual conversion numbers, design metrics or usability. Again, just a way for people with low self esteem to pat themselves and their friends on the back.

So to answer your question, winning webby awards doesn't mean a site is good.

What should you do for your next site? Whatever works. Talk to people who are in your target market and see what they prefer. Build it out, let them try it, get their feedback and fix it. Run that cycle 2 or 3 times and see where you're at.
 

etangins

Member
My website is not actually for an official job. It's for a technology website competition. It's www.webmaster.tsaprotectandserve.com. The goal is to design a website teaching middle schoolers to program.

From what I've heard, my sidebar and dropdown navigation just seem to distract and confuse from the real highlight of the website, the content, so I was thinking to move the sidebar to the bottom as a footer, remove the current footer, and improve the navigation by switching from dropdowns to flat icons and having multiple pages be able to be put on one through scrolling. That way it functions more as a tutorial for website design.

Even if the webby awards don't have the most deserving websites, it still seemed there were some pretty cool and interesting designs (scrolling or switching content without going to a new page being the most popular), and since the website is being evaluated by design aspects, I thought that it might be a good idea. Otherwise, I think I would be forced to keep the dropdown navigation because I can't fit that many links another way.
 

ronaldroe

Super Moderator
Staff member
If you must go to a single-page setup, there's a way to do it that takes away some of the problems. The links need to be real. They need to go to real other pages on the site. Then, you can use JS to intercept the click action and "AJAX" in the content. This will help with search engine problems as well as give you an inkling of what pages are pulling people in, but it's a band-aid fix at best, and the analytics won't be even somewhat accurate. Still, it's "less bad" than throwing everything on one page and hoping for the best.
 

chrishirst

Well-Known Member
Staff member
These websites were given webby awards, surely they must be good.

Oh Please!!!!!

Have YOU ever 'voted' for one of the "Awards"?


Do you know anyone that has?????

No? Me neither.


Self-important, self-agrandising drivel. as Phreaddee says take such things as Hollywood awards, it's usually pretentious crap masquerading as "art" that gets awards.

Then there are "critical reviews" by "experts", I've always found that the best movies are the ones the 'critics' hated!
 

etangins

Member
If you must go to a single-page setup, there's a way to do it that takes away some of the problems. The links need to be real. They need to go to real other pages on the site. Then, you can use JS to intercept the click action and "AJAX" in the content. This will help with search engine problems as well as give you an inkling of what pages are pulling people in, but it's a band-aid fix at best, and the analytics won't be even somewhat accurate. Still, it's "less bad" than throwing everything on one page and hoping for the best.

All I'm really hoping to do is

A) find another navigation that's less cluttered, and making more content go on one page seems like a good way to do so

B) improve how I present the information/tutorials and I thought making more content go on one page would make the tutorial more effective than having to go to several other pages

Granted when I say making more content go on one page, I want it to still be as least cluttered as possible. Perhaps a page that doesn't necessarily scroll, but allows the user to change the background and information on the page with the click of an arrow, almost like a giant javascript image slideshow but instead of images, the whole page including divs, images, and text.

Forgetting the webby awards, maybe I was off on that, what would be the best tutorial or place to go to be able to do this (scrolling page or page that functions like a giant slideshow). Keep in mind, my target goal is to make a visually appealing and somewhat high tech looking tutorial.
 

chrishirst

Well-Known Member
Staff member
find another navigation that's less cluttered,
Use "tabbed navigation", though don't have them covering the whole page when the mouse cursor strays anywhere near the "hotspot", then they stay there until you finally manage to locate the minuscule "close (X)" link.

Tip for developers everywhere, if you really must have them hiding the content, make them appear with a click and have a "Tooltip" sized popout that says: "Click here for the full menu"
 

etangins

Member
I believe that's what I already have, except mine have the addition of dropdowns. Are you suggesting that I make all links initially visible tabs, because that would make my website look even more cluttered, unless I moved the links to the side or top of the page or something so they look like they actually pop out the side. Were you suggesting I make tabs within tabs for each subpage?

On another note, is there any viability to having a scrolling site, especially in a site centered around teaching web design in an artisitically pleasing fashion?
 

Phreaddee

Super Moderator
Staff member
there's at least 2 problems I see with your website.

1. The design is not in any way pleasing and it will continue to be a bad design even if you modify the menu.

Pick a font style and stick to it, there are too many on the site and it's distracting, also why have the social media bar twice? it's just annoying, I'd lose the one near the top, and downsize the one on the left.

2. you've not entirely thought out the UI/UX.

you need to take an assessment of the content you have and the content you desire to add in the future, and work out a better way to present that.
 

chrishirst

Well-Known Member
Staff member
Well!

Just been hunting through your earlier threads and posts, hoping to find a clue to where this website can be found and therefore seen to actually offer useful advice on, (didn't find one) BUT from reading some on your other questions I have deduced that you may have taken all the worst features from every "design fad" over the past twenty years or so and attempted to incorporate them all into every page on the site.
After a while I was expecting to find a thread/post asking on how to create the much loved rotating 3D 'e' that was used to "enhance" mailto: links once upon a time.
 

etangins

Member
there's at least 2 problems I see with your website.

1. The design is not in any way pleasing and it will continue to be a bad design even if you modify the menu.

Pick a font style and stick to it, there are too many on the site and it's distracting, also why have the social media bar twice? it's just annoying, I'd lose the one near the top, and downsize the one on the left.

2. you've not entirely thought out the UI/UX.

you need to take an assessment of the content you have and the content you desire to add in the future, and work out a better way to present that.

That is why I am restarting completely on the design. I am getting rid of all the social media stuff. The sidebar, I am making only available when you click an arrow to make it appear. I'm now trying to get rid of all containers and make it so all the content is put on the actual page without any borders around it. I'm removing the footer because I think it is not necessary, and I'm not using a banner because it is old fashioned.

Just been hunting through your earlier threads and posts, hoping to find a clue to where this website can be found and therefore seen to actually offer useful advice on, (didn't find one)

My website is at webmaster.tsaprotectandserve.com.

Right now I'm trying to fix all of the flaws of the site and I'm completely redesigning it from scratch. The one thing I am asking, since you all seem against having a scrolling site is how I can minimize the number of links, since we can all agree that dropdowns like mine are not the best or cleanest navigation. I still need to be able to link to all my pages though, so I either need to combine pages by making larger pages with scrolling, or find some new navigation that looks cleaner but can still link to all my content.
 
Last edited by a moderator:

ronaldroe

Super Moderator
Staff member
Having looked at your menu, I honestly don't see the problem. It isn't the ridiculous, unruly giant dropdown you made it sound like. The look of it is a bit wanting, but the functionality is fine.
 

chrishirst

Well-Known Member
Staff member
I agree with Ronald, and the reason it is "cluttered" is simply that it looks like it was designed on a 42" 4x3 monitor with no thought to how it would display on 'normal' sized monitors or laptop displays.

Using large blocks of dark colours is ALWAYS going to make it seem cramped, it's the same in interior decorating as well, high ceilings are often painted a darker colour than the walls to "bring them down" a bit.
'White space' is what is need to 'reduce the clutter' as it is mostly just an optical illusion

Reduce the border widths in the 'side bar' panels and the main container and make it close to the blue colour in the logo rather than being on opressive black.
 

chrishirst

Well-Known Member
Staff member
Errmmm Errr no,

Again you are going for "heavy" colours.

On the over-stretched JPEG, when creating graphic elements start BIG and use vectors not rasters or bitmaps
 
Top