Jump to content


Photo

Semi-Urgent - University Project help

css jquery html

  • Please log in to reply
13 replies to this topic

#1 Tbows

Tbows

    Forum Newcomer

  • Members
  • Pip
  • 5 posts

Posted 04 December 2017 - 05:30 PM

Hey all,

So I'm extremely new to this website - this is my first post. I come to with a problem, well, more of a question.

Currently I'm working on my website for my final first year project for my web development course. I need to use JavaScript and jQuery (fine) but the problem I'm having is I don't even know where to start.

The outline of what I want to do is this:
- Single page design
- Each page is tabbed, like a folder, one behind the other
- Animated with JS / jQuery, e.g. as you hover over the tab it pulls it out a little and highlights it. That I can do myself or find out how to do with relative ease.

So, I'll include some pictures of my designs. Any suggestions as to what I should look into or research would be greatly appreciated - I'd prefer to learn than copy / paste so I'm only asking for advice (which I'm sure is what is expected anyway ahahaha). Anyway.

Have a great day and thank you for your time.

This is due for the 8th of January, as an idea of timescale.

http://imgur.com/9pRZD5r


#2 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,138 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 04 December 2017 - 05:50 PM

Ahoy mate. Best person here for this is rbrtsmith, legend with JS. Thinking here a little; is there scope for brown nose points? My idea would be to load the js library (e.g jQuery) and use a fall back for non js. If I was marking you i'd give muchos points for the finer detail. Secondly ensure it works in a responsive manner, again something you course no doubt briefly covered.



#3 Tbows

Tbows

    Forum Newcomer

  • Members
  • Pip
  • 5 posts

Posted 04 December 2017 - 06:14 PM

Hey there,

 

Appreciate the reply and I'll absolutely message him if you recommend it. Lmao there are definitely points for that, I'm pretty sure what I want to do is above what is being asked for anyway, but I want to use the site for my personal portfolio and use as well. Yes, responsiveness is a must and as I said I have my ideas for interactions, its just mainly no idea how to layer the content and the pages themselves the way I tried to show in my designs. 

 

Cheers



#4 robbydesigns

robbydesigns

    Designer

  • Privileged
  • PipPipPipPipPip
  • 1,406 posts
  • Gender:Male
  • Location:Plymouth, UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 04 December 2017 - 07:41 PM

Something like 'accordion' sounds like a good start: https://jqueryui.com/accordion/ 



#5 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,595 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 05 December 2017 - 06:34 AM

The outline of what I want to do is this:
- Single page design
- Each page is tabbed, like a folder, one behind the other
- Animated with JS / jQuery, e.g. as you hover over the tab it pulls it out a little and highlights it. That I can do myself or find out how to do with relative ease.

Is this something you want to do or have to do?

 

Either way the UX is very poor and won't work well on a mobile phone. Why not just got for something simpler like a one page scroller (vertical or horizontal) as this works far better on all devices.

 

It's also far less code and there are umpteen solutions you can disassemble and reuse. Even the best developers will copy and paste if the code is good.



#6 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,138 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 05 December 2017 - 09:13 AM

Either way the UX is very poor and won't work well on a mobile phone. Why not just got for something simpler like a one page scroller (vertical or horizontal) as this works far better on all devices.

 

I'd have to agree to a point here, the left three tabs will most probably cause click area issues by accidentally clipping the edge of the wrong one. Side nav would be ok but I would suggest maybe tabbing in one bar? This would save side space and the nav could be static or scroll it's length only, and the content could slide to point. You could play with the active state here as well which might be nice. Excuse the colours, just a mock ;)

 

Attached File  alternative.png   106.32KB   0 downloads


Edited by BrowserBugs, 05 December 2017 - 09:13 AM.


#7 Tbows

Tbows

    Forum Newcomer

  • Members
  • Pip
  • 5 posts

Posted 05 December 2017 - 09:33 AM

The main reason I don't want to do a single page scroller, unless I have to, is that it's a very gimmicky / over used designed that's become a bit of a trend to be honest.
I mean to be honest I probably will end up doing both in order to make it mobile friendly, it wouldn't be too difficult. So I'm not concerned about that.

But I do appreciate the concern, despite the lack of constructiveness in that criticism ;) It is honestly more I want to do it this way rather than of course I have to.


#8 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,595 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 05 December 2017 - 09:35 AM

