[? music ?]

[treeviews]

Hey, everyone.

Welcome back to Treeviews, the show where you, the Treehouse member,

can submit your work or your project

to a panel of Treehouse teachers, and we'll give you some feedback.

Whatever you're looking for, we can help you out.

Let me introduce—or you guys will introduce yourselves.

I'm Dan Gorgone, marketing and business teacher here at Treehouse.

Hi, everyone.

Zac Gordon, WordPress teacher.

Hey, I'm Gil Hernandez. I'm one of the front-end design teachers here at Treehouse.

All right, let's jump right into it.

Our first submission comes from Danaan Clarke,

and that's pronounced Day-non.

That's what it says here on the website.

Danaan Clarke submits this. He says, "This is a simple portfolio website.

"It's my first website that I've built other than Smells Like Bacon, of course.

"I'd appreciate any feedback on the design, the code, or the user experience.

Other things I'd like to know are some of the dos and don'ts of a portfolio site,"

which that's a great question, "and how to get a job as a junior front-end design guy."

These are all great questions, and I think Danaan is probably in a position

that a lot of the Treehouse members are in

where they are out there for the first time

building their first site, maybe just getting started

with some of the work that they're doing for other clients.

Danaan has put this site together,

and the first thing I can say is that this is a nice, simple design.

It's not too simple, like, "Geez, I wish there was a lot more here."

One thing that gets a little sparse is some of the space at the bottom.

If you go to a wider monitor,

you can see that there is some white space down there,

so the lack of a footer being there is one thing that I'll raise

as a potential—not necessarily a red flag,

but it's something you should probably have there, especially if you're on a mobile.

That's something that you pointed out

where if you're scrolling along on your iPhone or your Android

and you're looking at this site it would be nice to have something

that will jump you right back to the top.

Otherwise you've got to scroll all the way back.

Now, but this will look good on a mobile, which is nice.

My only other hesitation was here on the homepage

Simple + Useful Design, your tagline

dominates the space, and you do list some of your skills here,

which is good, but there is no call to action.

What I'm kind of missing here is really kind of the point

of why you put this site together.

Is it to promote the work that's in your portfolio?

Is it to generate some interest in yourself as a professional?

Like I want you to check out my portfolio,

here's a call to action for it, or I want you to contact me,

here's a call to action for that as well.

That's something that would be very easy to add,

and if people are at all interested, it can get them going in the right direction on your site.

Absolutely, and to add to that on the homepage,

it would be great to see some of your work right away

so once you land on the page you immediately start seeing some of his work,

because it is quite nice, and on top of that,

I'd perhaps maybe like to see the Skills section enhanced more,

maybe using icons and contrasting colors in the headings

and things like that, and on the code side of things,

on the front-end code, it's a nice use of the Bootstrap grid,

but I did notice in the HTML you are using things like paragraph tags

to add structure to headings and images.

And you're also using the presentational align attribute

to align images center and things like that,

and for example, below that here, this HR tag

is being wrapped by a div.

You can actually just leave that HR tag there and add that class span12 to it,

and it will work exactly the same way.

And I've actually noticed that in the mobile version,

if we can bring up the simulator here, I noticed that the content

in the portfolio page is sliding horizontally.

So if you press and hold and drag anywhere in there,

the content starts scrolling, and a good fix for that

would be to add an overflow X property

to the body and give it the value hidden.

That should take care of it,

and I did notice if you scroll down to the bottom here

in the JavaScript where you're loading the Bootstrap

that bootstrap.js file is missing.

It's a missing resource, so it's looking for something that's not there,

so if you don't need it, go ahead and delete that,

and that's one less thing your browser has to load or at least look for.

All right.

To come at this again with more of a content perspective,

one thing I do really like is how it's pronounced.

Very helpful.

I did notice, though, that it's a graphic,

and it would be really great to maybe have this as text or a bit higher resolution one,

because we could already see a little bit of pixelation

going on with that graphic right there.

I also think that it would be really great

for this really strong design to have a matching favicon.

You have a really strong use of red,

and this logo up here would I think be really good

to have something matching up in there, and not too hard to generate.

Let's go check out the bio page,

because that was one place I noticed

we could use a little bit more layout design with this,

because this bio page works really well

if we're coming onto the mobile device,

and we see this, and the text is centered.

But on the full screen here

it would probably be helpful to have this floated to the right

