Scrutinise the new site

[Shikkediel]

Hi all, when I set up my web domain a while back I only threw something rather ugly together in about an hour to have some kind of landing page. But lately I’ve put some more effort into it. Far from done but it’s at an acceptable basic level now. Or at least I think it is… so here’s where some feedback would be great. I’m looking for any details that could be done better so have no mercy if you like (as long as it’s constructive of course).

Thanks in advance. :-)

http://ataredo.com/

[Shikkediel]

One thing I realise is that there may seem to be an overuse of ids. But I like to be specific – and most of them are not so much meant for CSS but for jQuery. Plus there isn’t a whole lot of ‘generic’ content yet.

I’m sure there’s room for semantical improvement (let me know)…

For example, the #backdrop div could probably also be converted to a figure and the photo author credit to a caption. If it weren’t for the fact that <figcaption> has to be the ugliest tag known to mankind.

[Shikkediel]

There is a question I have – should I maybe let visitors somehow know that apart from the top menu, the page can be navigated by swiping (even with mouse) and scrolling (mousewheel) as well? Or is it already intuitive enough that they will do so automatically…

[randomdude]

About the scrolling – I scrolled down one page and thought that was all. I don’t think it’s clear enough that the user should scroll, you might want to add something like a scrollbar so it’s obvious that the user can scroll. Or maybe just make clicking something along the top menu do a smooth scroll.
Aside from that, maybe apply some hover effects on the top links?

[Shikkediel]

Thanks for the reply, Zeke. I’ll certainly think (a bit more) about a hover effect on the menu links, tried some things like using the same background as when they’re selected but that didn’t look so good. Maybe some nice (and subtle) CSS transition on the text itself will do.

I’ll also make it more clear that one can scroll to the sections. Can’t really do a smooth scroll because of the fixed header – I’ve added quite a bit of padding on top of the sections to get the anchor positions in the correct place when JS is disabled. These ‘buffers’ aren’t gonna look good when the scroll isn’t instantaneous…

Thanks again, appreciate the tips. :-)

[Shikkediel]

Added a scrollbar – or more of a level indicator because you can’t actually use it (yet?) to scroll the page. It’ll be a lot more subtle later on so it less resembles a regular bar. Thought it was interesting to do it with an :after pseudo element – the indicator itself is set as a background image (couldn’t get the svg to scale otherwise, tried to add it as pseudo content at first) and each section has it’s own image :

section:after {
content: "";
width: 15px;
height: 73vh;
position: absolute;
top: 17vh; /* below header and nav */
right: 0;
background-size: 100% 100%;
background-color: hsla(0, 0%, 10%, 1)
}

#portal:after {background-image: url(/image/bar_1.svg)}
#coding:after {background-image: url(/image/bar_2.svg)}
#graphics:after {background-image: url(/image/bar_3.svg)}
#about:after {background-image: url(/image/bar_4.svg)}

Example of an svg (the second level here, percentages turned out to be quite important for the best approach) :

<svg width="15" height="100%" xmlns="http://www.w3.org/2000/svg">

<rect style="opacity:0.1;fill-rule:evenodd;fill:#888888;" height="100%" width="15" y="0" x="0"/>

<rect style="opacity:0.7;fill-rule:evenodd;fill:#494949;" height="25%" width="13" y="25%" x="1"/>

Preloading the images with a $.get() to avoid flickering…

Nice or not really correct?

[randomdude]

It’s much easier to tell I can scroll now, but every time I see the scrollbar I try to click and drag it down, and I can’t.

The images seem to be loading OK, except the last one loads blurrily, waits a few seconds, then gets the full resolution.

I really like the animation of the CodePen logo, BTW!

[Shikkediel]

Thanks, Zeke. I’m trying to make the bars look a bit nicer at the moment. I’ll code some JQ for it as well to give it user interaction. Since they’re pseudo, there’s no way to manipulate them directly but I’ll make the area sensitive to mouse and tap. Haven’t decided yet to overlay a fixed div for that or calculate the surface dynamically. First thing seems easier but maybe semantically less correct.

The image at the bottom is an experiment with an animated blur-focus so that’s intended, lol. Don’t know if I’ll keep it that way though. But thanks for noticing.

:-D

Edit – if you like, just rip the code for the Codepen logo. ;-)

[Shikkediel]

As interesting an exercise as making that ‘scrollbar’ was (using pseudo elements have definitely grown on me lately), for user interaction I can imagine it to be confusing. So having a fixed header and footer, why not go for the whole shebang – made a fixed position <figure> on the right side instead this time around and the indicator itself is now draggable (even though momentarily it still has to be plugged into influencing the page offset, it does respond to swiping and mousewheel already).

Good insight about having to add a scrollbar, @Zeke Y.

[Shikkediel]

Custom scrollbar finished. :-)

I couldn’t for the love of code get it to work while using scrollTop(). There was some weird dynamic interacting with the mousemove (dragging the handle) that I could not get my finger behind. But instead of scrolling the page, with JS you might as well position <body> in the opposite direction with $('body').css('top', -anoffset). Nobody’s the wiser – and that did function alright.

The scroll could easily be shown continuously but that don’t look so good with the semi-transparent header and footer so the page switches to the next section instantaneously when the indicator has been dragged beyond a critical point.

Last thing to do would be to gently animate the indicator to a ‘full’ position when there’s no longer any focus on it (and it has been left somewhere in between sections, so to say).

Edit – oh yeah, you gotta be able to click on an empty part of the scrollbar to change sections as well of course (one more thing to do).

[randomdude]

Nice, the scrollbar is much better now :)

[Shikkediel]

Thanks, I do that feedback seriously. :-)

Code works nicely but I’m still curious why I couldn’t get it to function right with scrollTop(). Not that I’ll rewrite it because offsetting body itself has the advantage of browsers not remembering scroll position on page load (and then trying to get back to that position).

Reduced case of that

[Shikkediel]

Aside from that, maybe apply some hover effects on the top links?

Done as well, used a small plugin I wrote to do a background gradient fade. May still add a tiny CSS effect alongside it…

:-D

[Author]

Posts