1
00:00:02,000 --> 00:00:04,000
treeviews

2
00:00:05,000 --> 00:00:08,000
Welcome to treeviews--the show where Treehouse members

3
00:00:08,000 --> 00:00:12,000
submit their work, and a panel of Treehouse teachers offers feedback.

4
00:00:12,000 --> 00:00:14,000
Here is today's panel.

5
00:00:14,000 --> 00:00:16,000
Hi there, I'm Pasan.  >>I'm Mat.  >>I'm Amit.

6
00:00:16,000 --> 00:00:18,000
Welcome to Treeviews.

7
00:00:18,000 --> 00:00:21,000
In today's show we have two websites that we are going to review.

8
00:00:21,000 --> 00:00:27,000
The first website is by Ricardo Diaz, and it is ricardodiazdesign.com.

9
00:00:27,000 --> 00:00:29,000
So Mat, why don't you take it away with design.

10
00:00:29,000 --> 00:00:31,000
Sure thing Amit.

11
00:00:31,000 --> 00:00:35,000
When we load up the page you notice a real slick animation at the top.

12
00:00:36,000 --> 00:00:38,000
I'm really liking that, Ricardo--very cool.

13
00:00:38,000 --> 00:00:41,000
Also, I'm really liking the color combinations that you used,

14
00:00:41,000 --> 00:00:43,000
and the fact that you used web fonts

15
00:00:43,000 --> 00:00:46,000
However, I would structure the content just a little bit differently.

16
00:00:46,000 --> 00:00:48,000
I'll show you with a mock up that I did for you.

17
00:00:48,000 --> 00:00:51,000
Mock--perfect.

18
00:00:51,000 --> 00:00:54,000
As you can see, I've moved the logo all the way to the left

19
00:00:54,000 --> 00:00:57,000
and the nav to the top middle right.

20
00:00:57,000 --> 00:01:01,000
The reason for that is if you wanted to add in a new navigation tab.

21
00:01:01,000 --> 00:01:04,000
Say, services, it's very easy to add.

22
00:01:04,000 --> 00:01:06,000
Also, I've changed the font up a little bit,

23
00:01:06,000 --> 00:01:11,000
and I've used a hierarchy font for the top called Stint extended bold,

24
00:01:11,000 --> 00:01:13,000
which you can find at Google web fonts.

25
00:01:13,000 --> 00:01:17,000
Also, I changed your content copy to Ariel.

26
00:01:18,000 --> 00:01:21,000
As we go down the page I've restructured the content just a little bit.

27
00:01:22,000 --> 00:01:25,000
So, it will condense the page just a little bit more,

28
00:01:25,000 --> 00:01:29,000
where we have Developer, Designer, Services, and Hours.

29
00:01:31,000 --> 00:01:37,000
Now when we go back over to the site, and we go to the About Me section,

30
00:01:37,000 --> 00:01:39,000
what you're going to want to do to,

31
00:01:39,000 --> 00:01:42,000
again with the fonts, keep those consistent.

32
00:01:42,000 --> 00:01:45,000
Also, when you're doing a grid format layout

33
00:01:45,000 --> 00:01:49,000
you're going to want to make sure everything is lined up correctly.

34
00:01:49,000 --> 00:01:52,000
So, with the sidebar, you can how this line over here

35
00:01:52,000 --> 00:01:55,000
doesn't exactly line up with the column on the left.

36
00:01:55,000 --> 00:01:57,000
You're going to want to make sure that lines up.

37
00:01:57,000 --> 00:01:59,000
Keep your look consistent throughout the site.

38
00:01:59,000 --> 00:02:02,000
Pasan, you want to take a look at the content?

39
00:02:02,000 --> 00:02:04,000
Sure, man.

40
00:02:04,000 --> 00:02:07,000
Okay, Amit, if you can scroll all the way up top, and go to the My Work page.

41
00:02:07,000 --> 00:02:10,000
Ricardo, I really like how you have your testimonials lower down on the page.

42
00:02:10,000 --> 00:02:14,000
It really showcases your work and how your clients are happy with you.

43
00:02:15,000 --> 00:02:17,000
Amit, scroll back up to the top.

44
00:02:17,000 --> 00:02:20,000
Go to the About Me page.

45
00:02:20,000 --> 00:02:24,000
I also like how you've listed your Treehouse badges--70 badges.

