1
00:00:00,000 --> 00:00:02,360
[? music ?]

2
00:00:02,360 --> 00:00:04,230
[treeviews]

3
00:00:04,230 --> 00:00:06,930
Hey, everyone.

4
00:00:06,930 --> 00:00:08,890
Welcome back to Treeviews, the show where you, the Treehouse member,

5
00:00:08,890 --> 00:00:10,720
can submit your work or your project

6
00:00:10,720 --> 00:00:14,350
to a panel of Treehouse teachers, and we'll give you some feedback.

7
00:00:14,350 --> 00:00:16,800
Whatever you're looking for, we can help you out.

8
00:00:16,800 --> 00:00:19,960
Let me introduce—or you guys will introduce yourselves.

9
00:00:19,960 --> 00:00:22,730
I'm Dan Gorgone, marketing and business teacher here at Treehouse.

10
00:00:22,730 --> 00:00:24,210
Hi, everyone.

11
00:00:24,210 --> 00:00:26,220
Zac Gordon, WordPress teacher.

12
00:00:26,220 --> 00:00:29,720
Hey, I'm Gil Hernandez. I'm one of the front-end design teachers here at Treehouse.

13
00:00:29,720 --> 00:00:32,150
All right, let's jump right into it.

14
00:00:32,150 --> 00:00:34,810
Our first submission comes from Danaan Clarke,

15
00:00:34,810 --> 00:00:36,120
and that's pronounced Day-non.

16
00:00:36,120 --> 00:00:38,310
That's what it says here on the website.

17
00:00:38,310 --> 00:00:41,610
Danaan Clarke submits this. He says, "This is a simple portfolio website.

18
00:00:41,610 --> 00:00:45,490
"It's my first website that I've built other than Smells Like Bacon, of course.

19
00:00:45,490 --> 00:00:49,610
"I'd appreciate any feedback on the design, the code, or the user experience.

20
00:00:49,610 --> 00:00:53,600
Other things I'd like to know are some of the dos and don'ts of a portfolio site,"

21
00:00:53,600 --> 00:00:58,910
which that's a great question, "and how to get a job as a junior front-end design guy."

22
00:00:58,910 --> 00:01:01,840
These are all great questions, and I think Danaan is probably in a position

23
00:01:01,840 --> 00:01:05,840
that a lot of the Treehouse members are in

24
00:01:05,840 --> 00:01:08,080
where they are out there for the first time

25
00:01:08,080 --> 00:01:10,820
building their first site, maybe just getting started

26
00:01:10,820 --> 00:01:13,160
with some of the work that they're doing for other clients.

27
00:01:13,160 --> 00:01:15,110
Danaan has put this site together,

28
00:01:15,110 --> 00:01:18,660
and the first thing I can say is that this is a nice, simple design.

29
00:01:18,660 --> 00:01:22,990
It's not too simple, like, "Geez, I wish there was a lot more here."

30
00:01:22,990 --> 00:01:26,400
One thing that gets a little sparse is some of the space at the bottom.

31
00:01:26,400 --> 00:01:28,770
If you go to a wider monitor,

32
00:01:28,770 --> 00:01:31,120
you can see that there is some white space down there,

33
00:01:31,120 --> 00:01:35,030
so the lack of a footer being there is one thing that I'll raise

34
00:01:35,030 --> 00:01:38,270
as a potential—not necessarily a red flag,

35
00:01:38,270 --> 00:01:41,560
but it's something you should probably have there, especially if you're on a mobile.

36
00:01:41,560 --> 00:01:43,290
That's something that you pointed out

37
00:01:43,290 --> 00:01:46,790
where if you're scrolling along on your iPhone or your Android

38
00:01:46,790 --> 00:01:49,950
and you're looking at this site it would be nice to have something

39
00:01:49,950 --> 00:01:51,200
that will jump you right back to the top.

40
00:01:51,200 --> 00:01:53,590
Otherwise you've got to scroll all the way back.

41
00:01:53,590 --> 00:01:57,770
Now, but this will look good on a mobile, which is nice.

42
00:01:57,770 --> 00:02:00,460
My only other hesitation was here on the homepage

43
00:02:00,460 --> 00:02:03,270
Simple + Useful Design, your tagline

44
00:02:03,270 --> 00:02:07,250
dominates the space, and you do list some of your skills here,

45
00:02:07,250 --> 00:02:10,110
which is good, but there is no call to action.

46
00:02:10,110 --> 00:02:14,500
What I'm kind of missing here is really kind of the point

47
00:02:14,500 --> 00:02:16,690
of why you put this site together.

48
00:02:16,690 --> 00:02:21,260
Is it to promote the work that's in your portfolio?

49
00:02:21,260 --> 00:02:25,820
Is it to generate some interest in yourself as a professional?

50
00:02:25,820 --> 00:02:28,410
Like I want you to check out my portfolio,

51
00:02:28,410 --> 00:02:31,490
here's a call to action for it, or I want you to contact me,

52
00:02:31,490 --> 00:02:33,600
here's a call to action for that as well.

53
00:02:33,600 --> 00:02:35,640
That's something that would be very easy to add,

54
00:02:35,640 --> 00:02:41,700
and if people are at all interested, it can get them going in the right direction on your site.

55
00:02:41,700 --> 00:02:44,810
Absolutely, and to add to that on the homepage,

56
00:02:44,810 --> 00:02:47,390
it would be great to see some of your work right away

57
00:02:47,390 --> 00:02:50,440
so once you land on the page you immediately start seeing some of his work,

58
00:02:50,440 --> 00:02:53,230
because it is quite nice, and on top of that,

59
00:02:53,230 --> 00:02:58,390
I'd perhaps maybe like to see the Skills section enhanced more,

60
00:02:58,390 --> 00:03:02,800
maybe using icons and contrasting colors in the headings

61
00:03:02,800 --> 00:03:06,540
and things like that, and on the code side of things,

62
00:03:06,540 --> 00:03:10,240
on the front-end code, it's a nice use of the Bootstrap grid,

63
00:03:10,240 --> 00:03:16,140
but I did notice in the HTML you are using things like paragraph tags

64
00:03:16,140 --> 00:03:21,240
to add structure to headings and images.

65
00:03:21,240 --> 00:03:25,900
And you're also using the presentational align attribute

66
00:03:25,900 --> 00:03:28,130
to align images center and things like that,

67
00:03:28,130 --> 00:03:30,890
and for example, below that here, this HR tag

68
00:03:30,890 --> 00:03:33,320
is being wrapped by a div.

69
00:03:33,320 --> 00:03:38,720
You can actually just leave that HR tag there and add that class span12 to it,

70
00:03:38,720 --> 00:03:41,400
and it will work exactly the same way.

71
00:03:41,400 --> 00:03:46,110
And I've actually noticed that in the mobile version,

72
00:03:46,110 --> 00:03:52,700
if we can bring up the simulator here, I noticed that the content

73
00:03:52,700 --> 00:03:55,870
in the portfolio page is sliding horizontally.

74
00:03:55,870 --> 00:04:01,230
So if you press and hold and drag anywhere in there,

75
00:04:01,230 --> 00:04:04,100
the content starts scrolling, and a good fix for that

76
00:04:04,100 --> 00:04:08,090
would be to add an overflow X property

77
00:04:08,090 --> 00:04:11,810
to the body and give it the value hidden.

78
00:04:11,810 --> 00:04:13,790
That should take care of it,

79
00:04:13,790 --> 00:04:17,430
and I did notice if you scroll down to the bottom here

80
00:04:17,430 --> 00:04:21,779
in the JavaScript where you're loading the Bootstrap

81
00:04:21,779 --> 00:04:25,810
that bootstrap.js file is missing.

82
00:04:25,810 --> 00:04:28,720
It's a missing resource, so it's looking for something that's not there,

83
00:04:28,720 --> 00:04:30,750
so if you don't need it, go ahead and delete that,

84
00:04:30,750 --> 00:04:35,220
and that's one less thing your browser has to load or at least look for.

85
00:04:35,220 --> 00:04:37,080
All right.

86
00:04:37,080 --> 00:04:40,580
To come at this again with more of a content perspective,

87
00:04:40,580 --> 00:04:43,900
one thing I do really like is how it's pronounced.

88
00:04:43,900 --> 00:04:45,150
Very helpful.

89
00:04:45,150 --> 00:04:47,580
I did notice, though, that it's a graphic,

90
00:04:47,580 --> 00:04:52,770
and it would be really great to maybe have this as text or a bit higher resolution one,

91
00:04:52,770 --> 00:04:55,790
because we could already see a little bit of pixelation

92
00:04:55,790 --> 00:04:59,820
going on with that graphic right there.

