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

[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