1
00:00:00,000 --> 00:00:04,000
[? Music ?] [treeviews]

2
00:00:04,000 --> 00:00:07,000
Hey, everyone. Welcome to Treeviews, the show where you, 

3
00:00:07,000 --> 00:00:10,000
the Treehouse member, can submit your work, your website, 

4
00:00:10,000 --> 00:00:14,000
your web app or other project, and our panel of Treehouse teachers

5
00:00:14,000 --> 00:00:18,000
offer some feedback, so let's introduce today's panel.

6
00:00:18,000 --> 00:00:20,000
[Allison Grayce] [@allisongrayce] I'm Allison Grayce, 

7
00:00:20,000 --> 00:00:22,000
and I am a design teacher here at Treehouse.

8
00:00:22,000 --> 00:00:24,000
[Guil Hernandez] [@guilh] And I'm Guil Hernandez, the front-end design teacher.

9
00:00:24,000 --> 00:00:26,000
[Dan Gorgone] [@dangorgone] And I'm Dan Gorgone. I teach marketing and business.

10
00:00:26,000 --> 00:00:31,000
So first off, we just want to say thank you for submitting your work today.

11
00:00:31,000 --> 00:00:34,000
Our goal with this show is to offer feedback and highlight 

12
00:00:34,000 --> 00:00:37,000
what we think you're doing well and offer some suggestions

13
00:00:37,000 --> 00:00:39,000
for improvements if necessary.

14
00:00:39,000 --> 00:00:43,000
[Guil H.] Our first website is PerfectTen.me from Kevin Esther.

15
00:00:43,000 --> 00:00:45,000
[Perfect Ten] [www.perfectten.me] Kevin designed this site for his wife.

16
00:00:45,000 --> 00:00:49,000
She's a local nail technician, and she's hoping to drum up some business 

17
00:00:49,000 --> 00:00:51,000
with a web redesign.

18
00:00:51,000 --> 00:00:54,000
She's looking to make more of a responsive design, and while he's at it

19
00:00:54,000 --> 00:00:58,000
he's looking to improve his design and coding skills.

20
00:00:58,000 --> 00:01:01,000
And the first impression I got from the site was that 

21
00:01:01,000 --> 00:01:04,000
it was something that immediately with the purple color it jumped out.

22
00:01:04,000 --> 00:01:07,000
I saw the logo, Perfect Ten. Really nice. 

23
00:01:07,000 --> 00:01:10,000
And aside from--if you point right here you see Scotland

24
00:01:10,000 --> 00:01:13,000
kind of hanging off of the header here.

25
00:01:13,000 --> 00:01:16,000
We can fix that really easy, but the information

26
00:01:16,000 --> 00:01:20,000
about the business was what I wanted to  know about, 

27
00:01:20,000 --> 00:01:24,000
and so seeing this I see it has something to do with pedicures, manicures,

28
00:01:24,000 --> 00:01:28,000
so obviously this is about nails and beauty and what-not.

29
00:01:28,000 --> 00:01:32,000
What I didn't get from looking at this site was that this is where

30
00:01:32,000 --> 00:01:38,000
Jackie would accept appointments and go out to local businesses,

31
00:01:38,000 --> 00:01:43,000
and you can see people can book appointments by calling this number.

32
00:01:43,000 --> 00:01:49,000
That's great, but what I didn't understand was that this was not a salon.

33
00:01:49,000 --> 00:01:51,000
This was not a physical location.

34
00:01:51,000 --> 00:01:56,000
When I saw Perfect Ten I thought "Oh, it must be a spa" or whatever,

35
00:01:56,000 --> 00:01:58,000
so I was looking for an address, a phone number.

36
00:01:58,000 --> 00:02:01,000
I didn't see that, but once I finally started reading through it 

37
00:02:01,000 --> 00:02:05,000
I better understood the purpose behind the site.

38
00:02:05,000 --> 00:02:08,000
I feel like that needs to be emphasized a bit more,

39
00:02:08,000 --> 00:02:12,000
a little better understood by the user so they can look at it and say,

40
00:02:12,000 --> 00:02:14,000
"Oh, this is something that would interest me."