93
00:04:59,820 --> 00:05:02,190
I also think that it would be really great

94
00:05:02,190 --> 00:05:05,740
for this really strong design to have a matching favicon.

95
00:05:05,740 --> 00:05:08,380
You have a really strong use of red,

96
00:05:08,380 --> 00:05:11,710
and this logo up here would I think be really good

97
00:05:11,710 --> 00:05:16,160
to have something matching up in there, and not too hard to generate.

98
00:05:16,160 --> 00:05:18,610
Let's go check out the bio page,

99
00:05:18,610 --> 00:05:22,060
because that was one place I noticed

100
00:05:22,060 --> 00:05:25,670
we could use a little bit more layout design with this,

101
00:05:25,670 --> 00:05:29,150
because this bio page works really well

102
00:05:29,150 --> 00:05:32,280
if we're coming onto the mobile device,

103
00:05:32,280 --> 00:05:35,280
and we see this, and the text is centered.

104
00:05:35,280 --> 00:05:38,190
But on the full screen here

105
00:05:38,190 --> 00:05:41,500
it would probably be helpful to have this floated to the right

106
00:05:41,500 --> 00:05:45,160
and then have the text a bit more present.

107
00:05:45,160 --> 00:05:48,580
Now, this graphic here, I personally like it.

108
00:05:48,580 --> 00:05:51,870
I think that "This is me" gives some personality and flavor to it.

109
00:05:51,870 --> 00:05:53,210
If you're going to keep that,

110
00:05:53,210 --> 00:05:57,800
I would suggest, though, that removing this blue color background

111
00:05:57,800 --> 00:06:00,380
and having it either flat against the white,

112
00:06:00,380 --> 00:06:04,880
or this color here is a little bit different

113
00:06:04,880 --> 00:06:10,150
than this one here, so maybe having those match a little bit better.

114
00:06:10,150 --> 00:06:15,170
The last thing here on this bio page is that this isn't really a bio.

115
00:06:15,170 --> 00:06:19,340
It gives some good marketing speak and what you're interested in and your specs,

116
00:06:19,340 --> 00:06:23,890
but what we'd be really expecting on a bio page is a bit more of a biography

117
00:06:23,890 --> 00:06:27,040
about you, getting a little bit more personal.

118
00:06:27,040 --> 00:06:30,440
If you don't want to get super personal with the site,

119
00:06:30,440 --> 00:06:34,390
like this is my dog's name and this is what I like doing for fun,

120
00:06:34,390 --> 00:06:36,760
then you can keep it more professional

121
00:06:36,760 --> 00:06:40,470
but still have a bit more information about yourself.

122
00:06:40,470 --> 00:06:43,330
And once again, it's a bit of a content dead end.

123
00:06:43,330 --> 00:06:46,850
You get here. You have the picture, you have the text.

124
00:06:46,850 --> 00:06:48,470
But there is no link to something else.

125
00:06:48,470 --> 00:06:50,140
There is no call to action.

126
00:06:50,140 --> 00:06:52,950
Now that you've learned about me, here's a contact link,

127
00:06:52,950 --> 00:06:55,850
or now that I've talked about these projects that I like doing,

128
00:06:55,850 --> 00:06:57,210
here's a link to those projects.

129
00:06:57,210 --> 00:07:00,430
It's kind of like you go to this page, you scroll down,

130
00:07:00,430 --> 00:07:02,540
all right, well, then I have to go back up to the navigation.

131
00:07:02,540 --> 00:07:05,010
It should give them a nice, natural flow.

132
00:07:05,010 --> 00:07:07,610
Yeah, and he was doing such a nice job of using the grid

133
00:07:07,610 --> 00:07:10,980
in the other pages, so why not apply that same kind of structure

134
00:07:10,980 --> 00:07:13,050
to the biography?

135
00:07:13,050 --> 00:07:15,000
We could see it a bit on the portfolio page.

136
00:07:15,000 --> 00:07:19,150
Now, this is something that we had talked a little bit about beforehand,

137
00:07:19,150 --> 00:07:21,470
and we're not completely sure in this regard,

138
00:07:21,470 --> 00:07:25,850
but you are using your own site as a portfolio piece.

139
00:07:25,850 --> 00:07:30,140
And I've seen this done a lot, and sometimes it can be a good thing,

140
00:07:30,140 --> 00:07:35,150
but sometimes it detracts away from your own experience and portfolio

141
00:07:35,150 --> 00:07:38,650
if someone is coming here and saying, "Well, let's see, their most recent project

142
00:07:38,650 --> 00:07:41,150
and some of their nicer work was their own site,"

143
00:07:41,150 --> 00:07:44,440
so the site should probably really speak for itself

144
00:07:44,440 --> 00:07:47,810
and not using this in the portfolio.

145
00:07:47,810 --> 00:07:50,860
I also noticed that content-wise we could probably have

146
00:07:50,860 --> 00:07:55,040
a bit more explanation here, maybe some text floated to 1 side

147
00:07:55,040 --> 00:07:57,040
and the graphic on another.

148
00:07:57,040 --> 00:08:00,050
It's really good to talk about what was the problem I faced,

149
00:08:00,050 --> 00:08:03,310
how did I solve it, what skills were necessary,

150
00:08:03,310 --> 00:08:05,180
and then that call to action right there.

151
00:08:05,180 --> 00:08:07,420
If you are looking for work like this,

152
00:08:07,420 --> 00:08:10,630
get in touch with me, and I can help you out with that.

153
00:08:10,630 --> 00:08:12,210
[Gil Hernandez] Some good case studies in there.

154
00:08:12,210 --> 00:08:15,540
And perhaps why not link some of those skills listed on the homepage

155
00:08:15,540 --> 00:08:17,800
right to those parts of the portfolio site.

156
00:08:17,800 --> 00:08:19,070
Bring them directly there.

157
00:08:19,070 --> 00:08:21,210
Logo design, linking right there to the logo.

158
00:08:21,210 --> 00:08:23,480
We want to see more. It looks good.>>Yeah, indeed.

159
00:08:23,480 --> 00:08:27,590
Definitely off to a great start, and we're encouraged.

160
00:08:27,590 --> 00:08:29,000
Gil did mention this.

161
00:08:29,000 --> 00:08:31,450
I don't know as much about the specific CSS fix,

162
00:08:31,450 --> 00:08:35,700
but we could see, though, that this major header on some of the pages

163
00:08:35,700 --> 00:08:38,280
is getting cut off right there.

164
00:08:38,280 --> 00:08:40,470
I don't know. You mentioned earlier some of that.

165
00:08:40,470 --> 00:08:42,640
[Gil Hernandez] Thanks for bringing that up.

166
00:08:42,640 --> 00:08:46,540
Just pay attention to the font sizes on there and the headings.

167
00:08:46,540 --> 00:08:49,090
You can easily either adjust it with some paddings

168
00:08:49,090 --> 00:08:52,020
or reduce the font size a little bit, but some of them are getting cut off,

169
00:08:52,020 --> 00:08:57,340
as you can see here in My Portfolio and in Biography as well.

170
00:08:57,340 --> 00:09:00,490
And that's something that I think is a lesson for all of our students,

171
00:09:00,490 --> 00:09:03,320
whether you're beginners or more experienced,

172
00:09:03,320 --> 00:09:06,350
is that if you do have a portfolio site out there

173
00:09:06,350 --> 00:09:10,820
you can't assume that people are just going to be looking for designers on a laptop.

174
00:09:10,820 --> 00:09:12,850
It may be a spur of the moment thing.

175
00:09:12,850 --> 00:09:15,900
It may be in a business meeting or meeting someone at a coffee shop

176
00:09:15,900 --> 00:09:17,550
saying, "Oh, check out this designer.

177
00:09:17,550 --> 00:09:20,500
He designed for such and such. Check out his site right now."

178
00:09:20,500 --> 00:09:22,630
But then when you do, there are some things there

179
00:09:22,630 --> 00:09:24,100
that don't look as good as they could.

180
00:09:24,100 --> 00:09:28,110
Always anticipate that. Make sure to test it on an iPhone or a laptop.

181
00:09:28,110 --> 00:09:31,110
And then you end up with a great site.

182
00:09:31,110 --> 00:09:34,570
Now, speaking of a great site coming up, we have our own John Locke.

183
00:09:34,570 --> 00:09:37,890
He's one of the moderators on the Treehouse forums.

184
00:09:37,890 --> 00:09:39,390
You've probably seen him there.

185
00:09:39,390 --> 00:09:42,450
His website, Lockedown Design,

186
00:09:42,450 --> 00:09:44,090
is the one that he submitted to us.

187
00:09:44,090 --> 00:09:48,060
He writes, "The goal for this site is to generate leads and business

