Episode 5: Tips for Portfolio and Multi-Lingual Sites

[? music ?] 0:00 [treeviews] 0:02 Hey, everyone. 0:04 Welcome back to Treeviews, the show where you, the Treehouse member, 0:06 can submit your work or your project 0:08 to a panel of Treehouse teachers, and we'll give you some feedback. 0:10 Whatever you're looking for, we can help you out. 0:14 Let me introduce—or you guys will introduce yourselves. 0:16 I'm Dan Gorgone, marketing and business teacher here at Treehouse. 0:19 Hi, everyone. 0:22 Zac Gordon, WordPress teacher. 0:24 Hey, I'm Gil Hernandez. I'm one of the front-end design teachers here at Treehouse. 0:26 All right, let's jump right into it. 0:29 Our first submission comes from Danaan Clarke, 0:32 and that's pronounced Day-non. 0:34 That's what it says here on the website. 0:36 Danaan Clarke submits this. He says, "This is a simple portfolio website. 0:38 "It's my first website that I've built other than Smells Like Bacon, of course. 0:41 "I'd appreciate any feedback on the design, the code, or the user experience. 0:45 Other things I'd like to know are some of the dos and don'ts of a portfolio site," 0:49 which that's a great question, "and how to get a job as a junior front-end design guy." 0:53 These are all great questions, and I think Danaan is probably in a position 0:58 that a lot of the Treehouse members are in 1:01 where they are out there for the first time 1:05 building their first site, maybe just getting started 1:08 with some of the work that they're doing for other clients. 1:10 Danaan has put this site together, 1:13 and the first thing I can say is that this is a nice, simple design. 1:15 It's not too simple, like, "Geez, I wish there was a lot more here." 1:18 One thing that gets a little sparse is some of the space at the bottom. 1:22 If you go to a wider monitor, 1:26 you can see that there is some white space down there, 1:28 so the lack of a footer being there is one thing that I'll raise 1:31 as a potential—not necessarily a red flag, 1:35 but it's something you should probably have there, especially if you're on a mobile. 1:38 That's something that you pointed out 1:41 where if you're scrolling along on your iPhone or your Android 1:43 and you're looking at this site it would be nice to have something 1:46 that will jump you right back to the top. 1:49 Otherwise you've got to scroll all the way back. 1:51 Now, but this will look good on a mobile, which is nice. 1:53 My only other hesitation was here on the homepage 1:57 Simple + Useful Design, your tagline 2:00 dominates the space, and you do list some of your skills here, 2:03 which is good, but there is no call to action. 2:07 What I'm kind of missing here is really kind of the point 2:10 of why you put this site together. 2:14 Is it to promote the work that's in your portfolio? 2:16 Is it to generate some interest in yourself as a professional? 2:21 Like I want you to check out my portfolio, 2:25 here's a call to action for it, or I want you to contact me, 2:28 here's a call to action for that as well. 2:31 That's something that would be very easy to add, 2:33 and if people are at all interested, it can get them going in the right direction on your site. 2:35 Absolutely, and to add to that on the homepage, 2:41 it would be great to see some of your work right away 2:44 so once you land on the page you immediately start seeing some of his work, 2:47 because it is quite nice, and on top of that, 2:50 I'd perhaps maybe like to see the Skills section enhanced more, 2:53 maybe using icons and contrasting colors in the headings 2:58 and things like that, and on the code side of things, 3:02 on the front-end code, it's a nice use of the Bootstrap grid, 3:06 but I did notice in the HTML you are using things like paragraph tags 3:10 to add structure to headings and images. 3:16 And you're also using the presentational align attribute 3:21 to align images center and things like that, 3:25 and for example, below that here, this HR tag 3:28 is being wrapped by a div. 3:30 You can actually just leave that HR tag there and add that class span12 to it, 3:33 and it will work exactly the same way. 3:38 And I've actually noticed that in the mobile version, 3:41 if we can bring up the simulator here, I noticed that the content 3:46 in the portfolio page is sliding horizontally. 3:52 So if you press and hold and drag anywhere in there, 3:55 the content starts scrolling, and a good fix for that 4:01 would be to add an overflow X property 4:04 to the body and give it the value hidden. 4:08 That should take care of it, 4:11 and I did notice if you scroll down to the bottom here 4:13 in the JavaScript where you're loading the Bootstrap 4:17 that bootstrap.js file is missing. 4:21 It's a missing resource, so it's looking for something that's not there, 4:25 so if you don't need it, go ahead and delete that, 4:28 and that's one less thing your browser has to load or at least look for. 4:30 All right. 4:35 To come at this again with more of a content perspective, 4:37 one thing I do really like is how it's pronounced. 4:40 Very helpful. 4:43 I did notice, though, that it's a graphic, 4:45 and it would be really great to maybe have this as text or a bit higher resolution one, 4:47 because we could already see a little bit of pixelation 4:52 going on with that graphic right there. 4:55 I also think that it would be really great 4:59 for this really strong design to have a matching favicon. 5:02 You have a really strong use of red, 5:05 and this logo up here would I think be really good 5:08 to have something matching up in there, and not too hard to generate. 5:11 Let's go check out the bio page, 5:16 because that was one place I noticed 5:18 we could use a little bit more layout design with this, 5:22 because this bio page works really well 5:25 if we're coming onto the mobile device, 5:29 and we see this, and the text is centered. 5:32 But on the full screen here 5:35 it would probably be helpful to have this floated to the right 5:38 and then have the text a bit more present. 5:41 Now, this graphic here, I personally like it. 5:45 I think that "This is me" gives some personality and flavor to it. 5:48 If you're going to keep that, 5:51 I would suggest, though, that removing this blue color background 5:53 and having it either flat against the white, 5:57 or this color here is a little bit different 6:00 than this one here, so maybe having those match a little bit better. 6:04 The last thing here on this bio page is that this isn't really a bio. 6:10 It gives some good marketing speak and what you're interested in and your specs, 6:15 but what we'd be really expecting on a bio page is a bit more of a biography 6:19 about you, getting a little bit more personal. 6:23 If you don't want to get super personal with the site, 6:27 like this is my dog's name and this is what I like doing for fun, 6:30 then you can keep it more professional 6:34 but still have a bit more information about yourself. 6:36 And once again, it's a bit of a content dead end. 6:40 You get here. You have the picture, you have the text. 6:43 But there is no link to something else. 6:46 There is no call to action. 6:48 Now that you've learned about me, here's a contact link, 6:50 or now that I've talked about these projects that I like doing, 6:52 here's a link to those projects. 6:55 It's kind of like you go to this page, you scroll down, 6:57 all right, well, then I have to go back up to the navigation. 7:00 It should give them a nice, natural flow. 7:02 Yeah, and he was doing such a nice job of using the grid 7:05 in the other pages, so why not apply that same kind of structure 7:07 to the biography? 7:10 We could see it a bit on the portfolio page. 7:13 Now, this is something that we had talked a little bit about beforehand, 7:15 and we're not completely sure in this regard, 7:19 but you are using your own site as a portfolio piece. 7:21 And I've seen this done a lot, and sometimes it can be a good thing, 7:25 but sometimes it detracts away from your own experience and portfolio 7:30 if someone is coming here and saying, "Well, let's see, their most recent project 7:35 and some of their nicer work was their own site," 7:38 so the site should probably really speak for itself 7:41 and not using this in the portfolio. 7:44 I also noticed that content-wise we could probably have 7:47 a bit more explanation here, maybe some text floated to 1 side 7:50 and the graphic on another. 7:55 It's really good to talk about what was the problem I faced, 7:57 how did I solve it, what skills were necessary, 8:00 and then that call to action right there. 8:03 If you are looking for work like this, 8:05 get in touch with me, and I can help you out with that. 8:07 [Gil Hernandez] Some good case studies in there. 8:10 And perhaps why not link some of those skills listed on the homepage 8:12 right to those parts of the portfolio site. 8:15 Bring them directly there. 8:17 Logo design, linking right there to the logo. 8:19 We want to see more. It looks good.>>Yeah, indeed. 8:21 Definitely off to a great start, and we're encouraged. 8:23 Gil did mention this. 8:27 I don't know as much about the specific CSS fix, 8:29 but we could see, though, that this major header on some of the pages 8:31 is getting cut off right there. 8:35 I don't know. You mentioned earlier some of that. 8:38 [Gil Hernandez] Thanks for bringing that up. 8:40 Just pay attention to the font sizes on there and the headings. 8:42 You can easily either adjust it with some paddings 8:46 or reduce the font size a little bit, but some of them are getting cut off, 8:49 as you can see here in My Portfolio and in Biography as well. 8:52 And that's something that I think is a lesson for all of our students, 8:57 whether you're beginners or more experienced, 9:00 is that if you do have a portfolio site out there 9:03 you can't assume that people are just going to be looking for designers on a laptop. 9:06 It may be a spur of the moment thing. 9:10 It may be in a business meeting or meeting someone at a coffee shop 9:12 saying, "Oh, check out this designer. 9:15 He designed for such and such. Check out his site right now." 9:17 But then when you do, there are some things there 9:20 that don't look as good as they could. 9:22 Always anticipate that. Make sure to test it on an iPhone or a laptop. 9:24 And then you end up with a great site. 9:28 Now, speaking of a great site coming up, we have our own John Locke. 9:31 He's one of the moderators on the Treehouse forums. 9:34 You've probably seen him there. 9:37 His website, Lockedown Design, 9:39 is the one that he submitted to us. 9:42 He writes, "The goal for this site is to generate leads and business 9:44 "and also inform clients and people within the design community 9:48 "about trends within design, how to get the most out of this site, 9:51 "how to have a good project, and how to govern your site content once you have it. 9:55 "Any input on the design content or storytelling 9:59 would be appreciated." 10:02 Well, coming here right off the bat, 10:04 it's a nice, professional design, so that's a great thing, John, right there. 10:08 It mentions the specialty and the purpose of the site. 10:13 You can see that clearly this is about design 10:17 and about multiple devices, and right here with the copy 10:21 it's not a lot to read. 10:26 It's pretty simple. It gets right to the point. 10:28 It's great that you get right down to that. 10:31 A couple things. Oh, the portfolio had some great descriptions in there. 10:33 When you include different pieces 10:38 in your portfolio, whether it's the work page 10:41 or portfolio or clients, whatever you want to call it, 10:44 definitely have some really positive experiences in there. 10:47 There were some really good ones here. 10:50 I know that—actually, the one above this one, 10:53 if we can scroll back up, 10:55 this one here, the green one, it looks like a good design, 10:57 and you describe these are the key things that we worked on here, 11:01 but in the description of it, I know that the project 11:06 was described as like, "I did this on the side" 11:09 or as, "When I had some free time" or something, 11:13 and that's fine. 11:17 I would try to keep the verbiage as professional, as high level, 11:20 high quality as you can. 11:27 The words that are used, the copy that's used sometimes, you don't want to mislead people. 11:29 You want everything about it to be positive, 11:34 lessons learned, challenges overcome, things like that. 11:36 The couple things that I saw here 11:40 from a content point of view, if we go back to John's site, 11:43 the blog, one of the goals here that you mentioned in your letter 11:49 is that you want to have a lot of current information about design, about the industry. 11:53 When I click through to the blog to see what you've been writing about, 11:58 the last update is almost 2 months ago now, 12:01 so that's something where—blogs are tough. 12:06 You've either got to keep them going, or you have to cut your ties. 12:10 I do see that over on the right-hand side you have the most recent tweets that you've done, 12:14 and so if you're active on Twitter, which is certainly a lot easier, 12:20 then that's fantastic. 12:23 If the blog is not getting the attention that it needs, though, 12:25 you do have to make a decision about whether to keep it up there. 12:27 The older that thing is, the more of a hassle it can be. 12:30 It can be sort of a black mark against your content. 12:36 Now, if it means that you're just updating once a month, that's fantastic. 12:39 That's fine. 12:43 If people can look at your blog and see that you've been updating it on a regular basis, 12:45 even if it's just once a month, then that's totally cool. 12:47 Let's see, the newsletter call to action. 12:50 If we go up here, right here, "Subscribe to my Email Newsletter." 12:52 And then you describe what subscribers get, 12:57 and you say it's a weekly thing. 13:00 If I'm looking at the blog and I see it hasn't been updated a lot 13:02 and then I see this and I see that you're offering weekly content, 13:05 I wonder what am I missing here? 13:08 Shouldn't there be more content in the blog? 13:12 What exactly are people getting? 13:14 Right there I think a sample, a link to a sample newsletter, 13:16 would be helpful to give people a taste of what they would get. 13:20 There is plenty of stuff here. The portfolio is in great shape. 13:25 There is a lot of great stuff that you worked on. 13:28 Absolutely, some very good suggestions, Dan. 13:30 Right off the bat, I noticed that on the homepage 13:33 this main image right here. 13:37 It's a little overwhelming. 13:39 I mean, it's good that you're able to build and adapt 13:41 for all these kinds of devices, but maybe show 2 or 3, 13:44 not necessarily 5. 13:48 The image is also a little too large. 13:51 You might want to optimize that, and also below in the footer 13:53 I notice you might want to use some contrast 13:57 to differentiate the headings from the text below and things like that. 13:59 I also noticed that the transitions in the navigation are quite nice. 14:05 There is a nice balance of CSS transitions throughout the site. 14:11 But you need to pay a little bit more attention to some of the details, 14:14 like for example, if, say, you hover over Home, 14:18 you'll see the box shadows or inner shadows load first 14:22 and then the transition, and on mouse out 14:27 it gets squared again, and you see what's going on there? 14:31 The same with the logo, so I'm not sure if that's exactly the effect you're going for. 14:35 If it's not, you might want to go in there and adjust that. 14:38 But it's still looking good. 14:41 I like the transitions in the footer as well. 14:43 These are nice and soft. 14:45 I also notice that the page time is a little slow. 14:48 At times it exceeds about 2½ seconds, 14:51 which you might want to pay attention to that. 14:54 There are also some assets missing. 14:57 If you take a look at the source code, 15:00 some of your JavaScript files are missing. 15:04 I believe it's script_1.js, so again, 15:06 the browser is looking for that asset, but it's not there. 15:09 Remove it from your source code, and that's one less thing, 15:12 and other than that, everything looks good in mobile. 15:16 There is one thing, though. 15:20 If you take a look at the contact page 15:23 and you reduce the browser width here, the same thing happens on mobile. 15:26 You'll notice that the fields are breaking in the layout there, 15:31 so you'll want to pay attention to that. 15:36 They're extending beyond the viewport, 15:38 and the same thing happens for the headings. 15:40 Let's go to About. 15:43 Again, you can see the lag in the load time there. 15:46 Let's go to Work. You can really see that there. 15:51 There we go. 16:02 So if I reduce the screen width, 16:04 you can see some of those headings. 16:07 See, there is one of them, for example, 16:09 this ConsultingByCourtney poking out of the viewport. 16:11 Things like that. You can adjust the font sizes with media queries and things like that. 16:15 But other than that, nice job, John. 16:18 First, I want to say again a shout out to John for being awesome on the forums. 16:21 It's definitely a huge help. 16:26 Anytime I go in to answer a question 16:28 and we've been on a weekend or just out for a day, 16:30 then it's really cool to see you posting up, and I really appreciate you out there. 16:34 We know that this is a WordPress site, 16:38 and one of the easy ways to tell when it's a WordPress site 16:41 is you add wp-admin to the end, 16:43 and you can see we have our WordPress login page here. 16:47 That's neither a good or bad thing except that we know 16:52 that we're working in WordPress. 16:55 A few little WordPress theme-specific things here. 16:57 If we pop into the source code, 17:01 WordPress theme is always going to have a style.css file, 17:03 which we can see right here, 17:09 and when we click through to that, we have our basic WordPress metainformation here, 17:11 which you do a great job of explaining, 17:18 and just a few little tips or suggestions here. 17:20 Theme name, first of all, Lockedown Design is really cool, 17:23 because your name works really well with that, 17:27 LockeDown, lock down the design. 17:30 I really like that, but you might want to add Lockedown Design 17:32 on to that for the theme name. 17:36 Author is good. 17:38 Now, theme URI, ideally you like to have 17:40 a unique URL for this, 17:45 especially when it's a theme that somebody could download, 17:47 and you have a nice portfolio thing here. 17:50 Maybe you want to think about, hey, is this something you want to release 17:52 as a free theme as a little side project here. 17:55 And of course, if you did that, you'd change the description. 17:59 One place you could probably extend a bit more are these tags. 18:03 You want to be as specific as possible 18:06 and maybe add a few more of those in here, 18:09 but again, we're kind of nitpicking with this a little bit. 18:11 One other thing that I could say here about the style sheet 18:14 is when we look for some of the URLs, 18:18 we could see here that for this header image 18:23 we're linking to a URL that is in the uploads folder. 18:25 Anytime that you're working with theme graphics 18:29 you really want to have those graphics stored along with the theme, 18:33 because let's say you move the theme or you move something. 18:37 Then this image link will be broken, 18:41 so you want to have that really built into what you're doing. 18:43 Another thing here is that we always know that a theme 18:48 has a screenshot attached with it, 18:52 and again, we're poking behind the scenes here, 18:55 but it's something we can do because it's a WordPress site, 18:58 and this is what happens when you have a graphic 19:01 that comes along with your theme. 19:03 This is what it looks like, so you probably want to update this a little bit, 19:05 and one suggestion is that if you're going with the screenshot of the theme 19:09 but the screenshot or the theme is always evolving, 19:13 you might want to go more with the logo 19:15 or something, like with your photo or something in it. 19:18 That could be helpful. 19:20 If we do look back at the theme, 19:23 we could see that he's using a few major plugins here. 19:26 One specifically is the SEO plugin by Yoast. 19:29 We can see we've got the SEO plugin, 19:39 and one thing that you do that's really good is on each page 19:45 you have a unique description that goes along with it, 19:49 and this is something that's often an oversight. 19:52 Even when people install this plugin, 19:54 they don't go back to each page and give a specific detailed thing, 19:56 and that's really important, because you're going to have the link, 20:01 the title link in Google, but you're also going to have that description, 20:03 and you want that to be unique to whatever page you're using. 20:06 I also saw that he has the Google+ authorship link here, 20:12 which is really important, and it's a super easy plugin to install, 20:17 and what this lets you do is when someone is searching for a blog post 20:21 your picture shows up along with it, 20:24 which has been proven to increase click through rates. 20:26 We also see that there is some stuff going on here 20:30 with adding Twitter cards, which I'm pretty sure is an automatically generated thing 20:33 that maybe you don't need unless you're using it specifically on purpose. 20:38 Anything that you could remove from the source code, 20:43 especially when there is JS or other things involved, 20:45 is going to help that out. 20:48 Let's look, then, back at the site. 20:51 Another thing I noticed is that you're using the MailChimp down here, 20:54 and we know that by clicking on "Subscribe" without validating, 20:58 and you can see we're using MailChimp, and no problem there. 21:01 That's pretty common. 21:04 However, if you take a little bit of extra time, you could do some inline validation here, 21:06 and what that does is keep them on your site 21:10 without going to that MailChimp page, which just protects your branding 21:13 a little bit more, and I'd suggest that. 21:17 All right, let's look a little bit more at some of these different pages 21:21 and nitpicking some URL structure here for a minute. 21:26 If we go to our Work page, 21:29 we find that the URL is actually Portfolio. 21:31 I don't know that this really matters, 21:35 but in general, I would probably suggest 21:37 keeping that name and URL structure the same. 21:40 The link is called Work. URL is Portfolio. 21:44 Yeah, it's not like it's a huge deal, but it's one of those things that's slightly different 21:47 that can cause the user to hesitate when they're browsing. 21:51 Yeah, and speaking of the user browsing, 21:54 one thing is that this portfolio is great, 21:57 and like we've suggested with the other one, 21:59 adding some text along with that would be helpful, 22:01 but this main image here bumps you right over to their site, 22:05 and I was a little confused at first, 22:09 because some of the colors are a little bit similar. 22:12 It took me a minute to realize I wasn't on your site anymore. 22:15 That happened to me just now. I accidentally clicked over to it. 22:19 And I had to click the back button, because I thought I was actually on the site. 22:22 That's one little bit, and we have the title and the link, 22:25 and what you would normally assume is that when you're in a portfolio 22:29 and you click on the title, it's going to go to your own page. 22:32 Now, because we're using WordPress, 22:35 this is a great place to add in custom post types, 22:37 and I was curious if you did this, 22:42 and a way you can figure it out is I guessed 22:44 and added what I would assume the URL is for this post, 22:48 and when we click through, we can see that it gets redirected 22:52 to a case studies page where we can see that he then is giving specific information. 22:56 Again, this was not public, so we're prying a little bit here, 23:01 but again, I think that's really great that you have it, 23:06 and I look forward to that being incorporated. 23:10 Again, the title then links to that page, 23:12 which you probably want to change up, and again, 23:15 we have this issue of now we're at a URL structure called Case Studies. 23:17 Before we were at Work, which is also the portfolio, 23:22 and you probably want to flatten that out. 23:24 A last little bit is that on the Blog section 23:27 one thing that could be done, because you're using the HTML5 doc type, 23:30 is actually wrapping each of these in an article tag 23:34 and using a bit more of that HTML5 specific markup, which would be helpful. 23:37 A suggestion as well, like Dan pointed out, 23:43 we have some of these blog articles 23:47 that are spaced out and maybe not as updated through time, 23:50 and a thought that I had was maybe turning these more into resources 23:53 or content that's throughout the site, maybe as calls to action 23:58 of, hey, why do you need to redesign your site? 24:02 That would be something great to see in the portfolio, 24:05 and maybe that's an even more important call to action, 24:07 or something then subscribing to the newsletter. 24:10 The other thing is that when you click through to this title, 24:13 it goes from having the blog URL 24:16 to a straight URL specific to that post. 24:18 Now, if we're in a blog section, 24:23 then you probably want to have that /blog 24:25 or /resources, but when I saw these specific pages, 24:27 it really made me think, "This is great content. 24:31 Maybe it could be changed from a blog format to something else more incorporated with the site." 24:34 And if you have this content existing here, 24:42 why not link to it from the About page or from the homepage 24:44 or latest posts, or if he does write about his design philosophy. 24:47 And clearly some of those things in the blog are going to speak to that, 24:53 so why not link to them? 24:56 Yeah, one last little thing here 24:58 is that for this newsletter it's giving news about web design and development, but I was curious here. 25:00 Who is your audience for this? 25:07 Is this something you want clients to sign up for, 25:10 or are you looking for other web designers to sign up? 25:13 And if it's clients, then you're going to want to give them more information, 25:18 like, "Hey, why do you want to redesign your site?" 25:23 as opposed to, "Hey, here is the latest CSS3 thing," 25:26 which this gives me the feeling for. 25:30 And I question here if this is more a portfolio site, 25:32 do you really even want that, or would it be better for you to have the client contact you? 25:36 I noticed one more thing, before we move on, 25:41 because this can help performance, and that's very important. 25:43 You're doing some DNS prefetching up here, which is great. 25:45 Depending on the amount, because too many is also not a good thing, 25:48 you should take a look at your site metrics and find out if the users 25:55 absolutely need to prefetch some of these assets or pages. 25:59 If they do, if they're visiting them, great. 26:02 If they're not, just remove them, because it might be causing a lot of overhead, 26:05 because it's prefetching all those assets, and you might not need to be. 26:09 It in turn causes your performance to lag like we're seeing there. 26:12 I also notice that we're loading jQuery twice here, 26:16 and that's common in theme development. 26:21 What you're going to want to do is check your functions file 26:24 and make sure that you're conditionally loading jQuery 26:27 or your other assets only when you need it 26:30 and you're doing that by using WordPress's jQuery. 26:33 When you're building a theme, WordPress comes with jQuery installed, 26:36 so what you want to do is say, "Hey, if I'm using something that needs jQuery, 26:39 load WordPress's version instead of my own." 26:43 This is going to have it twice loaded, 26:47 and I was looking at Pingdom, and it does add to that page load time 26:50 just a little bit by pulling that twice. 26:53 That's a good idea. 26:56 Well, we can move onto the final site that we're going to be looking over 26:58 here on Treeviews today. 27:02 Mufaddal is one of our students, 27:04 and he wrote in and said this is his latest project, 27:07 VillaPedra.com. 27:10 "Let me know if it's okay." 27:12 Switching it up, this is not a portfolio site. 27:14 This is for a business in Portugal. 27:16 It's a series of vacation homes that look absolutely fantastic. 27:18 I think if we had the budget we would go there ourselves 27:24 and look at that and see if those pictures were as good as they could be. 27:26 Maybe we can take some better pictures.>>Treeviews on site. 27:30 Man, look at this. Look at these great pictures. 27:32 As you go through the site, and granted, it's in Portuguese to begin with. 27:34 There is also an English version as well, 27:38 but as you go through the site, the pictures are breathtaking. 27:41 They're amazing. 27:45 The pictures can definitely sell this thing by itself. 27:47 One of the problems that we see, though, as we go through some of the different sections, 27:51 is that we have this big block of text that is in the way. 27:54 And the structure of some of the different pages changes, 27:59 whereas we have this large text block here, 28:06 but on, say, the Reserve page, 28:10 I believe there is a completely different one, 28:13 and then on some of the pages the background is changing 28:15 when there is really no opportunity to see it, 28:20 because all you have is this very thin space across the top. 28:22 It's a little busy that way on some of those pages. 28:29 Once you drill down and you see the different houses 28:33 under Casas, there is plenty of great information. 28:36 It's like all the information that you would want, so this is great. 28:40 You really thought about what are the potential clients looking for 28:42 when they need information about these homes that we're trying to sell them 28:46 for rent. 28:50 Everything here in either language is here 28:53 with this call to action down here. 28:58 Now, this is the call to action that I feel needs to be bigger. 29:00 This is the reserve button to book this particular place. 29:04 It almost gets lost within this layout, 29:08 and if we brought it up or if we made it a little bit bigger, 29:10 like a button or some kind of thing there, 29:14 we could certainly lay out this page a little bit better, 29:17 but that's one of the things that we're driving people to. 29:19 So rather than bury it at the bottom, 29:21 why not have it actually in both places? 29:23 We can have it up here. We can have it down at the bottom. 29:25 Whether they're going to look this way or they're going to scroll all the way to the bottom 29:27 and see it there, give them the opportunity to convert 29:32 from a business standpoint. 29:36 But again, as you go to the Casas page 29:39 and then so you get to this page, 29:43 and rather than a list of the different houses that are available 29:48 you have what almost looks like a photo gallery, 29:52 and so my first thought was, "Oh, this is a photo gallery of all the houses." 29:55 Then I click one, and then it gives some of this great information about this area 29:59 or this house, and it was a little awkward to me, 30:04 especially since on some of the other sections 30:08 looking at the pictures or finding that content was a little bit different. 30:11 I almost feel like saying pick one way 30:16 to show off this content and stick with it. 30:21 Make sure that the user doesn't have to relearn the interface. 30:24 But if we can go to the Atmosfera page, please, 30:29 one of the things we also noticed was that you have 30:33 some of these things, and they're very subtle. 30:36 You have these arrows on either side of the page, 30:38 and when I saw them for the first time, I wasn't sure if I was going to be 30:43 clicking to the next section, to the next page of content, 30:47 where in fact it switches to the next picture on the background. 30:50 Gil pointed out, as we were talking about this before, 30:55 that you can actually X out. 30:58 You can close this text box there and see this great picture. 31:00 But then how do we get the text back? 31:05 There is no way to get it back. 31:07 Here's what I think. This is a gorgeous site, a gorgeous site. 31:09 I think that some of the pieces of interface, 31:13 the interaction, could use a little streamlining, 31:17 but the fact that you've made it really gorgeous 31:20 and there is plenty of information, plenty of content 31:25 that potential customers would need, I think it's a great advantage. 31:30 Yeah, absolutely, like you said, the images are beautiful, 31:35 and they're very well optimized for all devices. 31:37 I checked. They're actually quite small, and they look great, as you can see. 31:41 Now, one thing I noticed is a minor usability issue. 31:44 Say you're in this page, 31:49 and you want to view it in English. 31:52 Well, instead of keeping you on the same page, it brings you back to the index page, 31:55 so now I've got to go back to the page where I was, 31:58 and it translates, so I have to go find what page I was in. 32:02 And I also noticed that on mobile devices, so I'll go ahead and reduce the width here, 32:06 once you start scrolling on the page, as you can see here, 32:13 the footer gets pushed up, and it scrolls with the content, 32:17 and that also happens on the emulator and on the actual device. 32:22 I looked at it earlier. 32:27 One thing I did to see if I could fix it was I displayed 32:29 the footer. 32:33 I removed the absolute positioning, 32:36 and that positioned it nicely at the bottom, 32:38 and it didn't scroll, and it always sticks to the bottom. 32:41 Try that. Position it either relative or nothing at all. 32:43 Keep it not in an absolute position, 32:48 and that should fix it, and I also noticed you did a great job 32:52 of separating the CSS and the JavaScript, for example, 32:55 in the forms. 32:59 Everything was nicely kept in their respective files. 33:01 You have a JavaScript function that loads in the images, 33:07 and you have the code on every page, 33:11 so instead of loading that every time, just separate that 33:15 and keep it in the JavaScript file. 33:18 And one more thing. 33:20 These arrows, as we were talking about earlier with Dan, 33:24 once you get to about the 850 mark 33:29 they get squished in towards the content, 33:33 and because of that, they're no longer clickable. 33:36 They don't work, but then again, 33:39 once you hit, say, 600, I believe, 780, they disappear. 33:41 Maybe also make them go away at that break point, 33:45 because they're not really necessary, because they're about half clickable, as we can see here. 33:48 One last thing. 33:53 In the thumbnail gallery, 33:55 once we click on one of them—this one doesn't do it. 33:57 Let's try another one. 34:01 So once it transitions to the next one, you can see how that image reflows the width. 34:07 One thing to prevent that is either adding a width in the style sheet 34:11 or in the actual image tag itself, and it prevents that reflow 34:16 every time it transitions. 34:20 Yeah, I think that's something you probably need to take care of right away, 34:22 because as you can see, it's a little distracting. 34:25 Your images are already beautiful, 34:27 so keep them that way and don't distract the user with that border reflowing 34:29 across the page, and that's pretty much it. 34:34 Nice job, Mufaddal. 34:36 Zac, I know you're ready to book one of these houses immediately. 34:38 What feedback did you have for the website as well? 34:41 First let me say that when you land on this homepage, 34:45 because I first hit it in Portuguese and I know enough Spanish 34:49 to know that that's going to be casas, but I didn't know what the site was, but it didn't matter. 34:55 I knew it was beautiful, 35:01 and that has some pros and cons to it. 35:03 One, wow, it's great. I'm sticking on this site. 35:05 It's going to be awesome. 35:08 But on the other hand, I don't really know what it does. 35:10 Were these rentals? Are you an architect? 35:14 So one thing I'd really suggest is get one of those beautiful pictures 35:18 of the place you want to book the most on there with a reserve button. 35:22 Pull that call to action right up to the top 35:26 so that instead of your copy here 35:30 they're really seeing what you have, 35:33 although these images are beautiful. 35:35 Something that you'll see often 35:38 with slideshows that are changing background images 35:40 is you'd have little thumbnails of each one, 35:43 and then that's going to make it more clear to the user 35:46 that when they click on that it's going to change a background, 35:48 because when I clicked on these, I went kind of quick. 35:51 I went bup, bup, bup, bup, and I didn't know what changed, 35:55 because you have the slideshow rotating, 35:58 and after you click this 2 or 3 times, 36:00 it stops responding, and this is a funky JavaScript thing. 36:03 Like if you make it go all the same speed, 36:06 you have a delay and stop then, 36:08 but I wasn't sure what it was doing at that point. 36:10 Some notes on the homepage there. 36:15 When you do view the source code, 36:18 I notice that your descriptions are really long. 36:20 Google is going to limit how many characters you could use. 36:23 Usually keep it to about a tweet's worth, 36:27 so all of this extra content is going to be cut off, 36:30 and you're not going to get it. 36:33 That's something that's important. 36:35 Now, in terms of multilingual sites, 36:37 they can get really hard to manage, 36:39 and the reason is because in this case 36:43 we have a homepage, and if we click into English, 36:46 you're maintaining 2 different homepages, and if you're using HTML 36:52 what that means is you're using no includes, 36:56 which means that you're completely reproducing 36:58 this page each time, and if you make changes in one place, 37:01 you're going to have to make them in another. 37:04 And from having dealt with a couple of these sites before 37:06 I know that that can become a real pain. 37:10 This is a place where pulling this into a content management system 37:13 is probably worth the design hassle, 37:18 because down the road it makes it so much easier 37:21 to maintain content, and then that's going to keep track of some of the things. 37:24 Like Gil was saying, if you're at this page 37:29 and then you pop into Portuguese, 37:32 you're going to be redirected and not keep the same one, 37:34 and that's a JS thing you could fix there. 37:37 There is also this other issue of if you're in English, 37:40 you don't see that in the URL, so we're assuming that it's the homepage. 37:44 And finally, a note here. 37:49 If you are using HTML, that can sometimes be a little tricky. 37:51 If someone is trying to share a link, for example, 37:56 you can't link to /houses. 37:59 You have to link to /houses.html. 38:01 A CMS will take care of that. 38:05 The other kind of hack is you store each page in a different folder, 38:07 or with htaccess you could remove those. 38:11 Just some things to think about in that regard. 38:14 Now, when I came onto here, 38:18 it took me a second to realize these were the names of the houses, 38:21 and I really like that. 38:25 But when I click onto the page, 38:27 I didn't see that thumbnail anymore, 38:29 and that left me a little confused as to, wait, hold on. 38:31 I'm here, but what am I looking at now? 38:35 I see this name, but it doesn't match any name here, 38:38 and then the other thing was I had to click on Full Gallery 38:44 in order to see all of these awesome pictures, 38:48 and you can see now we have a different slideshow format 38:50 that's appearing here. 38:54 This one might be a little bit better on the homepage, 38:56 and with all this real estate here put all your pictures up. 38:59 Get thumbnails of all of them, because they're so beautiful. 39:02 There is no reason not to be using them, 39:05 and maybe if you had a primary picture that looked like this, 39:08 then all of this content could be balanced really well 39:13 with a picture and a big call to action under it. 39:16 Now, I did notice that you're listing your prices the same 39:20 whether you're on the English or Portuguese site. 39:25 Automatically that's going to be a tough conversion 39:28 for someone who is looking for U.S. dollars, 39:31 so I'd suggest changing that detail back and forth, 39:33 and again, this can be a little tricky. 39:36 Currencies change. Currencies shift. 39:38 If you have a fixed price in mind that's probably not going to matter too much, 39:40 but something to think about. 39:44 And then for me, when you come down to the booking page, 39:46 if I want to book this house, 39:50 now I get to a form. 39:52 Where does it say which house I want? 39:55 I couldn't find a place. 39:58 That's one problem, because how are you going to determine that? 40:01 One thing could be you might have a picture version 40:06 of a drop down or select box. 40:09 The other is that if you're dealing with a PHP page, 40:11 like this is, I can click Book 40:15 and add the name of the location that I want right in there in the URL. 40:18 Then I can pull that into the form, auto-populate it, 40:25 and that really gives that strong user experience. 40:27 There are no delays. There is no hesitation. 40:30 And anytime you get closer to that final point, 40:32 whether it's a site where you're collecting payments 40:36 or you're doing a contact form, that drop-off rate is really significant. 40:39 When you put that obstacle in, there is a chance that some people 40:43 will be like, "I want to book this," and now I click Book. 40:47 "Oh, I've got to do this again. Whatever." 40:49 And they stop there. 40:51 On the business side too, on the back end, 40:53 it's impossible to know which houses got clicked on 40:55 for booking reservations. 41:01 If that information, if that variable got passed through 41:03 and we were able to see that on the back end, 41:06 we could find out that the third house there, the Loureiro house or whatever it was called, 41:08 was getting twice as many as all the rest 41:13 or other things like that, so maybe there is something about the house. 41:15 Maybe it's something about the content or the photos that we showed. 41:19 There could be something about that, 41:22 and so that's a data point that would be really helpful for the business side of things. 41:24 And I'm even looking if there are analytics 41:29 set up on these pages, and sort of on initial look 41:32 it doesn't look like we're tracking any of that data, 41:36 so if you are, maybe it's on the server side. 41:42 That's good. But like you said, if not, that's really important to note. 41:44 Well, we want to thank everyone 41:49 for submitting all the projects this week. 41:51 We got a whole bunch. 41:53 Zac, Gil, thank you very much. 41:55 I'm Dan. We'll see you next time on Treeviews. 41:57 [treeviews] 42:00