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

Sign up for Treehouse

Episode 4: Tips and Best Practices for Designing eCommerce and Information Websites

22:50 with Allison Grayce Marshall, Randy Hoyt, and Andrew Chalkley

In 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!

[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 up