188
00:09:48,060 --> 00:09:51,140
"and also inform clients and people within the design community

189
00:09:51,140 --> 00:09:55,050
"about trends within design, how to get the most out of this site,

190
00:09:55,050 --> 00:09:59,700
"how to have a good project, and how to govern your site content once you have it.

191
00:09:59,700 --> 00:10:02,950
"Any input on the design content or storytelling

192
00:10:02,950 --> 00:10:04,600
would be appreciated."

193
00:10:04,600 --> 00:10:08,090
Well, coming here right off the bat,

194
00:10:08,090 --> 00:10:13,250
it's a nice, professional design, so that's a great thing, John, right there.

195
00:10:13,250 --> 00:10:17,390
It mentions the specialty and the purpose of the site.

196
00:10:17,390 --> 00:10:21,570
You can see that clearly this is about design

197
00:10:21,570 --> 00:10:26,560
and about multiple devices, and right here with the copy

198
00:10:26,560 --> 00:10:28,240
it's not a lot to read.

199
00:10:28,240 --> 00:10:31,090
It's pretty simple. It gets right to the point.

200
00:10:31,090 --> 00:10:33,560
It's great that you get right down to that.

201
00:10:33,560 --> 00:10:38,780
A couple things. Oh, the portfolio had some great descriptions in there.

202
00:10:38,780 --> 00:10:41,920
When you include different pieces

203
00:10:41,920 --> 00:10:44,920
in your portfolio, whether it's the work page

204
00:10:44,920 --> 00:10:47,270
or portfolio or clients, whatever you want to call it,

205
00:10:47,270 --> 00:10:50,710
definitely have some really positive experiences in there.

206
00:10:50,710 --> 00:10:53,390
There were some really good ones here.

207
00:10:53,390 --> 00:10:55,880
I know that—actually, the one above this one,

208
00:10:55,880 --> 00:10:57,160
if we can scroll back up,

209
00:10:57,160 --> 00:11:01,290
this one here, the green one, it looks like a good design,

210
00:11:01,290 --> 00:11:06,290
and you describe these are the key things that we worked on here,

211
00:11:06,290 --> 00:11:09,720
but in the description of it, I know that the project

212
00:11:09,720 --> 00:11:13,020
was described as like, "I did this on the side"

213
00:11:13,020 --> 00:11:17,360
or as, "When I had some free time" or something,

214
00:11:17,360 --> 00:11:20,470
and that's fine.

215
00:11:20,470 --> 00:11:27,240
I would try to keep the verbiage as professional, as high level,

216
00:11:27,240 --> 00:11:29,530
high quality as you can.

217
00:11:29,530 --> 00:11:34,550
The words that are used, the copy that's used sometimes, you don't want to mislead people.

218
00:11:34,550 --> 00:11:36,560
You want everything about it to be positive,

219
00:11:36,560 --> 00:11:40,520
lessons learned, challenges overcome, things like that.

220
00:11:40,520 --> 00:11:43,970
The couple things that I saw here

221
00:11:43,970 --> 00:11:49,400
from a content point of view, if we go back to John's site,

222
00:11:49,400 --> 00:11:53,680
the blog, one of the goals here that you mentioned in your letter

223
00:11:53,680 --> 00:11:58,280
is that you want to have a lot of current information about design, about the industry.

224
00:11:58,280 --> 00:12:01,550
When I click through to the blog to see what you've been writing about,

225
00:12:01,550 --> 00:12:06,380
the last update is almost 2 months ago now,

226
00:12:06,380 --> 00:12:10,240
so that's something where—blogs are tough.

227
00:12:10,240 --> 00:12:14,780
You've either got to keep them going, or you have to cut your ties.

228
00:12:14,780 --> 00:12:20,050
I do see that over on the right-hand side you have the most recent tweets that you've done,

229
00:12:20,050 --> 00:12:23,030
and so if you're active on Twitter, which is certainly a lot easier,

230
00:12:23,030 --> 00:12:25,170
then that's fantastic.

231
00:12:25,170 --> 00:12:27,980
If the blog is not getting the attention that it needs, though,

232
00:12:27,980 --> 00:12:30,490
you do have to make a decision about whether to keep it up there.

233
00:12:30,490 --> 00:12:36,730
The older that thing is, the more of a hassle it can be.

234
00:12:36,730 --> 00:12:39,680
It can be sort of a black mark against your content.

235
00:12:39,680 --> 00:12:43,670
Now, if it means that you're just updating once a month, that's fantastic.

236
00:12:43,670 --> 00:12:45,210
That's fine.

237
00:12:45,210 --> 00:12:47,910
If people can look at your blog and see that you've been updating it on a regular basis,

238
00:12:47,910 --> 00:12:50,400
even if it's just once a month, then that's totally cool.

239
00:12:50,400 --> 00:12:52,430
Let's see, the newsletter call to action.

240
00:12:52,430 --> 00:12:57,260
If we go up here, right here, "Subscribe to my Email Newsletter."

241
00:12:57,260 --> 00:13:00,160
And then you describe what subscribers get,

242
00:13:00,160 --> 00:13:02,370
and you say it's a weekly thing.

243
00:13:02,370 --> 00:13:05,670
If I'm looking at the blog and I see it hasn't been updated a lot

244
00:13:05,670 --> 00:13:08,930
and then I see this and I see that you're offering weekly content,

245
00:13:08,930 --> 00:13:12,050
I wonder what am I missing here?

246
00:13:12,050 --> 00:13:14,710
Shouldn't there be more content in the blog?

247
00:13:14,710 --> 00:13:16,850
What exactly are people getting?

248
00:13:16,850 --> 00:13:20,760
Right there I think a sample, a link to a sample newsletter,

249
00:13:20,760 --> 00:13:25,150
would be helpful to give people a taste of what they would get.

250
00:13:25,150 --> 00:13:28,030
There is plenty of stuff here. The portfolio is in great shape.

251
00:13:28,030 --> 00:13:30,270
There is a lot of great stuff that you worked on.

252
00:13:30,270 --> 00:13:33,110
Absolutely, some very good suggestions, Dan.

253
00:13:33,110 --> 00:13:37,120
Right off the bat, I noticed that on the homepage

254
00:13:37,120 --> 00:13:39,560
this main image right here.

255
00:13:39,560 --> 00:13:41,020
It's a little overwhelming.

256
00:13:41,020 --> 00:13:44,620
I mean, it's good that you're able to build and adapt

257
00:13:44,620 --> 00:13:48,460
for all these kinds of devices, but maybe show 2 or 3,

258
00:13:48,460 --> 00:13:51,200
not necessarily 5.

259
00:13:51,200 --> 00:13:53,460
The image is also a little too large.

260
00:13:53,460 --> 00:13:57,250
You might want to optimize that, and also below in the footer

261
00:13:57,250 --> 00:13:59,800
I notice you might want to use some contrast

262
00:13:59,800 --> 00:14:05,590
to differentiate the headings from the text below and things like that.

263
00:14:05,590 --> 00:14:11,810
I also noticed that the transitions in the navigation are quite nice.

264
00:14:11,810 --> 00:14:14,650
There is a nice balance of CSS transitions throughout the site.

265
00:14:14,650 --> 00:14:18,880
But you need to pay a little bit more attention to some of the details,

266
00:14:18,880 --> 00:14:22,420
like for example, if, say, you hover over Home,

267
00:14:22,420 --> 00:14:27,940
you'll see the box shadows or inner shadows load first

268
00:14:27,940 --> 00:14:31,080
and then the transition, and on mouse out

269
00:14:31,080 --> 00:14:35,000
it gets squared again, and you see what's going on there?

270
00:14:35,000 --> 00:14:38,850
The same with the logo, so I'm not sure if that's exactly the effect you're going for.

271
00:14:38,850 --> 00:14:41,810
If it's not, you might want to go in there and adjust that.

272
00:14:41,810 --> 00:14:43,340
But it's still looking good.

273
00:14:43,340 --> 00:14:45,970
I like the transitions in the footer as well.

274
00:14:45,970 --> 00:14:48,670
These are nice and soft.

275
00:14:48,670 --> 00:14:51,790
I also notice that the page time is a little slow.

276
00:14:51,790 --> 00:14:54,170
At times it exceeds about 2½ seconds,

277
00:14:54,170 --> 00:14:57,050
which you might want to pay attention to that.

278
00:14:57,050 --> 00:15:00,490
There are also some assets missing.

279
00:15:00,490 --> 00:15:04,100
If you take a look at the source code,

280
00:15:04,100 --> 00:15:06,320
some of your JavaScript files are missing.

281
00:15:06,320 --> 00:15:09,810
I believe it's script_1.js, so again,

