Jump to content
Sign in to follow this  
Tbows

Semi-Urgent - University Project help

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ;)

 

post-36527-0-97702300-1512465214_thumb.png

Edited by BrowserBugs

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • By lcot
      I am on the search for a jQuery or even vanillaJS-based plugin that can replicate similar functionality to that of the 'FIND WHAT MATTERS' section of this web HOMEPAGE . It is the 'team grid' section where there are rows of responsive images, and a dropdown container beneath each row that contains dymanic content dependent on which 'accordian item' or image was clicked on.
      You can see a screenshot here: https://monosnap.com/file/M8zQInDm6d3IQ84QOb49Y0JqSlA78F
      The grid is responsive, shrinking from 8 per row, to 3 per row on mobile and the dropdown expands beneath the row of the image, no matter the screen size.
      Does anyone know of any plugin that can achieve this functionality, or am I going to have to develop this by myself?
      Thanks!
    • By Mario89
      I created my first website. Please tell me, what can I change and improve?
      http://mario89.smarthost.pl/
    • By rookie
      I’m very curious about this topic cause the definition of web designer is different from country to country, for example some countries define a web designer as a person who knows design and programing (Javascript and php etc).
       
      I wanna know where you are from and which language you need to be web designer like the following.
       
      Country   :  Japan
      Language:   HTML,CSS,*JavaScript, *wordpress 
       
       
      *As to JavaScript, you don’t have to know everything about it but at least how it works. 
        Plus you basically just need to know how to customize jQuery.
       
       I really wanna know to what extent I should learn JS or php if I need to learn them as web designer in some countries.
       
      Thanks in advance for your help ! 
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,982
    • Most Online
      4,970

    Newest Member
    froebeli
    Joined
  • Forum Statistics

    • Total Topics
      65,698
    • Total Posts
      452,924
×