and then have the text a bit more present.

Now, this graphic here, I personally like it.

I think that "This is me" gives some personality and flavor to it.

If you're going to keep that,

I would suggest, though, that removing this blue color background

and having it either flat against the white,

or this color here is a little bit different

than this one here, so maybe having those match a little bit better.

The last thing here on this bio page is that this isn't really a bio.

It gives some good marketing speak and what you're interested in and your specs,

but what we'd be really expecting on a bio page is a bit more of a biography

about you, getting a little bit more personal.

If you don't want to get super personal with the site,

like this is my dog's name and this is what I like doing for fun,

then you can keep it more professional

but still have a bit more information about yourself.

And once again, it's a bit of a content dead end.

You get here. You have the picture, you have the text.

But there is no link to something else.

There is no call to action.

Now that you've learned about me, here's a contact link,

or now that I've talked about these projects that I like doing,

here's a link to those projects.

It's kind of like you go to this page, you scroll down,

all right, well, then I have to go back up to the navigation.

It should give them a nice, natural flow.

Yeah, and he was doing such a nice job of using the grid

in the other pages, so why not apply that same kind of structure

to the biography?

We could see it a bit on the portfolio page.

Now, this is something that we had talked a little bit about beforehand,

and we're not completely sure in this regard,

but you are using your own site as a portfolio piece.

And I've seen this done a lot, and sometimes it can be a good thing,

but sometimes it detracts away from your own experience and portfolio

if someone is coming here and saying, "Well, let's see, their most recent project

and some of their nicer work was their own site,"

so the site should probably really speak for itself

and not using this in the portfolio.

I also noticed that content-wise we could probably have

a bit more explanation here, maybe some text floated to 1 side

and the graphic on another.

It's really good to talk about what was the problem I faced,

how did I solve it, what skills were necessary,

and then that call to action right there.

If you are looking for work like this,

get in touch with me, and I can help you out with that.

[Gil Hernandez] Some good case studies in there.

And perhaps why not link some of those skills listed on the homepage

right to those parts of the portfolio site.

Bring them directly there.

Logo design, linking right there to the logo.

We want to see more. It looks good.>>Yeah, indeed.

Definitely off to a great start, and we're encouraged.

Gil did mention this.

I don't know as much about the specific CSS fix,

but we could see, though, that this major header on some of the pages

is getting cut off right there.

I don't know. You mentioned earlier some of that.

[Gil Hernandez] Thanks for bringing that up.

Just pay attention to the font sizes on there and the headings.

You can easily either adjust it with some paddings

or reduce the font size a little bit, but some of them are getting cut off,

as you can see here in My Portfolio and in Biography as well.

And that's something that I think is a lesson for all of our students,

whether you're beginners or more experienced,

is that if you do have a portfolio site out there

you can't assume that people are just going to be looking for designers on a laptop.

It may be a spur of the moment thing.

It may be in a business meeting or meeting someone at a coffee shop

saying, "Oh, check out this designer.

He designed for such and such. Check out his site right now."

But then when you do, there are some things there

that don't look as good as they could.

Always anticipate that. Make sure to test it on an iPhone or a laptop.

And then you end up with a great site.

Now, speaking of a great site coming up, we have our own John Locke.

He's one of the moderators on the Treehouse forums.

You've probably seen him there.

His website, Lockedown Design,

is the one that he submitted to us.

He writes, "The goal for this site is to generate leads and business

"and also inform clients and people within the design community

"about trends within design, how to get the most out of this site,

"how to have a good project, and how to govern your site content once you have it.

"Any input on the design content or storytelling

would be appreciated."

Well, coming here right off the bat,

it's a nice, professional design, so that's a great thing, John, right there.

It mentions the specialty and the purpose of the site.

You can see that clearly this is about design

and about multiple devices, and right here with the copy

it's not a lot to read.

It's pretty simple. It gets right to the point.

It's great that you get right down to that.

A couple things. Oh, the portfolio had some great descriptions in there.

When you include different pieces

in your portfolio, whether it's the work page

or portfolio or clients, whatever you want to call it,

definitely have some really positive experiences in there.

There were some really good ones here.

I know that—actually, the one above this one,

if we can scroll back up,

this one here, the green one, it looks like a good design,

and you describe these are the key things that we worked on here,

but in the description of it, I know that the project