282
00:15:09,810 --> 00:15:12,470
the browser is looking for that asset, but it's not there.

283
00:15:12,470 --> 00:15:16,270
Remove it from your source code, and that's one less thing,

284
00:15:16,270 --> 00:15:20,810
and other than that, everything looks good in mobile.

285
00:15:20,810 --> 00:15:23,130
There is one thing, though.

286
00:15:23,130 --> 00:15:26,780
If you take a look at the contact page

287
00:15:26,780 --> 00:15:31,650
and you reduce the browser width here, the same thing happens on mobile.

288
00:15:31,650 --> 00:15:36,230
You'll notice that the fields are breaking in the layout there,

289
00:15:36,230 --> 00:15:38,030
so you'll want to pay attention to that.

290
00:15:38,030 --> 00:15:40,620
They're extending beyond the viewport,

291
00:15:40,620 --> 00:15:43,690
and the same thing happens for the headings.

292
00:15:43,690 --> 00:15:46,410
Let's go to About.

293
00:15:46,410 --> 00:15:51,010
Again, you can see the lag in the load time there.

294
00:15:51,010 --> 00:15:54,250
Let's go to Work. You can really see that there.

295
00:16:02,500 --> 00:16:04,140
There we go.

296
00:16:04,140 --> 00:16:07,940
So if I reduce the screen width,

297
00:16:07,940 --> 00:16:09,870
you can see some of those headings.

298
00:16:09,870 --> 00:16:11,510
See, there is one of them, for example,

299
00:16:11,510 --> 00:16:15,180
this ConsultingByCourtney poking out of the viewport.

300
00:16:15,180 --> 00:16:18,650
Things like that. You can adjust the font sizes with media queries and things like that.

301
00:16:18,650 --> 00:16:21,670
But other than that, nice job, John.

302
00:16:21,670 --> 00:16:26,160
First, I want to say again a shout out to John for being awesome on the forums.

303
00:16:26,160 --> 00:16:28,190
It's definitely a huge help.

304
00:16:28,190 --> 00:16:30,260
Anytime I go in to answer a question

305
00:16:30,260 --> 00:16:34,550
and we've been on a weekend or just out for a day,

306
00:16:34,550 --> 00:16:38,750
then it's really cool to see you posting up, and I really appreciate you out there.

307
00:16:38,750 --> 00:16:41,000
We know that this is a WordPress site,

308
00:16:41,000 --> 00:16:43,940
and one of the easy ways to tell when it's a WordPress site

309
00:16:43,940 --> 00:16:47,360
is you add wp-admin to the end,

310
00:16:47,360 --> 00:16:52,330
and you can see we have our WordPress login page here.

311
00:16:52,330 --> 00:16:55,650
That's neither a good or bad thing except that we know

312
00:16:55,650 --> 00:16:57,890
that we're working in WordPress.

313
00:16:57,890 --> 00:17:01,460
A few little WordPress theme-specific things here.

314
00:17:01,460 --> 00:17:03,230
If we pop into the source code,

315
00:17:03,230 --> 00:17:09,640
WordPress theme is always going to have a style.css file,

316
00:17:09,640 --> 00:17:11,980
which we can see right here,

317
00:17:11,980 --> 00:17:18,140
and when we click through to that, we have our basic WordPress metainformation here,

318
00:17:18,140 --> 00:17:20,970
which you do a great job of explaining,

319
00:17:20,970 --> 00:17:23,400
and just a few little tips or suggestions here.

320
00:17:23,400 --> 00:17:27,050
Theme name, first of all, Lockedown Design is really cool,

321
00:17:27,050 --> 00:17:30,160
because your name works really well with that,

322
00:17:30,160 --> 00:17:32,030
LockeDown, lock down the design.

323
00:17:32,030 --> 00:17:36,300
I really like that, but you might want to add Lockedown Design

324
00:17:36,300 --> 00:17:38,580
on to that for the theme name.

325
00:17:38,580 --> 00:17:40,300
Author is good.

326
00:17:40,300 --> 00:17:45,140
Now, theme URI, ideally you like to have

327
00:17:45,140 --> 00:17:47,730
a unique URL for this,

328
00:17:47,730 --> 00:17:50,320
especially when it's a theme that somebody could download,

329
00:17:50,320 --> 00:17:52,920
and you have a nice portfolio thing here.

330
00:17:52,920 --> 00:17:55,620
Maybe you want to think about, hey, is this something you want to release

331
00:17:55,620 --> 00:17:59,510
as a free theme as a little side project here.

332
00:17:59,510 --> 00:18:03,100
And of course, if you did that, you'd change the description.

333
00:18:03,100 --> 00:18:06,340
One place you could probably extend a bit more are these tags.

334
00:18:06,340 --> 00:18:09,130
You want to be as specific as possible

335
00:18:09,130 --> 00:18:11,180
and maybe add a few more of those in here,

336
00:18:11,180 --> 00:18:14,880
but again, we're kind of nitpicking with this a little bit.

337
00:18:14,880 --> 00:18:18,900
One other thing that I could say here about the style sheet

338
00:18:18,900 --> 00:18:23,010
is when we look for some of the URLs,

339
00:18:23,010 --> 00:18:25,960
we could see here that for this header image

340
00:18:25,960 --> 00:18:29,820
we're linking to a URL that is in the uploads folder.

341
00:18:29,820 --> 00:18:33,790
Anytime that you're working with theme graphics

342
00:18:33,790 --> 00:18:37,490
you really want to have those graphics stored along with the theme,

343
00:18:37,490 --> 00:18:41,370
because let's say you move the theme or you move something.

344
00:18:41,370 --> 00:18:43,240
Then this image link will be broken,

345
00:18:43,240 --> 00:18:48,410
so you want to have that really built into what you're doing.

346
00:18:48,410 --> 00:18:52,840
Another thing here is that we always know that a theme

347
00:18:52,840 --> 00:18:55,980
has a screenshot attached with it,

348
00:18:55,980 --> 00:18:58,730
and again, we're poking behind the scenes here,

349
00:18:58,730 --> 00:19:01,340
but it's something we can do because it's a WordPress site,

350
00:19:01,340 --> 00:19:03,980
and this is what happens when you have a graphic

351
00:19:03,980 --> 00:19:05,850
that comes along with your theme.

352
00:19:05,850 --> 00:19:09,600
This is what it looks like, so you probably want to update this a little bit,

353
00:19:09,600 --> 00:19:13,290
and one suggestion is that if you're going with the screenshot of the theme

354
00:19:13,290 --> 00:19:15,840
but the screenshot or the theme is always evolving,

355
00:19:15,840 --> 00:19:18,010
you might want to go more with the logo

356
00:19:18,010 --> 00:19:20,920
or something, like with your photo or something in it.

357
00:19:20,920 --> 00:19:23,320
That could be helpful.

358
00:19:23,320 --> 00:19:26,090
If we do look back at the theme,

359
00:19:26,090 --> 00:19:29,940
we could see that he's using a few major plugins here.

360
00:19:29,940 --> 00:19:39,990
One specifically is the SEO plugin by Yoast.

361
00:19:39,990 --> 00:19:45,790
We can see we've got the SEO plugin,

362
00:19:45,790 --> 00:19:49,390
and one thing that you do that's really good is on each page

363
00:19:49,390 --> 00:19:52,690
you have a unique description that goes along with it,

364
00:19:52,690 --> 00:19:54,950
and this is something that's often an oversight.

365
00:19:54,950 --> 00:19:56,940
Even when people install this plugin,

366
00:19:56,940 --> 00:20:01,550
they don't go back to each page and give a specific detailed thing,

367
00:20:01,550 --> 00:20:03,990
and that's really important, because you're going to have the link,

368
00:20:03,990 --> 00:20:06,880
the title link in Google, but you're also going to have that description,

369
00:20:06,880 --> 00:20:12,610
and you want that to be unique to whatever page you're using.

370
00:20:12,610 --> 00:20:17,260
I also saw that he has the Google+ authorship link here,

371
00:20:17,260 --> 00:20:21,310
which is really important, and it's a super easy plugin to install,

372
00:20:21,310 --> 00:20:24,630
and what this lets you do is when someone is searching for a blog post

373
00:20:24,630 --> 00:20:26,140
your picture shows up along with it,

374
00:20:26,140 --> 00:20:30,900
which has been proven to increase click through rates.

375
00:20:30,900 --> 00:20:33,490
We also see that there is some stuff going on here

376
00:20:33,490 --> 00:20:38,950
with adding Twitter cards, which I'm pretty sure is an automatically generated thing

377
00:20:38,950 --> 00:20:43,140
that maybe you don't need unless you're using it specifically on purpose.