But does it make the UX any better? What would happen if you want 10 pages or fewer tabs with long labels?

 

I get the idea and aesthetically it's quite pleasing for a nanosecond. After that it just becomes annoying.

 

If you don't want a scroller that's fine. But side tabs in any form disrupt the normal pattern of usage. There are no end of usability studies that show a traditional layout generally performs better than any other layout.


Edited by fisicx, 05 December 2017 - 09:40 AM.


#9 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,138 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 05 December 2017 - 10:02 AM

Sorry I'm a little confused - the op included;

 

The outline of what I want to do is this:
- Single page design
- Each page is tabbed, like a folder, one behind the other
- Animated with JS / jQuery, e.g. as you hover over the tab it pulls it out a little and highlights it. That I can do myself or find out how to do with relative ease.

 

if it's single page design then all the content would be available in one page; the tabs just anchor to an id?



#10 TimW

TimW

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • Gender:Male
  • Location:West Country
  • Experience:Intermediate
  • Area of Expertise:Nothing

Posted 05 December 2017 - 10:52 AM

Have a quick look here. It may be something like what you envisage:

https://codyhouse.co...anels-template/

goes mobile too.

 

TW



#11 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,595 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 05 December 2017 - 11:28 AM

Sorry I'm a little confused - the op included;

 

 

if it's single page design then all the content would be available in one page; the tabs just anchor to an id?

 

I agree. It is just a one page scroller - it's just that the method of accessing the content changes. My point was if you increase the number of tabs you soon run out of room on a small screen. The UX would be far better if you didn't use tabs.

 

There are some good (paid for) eye tracking tests that show how people use websites on a phone - and it's all about vertical scrolling. Sideways swiping is less intuitive (unless you are on tinder).

 

As a Uni project this might work but they will spend far too much time making it work on all devices when there are much simpler and more elegant ways to build a responsive one page site. Google has loads of examples.



#12 Tbows

Tbows

    Forum Newcomer

  • Members
  • Pip
  • 5 posts

Posted 05 December 2017 - 05:52 PM

 

I agree. It is just a one page scroller - it's just that the method of accessing the content changes. My point was if you increase the number of tabs you soon run out of room on a small screen. The UX would be far better if you didn't use tabs.

 

There are some good (paid for) eye tracking tests that show how people use websites on a phone - and it's all about vertical scrolling. Sideways swiping is less intuitive (unless you are on tinder).

 

As a Uni project this might work but they will spend far too much time making it work on all devices when there are much simpler and more elegant ways to build a responsive one page site. Google has loads of examples.

 

 

I mean I understand what you're saying and where you're coming from. But I'm literally including 4 pages? Also, as I said for mobile it wouldn't be difficult to convert it to a single page scroller as I need to have a backup anyway. Lol. I'm well aware of the examples and countless ways to do things but it seems to be honest you're not here to offer solutions to my problems but rather just criticize my design and lash out at people who are trying to help. Still, at least you are giving some form of input.



#13 Tbows

Tbows

    Forum Newcomer

  • Members
  • Pip
  • 5 posts

Posted 05 December 2017 - 05:52 PM

Have a quick look here. It may be something like what you envisage:

https://codyhouse.co...anels-template/

goes mobile too.

 

TW

 

Thanks! I check this out.  :santa_azn:



#14 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,595 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 06 December 2017 - 07:05 AM

I mean I understand what you're saying and where you're coming from. But I'm literally including 4 pages? Also, as I said for mobile it wouldn't be difficult to convert it to a single page scroller as I need to have a backup anyway. Lol. I'm well aware of the examples and countless ways to do things but it seems to be honest you're not here to offer solutions to my problems but rather just criticize my design and lash out at people who are trying to help. Still, at least you are giving some form of input.

 

Google for accordion scroller. There are plenty of examples you can use. This one for example just uses CSS: http://accordionslider.com/

 

The problem you may have is getting it to work properly is when the page contents are taller then the viewport. for example, if someone has a small tablet held horizontally. Or a wide screen where the content only fills the top part of the accordion.

 

Wasn't trying to criticize or lash out, I was just suggesting that there are simpler layouts you could use that would work equally well and be easily good enough to pass your exam. My nephew did the same two years ago for his uni course. I helped him build a simple minimalist site and he passed with flying colours.







0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users