46
00:02:24,000 --> 00:02:26,000
Great job, man.

47
00:02:27,000 --> 00:02:29,000
All right, the overall content is great, but it's a little confusing.

48
00:02:29,000 --> 00:02:32,000
Now, if you go back to the home page--

49
00:02:33,000 --> 00:02:35,000
There we go.

50
00:02:35,000 --> 00:02:37,000
You'll see that first up, when you land on the page,

51
00:02:37,000 --> 00:02:39,000
this is what you see right when you land.

52
00:02:39,000 --> 00:02:41,000
It says Web Design in bold.

53
00:02:41,000 --> 00:02:43,000
That makes me think you're a web designer,

54
00:02:43,000 --> 00:02:46,000
but then when you scroll lower down the page--right here.

55
00:02:46,000 --> 00:02:49,000
Now I know you said that you liked this developer-designer breakup,

56
00:02:49,000 --> 00:02:51,000
but for me it's a little confusing.

57
00:02:51,000 --> 00:02:54,000
So, on top it said you're a web designer,

58
00:02:54,000 --> 00:02:57,000
but right there it says you'd rather be a developer.

59
00:02:57,000 --> 00:03:00,000
So, what would you like to be more, right?

60
00:03:00,000 --> 00:03:02,000
So, kind of stay consistent.

61
00:03:02,000 --> 00:03:05,000
If you go to your Skills page--I'm sorry on your About page,

62
00:03:05,000 --> 00:03:07,000
You know you have your graph of your skills.

63
00:03:07,000 --> 00:03:10,000
Let this speak for you.

64
00:03:10,000 --> 00:03:12,000
Let people see what you're good at,

65
00:03:12,000 --> 00:03:14,000
and that will show whether you're a developer or a designer.

66
00:03:14,000 --> 00:03:17,000
Then go back to the Home page, Amit.

67
00:03:17,000 --> 00:03:21,000
So, going back with the inconsistent--not inconsistent really,

68
00:03:21,000 --> 00:03:23,000
but it doesn't really flow really well.

69
00:03:23,000 --> 00:03:26,000
So, what you want to do is you want to highlight the services you offer--

70
00:03:26,000 --> 00:03:29,000
going back to whether you want design or development.

71
00:03:29,000 --> 00:03:32,000
You want to highlight the services higher up on the page.

72
00:03:32,000 --> 00:03:36,000
On your current website if you scroll down, that's hidden in the footer.

73
00:03:36,000 --> 00:03:38,000
Right--keep scrolling Amit.

74
00:03:39,000 --> 00:03:41,000
So, what you offer is hidden in the footer, and that's hard for people to see.

75
00:03:41,000 --> 00:03:46,000
So, if you go to the redesign that Mat has done, he's pulled that up right there.

76
00:03:46,000 --> 00:03:48,000
There you go.

77
00:03:48,000 --> 00:03:51,000
He's pulled that up higher up the page.

78
00:03:51,000 --> 00:03:53,000
So you know people land there,

79
00:03:53,000 --> 00:03:56,000
and they see really quick that you have development higher up.

80
00:03:56,000 --> 00:03:59,000
Again, you know, you want to keep that consistent so it doesn't throw people off.

81
00:03:59,000 --> 00:04:02,000
Finally I don't understand the purpose of Hours.

82
00:04:02,000 --> 00:04:04,000
Are you an agency?

83
00:04:04,000 --> 00:04:06,000
Do you work--do people have to come into your office?

84
00:04:06,000 --> 00:04:09,000
Can they only contact you during business hours?

85
00:04:09,000 --> 00:04:11,000
You want to make that clear.

86
00:04:11,000 --> 00:04:13,000
If you're doing this by yourself,

87
00:04:13,000 --> 00:04:16,000
make sure that people can get to you all times of the day.

88
00:04:16,000 --> 00:04:18,000
You want as much work as you can get.

89
00:04:18,000 --> 00:04:20,000
So, that's--other than that you've done a great job.

90
00:04:20,000 --> 00:04:23,000
I love how you've inserted snippets of your personality in there.

91
00:04:23,000 --> 00:04:25,000
So, content--great job.

92
00:04:25,000 --> 00:04:27,000
Amit, do you want to take it off with the code?

93
00:04:27,000 --> 00:04:28,000
Oh, yes--absolutely.