378
00:20:43,140 --> 00:20:45,590
Anything that you could remove from the source code,

379
00:20:45,590 --> 00:20:48,000
especially when there is JS or other things involved,

380
00:20:48,000 --> 00:20:51,330
is going to help that out.

381
00:20:51,330 --> 00:20:54,060
Let's look, then, back at the site.

382
00:20:54,060 --> 00:20:58,000
Another thing I noticed is that you're using the MailChimp down here,

383
00:20:58,000 --> 00:21:01,600
and we know that by clicking on "Subscribe" without validating,

384
00:21:01,600 --> 00:21:04,710
and you can see we're using MailChimp, and no problem there.

385
00:21:04,710 --> 00:21:06,000
That's pretty common.

386
00:21:06,000 --> 00:21:10,910
However, if you take a little bit of extra time, you could do some inline validation here,

387
00:21:10,910 --> 00:21:13,320
and what that does is keep them on your site

388
00:21:13,320 --> 00:21:17,670
without going to that MailChimp page, which just protects your branding

389
00:21:17,670 --> 00:21:21,500
a little bit more, and I'd suggest that.

390
00:21:21,500 --> 00:21:26,150
All right, let's look a little bit more at some of these different pages

391
00:21:26,150 --> 00:21:29,550
and nitpicking some URL structure here for a minute.

392
00:21:29,550 --> 00:21:31,360
If we go to our Work page,

393
00:21:31,360 --> 00:21:35,130
we find that the URL is actually Portfolio.

394
00:21:35,130 --> 00:21:37,940
I don't know that this really matters,

395
00:21:37,940 --> 00:21:40,570
but in general, I would probably suggest

396
00:21:40,570 --> 00:21:44,830
keeping that name and URL structure the same.

397
00:21:44,830 --> 00:21:47,580
The link is called Work. URL is Portfolio.

398
00:21:47,580 --> 00:21:51,550
Yeah, it's not like it's a huge deal, but it's one of those things that's slightly different

399
00:21:51,550 --> 00:21:54,630
that can cause the user to hesitate when they're browsing.

400
00:21:54,630 --> 00:21:57,310
Yeah, and speaking of the user browsing,

401
00:21:57,310 --> 00:21:59,370
one thing is that this portfolio is great,

402
00:21:59,370 --> 00:22:01,370
and like we've suggested with the other one,

403
00:22:01,370 --> 00:22:05,000
adding some text along with that would be helpful,

404
00:22:05,000 --> 00:22:09,940
but this main image here bumps you right over to their site,

405
00:22:09,940 --> 00:22:12,000
and I was a little confused at first,

406
00:22:12,000 --> 00:22:15,520
because some of the colors are a little bit similar.

407
00:22:15,520 --> 00:22:19,970
It took me a minute to realize I wasn't on your site anymore.

408
00:22:19,970 --> 00:22:22,370
That happened to me just now. I accidentally clicked over to it.

409
00:22:22,370 --> 00:22:25,480
And I had to click the back button, because I thought I was actually on the site.

410
00:22:25,480 --> 00:22:29,460
That's one little bit, and we have the title and the link,

411
00:22:29,460 --> 00:22:32,620
and what you would normally assume is that when you're in a portfolio

412
00:22:32,620 --> 00:22:35,240
and you click on the title, it's going to go to your own page.

413
00:22:35,240 --> 00:22:37,930
Now, because we're using WordPress,

414
00:22:37,930 --> 00:22:42,640
this is a great place to add in custom post types,

415
00:22:42,640 --> 00:22:44,370
and I was curious if you did this,

416
00:22:44,370 --> 00:22:48,180
and a way you can figure it out is I guessed

417
00:22:48,180 --> 00:22:52,900
and added what I would assume the URL is for this post,

418
00:22:52,900 --> 00:22:56,050
and when we click through, we can see that it gets redirected

419
00:22:56,050 --> 00:23:01,290
to a case studies page where we can see that he then is giving specific information.

420
00:23:01,290 --> 00:23:06,310
Again, this was not public, so we're prying a little bit here,

421
00:23:06,310 --> 00:23:10,960
but again, I think that's really great that you have it,

422
00:23:10,960 --> 00:23:12,920
and I look forward to that being incorporated.

423
00:23:12,920 --> 00:23:15,920
Again, the title then links to that page,

424
00:23:15,920 --> 00:23:17,780
which you probably want to change up, and again,

425
00:23:17,780 --> 00:23:22,080
we have this issue of now we're at a URL structure called Case Studies.

426
00:23:22,080 --> 00:23:24,900
Before we were at Work, which is also the portfolio,

427
00:23:24,900 --> 00:23:27,360
and you probably want to flatten that out.

428
00:23:27,360 --> 00:23:30,550
A last little bit is that on the Blog section

429
00:23:30,550 --> 00:23:34,550
one thing that could be done, because you're using the HTML5 doc type,

430
00:23:34,550 --> 00:23:37,750
is actually wrapping each of these in an article tag

431
00:23:37,750 --> 00:23:43,990
and using a bit more of that HTML5 specific markup, which would be helpful.

432
00:23:43,990 --> 00:23:47,300
A suggestion as well, like Dan pointed out,

433
00:23:47,300 --> 00:23:50,180
we have some of these blog articles

434
00:23:50,180 --> 00:23:53,950
that are spaced out and maybe not as updated through time,

435
00:23:53,950 --> 00:23:58,110
and a thought that I had was maybe turning these more into resources

436
00:23:58,110 --> 00:24:02,520
or content that's throughout the site, maybe as calls to action

437
00:24:02,520 --> 00:24:05,280
of, hey, why do you need to redesign your site?

438
00:24:05,280 --> 00:24:07,400
That would be something great to see in the portfolio,

439
00:24:07,400 --> 00:24:10,300
and maybe that's an even more important call to action,

440
00:24:10,300 --> 00:24:13,740
or something then subscribing to the newsletter.

441
00:24:13,740 --> 00:24:16,150
The other thing is that when you click through to this title,

442
00:24:16,150 --> 00:24:18,820
it goes from having the blog URL

443
00:24:18,820 --> 00:24:23,020
to a straight URL specific to that post.

444
00:24:23,020 --> 00:24:25,220
Now, if we're in a blog section,

445
00:24:25,220 --> 00:24:27,730
then you probably want to have that /blog

446
00:24:27,730 --> 00:24:31,870
or /resources, but when I saw these specific pages,

447
00:24:31,870 --> 00:24:34,740
it really made me think, "This is great content.

448
00:24:34,740 --> 00:24:42,200
Maybe it could be changed from a blog format to something else more incorporated with the site."

449
00:24:42,200 --> 00:24:44,580
And if you have this content existing here,

450
00:24:44,580 --> 00:24:47,560
why not link to it from the About page or from the homepage

451
00:24:47,560 --> 00:24:53,490
or latest posts, or if he does write about his design philosophy.

452
00:24:53,490 --> 00:24:56,500
And clearly some of those things in the blog are going to speak to that,

453
00:24:56,500 --> 00:24:58,100
so why not link to them?

454
00:24:58,100 --> 00:25:00,390
Yeah, one last little thing here

455
00:25:00,390 --> 00:25:07,870
is that for this newsletter it's giving news about web design and development, but I was curious here.

456
00:25:07,870 --> 00:25:10,150
Who is your audience for this?

457
00:25:10,150 --> 00:25:13,970
Is this something you want clients to sign up for,

458
00:25:13,970 --> 00:25:18,420
or are you looking for other web designers to sign up?

459
00:25:18,420 --> 00:25:23,210
And if it's clients, then you're going to want to give them more information,

460
00:25:23,210 --> 00:25:26,140
like, "Hey, why do you want to redesign your site?"

461
00:25:26,140 --> 00:25:30,050
as opposed to, "Hey, here is the latest CSS3 thing,"

462
00:25:30,050 --> 00:25:32,810
which this gives me the feeling for.

463
00:25:32,810 --> 00:25:36,310
And I question here if this is more a portfolio site,

464
00:25:36,310 --> 00:25:41,330
do you really even want that, or would it be better for you to have the client contact you?

465
00:25:41,330 --> 00:25:43,550
I noticed one more thing, before we move on,

466
00:25:43,550 --> 00:25:45,880
because this can help performance, and that's very important.

467
00:25:45,880 --> 00:25:48,950
You're doing some DNS prefetching up here, which is great.

468
00:25:48,950 --> 00:25:55,940
Depending on the amount, because too many is also not a good thing,

469
00:25:55,940 --> 00:25:59,050
you should take a look at your site metrics and find out if the users

470
00:25:59,050 --> 00:26:02,840
absolutely need to prefetch some of these assets or pages.

