Looking For A Few Comments On A Responsive Site

[kookoolarue]

Hey there! I used to be very active on this site when I was a freelance web designer, although I've been working full time in HTML email for the last three years or so and my skills have gotten... rusty. (also I have no idea what my old account was so I had to start a new one...) I have an opportunity to apply internally for a role with more wide-spread design work, both graphical and web. My old portfolio site was just links out to site that I did, many of which no longer look like what I made or have disappeared. So I very quickly threw together a responsive gallery this morning that is meant to be extremely simple and to the point. Please take a look and give me your thoughts:

http://bit.ly/1ggBxyA

 

This isn't a request for a portfolio review, although if there is something on there that you think is just atrocious you could pipe up, I guess. It's my first responsive site so hopefully it all works the way it's supposed to. I want it to stand on its own and I left out any kind of wordy biography or "welcome to my website" verbiage. I also made it with an eye towards mobile devices, with gestural suggestions etc... Let me know if you think it works! (The resume is a dead link for now while I finish it up...)

 

Thanks in advance!

[Andrea]

There's way too much white space there for my taste. I also expect a website to tell me right away what it's all about, yours does not. And I'd expect the portfolio samples to be links so I can look at the real thing.

 

Too bad you don't remember your old log-in info here - I've been around here for years and probably know you.

[kookoolarue]

There's way too much white space there for my taste. I also expect a website to tell me right away what it's all about, yours does not. And I'd expect the portfolio samples to be links so I can look at the real thing.

 

Too bad you don't remember your old log-in info here - I've been around here for years and probably know you.

 

Thanks for the comments. I'm a big white-space fan but maybe I went overboard. I'll play around. As for links, like I said, a good chunk of those sites either don't look like that anymore or have been changed in ways that don't represent my contribution. I'm ok with not linking. Also, this is purely a site that people would access from my resume or something like that so i don't need to worry about explaining it to random passersby, i don't think. But i could be wrong there.

 

What do you think of the responsiveness and of the overall experience of scrolling. I wanted to avoid lots of clicks and thumbnails and all that old stuff. It's kind of tablet and phone oriented in a way. (although I haven't been able to test in ie yet... Scary... )

 

And my old account wasn't that exciting. Mostly "why don't my rollovers work???"

Edited October 6, 2013 by kookoolarue

[falkencreative]

A couple comments:

 

DESIGN:

 

-- I agree that there's too much white space, thus leading to unnecessary scrolling. Specifically, I'm looking at the unnecessary white space that separates the navigation from the portfolio section of the page (with all the down arrows), and the spacing between portfolio items.

 

-- When viewed at smaller sizes, I would decrease the vertical space between individual portfolio items. It feels a bit strange at the moment.

 

-- When viewed full size on a desktop, the positioning of your name and navigation seems awkward. There's just too much empty space to the right. Instead, I would consider centering it.

 

-- I'd suggest making the navigation and your name different colors, to help the navigation stand out a little more.

 

-- If you are going to have just images of your work, and not link out to it, I'd highly suggest having some sort of slideshow or multiple thumbnails that when clicked, show a larger version. The single image doesn't do much to demonstrate skill, but showing multiple images would give a better impression. For example, take a look at http://wes.ly/ (a site I developed, though it isn't my portfolio). Basically, the more work you have, the better. A website is usually more than just one image.

 

-- The drop shadow on your name seems a little out of place with the rest of the site, since there are no other drop shadows used, and no other elements that add a sense of depth to the design.

 

-- Any reason why you are using a serif based typeface? Serif typefaces tend to make something feel a little old and dated when used online, and I'm not sure that's the impression you want to give off in your portfolio.

 

CODE:

 

-- You may as well use HTML5 doctype, rather than XHTML

 

-- Why are you using jQuery Migrate if you are using jQuery 1.4.3? It's really only intended for use if you are using old jQuery code that won't work in jQuery 1.9+?

 

-- You have a couple javascript errors that you should look at (jquery.js not found, and thus a "jQuery is not defined" error).

 

-- Why are you trying to include jQuery multiple times?

 

-- Why are you including jQuery code to scroll based on #top being clicked twice? The second instance may not work, since it isn't included within a $(document).ready() block.

 

-- I don't believe you need a clearing div in between each of your portfolio elements. Can't you add "clear:both" to your portfolio images, and add the spacing with either top margin on the images, or bottom margin on your text divs? The cleaner/less code you use, the better.

[kookoolarue]

