Finished my first web page, need some feedback please

[kevinSmith]

Hey,

Just finished my first web page that I built for a friend. (Technically I built one before, but I had no idea what I was doing.)

The design and color scheme is her choice (please don’t blame me for the color scheme )

Things of which I am proud:

• dynamically created header and footer in JS so I didn’t have to recreate it for each page
• gets the photo gallery info from a json file so it doesn’t have to be hard coded
• implemented someone else photo gallery/grid system
• dynamically loading Google mail info into JS so it can be written to the screen (this took forever to figure out, poor documentation)

Things that still need to be improved:

• make it look better on a cell phone
• dynamically load in youtube info, like we do for the photos, so it doesn’t have to be hard coded
• split some of the JS into modules (good chance to learn)
• put some of the constants into an ini file
• improve the location info on the calendar - perhaps parse out select info instead of entire address with just a link to the google map
• maybe pull some of the long text out of the html and keep it in a separate file for easier editing

Here is the site, and here is the code.

Constructive criticism is welcome. (Don’t blame me for the color scheme.)

[kevinSmith]

Thanks, it seems to be behaving weirdly if you link to it from another site. Is it using the linking site for CORS issues?

[kevinSmith]

OK, I think it was just showing me my cached data. I put a CORS proxy string in and checked it after clearing my cache and it seems to work. Let me know how it works for you.

Add that to the list of things I need to improve.

[kevinSmith]

Crap, now it won’t load properly when sent from my friends facebook post. WTF?

[cndragn]

Everything seems to be coming up for me…

I know nothing about CORS so Ill leave that alone lol but yeah, the colour scheme! If she specifically said she wants her website to be black, and those particular shades of blue and purple… Something I do when Im faced with strange colour combos is I look up wedding pictures. I did a search for purple, blue, grey wedding in google images, and tons of great colour schems, with complimentary shades of those colours came up. That I think is whats difficult about the current colours, they are not complimentary and the black is too black…also, theres not much cohesiveness…theres the shocking neon looking purple, but then all the text is this soft pastel purple…which is actually kind of hard to read on a dark photo background as well.

I know you probably dont wanna change up the whole scheme or anything, but that promo photo of her with the yellow and grey background is gorgeous… That would make a great main photo to base a design and colour scheme out of. And if shes really wild about purple, it would still work because yellow and purple are complimentary.

[kevinSmith]

Yeah, the CORS proxy was originally for accessing it on her page from my desktop. I don’t know why it is having a CORS problem when accessing the web site’s file from her own web site. I’m teaching lessons right now, but I’ll look into it when I get home.

[owel]

Agree with Candice…

Here’s what it can look like with that photo used on the homepage. Just a quick cut and paste.

(photo embed looks squished… don’t know why)

changed it from Rachel Turgoose - Bio
to just plain Rachel Turgoose

smaller font for “Vocals. Woodwinds…”

remove the street, city, zip from address
replaced with Map & Directions for those that don’t know where Bar Lamar is.

Change capitalization on RachelTurgoose.com ID on top left.

Added bkgd menu highlight for active page.

Less black on the background copy.

For mobile page, I guess you can break out that Event Calendar Box and show it immediately below the main photo.

[kevinSmith]

Yeah, like I said, the colors were her choice, chosen from a color combination web site.

Yes, originally I made it with the yellow background photo and a different color scheme that she liked that went with that. I really liked it but she decided that it was too much yellow. She selected this other color scheme so I wend with the darkened photos for the background.

[cndragn]

So unfortunate… what Owel put together is right up there with what I was thinking of design wise for a more elegant and inviting vibe, really love that picture.

But I know the feeling…Ive done projects with people who would not budge or be open to ideas so I just kinda threw up my hands and gave them whatever they wanted knowing threes no way I could include it in my portfolio. It happens.

[owel]

A more darker feel to it… smokey night club bar.

I just enjoy making website mockups.

[cndragn]

Even that looks so much better… just a different font face for the title but this is a total 180 design wise and looks super polished.

What do you use to put together your mock ups? Photoshop or something else?

[owel]

Using Photoshop, but any graphics program that have layer and opacity capability should work.

Agree about typeface… I just cut and pasted screenshots but I think there are several free options (google fonts, adobe typekit) to “upgrade” the fonts.

[kevinSmith]

Thanks for the detailed ideas.

changed it from Rachel Turgoose - Bio
to just plain Rachel Turgoose

Yeah, I was thinking about the book Don’t Make Me Think and trying to make navigation clear.

smaller font for “Vocals. Woodwinds…”

Yeah, I like that. I’ll probably do that once I figure out some other technical things.

remove the street, city, zip from address - replaced with Map & Directions for those that don’t know where Bar Lamar is.

Yes, I mentioned this was something I want to do. I just want it to be automatic so I’m going to have to figure out how to get that info from google maps. It’s on the list.

Change capitalization on RachelTurgoose.com1 ID on top left.

I guess that’s a style thing. I personally don’t like the look of it.

Added bkgd menu highlight for active page.

