[treeviews]

Welcome to treeviews--the show where you, the members, can submit your

work, websites, and apps to a panel of Treehouse teachers

to review and give you some tips and advice.

I'm Andrew. I teach JavaScript, amongst other things here.

I'm Allison, and I teach design.

And my name's Randy. I'm currently teaching PHP.

Let's take a look at this week's submissions.

[Andrew] We've had this website submitted by Jalil W. called The Zweiglein shop,

and it's a T-shirt shop.

[Allison] Let's go ahead and kind of start off first and talk about the front-end design.

It looks like here he is using Twitter's Bootstrap, so that definitely got him off

to a really good start. It's a really clean and user-friendly layout.

My only concern is in this top area where you don't even really know

what kind of product they're selling in his shop.

I think maybe some advice would be to include some pictures

of the T-shirts here in the top header area

instead of the script font in the background.

[Randy] Yeah, I think that's the logo, also.

I would probably rather see the logo up in the header.

[Allison] I agree. [Randy] In the top left there instead of on the background.

[Allison] Yeah, because it's a really nice logo that he's created there--

the script font--and I think just kind of putting it in the header would really

solidify the branding of the whole website and just create brand consistency.

[Andrew] Okay. I'm going to take a look at the code for a second.

At the bottom here, you've got some JavaScript,

and you're including all the JavaScript at the bottom of the file,

so well done for that.

And it says something about a carousel and, as you can see,

on the top there's no carousel or down here.

So, if you follow the pages to the product page,

I think this is the carousel.

When you're including JavaScript like this, it's best to include it

in an external file so that you're not repeating yourself on page to page.

It's just in 1 place, it's easy to maintain, and it will be downloaded

when you go on the home page, so when you go to the product page

it's already there for you to play around with.

[Allison] He could even think about integrating that carousel on the home page somehow.

[Andrew] Yeah, sure. Maybe featured T-shirts up here or even down here

on these T-shirts at the bottom.

[Allison] Yeah, because his product shots are really nice once you get into the

detail pages, so I think just maybe trying to find a way to include those

on the home page and really feature them as really nice, high-quality shots.

[Randy] One thing I'd add here is the title--all 1 blue and the description--

those aren't links to the product pages. I would definitely add those as links.

One of the things you can do with HTML5 is you can put an anchor tag or a link

around block-level elements, so you can have it around the divs and the paragraphs-

all just as 1 big link, and I think making all of that a solid link would

be a much better way there--just so you can click anywhere in that product

and get to the product details page.

[Andrew] Oh, wow. I didn't know that about HTML5.

That's cool.

[Allison] That's good advice.

Do we have anything else that we wanted to talk to him about this 1?

[Randy] I did want to take a look at the contact form, also.

Whenever you're accepting submissions from a contact form--

or a form of any kind--you definitely want to make sure to do some validation.

Just go ahead and click send. Leave those fields blank.

Even if you leave those fields blank there's no validation.

It might be better here to put some kind of script in place to check if the

email address is filled out or a valid form, or if there's a name or a message.

You might want to make all those fields required.

And the same thing happens in the footer, too, on that newsletter sign-up.

When you fill that 1 out, just click sign up there.

You don't get any kind of confirmation. It's hard to tell if you've been signed up or not.

It's using the same script, so I think it's just sending you an email--

or it's sending the site owner an email to let them know someone subscribed.

It'd be nice to get some kind of feedback.

[Allison] And I'm sure it would help minimize any spam that he's getting on his end, right?

[Randy] Yeah, definitely.

[Allison] Our next submission is from Samuel Bran. [samuelbran.com]

It's his personal portfolio, and we're going to start off first by talking about the

front-end design a little bit.

I really love the use of white space and the emphasis on typography.

I think he did a really good job. I really don't have anything to say about the typography.

But once you start kind of reading the language on his site

is when I start to have a little bit of feedback for him.

Up here at the top it says,"I am a Web designer & Front end developer."

I think just being careful about capitalization and choosing to either

capitalize everything in the sentence or just the first word in the sentence.

Because here he has web and front capitalized when they don't need to be.

[Randy] And I'd like to see front end hyphenated, personally.

[Allison] (laughing) That's just nit picking.

And also just when you start to look at the call to actions here--

suggesting that we watch the work--it suggests that it's going to be a demo reel

of some type. When you actually click on it it's just viewing the work.

I think being careful with how you word things and choosing to--

maybe view the portfolio, instead, would be a better choice of words.

[Randy] Yeah, there's a little confusion there.

There's a link in the navigation to 'portfolio,' and how is that the same or different than

watching my work? Is that a different section? Or is it the same content?