41
00:02:14,000 --> 00:02:16,000
"I can call this number or submit something online."

42
00:02:16,000 --> 00:02:19,000
Yeah, and that's a really unique selling proposition 

43
00:02:19,000 --> 00:02:22,000
to be able to have someone come into your home and do your nails,

44
00:02:22,000 --> 00:02:25,000
and I think that's something that should really be emphasized,

45
00:02:25,000 --> 00:02:29,000
and in this main area, this main header, maybe that's a great place 

46
00:02:29,000 --> 00:02:33,000
to feature that kind of unique selling proposition.

47
00:02:33,000 --> 00:02:37,000
And that could be done with brighter colors, maybe add some interesting textures

48
00:02:37,000 --> 00:02:41,000
or colors or something like that to really make it pop more

49
00:02:41,000 --> 00:02:43,000
because right now, the colors, while they're nice,

50
00:02:43,000 --> 00:02:47,000
because purple is a great color for beauty because it kind of evokes

51
00:02:47,000 --> 00:02:50,000
a sense of luxury and high end, and so the colors are right, 

52
00:02:50,000 --> 00:02:54,000
but maybe that specific shade of purple could use some work, 

53
00:02:54,000 --> 00:02:56,000
or maybe a pattern or something in the background

54
00:02:56,000 --> 00:02:59,000
to just make it a little bit more visually interesting.

55
00:02:59,000 --> 00:03:02,000
Now, we were talking about this area right here in the middle,

56
00:03:02,000 --> 00:03:05,000
and it looks like there is some wasted space, but if you perhaps

57
00:03:05,000 --> 00:03:11,000
combine this area with the photos, and I think Kevin said

58
00:03:11,000 --> 00:03:14,000
that he was going to get some higher quality photos there,

59
00:03:14,000 --> 00:03:16,000
if you can use some sort of slider or carousel 

60
00:03:16,000 --> 00:03:20,000
then you could match the great visuals with the information about the business 

61
00:03:20,000 --> 00:03:22,000
that people are looking for.

62
00:03:22,000 --> 00:03:26,000
Sure, and there are also some responsive plugins he can use and downloads,

63
00:03:26,000 --> 00:03:29,000
so first of all, he can visit the Elastislide.