was described as like, "I did this on the side"

or as, "When I had some free time" or something,

and that's fine.

I would try to keep the verbiage as professional, as high level,

high quality as you can.

The words that are used, the copy that's used sometimes, you don't want to mislead people.

You want everything about it to be positive,

lessons learned, challenges overcome, things like that.

The couple things that I saw here

from a content point of view, if we go back to John's site,

the blog, one of the goals here that you mentioned in your letter

is that you want to have a lot of current information about design, about the industry.

When I click through to the blog to see what you've been writing about,

the last update is almost 2 months ago now,

so that's something where—blogs are tough.

You've either got to keep them going, or you have to cut your ties.

I do see that over on the right-hand side you have the most recent tweets that you've done,

and so if you're active on Twitter, which is certainly a lot easier,

then that's fantastic.

If the blog is not getting the attention that it needs, though,

you do have to make a decision about whether to keep it up there.

The older that thing is, the more of a hassle it can be.

It can be sort of a black mark against your content.

Now, if it means that you're just updating once a month, that's fantastic.

That's fine.

If people can look at your blog and see that you've been updating it on a regular basis,

even if it's just once a month, then that's totally cool.

Let's see, the newsletter call to action.

If we go up here, right here, "Subscribe to my Email Newsletter."

And then you describe what subscribers get,

and you say it's a weekly thing.

If I'm looking at the blog and I see it hasn't been updated a lot

and then I see this and I see that you're offering weekly content,

I wonder what am I missing here?

Shouldn't there be more content in the blog?

What exactly are people getting?

Right there I think a sample, a link to a sample newsletter,

would be helpful to give people a taste of what they would get.

There is plenty of stuff here. The portfolio is in great shape.

There is a lot of great stuff that you worked on.

Absolutely, some very good suggestions, Dan.

Right off the bat, I noticed that on the homepage

this main image right here.

It's a little overwhelming.

I mean, it's good that you're able to build and adapt

for all these kinds of devices, but maybe show 2 or 3,

not necessarily 5.

The image is also a little too large.

You might want to optimize that, and also below in the footer

I notice you might want to use some contrast

to differentiate the headings from the text below and things like that.

I also noticed that the transitions in the navigation are quite nice.

There is a nice balance of CSS transitions throughout the site.

But you need to pay a little bit more attention to some of the details,

like for example, if, say, you hover over Home,

you'll see the box shadows or inner shadows load first

and then the transition, and on mouse out

it gets squared again, and you see what's going on there?

The same with the logo, so I'm not sure if that's exactly the effect you're going for.

If it's not, you might want to go in there and adjust that.

But it's still looking good.

I like the transitions in the footer as well.

These are nice and soft.

I also notice that the page time is a little slow.

At times it exceeds about 2½ seconds,

which you might want to pay attention to that.

There are also some assets missing.

If you take a look at the source code,

some of your JavaScript files are missing.

I believe it's script_1.js, so again,

the browser is looking for that asset, but it's not there.

Remove it from your source code, and that's one less thing,

and other than that, everything looks good in mobile.

There is one thing, though.

If you take a look at the contact page

and you reduce the browser width here, the same thing happens on mobile.

You'll notice that the fields are breaking in the layout there,

so you'll want to pay attention to that.

They're extending beyond the viewport,

and the same thing happens for the headings.

Let's go to About.

Again, you can see the lag in the load time there.

Let's go to Work. You can really see that there.

There we go.

So if I reduce the screen width,

you can see some of those headings.

See, there is one of them, for example,

this ConsultingByCourtney poking out of the viewport.

Things like that. You can adjust the font sizes with media queries and things like that.

But other than that, nice job, John.

First, I want to say again a shout out to John for being awesome on the forums.

It's definitely a huge help.

Anytime I go in to answer a question

and we've been on a weekend or just out for a day,

then it's really cool to see you posting up, and I really appreciate you out there.

We know that this is a WordPress site,

and one of the easy ways to tell when it's a WordPress site

is you add wp-admin to the end,

and you can see we have our WordPress login page here.

That's neither a good or bad thing except that we know

that we're working in WordPress.

A few little WordPress theme-specific things here.

If we pop into the source code,

WordPress theme is always going to have a style.css file,

which we can see right here,

and when we click through to that, we have our basic WordPress metainformation here,

which you do a great job of explaining,

and just a few little tips or suggestions here.

