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
Well done!
You have completed Treehouse Reviews!
You have completed Treehouse Reviews!
Preview
Episode 5: Tips for Portfolio and Multi-Lingual Sites
42:03 with Dan Gorgone, Guil Hernandez, and Zac GordonIn 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:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[? 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up