[Allison] Uh-hunh, so maybe just a little bit of consistency there.

[Andrew] Yep. And when we click through on the blog we see

that it's completely different to your website.

I wouldn't say completely because he's got the same blacks and oranges,

but it looks different. >>[Allison] It's just a different layout.

It almost feels like you're navigating to a completely different website.

[Andrew] Yes, so if you click on your name up there on the top-left,

it goes back to the blog's home page whereas you've got to click on main website,

and when you click on your name and are sent to here, it goes back to your webpage.

There isn't consistency in your menus crossing your blog and your personal website.

[Randy] I'd like to see the navigation actually be the same so that when you're on the blog

the blog is highlighted in red, but all the other links are still there.

[Allison] I agree.

[Andrew] Let's have a quick look at the code.

When we have a look at the source here, we can see you've done some really cool things

by including Facebook's Open Graphs where if you share the page--or if someone

coming across your site shares it--there'll be a description shown on Facebook itself.

And to maybe go back to an earlier point about the tone of your site--

is it a personal portfolio? Are people supposed to contact you for work?

Because if you say 'in love with the www.pixelperfectiontypography,'

that may not drive people to click on the share.

[Allison] The audience seems more like other designers versus an employer

or a client, for example.

I think carrying that through--since you were mentioning it--carrying that through

to the site and maybe having a stronger call to action on your website.

What do you want them to do after they've viewed your work?

Do you want them to contact you?

Do you want them to inquire about a project?

I think just being a little bit more clear about what you expect from the user.

[Randy] Yeah. Think about the footer, too.

At the end of your portfolio section, after someone views an example

from your portfolio, what do you want them to do when they get to the bottom?

There's not really a call to action there--though I do love the icon font.

That's a good plus there with font awesome. I like those for the heart.

But definitely you'll want some kind of call to action.

Do you want them to go to Twitter? View related projects?

Just think about what you want them to do at the end of that page.

[Allison] And while we're on the portfolio page for a second--

I notice that there's suddenly a green introduced into the site,

and I mean, as a designer that kind of threw me off a little bit because

there's no green or anything on the home page, and then suddenly

it's on the portfolio page, so I think just kind of trying to integrate that as a secondary color

throughout the site would make the overall branding a little bit more cohesive, too.

[Randy] Yeah, on the code, though, 1 of the things with the images there--

if you want to stay here and actually view that image--if you open that image in a new

tab you'll see that it's primed for retina displays.

I really like that--that you've got the images there twice as large as they're being

displayed, so on a retina display they'll look really crisp and sharp.

This particular image is a little bit large. It was 400K.

You might want to try using something like Smush.it, or maybe even getting the

quality of the image a little bit lower.

I tried dropping it down personally.

I got it down to about 300K, and it looked pretty much the same.

You've always got to juggle that, especially when you're doing large images for retina--

just to get that file size down.

When I visited this page--you can definitely see the image as it downloads.

[Andrew] Just talking about the code again.

If we view the source, as you can see here we've got jQuery included in the head

when all your JavaScript is at the bottom here.

So, the best thing to do is include your jQuery with your other script tags.

I also noticed this line on 121

where you include inline JavaScript.

When you're using jQuery, there's really no need to do that, so maybe bind a click handler

to this and execute this line of JavaScript in an anonymous function.

But other than that, it looks great!

[Randy] I also noticed that you do have jQuery installed on your site.

You may want to consider downloading that from a CDN--maybe Google's--

just so that that loads a little bit faster, and there's a chance a new visitor to your site

might already have that downloaded from Google CDN.

[Andrew] Good tip.

[Allison] Let's go ahead and move on to the next 1.

Our next submission is from Don Ricardo

of WR Oehlmann Home Improvements.

[Andrew] Cool. I don't know if you noticed that on bigger-resolution screens

your background repeats.

Having that centralized in the middle would stop that from happening

and doing it to no repeat.

It's good that you've got your telephone number so that people can get hold of you

immediately. >>[Randy] Though I think that's in the image.

I would definitely recommend having the phone number as text on the screen

so if someone's on a mobile device they can click on that

and it'll launch the phone app from their device.

[Andrew] Yeah, with HTML5 you can include tell as the protocol,

and it will open the phone app.

I also took the liberty to look at some of the JavaScript code.

Scrolling down to the bottom here, you've got jQuery included after

some of these plugins in the app JS, so if you're looking here it's looking for jQuery,

and if we go back to this form EJS, I don't know what it does, but it's looking for jQuery.

Because you're including that afterwards, it's highly likely that this isn't working whatsoever.

But good practices to keep everything at the bottom.

It's not always necessary to do the document-ready.