I do change the font-color of the menu item of the current location (with the exception of the home page.) I think that looks cleaner than changing the background color, but maybe you’re right. I’ll mention it to Rachel.

Less black on the background copy.

I’m not sure I understand.

For mobile page, I guess you can break out that Event Calendar Box and show it immediately below the main photo.

That would be a solution, since a table format will be harder to maintain. I may end up doing that.

Thanks for the input.

[kevinSmith]

Thanks again for the mock-up. I may show these to Rachel and see what she thinks.

With regards to the font, that was my choice. I was just looking for something that I thought matched Rachel’s personality. I wanted something a little playful without being gauche. Did I overshoot?

[kevinSmith]

Another thing I was talking to her about was getting putting some more text on the home page, an introduction, either above or below the calendar. If for no other reason, for SEO. But I’m starting to like the idea of a sidebar for the calendar, but I’ll have to find a way to parse the address first to make it shorter.

[owel]

Definitely need a more compelling text on her homepage for SEO.

but I’ll have to find a way to parse the address first to make it shorter.

I think displaying the whole address of the venue makes for a busy display…
What you can do is link that “Map & Directions” and show a modal window on a faded background when clicked.

If you want the ID all lower case, you can use a 2-tone color scheme.
Just so the first and lastname are easily obvious.
You don’t want people thinking her name is “racheltur goose”

I know you have her name on each page… but I think it will be better for search engines if you just say “About”, “Calendar”, “Photos”, “Videos” rather than “Rachel Turgoose - Calendar” <— which kinda doesn’t make sense for a page title.

Less black on the background copy.
I’m not sure I understand.

I guess it’s more just a personal preference.
< More Black - Less Black >

For the Youtube/video page, you can use a jQuery plugin for a video playlist. So there is a main area where videos will be shown and users can easily pick a “channel”

GitHub - bachors/jQuery-Youtube-Channels-Playlist: jQuery plugin youtube...

Anyway, just suggestions. Let me know if I’m being too much, I’m gonna butt out

[kevinSmith]

I think displaying the whole address of the venue makes for a busy display…
What you can do is link that “Map & Directions” and show a modal window on a faded background when clicked.

IC, so you’re relying on the summary field from the calendar data object (for example “RT Trio at Bar Lamar”) to suffice. That is a way to go. I was thinking of extracting just the details from either that address field or using some kind of google maps thing to extract “Bar Lamar, Austin” which would be clickable to lead to the map. That would free up the summary to be just about the gig. I’ve seen similar layouts on other musicians gig listings. But your solution would be easier. I do like idea of condensing it into a sidebar. But I definitely want to shorten the address portion. I was just trying to get something up fast, “agile” and all that. But that is definitely on my list of things to improve.

I know you have her name on each page… but I think it will be better for search engines if you just say “About”, “Calendar”, “Photos”, “Videos” rather than “Rachel Turgoose - Calendar” <— which kinda doesn’t make sense for a page title.

Perhaps. But it seems weird to me to have 6 pages all with the same title. I’ll have to think about that. And explore a little to see what others do.

If you want the ID all lower case, you can use a 2-tone color scheme.
Just so the first and lastname are easily obvious.

OK, that’s and excellent point. That goes on the list.

I guess it’s more just a personal preference. < More Black - Less Black >

IC, I guess I went dark so the text color would “pop” more. But maybe I’ll mess around with it.

For the Youtube/video page, you can use a jQuery plugin for a video playlist.

That’s a good point. No need to reinvent the wheel.

Anyway, just suggestions. Let me know if I’m being too much, I’m gonna butt out

No, not at all. You’re a guy with a lot of opinions (as am I) but I’ve gotten to know you well enough to know that you mean the best and to trust your advice. You’ve given me a lot of things to think about.

[kevinSmith]

Fixed my CORS problem. It was strange, with the CORS proxy string it worked locally and in the address bar, but when I linked from Facebook it didn’t work. I couldn’t get all three to work at the same time.

And I shouldn’t be using the proxy string anyway. The original plan was just to use it for local development. It didn’t even occur to me that there would be a CORS problem with a website loading its own file. (Still don’t understand that one - CORS drives me crazy.) After some googling and looking on SO, I tried some editing of the .htaccess file, but that didn’t do it. Finally wrote a php file I can call that will use a callback to read the correct file and return it. That seems to work fine. The code is:

<?php
$jsonp_callback = $_GET['jsonp_callback'];
$str = file_get_contents('http://www.rachelturgoose.com/img/gallery/gallery.json');
$json = json_decode($str, true);
echo $jsonp_callback . '('.json_encode($json).');';
?>

if anyone is curious. I’m still shaky on php so there may be an extra step in there. But it works fine now.

[Lauraleep]

I completely agree with cndragn. Great site but the neon colours are harsh and too hard to read and the background pics are too dark. Great pics, btw.

[kevinSmith]

Thanks for all the replies. I’ll integrate some of them in an alternate page and see if she likes them. I’ve mainly been focused on the technical aspects. But now I need to worry about the aesthetic considerations.

And for the last time: I did not choose the colors!