471
00:26:02,840 --> 00:26:05,450
If they do, if they're visiting them, great.

472
00:26:05,450 --> 00:26:09,070
If they're not, just remove them, because it might be causing a lot of overhead,

473
00:26:09,070 --> 00:26:12,310
because it's prefetching all those assets, and you might not need to be.

474
00:26:12,310 --> 00:26:16,590
It in turn causes your performance to lag like we're seeing there.

475
00:26:16,590 --> 00:26:21,050
I also notice that we're loading jQuery twice here,

476
00:26:21,050 --> 00:26:24,390
and that's common in theme development.

477
00:26:24,390 --> 00:26:27,030
What you're going to want to do is check your functions file

478
00:26:27,030 --> 00:26:30,370
and make sure that you're conditionally loading jQuery

479
00:26:30,370 --> 00:26:33,190
or your other assets only when you need it

480
00:26:33,190 --> 00:26:36,380
and you're doing that by using WordPress's jQuery.

481
00:26:36,380 --> 00:26:39,960
When you're building a theme, WordPress comes with jQuery installed,

482
00:26:39,960 --> 00:26:43,660
so what you want to do is say, "Hey, if I'm using something that needs jQuery,

483
00:26:43,660 --> 00:26:47,300
load WordPress's version instead of my own."

484
00:26:47,300 --> 00:26:50,390
This is going to have it twice loaded,

485
00:26:50,390 --> 00:26:53,640
and I was looking at Pingdom, and it does add to that page load time

486
00:26:53,640 --> 00:26:56,260
just a little bit by pulling that twice.

487
00:26:56,260 --> 00:26:58,000
That's a good idea.

488
00:26:58,000 --> 00:27:02,490
Well, we can move onto the final site that we're going to be looking over

489
00:27:02,490 --> 00:27:04,990
here on Treeviews today.

490
00:27:04,990 --> 00:27:07,250
Mufaddal is one of our students,

491
00:27:07,250 --> 00:27:10,120
and he wrote in and said this is his latest project,

492
00:27:10,120 --> 00:27:12,550
VillaPedra.com.

493
00:27:12,550 --> 00:27:14,650
"Let me know if it's okay."

494
00:27:14,650 --> 00:27:16,650
Switching it up, this is not a portfolio site.

495
00:27:16,650 --> 00:27:18,780
This is for a business in Portugal.

496
00:27:18,780 --> 00:27:24,000
It's a series of vacation homes that look absolutely fantastic.

497
00:27:24,000 --> 00:27:26,930
I think if we had the budget we would go there ourselves

498
00:27:26,930 --> 00:27:30,300
and look at that and see if those pictures were as good as they could be.

499
00:27:30,300 --> 00:27:32,700
Maybe we can take some better pictures.>>Treeviews on site.

500
00:27:32,700 --> 00:27:34,420
Man, look at this. Look at these great pictures.

501
00:27:34,420 --> 00:27:38,070
As you go through the site, and granted, it's in Portuguese to begin with.

502
00:27:38,070 --> 00:27:41,580
There is also an English version as well,

503
00:27:41,580 --> 00:27:45,460
but as you go through the site, the pictures are breathtaking.

504
00:27:45,460 --> 00:27:47,940
They're amazing.

505
00:27:47,940 --> 00:27:51,560
The pictures can definitely sell this thing by itself.

506
00:27:51,560 --> 00:27:54,960
One of the problems that we see, though, as we go through some of the different sections,

507
00:27:54,960 --> 00:27:59,850
is that we have this big block of text that is in the way.

508
00:27:59,850 --> 00:28:06,350
And the structure of some of the different pages changes,

509
00:28:06,350 --> 00:28:10,090
whereas we have this large text block here,

510
00:28:10,090 --> 00:28:13,210
but on, say, the Reserve page,

511
00:28:13,210 --> 00:28:15,940
I believe there is a completely different one,

512
00:28:15,940 --> 00:28:20,200
and then on some of the pages the background is changing

513
00:28:20,200 --> 00:28:22,820
when there is really no opportunity to see it,

514
00:28:22,820 --> 00:28:29,270
because all you have is this very thin space across the top.

515
00:28:29,270 --> 00:28:33,240
It's a little busy that way on some of those pages.

516
00:28:33,240 --> 00:28:36,020
Once you drill down and you see the different houses

517
00:28:36,020 --> 00:28:40,340
under Casas, there is plenty of great information.

518
00:28:40,340 --> 00:28:42,710
It's like all the information that you would want, so this is great.

519
00:28:42,710 --> 00:28:46,380
You really thought about what are the potential clients looking for

520
00:28:46,380 --> 00:28:50,700
when they need information about these homes that we're trying to sell them

521
00:28:50,700 --> 00:28:53,330
for rent.

522
00:28:53,330 --> 00:28:58,070
Everything here in either language is here

523
00:28:58,070 --> 00:29:00,200
with this call to action down here.

524
00:29:00,200 --> 00:29:04,550
Now, this is the call to action that I feel needs to be bigger.

525
00:29:04,550 --> 00:29:08,400
This is the reserve button to book this particular place.

526
00:29:08,400 --> 00:29:10,970
It almost gets lost within this layout,

527
00:29:10,970 --> 00:29:14,910
and if we brought it up or if we made it a little bit bigger,

528
00:29:14,910 --> 00:29:17,170
like a button or some kind of thing there,

529
00:29:17,170 --> 00:29:19,470
we could certainly lay out this page a little bit better,

530
00:29:19,470 --> 00:29:21,730
but that's one of the things that we're driving people to.

531
00:29:21,730 --> 00:29:23,720
So rather than bury it at the bottom,

532
00:29:23,720 --> 00:29:25,980
why not have it actually in both places?

533
00:29:25,980 --> 00:29:27,870
We can have it up here. We can have it down at the bottom.

534
00:29:27,870 --> 00:29:32,520
Whether they're going to look this way or they're going to scroll all the way to the bottom

535
00:29:32,520 --> 00:29:36,150
and see it there, give them the opportunity to convert

536
00:29:36,150 --> 00:29:39,490
from a business standpoint.

537
00:29:39,490 --> 00:29:43,910
But again, as you go to the Casas page

538
00:29:43,910 --> 00:29:48,810
and then so you get to this page,

539
00:29:48,810 --> 00:29:52,610
and rather than a list of the different houses that are available

540
00:29:52,610 --> 00:29:55,660
you have what almost looks like a photo gallery,

541
00:29:55,660 --> 00:29:59,180
and so my first thought was, "Oh, this is a photo gallery of all the houses."

542
00:29:59,180 --> 00:30:04,070
Then I click one, and then it gives some of this great information about this area

543
00:30:04,070 --> 00:30:08,890
or this house, and it was a little awkward to me,

544
00:30:08,890 --> 00:30:11,150
especially since on some of the other sections

545
00:30:11,150 --> 00:30:16,550
looking at the pictures or finding that content was a little bit different.

546
00:30:16,550 --> 00:30:21,080
I almost feel like saying pick one way

547
00:30:21,080 --> 00:30:24,600
to show off this content and stick with it.

548
00:30:24,600 --> 00:30:29,160
Make sure that the user doesn't have to relearn the interface.

549
00:30:29,160 --> 00:30:33,750
But if we can go to the Atmosfera page, please,

550
00:30:33,750 --> 00:30:36,830
one of the things we also noticed was that you have

551
00:30:36,830 --> 00:30:38,730
some of these things, and they're very subtle.

552
00:30:38,730 --> 00:30:43,060
You have these arrows on either side of the page,

553
00:30:43,060 --> 00:30:47,130
and when I saw them for the first time, I wasn't sure if I was going to be

554
00:30:47,130 --> 00:30:50,750
clicking to the next section, to the next page of content,

555
00:30:50,750 --> 00:30:55,550
where in fact it switches to the next picture on the background.

556
00:30:55,550 --> 00:30:58,510
Gil pointed out, as we were talking about this before,

557
00:30:58,510 --> 00:31:00,690
that you can actually X out.

558
00:31:00,690 --> 00:31:05,330
You can close this text box there and see this great picture.

559
00:31:05,330 --> 00:31:07,300
But then how do we get the text back?

560
00:31:07,300 --> 00:31:09,560
There is no way to get it back.

561
00:31:09,560 --> 00:31:13,470
Here's what I think. This is a gorgeous site, a gorgeous site.

562
00:31:13,470 --> 00:31:17,060
I think that some of the pieces of interface,

563
00:31:17,060 --> 00:31:20,650
the interaction, could use a little streamlining,

564
00:31:20,650 --> 00:31:25,300
but the fact that you've made it really gorgeous