94
00:04:28,000 --> 00:04:32,000
Firstly I would really like to commend you on using HTML5 and CSS3.

95
00:04:33,000 --> 00:04:35,000
As you can see that awesome animation that you've done at the top,

96
00:04:35,000 --> 00:04:38,000
that's done using CSS3 animation.

97
00:04:38,000 --> 00:04:41,000
So, great work, Ricardo--awesome, really.

98
00:04:42,000 --> 00:04:47,000
The next thing that I would like to point at is that since you are using HTML5,

99
00:04:47,000 --> 00:04:50,000
you're using a lot of section tags.

100
00:04:50,000 --> 00:04:54,000
I notice that you weren't really quite sure where to use section tags,

101
00:04:54,000 --> 00:04:57,000
so you've kind of used it all over the place.

102
00:04:57,000 --> 00:05:00,000
You probably want to stay away from using section tags

103
00:05:00,000 --> 00:05:02,000
as wrappers to create columns or

104
00:05:02,000 --> 00:05:07,000
just wrappers around different content like your social icons.

105
00:05:07,000 --> 00:05:09,000
So, I would stay away from doing that.

106
00:05:09,000 --> 00:05:11,000
There's a really good article on when

107
00:05:11,000 --> 00:05:13,000
and when not to use section tags.

108
00:05:13,000 --> 00:05:15,000
They have a lot of do's and don'ts

109
00:05:15,000 --> 00:05:20,000
So, I really really recommend going over that article and taking a look at it.

110
00:05:20,000 --> 00:05:22,000
So, do look at the article.

111
00:05:22,000 --> 00:05:28,000
The other thing that was jumping at me was that you used browser detection.

112
00:05:28,000 --> 00:05:31,000
In this day and age you probably want to stay clear of browser detection,

113
00:05:31,000 --> 00:05:36,000
because you don't really know which browsers have what features.

114
00:05:36,000 --> 00:05:38,000
You really want to use feature detection.

115
00:05:38,000 --> 00:05:40,000
That's where modernizer comes in.

116
00:05:40,000 --> 00:05:45,000
Modernizer is this great Javascript library that allow you to detect features

117
00:05:45,000 --> 00:05:48,000
rather than make it vendor specific.

118
00:05:48,000 --> 00:05:54,000
Finally I noticed that you were using something called Hyphenate.

119
00:05:54,000 --> 00:05:57,000
I noticed that a lot of that text was static,

120
00:05:57,000 --> 00:06:00,000
so the use of Hyphenate was not really clear.

121
00:06:00,000 --> 00:06:03,000
I mean, since the text is static

122
00:06:03,000 --> 00:06:06,000
you could really just put in the hyphens yourself.

123
00:06:06,000 --> 00:06:10,000
If you were doing a responsive design, then Hyphenate makes more sense

124
00:06:10,000 --> 00:06:13,000
because that's exactly what it does.

125
00:06:13,000 --> 00:06:16,000
It responds to the text as it becomes smaller or larger.

126
00:06:16,000 --> 00:06:19,000
So it makes more sense--here it's kind of overkill.

127
00:06:19,000 --> 00:06:24,000
Other than that, really great design job and really good site.

128
00:06:24,000 --> 00:06:26,000
Overall, good coding.

129
00:06:26,000 --> 00:06:29,000
Ricardo, thanks for submitting your site.

130
00:06:29,000 --> 00:06:32,000
Finally I want to know what Dion thinks of your site.

131
00:06:32,000 --> 00:06:35,000
Hey Dion, what do you think of Ricardo's site, man?

132
00:06:42,000 --> 00:06:45,000
That's what we thought too--you loved the site.

133
00:06:46,000 --> 00:06:49,000
Our next website has been submitted by Anton Maritz.

134
00:06:49,000 --> 00:06:52,000
Anton created his very first website for his sister.

135
00:06:52,000 --> 00:06:55,000
What a nice brother you are.

136
00:06:55,000 --> 00:06:57,000
So, Mat why don't you kick it off with design for us.

137
00:06:57,000 --> 00:06:59,000
Absolutley, Amit.

138
00:06:59,000 --> 00:07:02,000
When we first open up Anton's page we'll notice it's very minimal,

139
00:07:02,000 --> 00:07:04,000
which I like--it's perfect.