Theme name, first of all, Lockedown Design is really cool,

because your name works really well with that,

LockeDown, lock down the design.

I really like that, but you might want to add Lockedown Design

on to that for the theme name.

Author is good.

Now, theme URI, ideally you like to have

a unique URL for this,

especially when it's a theme that somebody could download,

and you have a nice portfolio thing here.

Maybe you want to think about, hey, is this something you want to release

as a free theme as a little side project here.

And of course, if you did that, you'd change the description.

One place you could probably extend a bit more are these tags.

You want to be as specific as possible

and maybe add a few more of those in here,

but again, we're kind of nitpicking with this a little bit.

One other thing that I could say here about the style sheet

is when we look for some of the URLs,

we could see here that for this header image

we're linking to a URL that is in the uploads folder.

Anytime that you're working with theme graphics

you really want to have those graphics stored along with the theme,

because let's say you move the theme or you move something.

Then this image link will be broken,

so you want to have that really built into what you're doing.

Another thing here is that we always know that a theme

has a screenshot attached with it,

and again, we're poking behind the scenes here,

but it's something we can do because it's a WordPress site,

and this is what happens when you have a graphic

that comes along with your theme.

This is what it looks like, so you probably want to update this a little bit,

and one suggestion is that if you're going with the screenshot of the theme

but the screenshot or the theme is always evolving,

you might want to go more with the logo

or something, like with your photo or something in it.

That could be helpful.

If we do look back at the theme,

we could see that he's using a few major plugins here.

One specifically is the SEO plugin by Yoast.

We can see we've got the SEO plugin,

and one thing that you do that's really good is on each page

you have a unique description that goes along with it,

and this is something that's often an oversight.

Even when people install this plugin,

they don't go back to each page and give a specific detailed thing,

and that's really important, because you're going to have the link,

the title link in Google, but you're also going to have that description,

and you want that to be unique to whatever page you're using.

I also saw that he has the Google+ authorship link here,

which is really important, and it's a super easy plugin to install,

and what this lets you do is when someone is searching for a blog post

your picture shows up along with it,

which has been proven to increase click through rates.

We also see that there is some stuff going on here

with adding Twitter cards, which I'm pretty sure is an automatically generated thing

that maybe you don't need unless you're using it specifically on purpose.

Anything that you could remove from the source code,

especially when there is JS or other things involved,

is going to help that out.

Let's look, then, back at the site.

Another thing I noticed is that you're using the MailChimp down here,

and we know that by clicking on "Subscribe" without validating,

and you can see we're using MailChimp, and no problem there.

That's pretty common.

However, if you take a little bit of extra time, you could do some inline validation here,

and what that does is keep them on your site

without going to that MailChimp page, which just protects your branding

a little bit more, and I'd suggest that.

All right, let's look a little bit more at some of these different pages

and nitpicking some URL structure here for a minute.

If we go to our Work page,

we find that the URL is actually Portfolio.

I don't know that this really matters,

but in general, I would probably suggest

keeping that name and URL structure the same.

The link is called Work. URL is Portfolio.

Yeah, it's not like it's a huge deal, but it's one of those things that's slightly different

that can cause the user to hesitate when they're browsing.

Yeah, and speaking of the user browsing,

one thing is that this portfolio is great,

and like we've suggested with the other one,

adding some text along with that would be helpful,

but this main image here bumps you right over to their site,

and I was a little confused at first,

because some of the colors are a little bit similar.

It took me a minute to realize I wasn't on your site anymore.

That happened to me just now. I accidentally clicked over to it.

And I had to click the back button, because I thought I was actually on the site.

That's one little bit, and we have the title and the link,

and what you would normally assume is that when you're in a portfolio

and you click on the title, it's going to go to your own page.

Now, because we're using WordPress,

this is a great place to add in custom post types,

and I was curious if you did this,

and a way you can figure it out is I guessed

and added what I would assume the URL is for this post,

and when we click through, we can see that it gets redirected

to a case studies page where we can see that he then is giving specific information.

Again, this was not public, so we're prying a little bit here,

but again, I think that's really great that you have it,

and I look forward to that being incorporated.

Again, the title then links to that page,

which you probably want to change up, and again,

we have this issue of now we're at a URL structure called Case Studies.

Before we were at Work, which is also the portfolio,

and you probably want to flatten that out.