565
00:31:25,300 --> 00:31:30,490
and there is plenty of information, plenty of content

566
00:31:30,490 --> 00:31:35,450
that potential customers would need, I think it's a great advantage.

567
00:31:35,450 --> 00:31:37,660
Yeah, absolutely, like you said, the images are beautiful,

568
00:31:37,660 --> 00:31:41,130
and they're very well optimized for all devices.

569
00:31:41,130 --> 00:31:44,860
I checked. They're actually quite small, and they look great, as you can see.

570
00:31:44,860 --> 00:31:49,250
Now, one thing I noticed is a minor usability issue.

571
00:31:49,250 --> 00:31:52,790
Say you're in this page,

572
00:31:52,790 --> 00:31:55,770
and you want to view it in English.

573
00:31:55,770 --> 00:31:58,830
Well, instead of keeping you on the same page, it brings you back to the index page,

574
00:31:58,830 --> 00:32:02,400
so now I've got to go back to the page where I was,

575
00:32:02,400 --> 00:32:06,690
and it translates, so I have to go find what page I was in.

576
00:32:06,690 --> 00:32:13,680
And I also noticed that on mobile devices, so I'll go ahead and reduce the width here,

577
00:32:13,680 --> 00:32:17,730
once you start scrolling on the page, as you can see here,

578
00:32:17,730 --> 00:32:22,860
the footer gets pushed up, and it scrolls with the content,

579
00:32:22,860 --> 00:32:27,610
and that also happens on the emulator and on the actual device.

580
00:32:27,610 --> 00:32:29,200
I looked at it earlier.

581
00:32:29,200 --> 00:32:33,160
One thing I did to see if I could fix it was I displayed

582
00:32:33,160 --> 00:32:36,420
the footer.

583
00:32:36,420 --> 00:32:38,200
I removed the absolute positioning,

584
00:32:38,200 --> 00:32:41,370
and that positioned it nicely at the bottom,

585
00:32:41,370 --> 00:32:43,820
and it didn't scroll, and it always sticks to the bottom.

586
00:32:43,820 --> 00:32:48,310
Try that. Position it either relative or nothing at all.

587
00:32:48,310 --> 00:32:52,760
Keep it not in an absolute position,

588
00:32:52,760 --> 00:32:55,550
and that should fix it, and I also noticed you did a great job

589
00:32:55,550 --> 00:32:59,280
of separating the CSS and the JavaScript, for example,

590
00:32:59,280 --> 00:33:01,230
in the forms.

591
00:33:01,230 --> 00:33:07,780
Everything was nicely kept in their respective files.

592
00:33:07,780 --> 00:33:11,330
You have a JavaScript function that loads in the images,

593
00:33:11,330 --> 00:33:15,170
and you have the code on every page,

594
00:33:15,170 --> 00:33:18,550
so instead of loading that every time, just separate that

595
00:33:18,550 --> 00:33:20,970
and keep it in the JavaScript file.

596
00:33:20,970 --> 00:33:24,140
And one more thing.

597
00:33:24,140 --> 00:33:29,310
These arrows, as we were talking about earlier with Dan,

598
00:33:29,310 --> 00:33:33,600
once you get to about the 850 mark

599
00:33:33,600 --> 00:33:36,630
they get squished in towards the content,

600
00:33:36,630 --> 00:33:39,020
and because of that, they're no longer clickable.

601
00:33:39,020 --> 00:33:41,150
They don't work, but then again,

602
00:33:41,150 --> 00:33:45,940
once you hit, say, 600, I believe, 780, they disappear.

603
00:33:45,940 --> 00:33:48,610
Maybe also make them go away at that break point,

604
00:33:48,610 --> 00:33:53,760
because they're not really necessary, because they're about half clickable, as we can see here.

605
00:33:53,760 --> 00:33:55,300
One last thing.

606
00:33:55,300 --> 00:33:57,620
In the thumbnail gallery,

607
00:33:57,620 --> 00:34:01,460
once we click on one of them—this one doesn't do it.

608
00:34:01,460 --> 00:34:07,240
Let's try another one.

609
00:34:07,240 --> 00:34:11,190
So once it transitions to the next one, you can see how that image reflows the width.

610
00:34:11,190 --> 00:34:16,530
One thing to prevent that is either adding a width in the style sheet

611
00:34:16,530 --> 00:34:20,080
or in the actual image tag itself, and it prevents that reflow

612
00:34:20,080 --> 00:34:22,500
every time it transitions.

613
00:34:22,500 --> 00:34:25,780
Yeah, I think that's something you probably need to take care of right away,

614
00:34:25,780 --> 00:34:27,389
because as you can see, it's a little distracting.

615
00:34:27,389 --> 00:34:29,010
Your images are already beautiful,

616
00:34:29,010 --> 00:34:34,330
so keep them that way and don't distract the user with that border reflowing

617
00:34:34,330 --> 00:34:36,900
across the page, and that's pretty much it.

618
00:34:36,900 --> 00:34:38,139
Nice job, Mufaddal.

619
00:34:38,139 --> 00:34:41,719
Zac, I know you're ready to book one of these houses immediately.

620
00:34:41,719 --> 00:34:45,800
What feedback did you have for the website as well?

621
00:34:45,800 --> 00:34:49,020
First let me say that when you land on this homepage,

622
00:34:49,020 --> 00:34:55,110
because I first hit it in Portuguese and I know enough Spanish

623
00:34:55,110 --> 00:35:01,560
to know that that's going to be casas, but I didn't know what the site was, but it didn't matter.

624
00:35:01,560 --> 00:35:03,150
I knew it was beautiful,

625
00:35:03,150 --> 00:35:05,710
and that has some pros and cons to it.

626
00:35:05,710 --> 00:35:08,900
One, wow, it's great. I'm sticking on this site.

627
00:35:08,900 --> 00:35:10,510
It's going to be awesome.

628
00:35:10,510 --> 00:35:14,510
But on the other hand, I don't really know what it does.

629
00:35:14,510 --> 00:35:18,490
Were these rentals? Are you an architect?

630
00:35:18,490 --> 00:35:22,440
So one thing I'd really suggest is get one of those beautiful pictures

631
00:35:22,440 --> 00:35:26,560
of the place you want to book the most on there with a reserve button.

632
00:35:26,560 --> 00:35:30,300
Pull that call to action right up to the top

633
00:35:30,300 --> 00:35:33,600
so that instead of your copy here

634
00:35:33,600 --> 00:35:35,770
they're really seeing what you have,

635
00:35:35,770 --> 00:35:38,200
although these images are beautiful.

636
00:35:38,200 --> 00:35:40,140
Something that you'll see often

637
00:35:40,140 --> 00:35:43,500
with slideshows that are changing background images

638
00:35:43,500 --> 00:35:46,090
is you'd have little thumbnails of each one,

639
00:35:46,090 --> 00:35:48,800
and then that's going to make it more clear to the user

640
00:35:48,800 --> 00:35:51,740
that when they click on that it's going to change a background,

641
00:35:51,740 --> 00:35:55,020
because when I clicked on these, I went kind of quick.

642
00:35:55,020 --> 00:35:58,440
I went bup, bup, bup, bup, and I didn't know what changed,

643
00:35:58,440 --> 00:36:00,960
because you have the slideshow rotating,

644
00:36:00,960 --> 00:36:03,310
and after you click this 2 or 3 times,

645
00:36:03,310 --> 00:36:06,760
it stops responding, and this is a funky JavaScript thing.

646
00:36:06,760 --> 00:36:08,860
Like if you make it go all the same speed,

647
00:36:08,860 --> 00:36:10,660
you have a delay and stop then,

648
00:36:10,660 --> 00:36:15,020
but I wasn't sure what it was doing at that point.

649
00:36:15,020 --> 00:36:18,230
Some notes on the homepage there.

650
00:36:18,230 --> 00:36:20,730
When you do view the source code,

651
00:36:20,730 --> 00:36:23,730
I notice that your descriptions are really long.

652
00:36:23,730 --> 00:36:27,480
Google is going to limit how many characters you could use.

653
00:36:27,480 --> 00:36:30,040
Usually keep it to about a tweet's worth,

654
00:36:30,040 --> 00:36:33,070
so all of this extra content is going to be cut off,

655
00:36:33,070 --> 00:36:35,140
and you're not going to get it.

656
00:36:35,140 --> 00:36:37,360
That's something that's important.

657
00:36:37,360 --> 00:36:39,830
Now, in terms of multilingual sites,

658
00:36:39,830 --> 00:36:43,500
they can get really hard to manage,

659
00:36:43,500 --> 00:36:46,480
and the reason is because in this case

660
00:36:46,480 --> 00:36:52,750
we have a homepage, and if we click into English,