Great, thanks for these comments. I was cobbling it together this morning (total development time so far has only been a couple of hours) so I have some unnecessary stuff in there for sure. I will simplify. I'll also think about including multiple images per project if possible. Still not sure about the whitespace being an issue, but I did just throw some mediaqueries in there to help with the header on smaller resolution devices...

 

edit: I just stripped out a bunch of the extra stuff and everything seems to be working and it all validates. Also, slimmed down the space between screenshots on smaller resolutions, tweaked the color to the arrows, did some other stuff. Man, I forget how much I love playing with code...

Edited October 6, 2013 by kookoolarue

[kookoolarue]

Alright! Made a lot of changes! Let me know what you think.

[Andrea]

It looks the same for me.

[kookoolarue]

It looks the same for me.

 

Is it caching? I did make a lot of changes earlier.

[kralcx]

I agree too much white space at the top of your site; otherwise I like your site. Since you are using a one page site make it a parallax site. Contrary to what many think you can have your cake (parallax) and eat it too (responsive). If interested check out Cool Kitten http://jalxob.com/cool-kitten/

[kookoolarue]

Thanks for the link. I'm going to think on elements that could make a cool parallax effect but, as you see, I'm trying to total simplicity so I don't want to shove something in for no reason.

 

I did pull some code off that site to make a more fleshed-out nav (in a test page for now: http://bit.ly/1ahtziD )

and also included some of Ben's additional feedback above. Thoughts?

[kralcx]

I noticed that your Contact and LinkedIn links at the top were not working for me

[kookoolarue]

I noticed that your Contact and LinkedIn links at the top were not working for me

 

Yeah, I was using a subdirectory just to test certain things but it was breaking other things. Try this: http://bit.ly/17xVtoE

[kralcx]

Just my suggestion, but your new demo no longer has the scrolling effect (I like the scrolling effect). Keep the scrolling effect and place your contact section at the bottom of your page so when someone clicks the Contact link it will scroll down to that section.

[kookoolarue]

Just my suggestion, but your new demo no longer has the scrolling effect (I like the scrolling effect). Keep the scrolling effect and place your contact section at the bottom of your page so when someone clicks the Contact link it will scroll down to that section.

 

huh, I'm using a new script and it's working everywhere I'm testing. What browser are you using? Thanks for checking...

[kralcx]

this link has the scrolling effect http://bit.ly/1ahtziD

 

this link does not http://bit.ly/17xVtoE

 

I'm using FF 24 Windows 7

[kookoolarue]

Weird. But thanks for pointing that out. I like the script that isn't working for you better but I'll go with what works. Here's yet another link with the working script for the menu (and, unfortunately, a different script for the arrows. ugh) plus an in-page contact form per your suggestion, which was a really good one: http://bit.ly/189aXUB

 

Testing it on all my devices... It works on Kindle! hehe

[kralcx]

looking good. The linkedin link isn't working for me. In the contact area, you may want to line up the blue boxes next to the email, phone, and subject fields. Also you should add some javascript to make sure the fields are filled in before someone hits the submit button.

[kookoolarue]

Alright, I've made tons of little changes, including your suggestions. If you feel like taking another look and confirming that they work let me know. Thanks for all your feedback. You are a gentleman and a scholar!

 

same link: http://bit.ly/189aXUB

Edited October 13, 2013 by kookoolarue

[kralcx]

the site looks good; I like the fixes you made to the contact section. The only other suggestion I would have is if you could place a small icon of an arrow facing up after each section that would take the user back to the main menu; it would make the UX better.

[kookoolarue]

the site looks good; I like the fixes you made to the contact section. The only other suggestion I would have is if you could place a small icon of an arrow facing up after each section that would take the user back to the main menu; it would make the UX better.

 

You know me too well! I actually made that and experimented with having it under each item and then as a sticky in the corner of the browser at all times (position:fixed) but removed it. Maybe I'll try just putting it after each section and see if it doesn't busy it up... Thanks again!

[kookoolarue]

Continuing to play around, I've been combining scripts I'm finding to make some improvements:

 

1) One scroll script for all the various scrolling (I had up to three different ones at one point)

2) Nav that collapses into the three-line icon below 700px

3) Contact form that takes on full width below a certain size

 

Here's the latest test version: SNIP

 

Planning to test on PC tomorrow but any thoughts in the meantime?

 

Edit: never mind, that scroll code is flickering on ios devices in an annoying way. This solves 2 and 3 but not 1: http://bit.ly/1a9hzD1

Edited October 21, 2013 by kookoolarue