A last little bit is that on the Blog section

one thing that could be done, because you're using the HTML5 doc type,

is actually wrapping each of these in an article tag

and using a bit more of that HTML5 specific markup, which would be helpful.

A suggestion as well, like Dan pointed out,

we have some of these blog articles

that are spaced out and maybe not as updated through time,

and a thought that I had was maybe turning these more into resources

or content that's throughout the site, maybe as calls to action

of, hey, why do you need to redesign your site?

That would be something great to see in the portfolio,

and maybe that's an even more important call to action,

or something then subscribing to the newsletter.

The other thing is that when you click through to this title,

it goes from having the blog URL

to a straight URL specific to that post.

Now, if we're in a blog section,

then you probably want to have that /blog

or /resources, but when I saw these specific pages,

it really made me think, "This is great content.

Maybe it could be changed from a blog format to something else more incorporated with the site."

And if you have this content existing here,

why not link to it from the About page or from the homepage

or latest posts, or if he does write about his design philosophy.

And clearly some of those things in the blog are going to speak to that,

so why not link to them?

Yeah, one last little thing here

is that for this newsletter it's giving news about web design and development, but I was curious here.

Who is your audience for this?

Is this something you want clients to sign up for,

or are you looking for other web designers to sign up?

And if it's clients, then you're going to want to give them more information,

like, "Hey, why do you want to redesign your site?"

as opposed to, "Hey, here is the latest CSS3 thing,"

which this gives me the feeling for.

And I question here if this is more a portfolio site,

do you really even want that, or would it be better for you to have the client contact you?

I noticed one more thing, before we move on,

because this can help performance, and that's very important.

You're doing some DNS prefetching up here, which is great.

Depending on the amount, because too many is also not a good thing,

you should take a look at your site metrics and find out if the users

absolutely need to prefetch some of these assets or pages.

If they do, if they're visiting them, great.

If they're not, just remove them, because it might be causing a lot of overhead,

because it's prefetching all those assets, and you might not need to be.

It in turn causes your performance to lag like we're seeing there.

I also notice that we're loading jQuery twice here,

and that's common in theme development.

What you're going to want to do is check your functions file

and make sure that you're conditionally loading jQuery

or your other assets only when you need it

and you're doing that by using WordPress's jQuery.

When you're building a theme, WordPress comes with jQuery installed,

so what you want to do is say, "Hey, if I'm using something that needs jQuery,

load WordPress's version instead of my own."

This is going to have it twice loaded,

and I was looking at Pingdom, and it does add to that page load time

just a little bit by pulling that twice.

That's a good idea.

Well, we can move onto the final site that we're going to be looking over

here on Treeviews today.

Mufaddal is one of our students,

and he wrote in and said this is his latest project,

VillaPedra.com.

"Let me know if it's okay."

Switching it up, this is not a portfolio site.

This is for a business in Portugal.

It's a series of vacation homes that look absolutely fantastic.

I think if we had the budget we would go there ourselves

and look at that and see if those pictures were as good as they could be.

Maybe we can take some better pictures.>>Treeviews on site.

Man, look at this. Look at these great pictures.

As you go through the site, and granted, it's in Portuguese to begin with.

There is also an English version as well,

but as you go through the site, the pictures are breathtaking.

They're amazing.

The pictures can definitely sell this thing by itself.

One of the problems that we see, though, as we go through some of the different sections,

is that we have this big block of text that is in the way.

And the structure of some of the different pages changes,

whereas we have this large text block here,

but on, say, the Reserve page,

I believe there is a completely different one,

and then on some of the pages the background is changing

when there is really no opportunity to see it,

because all you have is this very thin space across the top.

It's a little busy that way on some of those pages.

Once you drill down and you see the different houses

under Casas, there is plenty of great information.

It's like all the information that you would want, so this is great.

You really thought about what are the potential clients looking for

when they need information about these homes that we're trying to sell them

for rent.

Everything here in either language is here

with this call to action down here.

Now, this is the call to action that I feel needs to be bigger.

This is the reserve button to book this particular place.

It almost gets lost within this layout,

and if we brought it up or if we made it a little bit bigger,

like a button or some kind of thing there,

we could certainly lay out this page a little bit better,

but that's one of the things that we're driving people to.

So rather than bury it at the bottom,

why not have it actually in both places?

We can have it up here. We can have it down at the bottom.