We've seen this a couple of times in the things that we've been reviewing

in that people are wrapping document-ready around the jQuery

when, if it's included at the bottom of the page, it's not necessary.

[Randy] This is another case where you'd want to put the JavaScript maybe in

an external file since I think this functionality is on every single page.

If you download that once then the browser will cache it,

and then they don't have to include that in the HTML on every single page.

It puts it in 1 place, and the user only has to download it 1 time.

[Andrew] And if you scroll to the top, you may spot something out of place.

It's this character F--this may cause unexpected rendering issues

in older versions of Internet browsers.

What I tend to do, especially when developing a new site,

I like to validate the URLs in the W3C validator just to make sure

that everything's in its place.

So, that's also a good place to get some best practices as well

because it says, oh, you shouldn't put this element here,

or there's a missing closing tag here, and so forth.

You can start to learn HTML through the validator.

[Randy] Yeah, and even putting a comment up above the doc type

can throw older versions of IE into quirks mode and break a page.

I've seen a number of people do that--they'll add a comment at the top

not realizing that it will actually change the layout of the entire page.

[Allison] Let's talk a little bit about the front end of that website.

I'd like to just give a few suggestions here.

Maybe using more professional shots in this main image area here

because if you scroll down he's got some really nice before and after pictures,

and that's really what you're selling, right?

You're selling your services, and I think some of the pictures that he chose

for the header are a little unprofessional to choose.

If you go to the 'about' page, I think just maybe trying to be a little bit more

professional with your choice of photography and remember that--

because this kind of suggests that maybe it's a personal site or something like that.

Just maybe choosing some more appropriate imagery would be my suggestion.

[Randy] Yeah, and get products up there.

Get people able to see your work right away because, like Allison said,

there is great work on the site. Get that to be the first thing that people see.

[Andrew] Maybe some testimonials or something like that.

[Allison] And just watch out for some little things here at the top of this logo.

It looks like there's some stretched imagery going on that says 'dream home.'

I'm not really sure what that's about, but just kind of keeping an eye on that kind of stuff--

just training your eye to see these different things,

and maybe you don't even need that blue imagery on the top.

Maybe it's just the logo because right now it's a little bit busy.

I do have a suggestion though as far as the 'contact us' page.

In the navigation, it almost suggests that it's going to be its own page,

but when you click on it, it actually is just an anchor that kind of brings you down

to the bottom of the page, so I think just being careful about what you're suggesting

to the user and what the user is probably expecting and what you're actually delivering--

just things to keep in mind as far as user experience goes.

[Randy] Does the 'about us' page do the same thing? Or is that a separate page?

[Allison] The 'about us' page and the 'contact us' page are essentially 1 page.

So, maybe just bringing that form up on its own page would fix the problem.

[Randy] You can definitely do navigation that drops down a page,

but I would keep it consistent--either have all the links drop you down

or have them all go to separate pages.

[Allison] Let's move on to the next 1 from Mark Gonzales.

He submitted his site Rocky Mountain Business Systems. [rmbs.com]

Okay, so let's go ahead and just start talking a little bit about the front-end design first.

I see that he used Twitter Bootstrap, which again, it sets you off to a really great start.

Nice type, nice white space, nice layout, so I think it's a really solid start,

but I'd like to see him take it a little bit further so that you couldn't really tell

that it was from Twitter Bootstrap because it's a bootstrap.

It's supposed to get you started, and I think just kind of integrating a little bit more

of the brand into the site would make it feel a little bit less like a template

and a little more personalized and customized to the client.

[Andrew] I've noticed when you click around to the various different pages

the logo jumps from being down here up to the top here.

[Allison] Typically I don't think it's very good practice to have it be jumping around.

I like for the logo to be stationary at the top of the nav.

It's really based on personal preference because then you'd have the logo duplicated,

so maybe it's just a matter of finding some other content for that header area.

Maybe it's like a little blurb about who Rocky Mountain Business System is.

That's just a little of my advice for that.

[Andrew] It's good that you've included the logos of each of the copier manufacturers,

but when we jump to some of these list pages, it sometimes isn't clear

or easy to quickly find what you're looking for.

They've all got black text, and it's nice that you can hover over and see these models.

I don't know if it would be better to have the images next to them

so you can see, ah, that's my printer,

and I can download the brochure about it.

[Allison] Or at least maybe some sort of indicator--like a little camera icon--

something that tells the user if they hover this is something that's going to happen.

You just want to always prepare the user for what's next,

and I don't think I expected--when I hovered over--for something to pop up.

[Randy] And just think about why that picture is there.

Is it something to help the user confirm that that's the right printer?

Are they going to scan this list looking for the picture?