661
00:36:52,750 --> 00:36:56,460
you're maintaining 2 different homepages, and if you're using HTML

662
00:36:56,460 --> 00:36:58,430
what that means is you're using no includes,

663
00:36:58,430 --> 00:37:01,170
which means that you're completely reproducing

664
00:37:01,170 --> 00:37:04,720
this page each time, and if you make changes in one place,

665
00:37:04,720 --> 00:37:06,510
you're going to have to make them in another.

666
00:37:06,510 --> 00:37:10,160
And from having dealt with a couple of these sites before

667
00:37:10,160 --> 00:37:13,390
I know that that can become a real pain.

668
00:37:13,390 --> 00:37:18,020
This is a place where pulling this into a content management system

669
00:37:18,020 --> 00:37:21,310
is probably worth the design hassle,

670
00:37:21,310 --> 00:37:24,690
because down the road it makes it so much easier

671
00:37:24,690 --> 00:37:29,120
to maintain content, and then that's going to keep track of some of the things.

672
00:37:29,120 --> 00:37:32,100
Like Gil was saying, if you're at this page

673
00:37:32,100 --> 00:37:34,050
and then you pop into Portuguese,

674
00:37:34,050 --> 00:37:37,280
you're going to be redirected and not keep the same one,

675
00:37:37,280 --> 00:37:40,770
and that's a JS thing you could fix there.

676
00:37:40,770 --> 00:37:44,840
There is also this other issue of if you're in English,

677
00:37:44,840 --> 00:37:49,790
you don't see that in the URL, so we're assuming that it's the homepage.

678
00:37:49,790 --> 00:37:51,670
And finally, a note here.

679
00:37:51,670 --> 00:37:56,950
If you are using HTML, that can sometimes be a little tricky.

680
00:37:56,950 --> 00:37:59,160
If someone is trying to share a link, for example,

681
00:37:59,160 --> 00:38:01,290
you can't link to /houses.

682
00:38:01,290 --> 00:38:05,210
You have to link to /houses.html.

683
00:38:05,210 --> 00:38:07,120
A CMS will take care of that.

684
00:38:07,120 --> 00:38:11,120
The other kind of hack is you store each page in a different folder,

685
00:38:11,120 --> 00:38:14,120
or with htaccess you could remove those.

686
00:38:14,120 --> 00:38:18,320
Just some things to think about in that regard.

687
00:38:18,320 --> 00:38:21,500
Now, when I came onto here,

688
00:38:21,500 --> 00:38:25,060
it took me a second to realize these were the names of the houses,

689
00:38:25,060 --> 00:38:27,380
and I really like that.

690
00:38:27,380 --> 00:38:29,720
But when I click onto the page,

691
00:38:29,720 --> 00:38:31,850
I didn't see that thumbnail anymore,

692
00:38:31,850 --> 00:38:35,070
and that left me a little confused as to, wait, hold on.

693
00:38:35,070 --> 00:38:38,510
I'm here, but what am I looking at now?

694
00:38:38,510 --> 00:38:44,380
I see this name, but it doesn't match any name here,

695
00:38:44,380 --> 00:38:48,060
and then the other thing was I had to click on Full Gallery

696
00:38:48,060 --> 00:38:50,940
in order to see all of these awesome pictures,

697
00:38:50,940 --> 00:38:54,910
and you can see now we have a different slideshow format

698
00:38:54,910 --> 00:38:56,000
that's appearing here.

699
00:38:56,000 --> 00:38:59,000
This one might be a little bit better on the homepage,

700
00:38:59,000 --> 00:39:02,930
and with all this real estate here put all your pictures up.

701
00:39:02,930 --> 00:39:05,790
Get thumbnails of all of them, because they're so beautiful.

702
00:39:05,790 --> 00:39:08,980
There is no reason not to be using them,

703
00:39:08,980 --> 00:39:13,030
and maybe if you had a primary picture that looked like this,

704
00:39:13,030 --> 00:39:16,880
then all of this content could be balanced really well

705
00:39:16,880 --> 00:39:20,310
with a picture and a big call to action under it.

706
00:39:20,310 --> 00:39:25,070
Now, I did notice that you're listing your prices the same

707
00:39:25,070 --> 00:39:28,440
whether you're on the English or Portuguese site.

708
00:39:28,440 --> 00:39:31,020
Automatically that's going to be a tough conversion

709
00:39:31,020 --> 00:39:33,670
for someone who is looking for U.S. dollars,

710
00:39:33,670 --> 00:39:36,860
so I'd suggest changing that detail back and forth,

711
00:39:36,860 --> 00:39:38,460
and again, this can be a little tricky.

712
00:39:38,460 --> 00:39:40,440
Currencies change. Currencies shift.

713
00:39:40,440 --> 00:39:44,810
If you have a fixed price in mind that's probably not going to matter too much,

714
00:39:44,810 --> 00:39:46,690
but something to think about.

715
00:39:46,690 --> 00:39:50,470
And then for me, when you come down to the booking page,

716
00:39:50,470 --> 00:39:52,430
if I want to book this house,

717
00:39:52,430 --> 00:39:55,150
now I get to a form.

718
00:39:55,150 --> 00:39:58,630
Where does it say which house I want?

719
00:39:58,630 --> 00:40:01,950
I couldn't find a place.

720
00:40:01,950 --> 00:40:06,400
That's one problem, because how are you going to determine that?

721
00:40:06,400 --> 00:40:09,810
One thing could be you might have a picture version

722
00:40:09,810 --> 00:40:11,790
of a drop down or select box.

723
00:40:11,790 --> 00:40:15,550
The other is that if you're dealing with a PHP page,

724
00:40:15,550 --> 00:40:18,040
like this is, I can click Book

725
00:40:18,040 --> 00:40:25,250
and add the name of the location that I want right in there in the URL.

726
00:40:25,250 --> 00:40:27,760
Then I can pull that into the form, auto-populate it,

727
00:40:27,760 --> 00:40:30,850
and that really gives that strong user experience.

728
00:40:30,850 --> 00:40:32,740
There are no delays. There is no hesitation.

729
00:40:32,740 --> 00:40:36,160
And anytime you get closer to that final point,

730
00:40:36,160 --> 00:40:39,020
whether it's a site where you're collecting payments

731
00:40:39,020 --> 00:40:43,870
or you're doing a contact form, that drop-off rate is really significant.

732
00:40:43,870 --> 00:40:47,400
When you put that obstacle in, there is a chance that some people

733
00:40:47,400 --> 00:40:49,720
will be like, "I want to book this," and now I click Book.

734
00:40:49,720 --> 00:40:51,260
"Oh, I've got to do this again. Whatever."

735
00:40:51,260 --> 00:40:53,170
And they stop there.

736
00:40:53,170 --> 00:40:55,420
On the business side too, on the back end,

737
00:40:55,420 --> 00:41:01,530
it's impossible to know which houses got clicked on

738
00:41:01,530 --> 00:41:03,240
for booking reservations.

739
00:41:03,240 --> 00:41:06,420
If that information, if that variable got passed through

740
00:41:06,420 --> 00:41:08,420
and we were able to see that on the back end,

741
00:41:08,420 --> 00:41:13,090
we could find out that the third house there, the Loureiro house or whatever it was called,

742
00:41:13,090 --> 00:41:15,980
was getting twice as many as all the rest

743
00:41:15,980 --> 00:41:19,470
or other things like that, so maybe there is something about the house.

744
00:41:19,470 --> 00:41:22,870
Maybe it's something about the content or the photos that we showed.

745
00:41:22,870 --> 00:41:24,690
There could be something about that,

746
00:41:24,690 --> 00:41:29,020
and so that's a data point that would be really helpful for the business side of things.

747
00:41:29,020 --> 00:41:32,290
And I'm even looking if there are analytics

748
00:41:32,290 --> 00:41:36,810
set up on these pages, and sort of on initial look

749
00:41:36,810 --> 00:41:42,080
it doesn't look like we're tracking any of that data,

750
00:41:42,080 --> 00:41:44,230
so if you are, maybe it's on the server side.

751
00:41:44,230 --> 00:41:49,450
That's good. But like you said, if not, that's really important to note.

752
00:41:49,450 --> 00:41:51,200
Well, we want to thank everyone

753
00:41:51,200 --> 00:41:53,880
for submitting all the projects this week.

754
00:41:53,880 --> 00:41:55,240
We got a whole bunch.

755
00:41:55,240 --> 00:41:57,740
Zac, Gil, thank you very much.

756
00:41:57,740 --> 00:42:00,930
I'm Dan. We'll see you next time on Treeviews.

757
00:42:00,930 --> 00:42:03,710
[treeviews]