Whether they're going to look this way or they're going to scroll all the way to the bottom

and see it there, give them the opportunity to convert

from a business standpoint.

But again, as you go to the Casas page

and then so you get to this page,

and rather than a list of the different houses that are available

you have what almost looks like a photo gallery,

and so my first thought was, "Oh, this is a photo gallery of all the houses."

Then I click one, and then it gives some of this great information about this area

or this house, and it was a little awkward to me,

especially since on some of the other sections

looking at the pictures or finding that content was a little bit different.

I almost feel like saying pick one way

to show off this content and stick with it.

Make sure that the user doesn't have to relearn the interface.

But if we can go to the Atmosfera page, please,

one of the things we also noticed was that you have

some of these things, and they're very subtle.

You have these arrows on either side of the page,

and when I saw them for the first time, I wasn't sure if I was going to be

clicking to the next section, to the next page of content,

where in fact it switches to the next picture on the background.

Gil pointed out, as we were talking about this before,

that you can actually X out.

You can close this text box there and see this great picture.

But then how do we get the text back?

There is no way to get it back.

Here's what I think. This is a gorgeous site, a gorgeous site.

I think that some of the pieces of interface,

the interaction, could use a little streamlining,

but the fact that you've made it really gorgeous

and there is plenty of information, plenty of content

that potential customers would need, I think it's a great advantage.

Yeah, absolutely, like you said, the images are beautiful,

and they're very well optimized for all devices.

I checked. They're actually quite small, and they look great, as you can see.

Now, one thing I noticed is a minor usability issue.

Say you're in this page,

and you want to view it in English.

Well, instead of keeping you on the same page, it brings you back to the index page,

so now I've got to go back to the page where I was,

and it translates, so I have to go find what page I was in.

And I also noticed that on mobile devices, so I'll go ahead and reduce the width here,

once you start scrolling on the page, as you can see here,

the footer gets pushed up, and it scrolls with the content,

and that also happens on the emulator and on the actual device.

I looked at it earlier.

One thing I did to see if I could fix it was I displayed

the footer.

I removed the absolute positioning,

and that positioned it nicely at the bottom,

and it didn't scroll, and it always sticks to the bottom.

Try that. Position it either relative or nothing at all.

Keep it not in an absolute position,

and that should fix it, and I also noticed you did a great job

of separating the CSS and the JavaScript, for example,

in the forms.

Everything was nicely kept in their respective files.

You have a JavaScript function that loads in the images,

and you have the code on every page,

so instead of loading that every time, just separate that

and keep it in the JavaScript file.

And one more thing.

These arrows, as we were talking about earlier with Dan,

once you get to about the 850 mark

they get squished in towards the content,

and because of that, they're no longer clickable.

They don't work, but then again,

once you hit, say, 600, I believe, 780, they disappear.

Maybe also make them go away at that break point,

because they're not really necessary, because they're about half clickable, as we can see here.

One last thing.

In the thumbnail gallery,

once we click on one of them—this one doesn't do it.

Let's try another one.

So once it transitions to the next one, you can see how that image reflows the width.

One thing to prevent that is either adding a width in the style sheet

or in the actual image tag itself, and it prevents that reflow

every time it transitions.

Yeah, I think that's something you probably need to take care of right away,

because as you can see, it's a little distracting.

Your images are already beautiful,

so keep them that way and don't distract the user with that border reflowing

across the page, and that's pretty much it.

Nice job, Mufaddal.

Zac, I know you're ready to book one of these houses immediately.

What feedback did you have for the website as well?

First let me say that when you land on this homepage,

because I first hit it in Portuguese and I know enough Spanish

to know that that's going to be casas, but I didn't know what the site was, but it didn't matter.

I knew it was beautiful,

and that has some pros and cons to it.

One, wow, it's great. I'm sticking on this site.

It's going to be awesome.

But on the other hand, I don't really know what it does.

Were these rentals? Are you an architect?

So one thing I'd really suggest is get one of those beautiful pictures

of the place you want to book the most on there with a reserve button.

Pull that call to action right up to the top

so that instead of your copy here

they're really seeing what you have,

although these images are beautiful.

Something that you'll see often

with slideshows that are changing background images

is you'd have little thumbnails of each one,

and then that's going to make it more clear to the user

that when they click on that it's going to change a background,

because when I clicked on these, I went kind of quick.