Put yourself in a consumer's mind--someone who doesn't know all of the numbers

of all the printers by heart.

Are they going to know where their number is to be able to find it alphabetically?

Or how are they going to come look at the site?

I would probably imagine it would make sense to show the pictures here

and not have to wait for a hover--unless they will know what their number is.

[Allison] And if it makes the page too long to have the pictures of the scanners,

maybe break it up into subsections with the different brands because

there's no reason for someone with a Canon printer to see all these other brands.

I think just maybe making that process a little bit more of a process of elimination

and just making it a little bit more of a positive experience to search for their printer.

[Randy] Yeah, maybe have links right there under the main paragraph

that jumps you down to those 3 sections, or like you said, to another page--

just to make that easier to navigate.

[Allison] If you look in the very far column, there's a bunch of calls to action

to download, and that can get redundant in a very large list like this.

If anything, the hover would be appropriate for this so when you hover over 1 of your

columns here, maybe it highlights the whole row and displays the download button

or something like that--just some way of making it a little bit less redundant

throughout the list. You had something to say about the contact form, right?

[Randy] Let's talk about contact.

When you hover over contact, then you get to see these 3 different options--

place a service call, contact sales, and order supplies.

I imagine those 3 things are all very different and probably don't fit under the label 'contact.'

If I wanted to place a service call, I don't know that I would look under contact.

Those seem like really important calls to action for your customers

and potential customers.

Perhaps if you clicked on contact instead of having it drop down a navigation like that.

This is the only item in a navigation that has that.

You might want have that go to another page, or maybe have these 3 buttons

somewhere on the home page as separate calls to action for existing customers.

[Allison] Clicking isn't usually an action you expect to drop down to be displayed.

Maybe taking the contact--maybe there's a contact overview page where

it explains the difference between the 3 instead of forcing the user

to make a decision from the drop-down nav.

[Randy] The 1 good thing about it is that it doesn't rely on hover,

so it will work on touch devices, but it does feel like it shouldn't be a hover thing,

or when you click it should go to another page.

[Andrew] I think also it's important to know, with the type of customers that you may have,

they may be on a network or PC that has had their JavaScript disabled.

Many companies have stricter security policies than you do in your own home,

so this drop-down wouldn't appear anywhere to some of those customers.

And you'd have to dig around in the footer to get where you want.

Ideally, you'd want this to have a fallback to a contact page anyway.

[Allison] Or even just having a utility nav at the top where it actually lists the 3--

the 3 contact numbers.

Have the service call phone number, sales, and order just right there in the utility nav.

That would be a way to fix that.

[Randy] Go ahead and click on the contact form. Let's take a look at the form itself.

Scroll down and submit.

This 1 does have nice validation.

When you click on it, it's using JavaScript to detect the fields that are empty,

and it's giving you a nice error message right there in place so you know which

field has the error. If you then click on the next 1--or click submit here.

It will then go to the next 1.

It might be nice when you click submit for it to show you all the errors

so you can see that oh, these are all required instead of making it a challenge

where you have to get through 1 and submit and then get through the next 1 and submit.

Having a nearest location default to a value is a little questionable.

Is Santa Fe the most common selection?

Then perhaps it's okay, but it's usually better to make people pick an option there

instead of just defaulting Santa Fe.

You may get a lot of submissions where someone hasn't filled it out,

but you'll think it goes to Santa Fe, so maybe having a blank option

that says select as the first option would help that as well.

[Allison] I also notice when there's an error with the CAPTCHA it takes you to a

whole different page which-- >>[Randy] Finish filling it in.

[Allison] Does that mean that you lost all the information

you just typed into the form, too? >>[Randy] It depends on the browser.

I think most browsers today will keep that in its history,

but some browsers will wipe that out when you go back.

Click on that again, Andrew--on the submit.

One thing that might be nice here is to have a minimum height.

This is the same design but it feels a lot darker than the previous page

just because the footer is so big and the content area is so small.

I'd put a minimum height on there just so that when you do get to this page

it does look like the same design.

If there is some way to keep you on that last page, that would be better.

[Andrew] You could also embed the form again on this page so you're not having to

go back and refill everything in if you get the CAPTCHA wrong,

which is sometimes quite hard to do right.

Sometimes they think I'm a spambot.

[Randy] Anybody have anything else on this 1?

No? I think that wraps up another episode of treeviews.

Be sure to check the forum to see when we're looking for submissions again.

If you'd like some feedback in the meantime, you can share your website

or project on Twitter with the hashtag treeviews.

[Andrew] See you next time!

[treeviews] If you'd like your work reviewed on our next episode,

drop us a line at treeviews@teamtreehouse.com