64
00:03:29,000 --> 00:03:31,000
[Elastislide] [http://tympanus.net/Development/Elastislide/]

65
00:03:31,000 --> 00:03:33,000
That's a great responsive plugin with several examples and demos,

66
00:03:33,000 --> 00:03:35,000
and along with that there's FlexSlider, which you can see

67
00:03:35,000 --> 00:03:38,000
this one scales beautifully to browser width.

68
00:03:38,000 --> 00:03:40,000
[Flexslider] [http://www.woothemes.com/flexslider/]

69
00:03:40,000 --> 00:03:42,000
And of course, if he's feeling brave, he can build his own,

70
00:03:42,000 --> 00:03:47,000
and that might be a good solution because he can better suit to his website needs.

71
00:03:47,000 --> 00:03:49,000
[Allison G.] Because one of the problems with the current website,

72
00:03:49,000 --> 00:03:53,000
this gallery view, is that it shows that when you hover over it 

73
00:03:53,000 --> 00:03:57,000
that it's a clickable area, but when you click on it you kind of expect

74
00:03:57,000 --> 00:04:01,000
for the photo to get bigger or for something more interactive to happen,

75
00:04:01,000 --> 00:04:04,000
but instead it takes you to a very different layout,

76
00:04:04,000 --> 00:04:07,000
and it kind of interrupts the flow of the website,

77
00:04:07,000 --> 00:04:10,000
and the only way to get back is by clicking on the logo,

78
00:04:10,000 --> 00:04:14,000
so just a little bit of user flow issues going on right there.

79
00:04:14,000 --> 00:04:16,000
[Guil H.] Sure, and for being one of the first sites you built, 

80
00:04:16,000 --> 00:04:18,000
Kevin, I think it's pretty impressive.

81
00:04:18,000 --> 00:04:22,000
It's a nice use of CSS balance and web fonts going on here,

82
00:04:22,000 --> 00:04:25,000
and for your upcoming design, especially if you're doing more of a 

83
00:04:25,000 --> 00:04:29,000
responsive design, to support your design with a more content-out approach,

84
00:04:29,000 --> 00:04:32,000
so be sure to have all your content in place before you begin,

85
00:04:32,000 --> 00:04:34,000
and just design around that.

86
00:04:34,000 --> 00:04:37,000
To help you get started, there are some frameworks you could start using

87
00:04:37,000 --> 00:04:41,000
and learn from, so you can check out Foundation 3 by Zurb.

88
00:04:41,000 --> 00:04:43,000
[Foundation 3] [foundation.zurb.com]

89
00:04:43,000 --> 00:04:45,000
Another one is 32 and Up by Andy Clark. 

90
00:04:45,000 --> 00:04:47,000
[320 And Up] [stuffandnonsense.co.uk/projects/320andup/]

91
00:04:47,000 --> 00:04:49,000
But if you're looking for something lighter check out the GoldilocksApproach.com.

92
00:04:49,000 --> 00:04:51,000
[The Goldilocks Approach] [http://goldilocksapproach.com]

93
00:04:51,000 --> 00:04:53,000
This is more of a device agnostic approach, which doesn't just conform to

94
00:04:53,000 --> 00:04:56,000
break points for all the resolutions on the devices out there,

95
00:04:56,000 --> 00:04:59,000
and instead it attempts to make your site adaptable to 

96
00:04:59,000 --> 00:05:01,000
other resolutions and devices. 

97
00:05:01,000 --> 00:05:03,000
[Dan G.] From a business and marketing standpoint

98
00:05:03,000 --> 00:05:08,000
one of the important tips that I wanted to communicate here

99
00:05:08,000 --> 00:05:13,000
is that from an SEO standpoint it could be improved

100
00:05:13,000 --> 00:05:18,000
by using the title tag, and so right now 

101
00:05:18,000 --> 00:05:22,000
the name of the business is in the title tag, and that's a good start.

102
00:05:22,000 --> 00:05:25,000
But it's not nearly enough if you want to try to generate more business 

103
00:05:25,000 --> 00:05:28,000
through your search engine.

104
00:05:28,000 --> 00:05:31,000
What you would want to add is information about location

105
00:05:31,000 --> 00:05:34,000
as well as key words and phrases that people are going to search for

106
00:05:34,000 --> 00:05:38,000
regarding the services and products that you provide.

107
00:05:38,000 --> 00:05:40,000
Right here on the home page you've already got that started.

108
00:05:40,000 --> 00:05:42,000
You have some great content to start with.

109
00:05:42,000 --> 00:05:44,000
What I would do is add that to your title tag.

110
00:05:44,000 --> 00:05:47,000
We're talking about these key words right up top,

111
00:05:47,000 --> 00:05:50,000
pedicure, manicure, shellac, anything else 

112
00:05:50,000 --> 00:05:53,000
that would be an important service that you want people to know about

113
00:05:53,000 --> 00:05:55,000
as well as Falkirk.

114
00:05:55,000 --> 00:05:58,000
I don't think you necessarily need Scotland to be in there as well,

115
00:05:58,000 --> 00:06:01,000
but Falkirk and any of the other towns or areas 

116
00:06:01,000 --> 00:06:04,000
that Jackie is willing to go to for these appointments,

117
00:06:04,000 --> 00:06:07,000
get those in the title tag as well, and that should help improve 

118
00:06:07,000 --> 00:06:10,000
your search results, especially the local search results.

119
00:06:10,000 --> 00:06:12,000
Some great suggestions, yeah.

120
00:06:12,000 --> 00:06:17,000
I just wanted to scroll down a little bit too and talk about the details

121
00:06:17,000 --> 00:06:21,000
that he's gone into because you can tell that he put some time and effort 

122
00:06:21,000 --> 00:06:23,000
into thinking beyond this.

123
00:06:23,000 --> 00:06:26,000
He's got a great layout going, and he went in and added shadows

124
00:06:26,000 --> 00:06:29,000
throughout the site, but there are some inconsistencies.

125
00:06:29,000 --> 00:06:32,000
As you can see here with the picture of Jackie,

126
00:06:32,000 --> 00:06:36,000
it looks like there's a bit more of a realistic looking drop shadow

127
00:06:36,000 --> 00:06:38,000
versus this Deals This Month where it has

128
00:06:38,000 --> 00:06:41,000
almost this illustrative kind of drop shadow,

129
00:06:41,000 --> 00:06:45,000
and then on the one to the left there is no drop shadow at all, 

130
00:06:45,000 --> 00:06:48,000
so just kind of thinking about creating this real environment 

131
00:06:48,000 --> 00:06:50,000
and sticking to it.

132
00:06:50,000 --> 00:06:52,000
If you want to go with the illustrative style, just carry that throughout, 

133
00:06:52,000 --> 00:06:55,000
and the same thing with the realistic drop shadows.

134
00:06:55,000 --> 00:06:57,000
They're all great options, just be consistent.

135
00:06:57,000 --> 00:06:59,000
And while we're here on this section, I want to highlight

136
00:06:59,000 --> 00:07:01,000
 that this is some really great content.

137
00:07:01,000 --> 00:07:03,000
A lot of people when they're looking for these 

138
00:07:03,000 --> 00:07:06,000
local services they are looking for prices.

139
00:07:06,000 --> 00:07:08,000
They want to know how much each thing costs.

140
00:07:08,000 --> 00:07:10,000
This is really great.

141
00:07:10,000 --> 00:07:12,000
What I really like are the Deals This Month.

142
00:07:12,000 --> 00:07:16,000
The special offers are going to be the things that can really pull

143
00:07:16,000 --> 00:07:20,000
new customers in to try your service for the first time.

144
00:07:20,000 --> 00:07:25,000
The information leads right into a nice call to action for a phone call.

145
00:07:25,000 --> 00:07:28,000
What I think would make it ideal is if you had

146
00:07:28,000 --> 00:07:31,000
a call to action button to an email form

147
00:07:31,000 --> 00:07:35,000
where people could fill out just some simple information,

148
00:07:35,000 --> 00:07:37,000
just get more information about your service, 

149
00:07:37,000 --> 00:07:41,000
about the booking process, 

150
00:07:41,000 --> 00:07:45,000
and if we could move this stuff--at least the Deals This Month--

151
00:07:45,000 --> 00:07:49,000
if we could move it above the fold and maybe, again,

152
00:07:49,000 --> 00:07:52,000
it would be part of a carousel or some kind of slider up here.

153
00:07:52,000 --> 00:07:55,000
You can highlight those deals in addition to 

154
00:07:55,000 --> 00:07:59,000
the great new images that you're going to be adding to the site

155
00:07:59,000 --> 00:08:01,000
as well as how to book an appointment in the first place.

156
00:08:01,000 --> 00:08:05,000
And similarly how he has--you're suggesting that 

157
00:08:05,000 --> 00:08:08,000
maybe he put a button or a call to action.

158
00:08:08,000 --> 00:08:10,000
You could use a similar thing down here, a similar treatment.

159
00:08:10,000 --> 00:08:13,000
That way you also have a call to action at the bottom of the page. 

160
00:08:13,000 --> 00:08:16,000
I'm not sure about the icons used here.

161
00:08:16,000 --> 00:08:20,000
They kind of evoke more of a childish kind of imagery.

162
00:08:20,000 --> 00:08:22,000
[Dan G.] Right, I thought the same thing.

163
00:08:22,000 --> 00:08:25,000
[Allison G.] So maybe using more appropriate things like nail polish

164
00:08:25,000 --> 00:08:28,000
or something like that if you want to include iconography.

165
00:08:28,000 --> 00:08:31,000
[Dan G.] Well, that's a whole bunch of feedback, and Kevin,

166
00:08:31,000 --> 00:08:33,000
I hope that's helpful for you and Jackie.

167
00:08:33,000 --> 00:08:39,000
We wish you the best of luck with the website as you work on your redesign.

168
00:08:39,000 --> 00:08:41,000
Now, our second website that we want to talk about 

169
00:08:41,000 --> 00:08:43,000
was submitted by Matthew Stenquist.

170
00:08:43,000 --> 00:08:46,000
He's a designer and developer in Denver and LA.

171
00:08:46,000 --> 00:08:48,000
[Matthew Stenquist Portfolio] [http://www.dig.ital.me]

172
00:08:48,000 --> 00:08:53,000
This website that he has, which is Digital Me, or D-I-G dot I-T-A-L dot me

173
00:08:53,000 --> 00:08:56,000
serves as an online portfolio,

174
00:08:56,000 --> 00:08:59,000
and as soon as you bring it up it's very visually striking.

175
00:08:59,000 --> 00:09:01,000
There's a lot to like about it.

176
00:09:01,000 --> 00:09:03,000
Allison, why don't you talk about the visuals?

177
00:09:03,000 --> 00:09:06,000
[Allison G.] I thought he did a really awesome job laying out his information. 

178
00:09:06,000 --> 00:09:09,000
There's a clear visual hierarchy going on.

179
00:09:09,000 --> 00:09:13,000
Right away you know who he is and what he does.

180
00:09:13,000 --> 00:09:18,000
His work is below, and I'm a big fan of the gridded type of portfolio look.

181
00:09:18,000 --> 00:09:21,000
But there are some issues that I think maybe he could improve upon

182
00:09:21,000 --> 00:09:24,000
and make his online presence even stronger.

183
00:09:24,000 --> 00:09:29,000
He has this kind of hovering effect when you hover over each of his portfolio pieces,

184
00:09:29,000 --> 00:09:35,000
and it's a little faded out when you first arrive on the page,

185
00:09:35,000 --> 00:09:38,000
and maybe inverting that inner action with the portfolio pieces 

186
00:09:38,000 --> 00:09:41,000
could draw more attention to his work, 

187
00:09:41,000 --> 00:09:45,000
or maybe just increasing the opacity of these thumbnail images.

188
00:09:45,000 --> 00:09:48,000
Yeah, you're asking the user to do a little too much

189
00:09:48,000 --> 00:09:53,000
right off the bat to see the work that they probably came here to see.

190
00:09:53,000 --> 00:09:56,000
Visually users who visit a portfolio site 

191
00:09:56,000 --> 00:09:59,000
want to see those things, want to have access to it immediately,

192
00:09:59,000 --> 00:10:02,000
and I know one thing that we discussed was that

193
00:10:02,000 --> 00:10:06,000
when they click on any of these things, and they all look really interesting,

194
00:10:06,000 --> 00:10:10,000
but if you click on one, say, this iPhone app,

195
00:10:10,000 --> 00:10:14,000
you're brought to a portfolio page where

196
00:10:14,000 --> 00:10:16,000
the first thing you see is the same thing every time.

197
00:10:16,000 --> 00:10:20,000
It's the same product, and you kind of have to dig around

198
00:10:20,000 --> 00:10:23,000
and scroll through the different projects in order to find what you were looking for,

199
00:10:23,000 --> 00:10:26,000
like this one happened to be second on the slider.

200
00:10:26,000 --> 00:10:29,000
Now, there's a lot of great content down here, a lot of key words

201
00:10:29,000 --> 00:10:32,000
people are going to be searching for, especially if they're looking for someone

202
00:10:32,000 --> 00:10:34,000
who can do a specific type of project.

203
00:10:34,000 --> 00:10:38,000
But it's kind of varied, so if we can find a way

204
00:10:38,000 --> 00:10:42,000
to bring them directly from what we click on to that project

205
00:10:42,000 --> 00:10:46,000
and even have a bigger image or a call letter or a link 

206
00:10:46,000 --> 00:10:48,000
to a site or something that would help.

207
00:10:48,000 --> 00:10:51,000
Because essentially it's the same image.

208
00:10:51,000 --> 00:10:53,000
Once you click and view more details it's the same image,

209
00:10:53,000 --> 00:10:57,000
just a little bit larger, so it'd be nice to see some nice detail shots,

210
00:10:57,000 --> 00:11:00,000
and show all that hard work that you put into your portfolio.

211
00:11:00,000 --> 00:11:03,000
Yeah, that's some really nice work, and that use of imagery could really help.

212
00:11:03,000 --> 00:11:07,000
Now on the front end side of things, I think you did a nice job

213
00:11:07,000 --> 00:11:11,000
of adapting to the screen width and devices,

214
00:11:11,000 --> 00:11:13,000
so when I viewed it on the iPhone, however, I noticed that you are having

215
00:11:13,000 --> 00:11:17,000
a bit of a scaling bug, so you need to check

216
00:11:17,000 --> 00:11:19,000
your viewport meta tag.

217
00:11:19,000 --> 00:11:22,000
If you perhaps remove the initial scale attribute equal to one

218
00:11:22,000 --> 00:11:25,000
that might fix some of those zoom bug issues you're having there.

219
00:11:25,000 --> 00:11:27,000
It might help scale to the device better,

220
00:11:27,000 --> 00:11:32,000
and I also suggest perhaps be careful and consider

221
00:11:32,000 --> 00:11:35,000
perhaps using a bolder font because I noticed that what happens,

222
00:11:35,000 --> 00:11:39,000
especially in the About page, once you view it on a smaller device

223
00:11:39,000 --> 00:11:41,000
the font starts to get a little bit fuzzy,

224
00:11:41,000 --> 00:11:45,000
and maybe use bolder font like he's using towards the footer

225
00:11:45,000 --> 00:11:49,000
down here, which is more legible.

226
00:11:49,000 --> 00:11:51,000
[Allison G.] And that's a really nice type treatment to try to 

227
00:11:51,000 --> 00:11:54,000
integrate that a little bit more because on the About page

228
00:11:54,000 --> 00:11:59,000
you have some information about your skills and your contact information.

229
00:11:59,000 --> 00:12:02,000
Perhaps better organizing that information using 

230
00:12:02,000 --> 00:12:08,000
some of those similar header treatments would be a great type treatment to have.

231
00:12:08,000 --> 00:12:11,000
One of the things that was nice to see on the About page

232
00:12:11,000 --> 00:12:15,000
was a clear breakdown of your basic info.

233
00:12:15,000 --> 00:12:18,000
It's the expertise that you have, location where you are,

234
00:12:18,000 --> 00:12:22,000
and even your email address, and while we're on it,

235
00:12:22,000 --> 00:12:25,000
contact information for someone working on 

236
00:12:25,000 --> 00:12:28,000
different technical projects like this, you have to have it. 

237
00:12:28,000 --> 00:12:32,000
You have to have calls to action where people can contact you,

238
00:12:32,000 --> 00:12:36,000
so I don't know if the portfolio is just for display,

239
00:12:36,000 --> 00:12:38,000
you just want to show off different projects,

240
00:12:38,000 --> 00:12:41,000
but if you look up in the navigation and in the header

241
00:12:41,000 --> 00:12:43,000
there's nothing about contact.

242
00:12:43,000 --> 00:12:46,000
There's some of the different platforms that you're on, some images and RSS feed.

243
00:12:46,000 --> 00:12:49,000
Nothing about email or contact me here for more information

244
00:12:49,000 --> 00:12:57,000
if you want more information about my prices or what's going on now. 

245
00:12:57,000 --> 00:12:59,000
That needs to be in there.

246
00:12:59,000 --> 00:13:02,000
And it could be as simple as just adding another mail icon or something 

247
00:13:02,000 --> 00:13:04,000
like that or just the phone number or email.

248
00:13:04,000 --> 00:13:08,000
Something that was really great that really caught my eye

249
00:13:08,000 --> 00:13:13,000
is this brief about statement that you have right here.

250
00:13:13,000 --> 00:13:18,000
It's so difficult to kind of boil down who you are and what you do

251
00:13:18,000 --> 00:13:22,000
in 2 little sentences, and you do it really nicely here,

252
00:13:22,000 --> 00:13:27,000
and even when you mouse over you see some of the important terms

253
00:13:27,000 --> 00:13:30,000
that people are going to be searching for.

254
00:13:30,000 --> 00:13:34,000
And what was interesting is that I moused over, 

255
00:13:34,000 --> 00:13:37,000
and I thought that perhaps if I clicked on these different things

256
00:13:37,000 --> 00:13:42,000
it would bring me to different places, but it all goes to the same About page,

257
00:13:42,000 --> 00:13:45,000
so if it was me, I would suggest one of two things.

258
00:13:45,000 --> 00:13:51,000
Either have a separate link for each one of these areas of expertise

259
00:13:51,000 --> 00:13:56,000
so if I wanted to learn more about what you covered in mobile development projects

260
00:13:56,000 --> 00:13:59,000
it would take me to a mobile dev page, have your mobile dev projects,

261
00:13:59,000 --> 00:14:03,000
your expertise, some of the things you're working on.

262
00:14:03,000 --> 00:14:07,000
Or you can slice up the About page and have different headers in there.

263
00:14:07,000 --> 00:14:11,000
I mean, one or the other, but I love this statement.

264
00:14:11,000 --> 00:14:15,000
What I do wish is that it was consistent as you went to the About page

265
00:14:15,000 --> 00:14:19,000
because then you get here, and there's another statement, and I was kind of thrown a little bit.

266
00:14:19,000 --> 00:14:21,000
I saw an image with snow. 

267
00:14:21,000 --> 00:14:25,000
I saw this headline saying something about a snowboarder.

268
00:14:25,000 --> 00:14:29,000
I wasn't sure what to make of it, but if you can do what Allison mentioned

269
00:14:29,000 --> 00:14:34,000
and really bring out these areas of expertise in this information about you

270
00:14:34,000 --> 00:14:39,000
and maybe knock down the amount of content that's on this page--

271
00:14:39,000 --> 00:14:43,000
it's a little wordy--get right to the focus of who you are, that would help.

272
00:14:43,000 --> 00:14:45,000
[Allison G.] Speaking of who you are,

273
00:14:45,000 --> 00:14:48,000
we're going to talk about your personal branding a little bit.

274
00:14:48,000 --> 00:14:54,000
You have these initials, A.I.L.T., and I don't know if I'm reading out in the right direction,

275
00:14:54,000 --> 00:14:58,000
but we were trying to figure out what that stood for,

276
00:14:58,000 --> 00:15:01,000
so maybe just either further explain that

277
00:15:01,000 --> 00:15:04,000
or maybe using your initials, but the design looks great,

278
00:15:04,000 --> 00:15:08,000
but it's just making sure that you're conveying what you want to convey.

279
00:15:08,000 --> 00:15:11,000
Okay, and also with your responsive approach I also suggest you

280
00:15:11,000 --> 00:15:15,000
consider more break points in your design,

281
00:15:15,000 --> 00:15:18,000
so I feel that there were areas where certain parts of the site,

282
00:15:18,000 --> 00:15:21,000
especially in the navigation and in the side bar,

283
00:15:21,000 --> 00:15:23,000
they were starting to get covered up at certain screen widths, 

284
00:15:23,000 --> 00:15:27,000
so I suggest you take a look at your site in the browser

285
00:15:27,000 --> 00:15:30,000
and just play with the different resolutions a bit and start taking notes

286
00:15:30,000 --> 00:15:34,000
when things start to break and when they break and become obscured,

287
00:15:34,000 --> 00:15:36,000
and then just start a media query to resolve that,

288
00:15:36,000 --> 00:15:39,000
and you'll find that that will work better.

289
00:15:39,000 --> 00:15:44,000
I also suggest using an em-based design versus a fixed-width pixel design.

290
00:15:44,000 --> 00:15:47,000
You will find that your design becomes fluid, and it adapts more 

291
00:15:47,000 --> 00:15:49,000
to devices and screen widths.

292
00:15:49,000 --> 00:15:53,000
And while we're talking about that, it seems that the thing that's covering up

293
00:15:53,000 --> 00:15:56,000
your navigation here is a banner 

294
00:15:56,000 --> 00:15:59,000
for being nominated for a CSS award, which is awesome.

295
00:15:59,000 --> 00:16:02,000
Congratulations on that. That's a really great achievement.

296
00:16:02,000 --> 00:16:06,000
But the thing is, when  you click on that, it takes you out of your website,

297
00:16:06,000 --> 00:16:09,000
so it's taking people from looking at your work to looking at other people

298
00:16:09,000 --> 00:16:12,000
who have been submitted for a CSS award,

299
00:16:12,000 --> 00:16:16,000
so maybe just taking that information--because it's great information

300
00:16:16,000 --> 00:16:19,000
that you want people to know--and putting it in the About page

301
00:16:19,000 --> 00:16:23,000
maybe in its own special section once you start to win more awards.

302
00:16:23,000 --> 00:16:26,000
And if I can offer the same tip I gave to the folks from Scotland

303
00:16:26,000 --> 00:16:29,000
that would be to make use of your title tag

304
00:16:29,000 --> 00:16:36,000
so if people are searching for mobile development expertise

305
00:16:36,000 --> 00:16:39,000
in Denver or Los Angeles, if you're looking for local business,

306
00:16:39,000 --> 00:16:43,000
then you want to make sure that you really grab those people on search results,

307
00:16:43,000 --> 00:16:47,000
so in your title tag make sure you include your location information

308
00:16:47,000 --> 00:16:52,000
if that's relevant to you but especially your areas of expertise,

309
00:16:52,000 --> 00:16:56,000
mobile development, web, front-end developer,

310
00:16:56,000 --> 00:16:58,000
and whatever else that you want to focus on.

311
00:16:58,000 --> 00:17:00,000
That should be in there as well.

312
00:17:00,000 --> 00:17:04,000
Also, this is more of a personal preference, but the transitions and fades

313
00:17:04,000 --> 00:17:08,000
between pages and break points might not be necessary

314
00:17:08,000 --> 00:17:11,000
because you're possibly duplicating some of these transition styles

315
00:17:11,000 --> 00:17:15,000
and adding some more styles that perhaps slow your page loading time.

316
00:17:15,000 --> 00:17:17,000
I noticed there was some lag between the break points

317
00:17:17,000 --> 00:17:19,000
and when you click on a link.

318
00:17:19,000 --> 00:17:23,000
It took a little time for the page to load and for the content to display,

319
00:17:23,000 --> 00:17:27,000
and by doing that you're also creating styles 

320
00:17:27,000 --> 00:17:30,000
that your users probably will not notice or see

321
00:17:30,000 --> 00:17:33,000
because they'll, for example, be viewing it on a mobile device or an iPad

322
00:17:33,000 --> 00:17:38,000
or just out of one resolution on a browser,

323
00:17:38,000 --> 00:17:41,000
so they won't necessarily be benefiting from that because they probably won't see it.

324
00:17:41,000 --> 00:17:44,000
Us designers might notice it because we like to get in there 

325
00:17:44,000 --> 00:17:46,000
and start playing with the width,

326
00:17:46,000 --> 00:17:50,000
but it might be something that you could perhaps remove.

327
00:17:50,000 --> 00:17:52,000
I think it was a really nice site.

328
00:17:52,000 --> 00:17:54,000
I mean, there's so much here visually.

329
00:17:54,000 --> 00:17:58,000
The visual content is really what's driving this,

330
00:17:58,000 --> 00:18:02,000
and it's going to be what drives whatever contract

331
00:18:02,000 --> 00:18:07,000
or freelance work that you might get from a portfolio site like this,

332
00:18:07,000 --> 00:18:11,000
so again, the visual content is what is king here,

333
00:18:11,000 --> 00:18:14,000
and I think with some of the suggestions we offered you can

334
00:18:14,000 --> 00:18:18,000
really put those center stage.

335
00:18:18,000 --> 00:18:21,000
Yeah, and I think we can all agree the caliber of the entries

336
00:18:21,000 --> 00:18:25,000
that we received was just top notch, so thank you 

337
00:18:25,000 --> 00:18:29,000
for submitting your work, and each episode of Treeviews

338
00:18:29,000 --> 00:18:32,000
we will feature different teachers to match up with your projects,

339
00:18:32,000 --> 00:18:35,000
so if you would like your work to be reviewed on the next episode,

340
00:18:35,000 --> 00:18:39,000
just drop us a line at treeviews@teamtreehouse.com.

341
00:18:39,000 --> 00:18:42,000
Thanks for joining us.>>Thanks guys.>>Thanks.