I went bup, bup, bup, bup, and I didn't know what changed,

because you have the slideshow rotating,

and after you click this 2 or 3 times,

it stops responding, and this is a funky JavaScript thing.

Like if you make it go all the same speed,

you have a delay and stop then,

but I wasn't sure what it was doing at that point.

Some notes on the homepage there.

When you do view the source code,

I notice that your descriptions are really long.

Google is going to limit how many characters you could use.

Usually keep it to about a tweet's worth,

so all of this extra content is going to be cut off,

and you're not going to get it.

That's something that's important.

Now, in terms of multilingual sites,

they can get really hard to manage,

and the reason is because in this case

we have a homepage, and if we click into English,

you're maintaining 2 different homepages, and if you're using HTML

what that means is you're using no includes,

which means that you're completely reproducing

this page each time, and if you make changes in one place,

you're going to have to make them in another.

And from having dealt with a couple of these sites before

I know that that can become a real pain.

This is a place where pulling this into a content management system

is probably worth the design hassle,

because down the road it makes it so much easier

to maintain content, and then that's going to keep track of some of the things.

Like Gil was saying, if you're at this page

and then you pop into Portuguese,

you're going to be redirected and not keep the same one,

and that's a JS thing you could fix there.

There is also this other issue of if you're in English,

you don't see that in the URL, so we're assuming that it's the homepage.

And finally, a note here.

If you are using HTML, that can sometimes be a little tricky.

If someone is trying to share a link, for example,

you can't link to /houses.

You have to link to /houses.html.

A CMS will take care of that.

The other kind of hack is you store each page in a different folder,

or with htaccess you could remove those.

Just some things to think about in that regard.

Now, when I came onto here,

it took me a second to realize these were the names of the houses,

and I really like that.

But when I click onto the page,

I didn't see that thumbnail anymore,

and that left me a little confused as to, wait, hold on.

I'm here, but what am I looking at now?

I see this name, but it doesn't match any name here,

and then the other thing was I had to click on Full Gallery

in order to see all of these awesome pictures,

and you can see now we have a different slideshow format

that's appearing here.

This one might be a little bit better on the homepage,

and with all this real estate here put all your pictures up.

Get thumbnails of all of them, because they're so beautiful.

There is no reason not to be using them,

and maybe if you had a primary picture that looked like this,

then all of this content could be balanced really well

with a picture and a big call to action under it.

Now, I did notice that you're listing your prices the same

whether you're on the English or Portuguese site.

Automatically that's going to be a tough conversion

for someone who is looking for U.S. dollars,

so I'd suggest changing that detail back and forth,

and again, this can be a little tricky.

Currencies change. Currencies shift.

If you have a fixed price in mind that's probably not going to matter too much,

but something to think about.

And then for me, when you come down to the booking page,

if I want to book this house,

now I get to a form.

Where does it say which house I want?

I couldn't find a place.

That's one problem, because how are you going to determine that?

One thing could be you might have a picture version

of a drop down or select box.

The other is that if you're dealing with a PHP page,

like this is, I can click Book

and add the name of the location that I want right in there in the URL.

Then I can pull that into the form, auto-populate it,

and that really gives that strong user experience.

There are no delays. There is no hesitation.

And anytime you get closer to that final point,

whether it's a site where you're collecting payments

or you're doing a contact form, that drop-off rate is really significant.

When you put that obstacle in, there is a chance that some people

will be like, "I want to book this," and now I click Book.

"Oh, I've got to do this again. Whatever."

And they stop there.

On the business side too, on the back end,

it's impossible to know which houses got clicked on

for booking reservations.

If that information, if that variable got passed through

and we were able to see that on the back end,

we could find out that the third house there, the Loureiro house or whatever it was called,

was getting twice as many as all the rest

or other things like that, so maybe there is something about the house.

Maybe it's something about the content or the photos that we showed.

There could be something about that,

and so that's a data point that would be really helpful for the business side of things.

And I'm even looking if there are analytics

set up on these pages, and sort of on initial look

it doesn't look like we're tracking any of that data,

so if you are, maybe it's on the server side.

That's good. But like you said, if not, that's really important to note.

Well, we want to thank everyone

for submitting all the projects this week.

We got a whole bunch.

Zac, Gil, thank you very much.

I'm Dan. We'll see you next time on Treeviews.

[treeviews]