140
00:07:04,000 --> 00:07:08,000
We've got the logo at the top, navigation directly below it,

141
00:07:08,000 --> 00:07:11,000
and then the content for the site directly underneath that.

142
00:07:11,000 --> 00:07:15,000
Perfect--we can see exactly what the site's about--Amanda's art.

143
00:07:16,000 --> 00:07:20,000
Then when we go to the Art section we can see the wide variety of her work.

144
00:07:20,000 --> 00:07:22,000
Perfect.

145
00:07:22,000 --> 00:07:26,000
Moving forward to the About page we'll see a brief bio of Amanda

146
00:07:26,000 --> 00:07:29,000
and a nice photo of her.

147
00:07:29,000 --> 00:07:31,000
Then on the Contact page we'll see a nice form

148
00:07:31,000 --> 00:07:33,000
so that we can send Amanda a message.

149
00:07:33,000 --> 00:07:38,000
Like the last website, I've restructured the content just a little bit.

150
00:07:38,000 --> 00:07:42,000
For the Home page, I thought it would be great if we could take those images

151
00:07:42,000 --> 00:07:45,000
and make them scale full size in the background.

152
00:07:45,000 --> 00:07:48,000
This will allow the site to be responsive on all devices.

153
00:07:48,000 --> 00:07:51,000
Then on the bottom left we have the logo

154
00:07:51,000 --> 00:07:54,000
and the navigation directly below that/

155
00:07:54,000 --> 00:07:58,000
Moving forward on the Art page, again we want to make this site responsive

156
00:07:58,000 --> 00:08:02,000
and fluid, so we take the thumbnails, and we make them larger.

157
00:08:03,000 --> 00:08:07,000
Then, on the About page, I've done a dual column

158
00:08:07,000 --> 00:08:10,000
with her image on the left and the text on the right.

159
00:08:10,000 --> 00:08:13,000
On the Contact page, the same thing:

160
00:08:13,000 --> 00:08:17,000
content on the left, form on the right.

161
00:08:17,000 --> 00:08:19,000
Pasan, can we take a look at the content?

162
00:08:19,000 --> 00:08:22,000
Sure--now Anton, you've done a great job.

163
00:08:22,000 --> 00:08:24,000
I mean the website is focused; it's minimal.

164
00:08:24,000 --> 00:08:26,000
We know exactly what it's about.

165
00:08:26,000 --> 00:08:29,000
There are a very few minor changes we want to make.

166
00:08:29,000 --> 00:08:32,000
So, first off--you know you have your photography link there.

167
00:08:32,000 --> 00:08:36,000
You don't want to have an empty text--like just static text over there.

168
00:08:36,000 --> 00:08:38,000
If you do want to show that there's photographs coming

169
00:08:38,000 --> 00:08:42,000
and it's under construction, put one or two photos and say,

170
00:08:42,000 --> 00:08:44,000
"Hey, they're more coming up,"

171
00:08:44,000 --> 00:08:47,000
or just do away with it completely.

172
00:08:47,000 --> 00:08:49,000
You don't--this is a good website,

173
00:08:49,000 --> 00:08:51,000
and you don't want people to see that it's not quite all the way done yet.

174
00:08:51,000 --> 00:08:54,000
So, going back to the Home page

175
00:08:54,000 --> 00:08:56,000
we know exactly what the website is about.

176
00:08:56,000 --> 00:08:58,000
It's about art,

177
00:08:58,000 --> 00:09:01,000
but I don't know if whether your sister wants to sell her art

178
00:09:01,000 --> 00:09:04,000
or if she just wants to display her art.

179
00:09:04,000 --> 00:09:09,000
So, first, if she's only displaying her art, make sure you have copywrite notices

180
00:09:09,000 --> 00:09:12,000
or at least a watermark on the image.

181
00:09:12,000 --> 00:09:14,000
If--Amit, just go ahead and right click.

182
00:09:14,000 --> 00:09:16,000
I can save this image onto my desktop and just steal it.

183
00:09:16,000 --> 00:09:19,000
It's super easy--so make sure you protect her assets.

184
00:09:19,000 --> 00:09:22,000
Then you want to--on the Art page,

185
00:09:22,000 --> 00:09:26,000
I noticed you use a plug-in to make the image pop out.

186
00:09:26,000 --> 00:09:30,000
It can be simple if you want to sell the art to just include a price in there

