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 5: Tips for Portfolio and Multi-Lingual Sites

42:03 with Dan Gorgone, Guil Hernandez, and Zac Gordon

In this episode, Dan, Guil and Zac review three Treehouse students' websites: two portfolio websites and a multilingual vacation website. They discuss marketing, branding, front-end design, optimization, and also give general feedback.

Websites reviewed in this episode:

  1. Danaan Clarke
  2. Lockedown Design
  3. Villa Pedra

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

You need to sign up for Treehouse in order to download course files.

Sign up