Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Episode 4: Tips and Best Practices for Designing eCommerce and Information Websites
22:50 with Allison Grayce Marshall, Randy Hoyt, and Andrew ChalkleyIn this episode, Andrew, Allison and Randy review four Treehouse members' websites: an eCommerce website, a portfolio website, and two information websites. They discuss the branding, front-end design, development, and also give general feedback.
Websites Reviewed in this Episode
Jalil Wahdatehagh's eCommerce website for his T-Shirt company, shop.zweigle.in.
Samuel Bran's recently launched portfolio website and blog, samuelbran.com.
Don Ricardo's company website, WR Oehlmann Home Improvements.
Mark Gonzales submitted a website he designed for Rocky Mountain Business Systems, rmbs.com.
Submit Your Site to Treeviews
To have your website featured on our next episode, watch out for a post in the official Treehouse Forum. In the meantime, use #treeviews on Twitter and we'll give you feedback on your website or app!
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[treeviews]
0:00
Welcome to treeviews--the show where you, the members, can submit your
0:04
work, websites, and apps to a panel of Treehouse teachers
0:07
to review and give you some tips and advice.
0:11
I'm Andrew. I teach JavaScript, amongst other things here.
0:14
I'm Allison, and I teach design.
0:17
And my name's Randy. I'm currently teaching PHP.
0:20
Let's take a look at this week's submissions.
0:22
[Andrew] We've had this website submitted by Jalil W. called The Zweiglein shop,
0:24
and it's a T-shirt shop.
0:29
[Allison] Let's go ahead and kind of start off first and talk about the front-end design.
0:32
It looks like here he is using Twitter's Bootstrap, so that definitely got him off
0:36
to a really good start. It's a really clean and user-friendly layout.
0:41
My only concern is in this top area where you don't even really know
0:46
what kind of product they're selling in his shop.
0:52
I think maybe some advice would be to include some pictures
0:55
of the T-shirts here in the top header area
1:00
instead of the script font in the background.
1:03
[Randy] Yeah, I think that's the logo, also.
1:05
I would probably rather see the logo up in the header.
1:07
[Allison] I agree. [Randy] In the top left there instead of on the background.
1:09
[Allison] Yeah, because it's a really nice logo that he's created there--
1:13
the script font--and I think just kind of putting it in the header would really
1:17
solidify the branding of the whole website and just create brand consistency.
1:20
[Andrew] Okay. I'm going to take a look at the code for a second.
1:29
At the bottom here, you've got some JavaScript,
1:34
and you're including all the JavaScript at the bottom of the file,
1:38
so well done for that.
1:42
And it says something about a carousel and, as you can see,
1:44
on the top there's no carousel or down here.
1:48
So, if you follow the pages to the product page,
1:52
I think this is the carousel.
1:57
When you're including JavaScript like this, it's best to include it
2:00
in an external file so that you're not repeating yourself on page to page.
2:05
It's just in 1 place, it's easy to maintain, and it will be downloaded
2:12
when you go on the home page, so when you go to the product page
2:17
it's already there for you to play around with.
2:22
[Allison] He could even think about integrating that carousel on the home page somehow.
2:26
[Andrew] Yeah, sure. Maybe featured T-shirts up here or even down here
2:31
on these T-shirts at the bottom.
2:37
[Allison] Yeah, because his product shots are really nice once you get into the
2:40
detail pages, so I think just maybe trying to find a way to include those
2:42
on the home page and really feature them as really nice, high-quality shots.
2:47
[Randy] One thing I'd add here is the title--all 1 blue and the description--
2:51
those aren't links to the product pages. I would definitely add those as links.
2:55
One of the things you can do with HTML5 is you can put an anchor tag or a link
2:59
around block-level elements, so you can have it around the divs and the paragraphs-
3:03
all just as 1 big link, and I think making all of that a solid link would
3:06
be a much better way there--just so you can click anywhere in that product
3:10
and get to the product details page.
3:13
[Andrew] Oh, wow. I didn't know that about HTML5.
3:15
That's cool.
3:18
[Allison] That's good advice.
3:20
Do we have anything else that we wanted to talk to him about this 1?
3:22
[Randy] I did want to take a look at the contact form, also.
3:24
Whenever you're accepting submissions from a contact form--
3:26
or a form of any kind--you definitely want to make sure to do some validation.
3:29
Just go ahead and click send. Leave those fields blank.
3:33
Even if you leave those fields blank there's no validation.
3:36
It might be better here to put some kind of script in place to check if the
3:41
email address is filled out or a valid form, or if there's a name or a message.
3:45
You might want to make all those fields required.
3:49
And the same thing happens in the footer, too, on that newsletter sign-up.
3:52
When you fill that 1 out, just click sign up there.
3:55
You don't get any kind of confirmation. It's hard to tell if you've been signed up or not.
3:58
It's using the same script, so I think it's just sending you an email--
4:01
or it's sending the site owner an email to let them know someone subscribed.
4:04
It'd be nice to get some kind of feedback.
4:09
[Allison] And I'm sure it would help minimize any spam that he's getting on his end, right?
4:12
[Randy] Yeah, definitely.
4:15
[Allison] Our next submission is from Samuel Bran. [samuelbran.com]
4:17
It's his personal portfolio, and we're going to start off first by talking about the
4:20
front-end design a little bit.
4:23
I really love the use of white space and the emphasis on typography.
4:25
I think he did a really good job. I really don't have anything to say about the typography.
4:30
But once you start kind of reading the language on his site
4:35
is when I start to have a little bit of feedback for him.
4:40
Up here at the top it says,"I am a Web designer & Front end developer."
4:42
I think just being careful about capitalization and choosing to either
4:47
capitalize everything in the sentence or just the first word in the sentence.
4:50
Because here he has web and front capitalized when they don't need to be.
4:56
[Randy] And I'd like to see front end hyphenated, personally.
5:00
[Allison] (laughing) That's just nit picking.
5:03
And also just when you start to look at the call to actions here--
5:06
suggesting that we watch the work--it suggests that it's going to be a demo reel
5:11
of some type. When you actually click on it it's just viewing the work.
5:16
I think being careful with how you word things and choosing to--
5:19
maybe view the portfolio, instead, would be a better choice of words.
5:25
[Randy] Yeah, there's a little confusion there.
5:28
There's a link in the navigation to 'portfolio,' and how is that the same or different than
5:30
watching my work? Is that a different section? Or is it the same content?
5:34
[Allison] Uh-hunh, so maybe just a little bit of consistency there.
5:38
[Andrew] Yep. And when we click through on the blog we see
5:40
that it's completely different to your website.
5:46
I wouldn't say completely because he's got the same blacks and oranges,
5:50
but it looks different. >>[Allison] It's just a different layout.
5:55
It almost feels like you're navigating to a completely different website.
5:59
[Andrew] Yes, so if you click on your name up there on the top-left,
6:02
it goes back to the blog's home page whereas you've got to click on main website,
6:07
and when you click on your name and are sent to here, it goes back to your webpage.
6:12
There isn't consistency in your menus crossing your blog and your personal website.
6:17
[Randy] I'd like to see the navigation actually be the same so that when you're on the blog
6:23
the blog is highlighted in red, but all the other links are still there.
6:27
[Allison] I agree.
6:31
[Andrew] Let's have a quick look at the code.
6:33
When we have a look at the source here, we can see you've done some really cool things
6:36
by including Facebook's Open Graphs where if you share the page--or if someone
6:42
coming across your site shares it--there'll be a description shown on Facebook itself.
6:47
And to maybe go back to an earlier point about the tone of your site--
6:53
is it a personal portfolio? Are people supposed to contact you for work?
6:59
Because if you say 'in love with the www.pixelperfectiontypography,'
7:06
that may not drive people to click on the share.
7:12
[Allison] The audience seems more like other designers versus an employer
7:18
or a client, for example.
7:22
I think carrying that through--since you were mentioning it--carrying that through
7:25
to the site and maybe having a stronger call to action on your website.
7:28
What do you want them to do after they've viewed your work?
7:32
Do you want them to contact you?
7:35
Do you want them to inquire about a project?
7:37
I think just being a little bit more clear about what you expect from the user.
7:39
[Randy] Yeah. Think about the footer, too.
7:42
At the end of your portfolio section, after someone views an example
7:44
from your portfolio, what do you want them to do when they get to the bottom?
7:48
There's not really a call to action there--though I do love the icon font.
7:51
That's a good plus there with font awesome. I like those for the heart.
7:54
But definitely you'll want some kind of call to action.
7:59
Do you want them to go to Twitter? View related projects?
8:01
Just think about what you want them to do at the end of that page.
8:03
[Allison] And while we're on the portfolio page for a second--
8:06
I notice that there's suddenly a green introduced into the site,
8:08
and I mean, as a designer that kind of threw me off a little bit because
8:13
there's no green or anything on the home page, and then suddenly
8:16
it's on the portfolio page, so I think just kind of trying to integrate that as a secondary color
8:20
throughout the site would make the overall branding a little bit more cohesive, too.
8:26
[Randy] Yeah, on the code, though, 1 of the things with the images there--
8:30
if you want to stay here and actually view that image--if you open that image in a new
8:33
tab you'll see that it's primed for retina displays.
8:36
I really like that--that you've got the images there twice as large as they're being
8:39
displayed, so on a retina display they'll look really crisp and sharp.
8:43
This particular image is a little bit large. It was 400K.
8:46
You might want to try using something like Smush.it, or maybe even getting the
8:49
quality of the image a little bit lower.
8:52
I tried dropping it down personally.
8:54
I got it down to about 300K, and it looked pretty much the same.
8:56
You've always got to juggle that, especially when you're doing large images for retina--
9:00
just to get that file size down.
9:03
When I visited this page--you can definitely see the image as it downloads.
9:05
[Andrew] Just talking about the code again.
9:10
If we view the source, as you can see here we've got jQuery included in the head
9:12
when all your JavaScript is at the bottom here.
9:20
So, the best thing to do is include your jQuery with your other script tags.
9:23
I also noticed this line on 121
9:29
where you include inline JavaScript.
9:33
When you're using jQuery, there's really no need to do that, so maybe bind a click handler
9:38
to this and execute this line of JavaScript in an anonymous function.
9:43
But other than that, it looks great!
9:49
[Randy] I also noticed that you do have jQuery installed on your site.
9:52
You may want to consider downloading that from a CDN--maybe Google's--
9:55
just so that that loads a little bit faster, and there's a chance a new visitor to your site
9:59
might already have that downloaded from Google CDN.
10:03
[Andrew] Good tip.
10:06
[Allison] Let's go ahead and move on to the next 1.
10:08
Our next submission is from Don Ricardo
10:11
of WR Oehlmann Home Improvements.
10:15
[Andrew] Cool. I don't know if you noticed that on bigger-resolution screens
10:18
your background repeats.
10:24
Having that centralized in the middle would stop that from happening
10:26
and doing it to no repeat.
10:30
It's good that you've got your telephone number so that people can get hold of you
10:32
immediately. >>[Randy] Though I think that's in the image.
10:35
I would definitely recommend having the phone number as text on the screen
10:39
so if someone's on a mobile device they can click on that
10:43
and it'll launch the phone app from their device.
10:46
[Andrew] Yeah, with HTML5 you can include tell as the protocol,
10:49
and it will open the phone app.
10:54
I also took the liberty to look at some of the JavaScript code.
10:57
Scrolling down to the bottom here, you've got jQuery included after
11:03
some of these plugins in the app JS, so if you're looking here it's looking for jQuery,
11:09
and if we go back to this form EJS, I don't know what it does, but it's looking for jQuery.
11:15
Because you're including that afterwards, it's highly likely that this isn't working whatsoever.
11:23
But good practices to keep everything at the bottom.
11:30
It's not always necessary to do the document-ready.
11:34
We've seen this a couple of times in the things that we've been reviewing
11:37
in that people are wrapping document-ready around the jQuery
11:41
when, if it's included at the bottom of the page, it's not necessary.
11:47
[Randy] This is another case where you'd want to put the JavaScript maybe in
11:50
an external file since I think this functionality is on every single page.
11:52
If you download that once then the browser will cache it,
11:57
and then they don't have to include that in the HTML on every single page.
12:00
It puts it in 1 place, and the user only has to download it 1 time.
12:03
[Andrew] And if you scroll to the top, you may spot something out of place.
12:06
It's this character F--this may cause unexpected rendering issues
12:14
in older versions of Internet browsers.
12:19
What I tend to do, especially when developing a new site,
12:23
I like to validate the URLs in the W3C validator just to make sure
12:28
that everything's in its place.
12:34
So, that's also a good place to get some best practices as well
12:37
because it says, oh, you shouldn't put this element here,
12:42
or there's a missing closing tag here, and so forth.
12:45
You can start to learn HTML through the validator.
12:48
[Randy] Yeah, and even putting a comment up above the doc type
12:52
can throw older versions of IE into quirks mode and break a page.
12:55
I've seen a number of people do that--they'll add a comment at the top
12:58
not realizing that it will actually change the layout of the entire page.
13:01
[Allison] Let's talk a little bit about the front end of that website.
13:05
I'd like to just give a few suggestions here.
13:09
Maybe using more professional shots in this main image area here
13:13
because if you scroll down he's got some really nice before and after pictures,
13:18
and that's really what you're selling, right?
13:22
You're selling your services, and I think some of the pictures that he chose
13:24
for the header are a little unprofessional to choose.
13:28
If you go to the 'about' page, I think just maybe trying to be a little bit more
13:31
professional with your choice of photography and remember that--
13:36
because this kind of suggests that maybe it's a personal site or something like that.
13:39
Just maybe choosing some more appropriate imagery would be my suggestion.
13:43
[Randy] Yeah, and get products up there.
13:49
Get people able to see your work right away because, like Allison said,
13:51
there is great work on the site. Get that to be the first thing that people see.
13:52
[Andrew] Maybe some testimonials or something like that.
13:57
[Allison] And just watch out for some little things here at the top of this logo.
13:59
It looks like there's some stretched imagery going on that says 'dream home.'
14:05
I'm not really sure what that's about, but just kind of keeping an eye on that kind of stuff--
14:09
just training your eye to see these different things,
14:14
and maybe you don't even need that blue imagery on the top.
14:16
Maybe it's just the logo because right now it's a little bit busy.
14:19
I do have a suggestion though as far as the 'contact us' page.
14:22
In the navigation, it almost suggests that it's going to be its own page,
14:25
but when you click on it, it actually is just an anchor that kind of brings you down
14:29
to the bottom of the page, so I think just being careful about what you're suggesting
14:33
to the user and what the user is probably expecting and what you're actually delivering--
14:37
just things to keep in mind as far as user experience goes.
14:41
[Randy] Does the 'about us' page do the same thing? Or is that a separate page?
14:45
[Allison] The 'about us' page and the 'contact us' page are essentially 1 page.
14:49
So, maybe just bringing that form up on its own page would fix the problem.
14:52
[Randy] You can definitely do navigation that drops down a page,
14:57
but I would keep it consistent--either have all the links drop you down
15:01
or have them all go to separate pages.
15:04
[Allison] Let's move on to the next 1 from Mark Gonzales.
15:06
He submitted his site Rocky Mountain Business Systems. [rmbs.com]
15:10
Okay, so let's go ahead and just start talking a little bit about the front-end design first.
15:15
I see that he used Twitter Bootstrap, which again, it sets you off to a really great start.
15:19
Nice type, nice white space, nice layout, so I think it's a really solid start,
15:25
but I'd like to see him take it a little bit further so that you couldn't really tell
15:30
that it was from Twitter Bootstrap because it's a bootstrap.
15:35
It's supposed to get you started, and I think just kind of integrating a little bit more
15:37
of the brand into the site would make it feel a little bit less like a template
15:41
and a little more personalized and customized to the client.
15:45
[Andrew] I've noticed when you click around to the various different pages
15:48
the logo jumps from being down here up to the top here.
15:53
[Allison] Typically I don't think it's very good practice to have it be jumping around.
15:57
I like for the logo to be stationary at the top of the nav.
16:01
It's really based on personal preference because then you'd have the logo duplicated,
16:05
so maybe it's just a matter of finding some other content for that header area.
16:10
Maybe it's like a little blurb about who Rocky Mountain Business System is.
16:15
That's just a little of my advice for that.
16:19
[Andrew] It's good that you've included the logos of each of the copier manufacturers,
16:21
but when we jump to some of these list pages, it sometimes isn't clear
16:25
or easy to quickly find what you're looking for.
16:31
They've all got black text, and it's nice that you can hover over and see these models.
16:34
I don't know if it would be better to have the images next to them
16:40
so you can see, ah, that's my printer,
16:44
and I can download the brochure about it.
16:46
[Allison] Or at least maybe some sort of indicator--like a little camera icon--
16:49
something that tells the user if they hover this is something that's going to happen.
16:52
You just want to always prepare the user for what's next,
16:57
and I don't think I expected--when I hovered over--for something to pop up.
17:00
[Randy] And just think about why that picture is there.
17:05
Is it something to help the user confirm that that's the right printer?
17:07
Are they going to scan this list looking for the picture?
17:10
Put yourself in a consumer's mind--someone who doesn't know all of the numbers
17:13
of all the printers by heart.
17:17
Are they going to know where their number is to be able to find it alphabetically?
17:19
Or how are they going to come look at the site?
17:23
I would probably imagine it would make sense to show the pictures here
17:25
and not have to wait for a hover--unless they will know what their number is.
17:29
[Allison] And if it makes the page too long to have the pictures of the scanners,
17:34
maybe break it up into subsections with the different brands because
17:39
there's no reason for someone with a Canon printer to see all these other brands.
17:44
I think just maybe making that process a little bit more of a process of elimination
17:48
and just making it a little bit more of a positive experience to search for their printer.
17:54
[Randy] Yeah, maybe have links right there under the main paragraph
18:00
that jumps you down to those 3 sections, or like you said, to another page--
18:02
just to make that easier to navigate.
18:07
[Allison] If you look in the very far column, there's a bunch of calls to action
18:09
to download, and that can get redundant in a very large list like this.
18:14
If anything, the hover would be appropriate for this so when you hover over 1 of your
18:18
columns here, maybe it highlights the whole row and displays the download button
18:23
or something like that--just some way of making it a little bit less redundant
18:28
throughout the list. You had something to say about the contact form, right?
18:34
[Randy] Let's talk about contact.
18:38
When you hover over contact, then you get to see these 3 different options--
18:40
place a service call, contact sales, and order supplies.
18:43
I imagine those 3 things are all very different and probably don't fit under the label 'contact.'
18:46
If I wanted to place a service call, I don't know that I would look under contact.
18:53
Those seem like really important calls to action for your customers
18:57
and potential customers.
19:00
Perhaps if you clicked on contact instead of having it drop down a navigation like that.
19:02
This is the only item in a navigation that has that.
19:06
You might want have that go to another page, or maybe have these 3 buttons
19:09
somewhere on the home page as separate calls to action for existing customers.
19:12
[Allison] Clicking isn't usually an action you expect to drop down to be displayed.
19:16
Maybe taking the contact--maybe there's a contact overview page where
19:20
it explains the difference between the 3 instead of forcing the user
19:25
to make a decision from the drop-down nav.
19:28
[Randy] The 1 good thing about it is that it doesn't rely on hover,
19:31
so it will work on touch devices, but it does feel like it shouldn't be a hover thing,
19:34
or when you click it should go to another page.
19:39
[Andrew] I think also it's important to know, with the type of customers that you may have,
19:41
they may be on a network or PC that has had their JavaScript disabled.
19:46
Many companies have stricter security policies than you do in your own home,
19:52
so this drop-down wouldn't appear anywhere to some of those customers.
19:58
And you'd have to dig around in the footer to get where you want.
20:04
Ideally, you'd want this to have a fallback to a contact page anyway.
20:10
[Allison] Or even just having a utility nav at the top where it actually lists the 3--
20:15
the 3 contact numbers.
20:21
Have the service call phone number, sales, and order just right there in the utility nav.
20:23
That would be a way to fix that.
20:28
[Randy] Go ahead and click on the contact form. Let's take a look at the form itself.
20:30
Scroll down and submit.
20:34
This 1 does have nice validation.
20:36
When you click on it, it's using JavaScript to detect the fields that are empty,
20:38
and it's giving you a nice error message right there in place so you know which
20:43
field has the error. If you then click on the next 1--or click submit here.
20:47
It will then go to the next 1.
20:53
It might be nice when you click submit for it to show you all the errors
20:55
so you can see that oh, these are all required instead of making it a challenge
20:59
where you have to get through 1 and submit and then get through the next 1 and submit.
21:03
Having a nearest location default to a value is a little questionable.
21:07
Is Santa Fe the most common selection?
21:11
Then perhaps it's okay, but it's usually better to make people pick an option there
21:13
instead of just defaulting Santa Fe.
21:19
You may get a lot of submissions where someone hasn't filled it out,
21:21
but you'll think it goes to Santa Fe, so maybe having a blank option
21:24
that says select as the first option would help that as well.
21:27
[Allison] I also notice when there's an error with the CAPTCHA it takes you to a
21:30
whole different page which-- >>[Randy] Finish filling it in.
21:33
[Allison] Does that mean that you lost all the information
21:37
you just typed into the form, too? >>[Randy] It depends on the browser.
21:39
I think most browsers today will keep that in its history,
21:42
but some browsers will wipe that out when you go back.
21:46
Click on that again, Andrew--on the submit.
21:50
One thing that might be nice here is to have a minimum height.
21:52
This is the same design but it feels a lot darker than the previous page
21:55
just because the footer is so big and the content area is so small.
21:59
I'd put a minimum height on there just so that when you do get to this page
22:03
it does look like the same design.
22:06
If there is some way to keep you on that last page, that would be better.
22:09
[Andrew] You could also embed the form again on this page so you're not having to
22:12
go back and refill everything in if you get the CAPTCHA wrong,
22:17
which is sometimes quite hard to do right.
22:21
Sometimes they think I'm a spambot.
22:24
[Randy] Anybody have anything else on this 1?
22:26
No? I think that wraps up another episode of treeviews.
22:28
Be sure to check the forum to see when we're looking for submissions again.
22:31
If you'd like some feedback in the meantime, you can share your website
22:34
or project on Twitter with the hashtag treeviews.
22:37
[Andrew] See you next time!
22:40
[treeviews] If you'd like your work reviewed on our next episode,
22:42
drop us a line at treeviews@teamtreehouse.com
22:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up