187
00:09:30,000 --> 00:09:34,000
and a message on the website saying, "Hey, if you want to buy the art

188
00:09:34,000 --> 00:09:37,000
go to the Contact page and just send me a message."

189
00:09:37,000 --> 00:09:39,000
You know, overall you've done a very good job.

190
00:09:39,000 --> 00:09:41,000
It's focused.

191
00:09:41,000 --> 00:09:43,000
So just make these minor changes, and you should be good to go.

192
00:09:43,000 --> 00:09:45,000
So, Amit, why don't you take it off with the code

193
00:09:45,000 --> 00:09:50,000
Absolutely--Anton, if this is your very first site, you have done an amazing job.

194
00:09:50,000 --> 00:09:53,000
If I look at the markup--man, that's a really good markup.

195
00:09:53,000 --> 00:09:56,000
You've also commented the markup really well.

196
00:09:56,000 --> 00:09:58,000
I like the indentation.

197
00:09:58,000 --> 00:10:00,000
You've done an awesome job.

198
00:10:00,000 --> 00:10:02,000
So, I really love it.

199
00:10:02,000 --> 00:10:04,000
A few things that I want to talk about--

200
00:10:04,000 --> 00:10:07,000
the first thing is that you loaded Good web fonts, which is great.

201
00:10:07,000 --> 00:10:11,000
I noticed that you loaded the Good web fonts after you loaded your CSS.

202
00:10:11,000 --> 00:10:15,000
You probably want to do it prior to loading your CSS

203
00:10:15,000 --> 00:10:20,000
so that when the CSS does load it knows what fonts to load.

204
00:10:20,000 --> 00:10:22,000
That's one of the things--the other thing is that when

205
00:10:22,000 --> 00:10:25,000
you go to the Art section and you click on an image

206
00:10:25,000 --> 00:10:30,000
the images load from right to left instead of left to right.

207
00:10:30,000 --> 00:10:33,000
As you can see the arrow is here to the left,

208
00:10:33,000 --> 00:10:35,000
and there is no arrow to the right.

209
00:10:35,000 --> 00:10:39,000
I'm sure that's a very quick fix, and you can fix that very easily.

210
00:10:39,000 --> 00:10:42,000
Finally on the Contact page

211
00:10:42,000 --> 00:10:45,000
I noticed that you have no validation what so ever.

212
00:10:45,000 --> 00:10:51,000
So, if I click on the send button it just automatically sends you the email

213
00:10:51,000 --> 00:10:53,000
or the Contact form's details.

214
00:10:53,000 --> 00:10:56,000
You probably want to add validation there,

215
00:10:56,000 --> 00:10:59,000
and it's very easy to add validation using jQuery.

216
00:10:59,000 --> 00:11:02,000
You can look up several different tutorials online,

217
00:11:02,000 --> 00:11:05,000
and it's very simple to add that validation.

218
00:11:05,000 --> 00:11:09,000
Plus, it will challenge you to take that website to the next level.

219
00:11:10,000 --> 00:11:12,000
Well. overall I think you've done a great job.

220
00:11:12,000 --> 00:11:15,000
If this is your first website--good job, man.

221
00:11:15,000 --> 00:11:18,000
Hey, Dion, what do you think of Anton's website?

222
00:11:26,000 --> 00:11:28,000
Well, he likes it.

223
00:11:28,000 --> 00:11:30,000
Yeah, he loves it--he loves every website,

224
00:11:30,000 --> 00:11:32,000
and we love Dion.

225
00:11:32,000 --> 00:11:34,000
Well, thank you for watching.

226
00:11:34,000 --> 00:11:37,000
Unfortunately that's all the time we have for today's show,

227
00:11:37,000 --> 00:11:39,000
but we will be having more episodes, and we might get to

228
00:11:39,000 --> 00:11:43,000
some of the submissions in future episodes.

229
00:11:43,000 --> 00:11:45,000
That's it for today's show--I'm Amit.

230
00:11:45,000 --> 00:11:48,000
I'm Pasan,  >>I'm Mat.  >> This was Treeviews

231
00:11:48,000 --> 00:11:50,000
If you'd like your work reviewed on our next episode,

232
00:11:50,000 --> 00:11:55,000
drop us a line at treeviews@teamtreehouse.com