1
00:00:02,000 --> 00:00:04,180
[treeviews]

2
00:00:04,180 --> 00:00:06,180
[Narrator] Welcome to Treeviews--

3
00:00:06,180 --> 00:00:08,850
the show where Treehouse members submit their work, 

4
00:00:08,850 --> 00:00:11,730
and a panel of Treehouse teachers offers feedback.

5
00:00:11,730 --> 00:00:13,340
Here is today's panel.

6
00:00:13,340 --> 00:00:15,410
[Dan] Hey, everyone! Welcome to Treeviews!

7
00:00:15,410 --> 00:00:18,770
It's the show where you--the Treehouse member--

8
00:00:18,770 --> 00:00:22,340
submit your projects, your website, your app,

9
00:00:22,340 --> 00:00:25,720
and a team of Treehouse teachers evaluates it

10
00:00:25,720 --> 00:00:27,590
and gives you feedback to help you out.

11
00:00:27,590 --> 00:00:29,630
Let's introduce ourselves. I'm Dan Gorgone.

12
00:00:29,630 --> 00:00:31,370
I teach marketing and business.

13
00:00:31,370 --> 00:00:33,480
[Allison] I'm Allison Grayce, and I teach design.

14
00:00:33,480 --> 00:00:36,780
[Ben] And I'm Ben Jakuben, and I teach android development.

15
00:00:36,780 --> 00:00:38,210
[Dan] Alright! So let's get started.

16
00:00:38,210 --> 00:00:41,320
Our first submission here is from Drew Templeton.

17
00:00:41,320 --> 00:00:44,210
It's for the Barcito Restaurant in Chicago,

18
00:00:44,210 --> 00:00:47,860
and that can be found at www.standandeat.com.

19
00:00:47,860 --> 00:00:50,890
Barcito is a restaurant located in Chicago,

20
00:00:50,890 --> 00:00:53,150
and they've come up with this website. 

21
00:00:53,150 --> 00:00:54,900
They'd like to get our feedback.

22
00:00:54,900 --> 00:00:56,130
I know we had a number of things that

23
00:00:56,130 --> 00:00:58,950
we noticed, both positive and negative.

24
00:00:58,950 --> 00:01:03,580
For me, first, when I'm looking at a restaurant website,

25
00:01:03,580 --> 00:01:05,800
I need to know basic information about it.

26
00:01:05,800 --> 00:01:08,170
Usually, I'm looking for the address, the schedule.

27
00:01:08,170 --> 00:01:09,670
That stuff is right there. 

28
00:01:09,670 --> 00:01:11,580
I love that--the little info box. 

29
00:01:11,580 --> 00:01:13,520
Usually that stuff gets buried on other websites, 

30
00:01:13,520 --> 00:01:15,940
but they've got the address, phone number--

31
00:01:15,940 --> 00:01:18,760
even the dress code--along with the schedule,

32
00:01:18,760 --> 00:01:20,980
and some social media information.

33
00:01:20,980 --> 00:01:22,200
I think this is a great plus.

34
00:01:22,200 --> 00:01:24,870
This really helps me when trying to figure out

35
00:01:24,870 --> 00:01:27,790
 the basics about Barcito.

36
00:01:27,790 --> 00:01:29,320
But something else I noticed

37
00:01:29,320 --> 00:01:32,020
was that there is a large dog 

38
00:01:32,020 --> 00:01:36,040
in the middle of the homepage, and it looks cute.

39
00:01:36,040 --> 00:01:39,140
It almost looks like the Taco Bell dog from years past.

40
00:01:39,140 --> 00:01:40,510
I'm not sure what to make of it.

41
00:01:40,510 --> 00:01:42,540
My first thought from a web design 

42
00:01:42,540 --> 00:01:44,510
and marketing standpoint was, wow, 

43
00:01:44,510 --> 00:01:48,080
this main area--this really important real estate 

44
00:01:48,080 --> 00:01:50,310
on the homepage is being devoted to this guy, 

45
00:01:50,310 --> 00:01:52,740
and I kind of don't know why.

46
00:01:52,740 --> 00:01:54,630
Because what I would really like to look for is

47
00:01:54,630 --> 00:01:58,320
this stuff over here--the food and drinks.

48
00:01:58,320 --> 00:01:59,820
[Allison] Yeah, and while we're talking about the

49
00:01:59,820 --> 00:02:01,420
food and the drinks and all of the imagery,

50
00:02:01,420 --> 00:02:03,170
they're in black and white,

51
00:02:03,170 --> 00:02:04,420
and when you're looking at food,

52
00:02:04,420 --> 00:02:06,060
it doesn't look as appetizing 

53
00:02:06,060 --> 00:02:07,840
when it's in black and white.

54
00:02:07,840 --> 00:02:11,060
But I see why he did this really cool effect.

55
00:02:11,060 --> 00:02:13,400
It's kind of interactive. It's fun. 

56
00:02:13,400 --> 00:02:15,430
But when I actually inspected the code,

57
00:02:15,430 --> 00:02:18,000
he has a background image 

58
00:02:18,000 --> 00:02:23,280
applied to an empty div, and I think a better way

59
00:02:23,280 --> 00:02:26,550
to do that--since it should technically be inline

60
00:02:26,550 --> 00:02:27,820
because it's not a background image--

61
00:02:27,820 --> 00:02:31,430
is to use some CSS3 filters that allow you

62
00:02:31,430 --> 00:02:33,500
 to desaturate the images.

63
00:02:33,500 --> 00:02:35,510
[Dan] Well, speaking of the pictures of the 

64
00:02:35,510 --> 00:02:37,770
food and drinks, it's a great point.

65
00:02:37,770 --> 00:02:41,950
You love to see high-res pictures of really appetizing food, 

66
00:02:41,950 --> 00:02:44,260
great-looking drinks, and they actually have 

67
00:02:44,260 --> 00:02:46,750
a photo gallery of the food and beverage.

68
00:02:46,750 --> 00:02:48,470
My first thought here, though,

69
00:02:48,470 --> 00:02:52,240
was that these links here--to the galleries--

70
00:02:52,240 --> 00:02:55,730
are so easy to miss because there's no contrast here.

71
00:02:55,730 --> 00:02:58,400
Again, you have to hover over to get that effect--

72
00:02:58,400 --> 00:03:00,000
that there's something there.

73
00:03:00,000 --> 00:03:01,830
I can read food and beverage, 

74
00:03:01,830 --> 00:03:03,510
but the second one is hard to read.

75
00:03:03,510 --> 00:03:04,880
It says, the space and the scene,

76
00:03:04,880 --> 00:03:07,590
and it's tough to know what that's about.

77
00:03:07,590 --> 00:03:09,900
Maybe it's pictures of the location.

78
00:03:09,900 --> 00:03:12,300
But when you drill down into the food and 

79
00:03:12,300 --> 00:03:15,590
beverage gallery page, here's what you get.

80
00:03:15,590 --> 00:03:19,030
For me, the first thing was that there's no text.

81
00:03:19,030 --> 00:03:22,450
It's all pictures, which isn't necessarily bad--

82
00:03:22,450 --> 00:03:25,810
though from an SEO standpoint, I'm a little worried.

83
00:03:25,810 --> 00:03:29,050
I'm looking for the name of the restaurant, 

84
00:03:29,050 --> 00:03:30,960
that site ID which isn't there.

85
00:03:30,960 --> 00:03:33,550
This looks like maybe the page broke,

86
00:03:33,550 --> 00:03:34,870
and it's not showing the header or something.

87
00:03:34,870 --> 00:03:37,890
The other thing I noticed though is that these 

88
00:03:37,890 --> 00:03:39,770
images are not high-res.

89
00:03:39,770 --> 00:03:43,030
They're pixelated, which if you click on any 

90
00:03:43,030 --> 00:03:46,050
one of them, you're going to see a gorgeous,

91
00:03:46,050 --> 00:03:49,300
high-res picture of the drink, or the food, or whatever.

92
00:03:49,300 --> 00:03:53,440
This is what I should see on that gallery page, so what happened?

93
00:03:53,440 --> 00:03:54,510
[Allison] The reason why it's doing that, Dan,

94
00:03:54,510 --> 00:03:57,970
is that those images are thumbnails, and they

95
00:03:57,970 --> 00:04:02,510
have a width of 100% set on those images.

96
00:04:02,510 --> 00:04:04,790
And what happens is, it's blowing those 

97
00:04:04,790 --> 00:04:08,320
150 x 150 images up to about 400 pixels--

98
00:04:08,320 --> 00:04:10,280
whatever the size of its container is--

99
00:04:10,280 --> 00:04:12,590
and maybe a better way to approach that

100
00:04:12,590 --> 00:04:15,550
would be to save-out the images a little bit 

101
00:04:15,550 --> 00:04:18,899
higher res and set a max-width of 100%, 

102
00:04:18,899 --> 00:04:23,240
so it's never getting larger than the actual size that the image is.

103
00:04:23,240 --> 00:04:27,290
[Dan] And for me, get the names of the drinks--or whatever they are--in there.

104
00:04:27,290 --> 00:04:30,160
It would be helpful for people to know--especially if you're showing food--

105
00:04:30,160 --> 00:04:31,660
what are these things.

106
00:04:31,660 --> 00:04:33,580
Not necessarily what's the name--everyone's got

107
00:04:33,580 --> 00:04:36,410
 a cute name for whatever dish they have--but what's in it. 

108
00:04:36,410 --> 00:04:40,350
People who come to places--if they're allergic to certain things, 

109
00:04:40,350 --> 00:04:42,120
or they want to know information about that--

110
00:04:42,120 --> 00:04:44,380
maybe it's in the menu, maybe it's here.

111
00:04:44,380 --> 00:04:47,340
It's tough to know. There's information in a number of different places.

112
00:04:47,340 --> 00:04:50,130
But, if we go back to the home page,

113
00:04:50,130 --> 00:04:52,710
the last thing I wanted to mention--

114
00:04:52,710 --> 00:04:56,660
what I would also be looking for, if I want information about a restaurant, 

115
00:04:56,660 --> 00:04:59,170
is are there any discounts?

116
00:04:59,170 --> 00:05:03,430
Is there anything going on that would compel me to go?

117
00:05:03,430 --> 00:05:08,480
Information about events or discounts is buried.

118
00:05:08,480 --> 00:05:10,820
It's below the fold when you load the page,

119
00:05:10,820 --> 00:05:14,710
and it's down here on the lower-right-hand side under 'Happenings.'

120
00:05:14,710 --> 00:05:20,570
That's fine. What I would be really interested in seeing is a calendar of events--

121
00:05:20,570 --> 00:05:24,040
more than just one event and one discount.

122
00:05:24,040 --> 00:05:27,130
If there was more to offer, that would be really great.

123
00:05:27,130 --> 00:05:30,080
[Allison] Like when happy hour is, or specials.

124
00:05:30,080 --> 00:05:33,020
[Dan] Exactly. Like this stuff here.

125
00:05:33,020 --> 00:05:39,650
It would be really great to have it, but this is all embedded in an image and it's buried.

126
00:05:39,650 --> 00:05:46,060
This is something that a lot of restaurant sites--

127
00:05:46,060 --> 00:05:49,330
a lot of websites period--battle with is

128
00:05:49,330 --> 00:05:50,600
what to show on the homepage.

129
00:05:50,600 --> 00:05:53,930
What are the things that you want to highlight that are very interesting?

130
00:05:53,930 --> 00:05:59,360
But you have to have a balance when you are serving up content.

131
00:05:59,360 --> 00:06:04,220
The content--when happy hour is, what's on the menu, what are the times, 

132
00:06:04,220 --> 00:06:08,130
what are the social media links, some great pictures of the food--

133
00:06:08,130 --> 00:06:09,710
we want to serve all of that up, 

134
00:06:09,710 --> 00:06:12,020
and we want to give users easy access to it.

135
00:06:12,020 --> 00:06:15,840
[Allison] There's one more thing I want to mention before we talk about the code.

136
00:06:15,840 --> 00:06:21,790
If we scroll up here and click on one of the menu items, it's actually--like you said--

137
00:06:21,790 --> 00:06:23,250
it opens up a PDF.

138
00:06:23,250 --> 00:06:31,270
All of this could totally be re-created in a table inside of the actual layout

139
00:06:31,270 --> 00:06:33,540
or if your AntiTable's moving another way.

140
00:06:33,540 --> 00:06:37,230
You could totally do that inside of the website,

141
00:06:37,230 --> 00:06:42,110
and I think that taking the time to actually do that would help with the usability of it.

142
00:06:42,110 --> 00:06:45,250
Ben, do you want to talk a little bit about the code?

143
00:06:45,250 --> 00:06:46,830
[Ben] Well, yeah, you guys have touched on the links

144
00:06:46,830 --> 00:06:50,500
and how opening each of these links opens either a PDF 

145
00:06:50,500 --> 00:06:52,860
or the corresponding page in a new window.

146
00:06:52,860 --> 00:06:55,550
And from a user-experience perspective,

147
00:06:55,550 --> 00:07:01,000
that's really kind of tricky both on a regular computer and a mobile device.

148
00:07:01,000 --> 00:07:03,740
If you're opening a new window for each click,

149
00:07:03,740 --> 00:07:09,500
that's getting the user into all of these different tabs or new windows on the phone browser.

150
00:07:09,500 --> 00:07:11,990
Then it's just harder to get back to the homepage 

151
00:07:11,990 --> 00:07:15,680
and get back to that most important information that people are probably after.

152
00:07:15,680 --> 00:07:20,830
The first thing that I did when I looked at this was I opened up the developer tools

153
00:07:20,830 --> 00:07:26,100
in Google Chrome, and right away I saw that there were four errors in the JavaScript--

154
00:07:26,100 --> 00:07:29,780
very minor, but it's just one of those things you want to check and see--

155
00:07:29,780 --> 00:07:34,330
and they were all related to the social integration of Twitter.

156
00:07:34,330 --> 00:07:39,000
So, here on the homepage, Dan mentioned how some of the social information is 

157
00:07:39,000 --> 00:07:42,800
right at the top with the Twitter user name and with this Pintxo Twitter feed.

158
00:07:42,800 --> 00:07:48,800
But down at the bottom, they have this cool little box on the left which allows you to 

159
00:07:48,800 --> 00:07:54,550
Tweet at them and enter a contest to win a discount on a drink or food.

160
00:07:54,550 --> 00:08:00,040
Behind the scenes, they're using a plugin from Twitter called Twitter Anywhere.

161
00:08:00,040 --> 00:08:05,440
Twitter's been changing some of their rules and API rules lately, 

162
00:08:05,440 --> 00:08:09,800
so this is probably something that was put in place a little while ago before the rule changes.

163
00:08:09,800 --> 00:08:11,460
Twitter now recommends that 

164
00:08:11,460 --> 00:08:15,000
you use a new set of tools they provided called Twitter Anywhere.

165
00:08:15,000 --> 00:08:16,750
[Twitter Anywhere] [https://dev.twitter.com/docs/anywhere/welcome]

166
00:08:16,750 --> 00:08:18,250
If you go to the Twitter website--the developer website--

167
00:08:18,250 --> 00:08:23,180
and take a look, there are some really easy-to-use buttons that you can customize.

168
00:08:23,180 --> 00:08:26,140
You get these buttons where you put in--

169
00:08:26,140 --> 00:08:29,620
you can customize the text that appears in that box, just like we saw on the page.

170
00:08:29,620 --> 00:08:33,750
You can customize the hashtags and things like that, so you can automatically fill it.

171
00:08:33,750 --> 00:08:36,390
You can get the same functionality that you're getting, but you're going to get rid of

172
00:08:36,390 --> 00:08:39,390
the Twitter Anywhere JavaScript library--which is one of the errors that we saw--

173
00:08:39,390 --> 00:08:44,940
and you're going to get rid of the Twitter Anywhere, which is 

174
00:08:44,940 --> 00:08:47,110
no longer recommended for use by Twitter.

175
00:08:47,110 --> 00:08:51,300
I also took a look at how the site responds on the phone.

176
00:08:51,300 --> 00:08:53,250
I'm a mobile developer, so that's near and dear to me.

177
00:08:53,250 --> 00:08:56,150
The responsive element of this site is fantastic.

178
00:08:56,150 --> 00:08:58,570
The site scales really well on the browser.

179
00:08:58,570 --> 00:09:01,930
It scales down really well to the phone, so it looks great.

180
00:09:01,930 --> 00:09:05,300
It moves around these divs so you get the most important information at the top.

181
00:09:05,300 --> 00:09:08,730
Again, like Dan said, if you hit it on your mobile device, you probably want to know--

182
00:09:08,730 --> 00:09:10,430
Is it open? How do I get there? 

183
00:09:10,430 --> 00:09:13,720
That part of it is really good.

184
00:09:13,720 --> 00:09:19,650
But, the same thing with clicking the links--opening PDFs on a phone is really a problem.

185
00:09:19,650 --> 00:09:22,630
Some people might not even have PDF viewers on some of their phones, 

186
00:09:22,630 --> 00:09:26,410
so again, if we get that into HTML, that could be a big win.

187
00:09:26,410 --> 00:09:31,980
On the images themselves--the gallery is a 3x3 gallery, or a 3-column gallery.

188
00:09:31,980 --> 00:09:34,980
On the phone, that part isn't responsive. 

189
00:09:34,980 --> 00:09:37,180
That still scales down to 3 small thumbnails.

190
00:09:37,180 --> 00:09:40,390
That's not too big of an issue, but that's a place where we could maybe move them around 

191
00:09:40,390 --> 00:09:44,310
into larger thumbnails that they can scroll through and click into again.

192
00:09:44,310 --> 00:09:49,890
That's about all. Overall, again, you mentioned most important information.

193
00:09:49,890 --> 00:09:51,100
It's a good code. 

194
00:09:51,100 --> 00:09:54,710
There's some good practices followed with the way they load all their JavaScript at the bottom.

195
00:09:54,710 --> 00:09:58,130
The responsive elements seem really well-designed.

196
00:09:58,130 --> 00:10:00,880
[Allison] Overall, it's evoking a really awesome brand.  

197
00:10:00,880 --> 00:10:05,410
I really love the way that it feels, and I think it's just about prioritizing that content

198
00:10:05,410 --> 00:10:08,410
and making food really the forefront, since it is a restaurant.

199
00:10:08,410 --> 00:10:12,740
[Dan] They clearly have a great personality. They have a sense of humor.

200
00:10:12,740 --> 00:10:17,660
Let's have that come out with the content at the same time and compel people to 

201
00:10:17,660 --> 00:10:22,940
go to this place, check it out, enjoy the food, and then they can start sharing on social media.

202
00:10:22,940 --> 00:10:28,930
Alright. The next project that we looked at is from Stephanie Schechter.

203
00:10:28,930 --> 00:10:30,380
I hope that we're saying that right.

204
00:10:30,380 --> 00:10:34,560
It's her personal site--portfolio site--well, really professional site, I should say.

205
00:10:34,560 --> 00:10:36,000
[Stephanie Schechter] [http://stephanieschechter.com]

206
00:10:36,000 --> 00:10:39,310
She is a strategic, branding, and design consultant.

207
00:10:39,310 --> 00:10:44,340
This is her site sent to us from her and Graham Davidson.

208
00:10:44,340 --> 00:10:49,020
Again, first impressions--really positive here.

209
00:10:49,020 --> 00:10:52,070
Love the typography. Love the colors.

210
00:10:52,070 --> 00:10:56,810
It's very easy to look at, very easy to understand who she is, what she does,

211
00:10:56,810 --> 00:10:58,960
 and really why we're here.

212
00:10:58,960 --> 00:11:03,200
If we were coming to this site, it's probably from a personal recommendation,

213
00:11:03,200 --> 00:11:07,580
maybe from LinkedIn, some kind of professional connection that's going to drive us here.

214
00:11:07,580 --> 00:11:13,000
As soon as we get here, that scent of information is going to be very strong.

215
00:11:13,000 --> 00:11:14,640
You see what's here. You totally get it.

216
00:11:14,640 --> 00:11:22,770
Now, the page size on a big screen like this looks--I'd say it looks perfectly reasonable.

217
00:11:22,770 --> 00:11:25,530
However, if you're looking at it from a large monitor,

218
00:11:25,530 --> 00:11:30,850
the area that's used by the website and these elements is very small.

219
00:11:30,850 --> 00:11:37,070
It's almost like on a large Mac--a Thunderbolt monitor for example--it's about 1/6 of the area.

220
00:11:37,070 --> 00:11:41,030
It shouldn't be that way. It doesn't have to be that way.

221
00:11:41,030 --> 00:11:44,520
[Allison] A max-width of 621.

222
00:11:44,520 --> 00:11:50,520
It is responsive, but it's at 621 which is pretty small. It could be bigger I think.

223
00:11:50,520 --> 00:11:57,600
[Dan] As you start drilling down and looking at some of the different pieces of information here,

224
00:11:57,600 --> 00:12:02,280
you immediately see that there is some animation happening.

225
00:12:02,280 --> 00:12:07,020
There are some interesting transitions that are going on once you start clicking around.

226
00:12:07,020 --> 00:12:13,740
This does not exactly behave like your everyday, average site.

227
00:12:13,740 --> 00:12:17,310
That's something that was a bit--

228
00:12:17,310 --> 00:12:23,530
I have to say, it made me a little dizzy going from one page to the other.

229
00:12:23,530 --> 00:12:27,280
If you just see what Ben's doing--just clicking from page-to-page--

230
00:12:27,280 --> 00:12:30,460
you're going up and down, you're going left and right.

231
00:12:30,460 --> 00:12:35,260
It's almost like this big, giant grid that you're sort of navigating, 

232
00:12:35,260 --> 00:12:41,990
and I wish I had more control over the simple scrolling aspect of the information.

233
00:12:41,990 --> 00:12:46,600
As I was going through, I just felt like I was working so hard to find some stuff. 

234
00:12:46,600 --> 00:12:51,500
Not only is the navigating difficult, but the screen size is so small, 

235
00:12:51,500 --> 00:12:55,460
there's limited content with each view.

236
00:12:55,460 --> 00:12:59,980
For me, it's sort of like the restaurant website.

237
00:12:59,980 --> 00:13:03,280
There is some great content in here, and I want to see it, 

238
00:13:03,280 --> 00:13:06,260
but I feel like I'm working too hard to get there.

239
00:13:06,260 --> 00:13:13,120
[Allison] I personally love the attention to detail here with the typography,

240
00:13:13,120 --> 00:13:14,670
and if you go back to the homepage,

241
00:13:14,670 --> 00:13:21,220
 there's a really nice use of the sans serif and then the serif fonts down there.

242
00:13:21,220 --> 00:13:23,620
She really is calling out the right words. 

243
00:13:23,620 --> 00:13:28,380
It's just really nice, and I think this font size I actually prefer more 

244
00:13:28,380 --> 00:13:30,500
than the one on some of the internal pages.

245
00:13:30,500 --> 00:13:31,910
Go big or go home. 

246
00:13:31,910 --> 00:13:37,160
If typography is what you're featuring, then I think that you should do it even more.

247
00:13:37,160 --> 00:13:40,830
I pulled up a little bit of an example.

248
00:13:40,830 --> 00:13:44,550
If you go to Trent Walton's website--he's like the master of typography.

249
00:13:44,550 --> 00:13:46,550
Look at how much he uses that real estate.

250
00:13:46,550 --> 00:13:48,550
[Trent Walton] [http://trentwalton.com]

251
00:13:48,550 --> 00:13:50,860
He doesn't have any color on here. Sometimes he does.

252
00:13:50,860 --> 00:13:53,000
 It changes every time he has a new blog post.

253
00:13:53,000 --> 00:13:57,950
You can just see his attention to detail with the lighting and the tracking.

254
00:13:57,950 --> 00:14:03,230
I think if you're going to make typography the only thing that you're featuring on your page, 

255
00:14:03,230 --> 00:14:09,220
on your website--no pictures, or imagery, or textures--that it has to be precise.

256
00:14:09,220 --> 00:14:10,820
[Dan] And while we're here on this site,

257
00:14:10,820 --> 00:14:14,190
another thing that you'll notice is--if you don't mind scrolling down again, Ben--

258
00:14:14,190 --> 00:14:18,510
as you go through these different sections, there are pictures here.

259
00:14:18,510 --> 00:14:22,540
There are examples of what he's talking about in each section.

260
00:14:22,540 --> 00:14:25,700
When you go back to Stephanie's site, in each section--

261
00:14:25,700 --> 00:14:29,410
where she's describing her expertise, and what each concept means to her, 

262
00:14:29,410 --> 00:14:33,730
and how it guides her work--there are no examples there.

263
00:14:33,730 --> 00:14:38,080
There are no visuals there to go along with it, which was another thing that's tough.

264
00:14:38,080 --> 00:14:40,220
People just don't want to read on websites.

265
00:14:40,220 --> 00:14:43,190
They don't mind reading as long as there's something visual to look at. 

266
00:14:43,190 --> 00:14:46,490
And when you're a visual designer--I mean, you've got to have that too.

267
00:14:46,490 --> 00:14:50,700
[Allison] And they're digestible--the amount of content, and that's nice too.

268
00:14:50,700 --> 00:14:55,320
I think you're right--that maybe having some examples or even just some iconography--

269
00:14:55,320 --> 00:14:58,670
something to kind of visually break up the rest of the website.

270
00:14:58,670 --> 00:15:05,820
But if you go to the recent work, it's kind of squished in to this little box.

271
00:15:05,820 --> 00:15:12,660
I think that breaking out of that carousel image and then having your work there 

272
00:15:12,660 --> 00:15:18,880
on the recent work page would be more ideal because you already have different functions 

273
00:15:18,880 --> 00:15:22,710
of arrows going on which is kind of interrupting usability a little bit.

274
00:15:22,710 --> 00:15:28,830
These arrows only affect what's inside of that container, but on the other pages,

275
00:15:28,830 --> 00:15:31,910
 those arrows actually take you to different pages of the site.

276
00:15:31,910 --> 00:15:37,000
I think introducing different actions with the same icon in the same thing 

277
00:15:37,000 --> 00:15:40,340
is going to cause a little bit of confusion with usability.

278
00:15:40,340 --> 00:15:46,150
[Dan] If we just made the page bigger, we wouldn't need this sub-navigation.

279
00:15:46,150 --> 00:15:48,030
[Allison] You're such a marketing guy. Make it bigger.

280
00:15:48,030 --> 00:15:50,460
[Dan] I'm just saying. Make it bigger. Bigger! Bolder!

281
00:15:50,460 --> 00:15:56,730
[Allison] Making it bigger--the logo. I don't know where the logo went.

282
00:15:56,730 --> 00:15:59,370
[Dan] Right. Where did her name go? That's what this whole thing is about.

283
00:15:59,370 --> 00:16:02,910
[Allison] I think maybe having that up here, above the nav--

284
00:16:02,910 --> 00:16:07,730
I know that creates a nice little block of text--you'll have to find something else to go there--

285
00:16:07,730 --> 00:16:12,220
 but having your name in their face--that's why they're here, right?

286
00:16:12,220 --> 00:16:14,920
That should be something that's always static 

287
00:16:14,920 --> 00:16:17,650
and always there for them to know where they're at.

288
00:16:17,650 --> 00:16:22,450
[Ben] You touched on the scrolling and how it affects your navigation, 

289
00:16:22,450 --> 00:16:23,830
your user experience on the site. 

290
00:16:23,830 --> 00:16:25,830
Again, going back to the mobile side of it,

291
00:16:25,830 --> 00:16:29,890
this is a responsive site, and it scales down really well to the phone.

292
00:16:29,890 --> 00:16:33,000
The fonts and the paragraphs all come down.

293
00:16:33,000 --> 00:16:34,280
It's pretty good on the browser, 

294
00:16:34,280 --> 00:16:36,630
although it does get clipped with a few of the media queries there.

295
00:16:36,630 --> 00:16:41,320
On the phone it looks pretty good, but you can scroll on the phone.

296
00:16:41,320 --> 00:16:44,500
You've got this arrow at the bottom which is actually a little bit hidden 

297
00:16:44,500 --> 00:16:46,980
on this view of the monitor.

298
00:16:46,980 --> 00:16:52,450
Depending on your view size--depending on how tall it is--some of the content is clipped,

299
00:16:52,450 --> 00:16:54,770
and we've got some room to play with here, so there's another area 

300
00:16:54,770 --> 00:16:57,380
where you can maybe try and match different devices.

301
00:16:57,380 --> 00:17:03,430
Same thing on the phone--the arrows still work as they do here--but you can also scroll up 

302
00:17:03,430 --> 00:17:07,740
and down which, from a user perspective, is a little more intuitive--it's what people are used to.

303
00:17:07,740 --> 00:17:11,430
It's a good fall back to maybe enable that as well.

304
00:17:11,430 --> 00:17:17,230
There were a couple of small things here that I thought were room for improvement.

305
00:17:17,230 --> 00:17:21,890
With the media queries, which we just talked about, there's just a little bit of clipping going on,

306
00:17:21,890 --> 00:17:24,020
so if we can make that just a little more fluid.

307
00:17:24,020 --> 00:17:25,930
There was a hitch here.

308
00:17:25,930 --> 00:17:32,240
There are two media queries--one at 1024 and one at--I believe it's 980.

309
00:17:32,240 --> 00:17:36,240
The font size changes. It's three different EM settings there.

310
00:17:36,240 --> 00:17:43,000
It starts out at 4.2, then it goes down to 4.0, and then it goes back up to 4.12.

311
00:17:43,000 --> 00:17:45,670
This is for her name at the top--the Stephanie Schechter part.

312
00:17:45,670 --> 00:17:52,200
As you're resizing it in the browser, you can visibly notice that it bumps down briefly.

313
00:17:52,200 --> 00:17:54,960
That's actually a bigger media query there.

314
00:17:54,960 --> 00:17:58,580
[Dan] I don't see exactly why these different EM settings were used

315
00:17:58,580 --> 00:17:59,790
 for those specific media queries.

316
00:17:59,790 --> 00:18:02,180
It seems like maybe it was just playing around with different ones, 

317
00:18:02,180 --> 00:18:03,560
and it made it into the final product.

318
00:18:03,560 --> 00:18:07,420
It's probably something that you could just clean up and pick one setting for all of those 

319
00:18:07,420 --> 00:18:09,890
and have it go through.

320
00:18:09,890 --> 00:18:12,070
[Allison] Really quickly, while we're talking about that main header.

321
00:18:12,070 --> 00:18:16,250
I would suggest that she check out slabText.

322
00:18:16,250 --> 00:18:23,600
It's basically a jQuery plugin that lets her have big, bold, responsive headlines 

323
00:18:23,600 --> 00:18:26,040
like she has here. [slab Text] [http://www.frequency-decoder.com/demo/slabText]

324
00:18:26,040 --> 00:18:29,950
And FitText too--I'm totally talking about Trent Walton this whole time here.

325
00:18:29,950 --> 00:18:34,860
He uses FitText at the top for all of his major headlines to have them scale fluidly.

326
00:18:34,860 --> 00:18:40,620
All you have to do is apply a unique ID to the headline, and it scales with the view port.

327
00:18:40,620 --> 00:18:47,020
Instead of--like you were saying--kind of setting different EM sizes for each breakpoint,

328
00:18:47,020 --> 00:18:52,060
just having one that scales with the whole view port would be more ideal.

329
00:18:52,060 --> 00:18:56,850
[Dan] In the end, just like Barcito, what are we talking about.

330
00:18:56,850 --> 00:19:00,610
We're talking about a website that has really great content in there.

331
00:19:00,610 --> 00:19:04,590
It's the type of content that's going to compel people to take action--

332
00:19:04,590 --> 00:19:06,900
whether it's I want to go to this restaurant in Chicago, 

333
00:19:06,900 --> 00:19:11,280
or I want to do some work with Stephanie--it's all in there.

334
00:19:11,280 --> 00:19:17,430
It's about bringing it to the surface, providing some better accessibility to that content so that

335
00:19:17,430 --> 00:19:22,050
there are fewer steps to take, there's less effort on the user side, 

336
00:19:22,050 --> 00:19:27,280
and with some more calls to action to drive them to the contact page, 

337
00:19:27,280 --> 00:19:33,570
she should have more customers in no time. I mean, that's what it seems like to me.

338
00:19:33,570 --> 00:19:37,560
[Allison] Kind of a fun story. Graham is the developer, and Stephanie was the designer,

339
00:19:37,560 --> 00:19:40,580
and they actually met from the Treehouse Facebook group.

340
00:19:40,580 --> 00:19:42,000
[Ben] Nice. [Allison] Kinda cool.

341
00:19:42,000 --> 00:19:43,500
[Dan] Ben, did you have one more project that you wanted to cover?

342
00:19:43,500 --> 00:19:45,000
[Ben] Yeah, it's kind of a neat one.

343
00:19:45,000 --> 00:19:47,370
 It's something we haven't done on Treeviews before.

344
00:19:47,370 --> 00:19:52,480
A student submitted an iOS Objective-C project that they did for one of their classes,

345
00:19:52,480 --> 00:19:54,320
and they just wanted some feedback.

346
00:19:54,320 --> 00:19:57,540
Her name is Monica Peters, if I'm saying that right.

347
00:19:57,540 --> 00:20:04,030
She's got a project here, and she shared with us, put the source code on GitHub,

348
00:20:04,030 --> 00:20:07,030
and she actually created a video.

349
00:20:07,030 --> 00:20:11,700
I think it was for her class, but it just talks about what she did and some areas for improvement. 

350
00:20:11,700 --> 00:20:14,420
I thought she had some really good things.

351
00:20:14,420 --> 00:20:19,720
The project itself is very well done, and the areas that she wants to improve on 

352
00:20:19,720 --> 00:20:22,730
really show that she knows what she wants to get out of it 

353
00:20:22,730 --> 00:20:25,030
and where to go next with her education.

354
00:20:25,030 --> 00:20:30,170
I actually had a few notes about the code itself I thought might be helpful for other people 

355
00:20:30,170 --> 00:20:32,610
getting started with iOS development.

356
00:20:32,610 --> 00:20:35,590
I'm going to bring up the project here in Xcode, 

357
00:20:35,590 --> 00:20:39,250
and if you haven't used this before, if you haven't done iOS development,

358
00:20:39,250 --> 00:20:44,810
Xcode is the program that we use to write our Objective-C code for iOS apps.

359
00:20:44,810 --> 00:20:49,810
I've got the code here--the app running in this iOS simulator.

360
00:20:49,810 --> 00:20:55,620
The idea of the assignment was to create an app that shows this table view controller,

361
00:20:55,620 --> 00:21:01,270
and that you can click on for details, and that you can edit and remove--things like that.

362
00:21:01,270 --> 00:21:07,400
Just a couple of high-level points here.

363
00:21:07,400 --> 00:21:12,260
As we're going through--again that Monica pointed out that she wants to improve on.

364
00:21:12,260 --> 00:21:16,300
For example--and these are--some of them are smaller details, 

365
00:21:16,300 --> 00:21:19,330
maybe some best practices that you might not have run across before.

366
00:21:19,330 --> 00:21:26,810
She's using a universal app design--meaning that it runs both on the iPhone and the iPad.

367
00:21:26,810 --> 00:21:29,170
It's the same code base, but what you do is, 

368
00:21:29,170 --> 00:21:33,310
you supply some different layout files to make it run on both, and you just switch the layouts up.

369
00:21:33,310 --> 00:21:38,430
She's got it working pretty well, but she went about it in a kind of a different way.

370
00:21:38,430 --> 00:21:41,430
There's a template provided by Xcode. It's called the Master-Detail View.

371
00:21:41,430 --> 00:21:45,530
It basically does exactly what she wants in this app.

372
00:21:45,530 --> 00:21:51,920
It lets you select on an item in a list, and it's kind of like the email client for the iPad or the iPhone 

373
00:21:51,920 --> 00:21:55,940
where you've got a list of items, you tap on it, and it shows all the details on a tablet,

374
00:21:55,940 --> 00:21:59,750
but on a phone, you tap on it, and it takes you to another screen.

375
00:21:59,750 --> 00:22:05,830
If you look at the Master-Detail template, you can get an idea of the way Apple recommends 

376
00:22:05,830 --> 00:22:08,720
setting up these view controllers and getting your data to populate 

377
00:22:08,720 --> 00:22:11,080
and share between the screens.

378
00:22:11,080 --> 00:22:14,410
I had a few notes about the individual views.

379
00:22:14,410 --> 00:22:18,420
Let me open up--let's see, was it the view controller I think?

380
00:22:18,420 --> 00:22:23,650
This is a very minor thing. It doesn't actually affect the code in this case.

381
00:22:23,650 --> 00:22:26,780
What happens here is this custom view controller that she wrote 

382
00:22:26,780 --> 00:22:29,530
is overriding the parent UI view controller.

383
00:22:29,530 --> 00:22:33,780
As it's loading the screen on the phone, it calls a certain set of methods, 

384
00:22:33,780 --> 00:22:36,800
and this one here, called viewDidLoad--

385
00:22:36,800 --> 00:22:41,020
the common convention is to actually move the calls to the superclass 

386
00:22:41,020 --> 00:22:44,300
as the first line in the code. 

387
00:22:44,300 --> 00:22:47,840
Instead of here doing your work and then calling the parent method, 

388
00:22:47,840 --> 00:22:54,540
you would want to do super viewDidLoad and then run your custom code afterwards.

389
00:22:54,540 --> 00:23:00,250
It doesn't affect your code here, but there could be cases where you want to take advantage 

390
00:23:00,250 --> 00:23:04,800
of the work that the parent is doing before you run your own custom code.

391
00:23:04,800 --> 00:23:08,160
The other thing I wanted to point out is 

392
00:23:08,160 --> 00:23:13,610
she's using what's called the UI table view controller for the main data.

393
00:23:13,610 --> 00:23:17,350
I'm just going to open up the table view controller code.

394
00:23:17,350 --> 00:23:22,810
If I open up the header file, we see that it's implementing the UI table view delegate.

395
00:23:22,810 --> 00:23:27,220
There's another protocol we use often with the UI table view delegate 

396
00:23:27,220 --> 00:23:29,830
called UITableView DataSource.

397
00:23:29,830 --> 00:23:35,290
What that allows you to do is take your data source and conform to this protocol 

398
00:23:35,290 --> 00:23:38,700
so that it works really well with the UI table view controller, 

399
00:23:38,700 --> 00:23:42,450
and it lets you access your data in a more robust way.

400
00:23:42,450 --> 00:23:45,690
If we look at how she's implementing her data--and again, this is something she's aware of.

401
00:23:45,690 --> 00:23:47,920
She pointed out in her notes that she wants to improve it,

402
00:23:47,920 --> 00:23:52,010
so I'm just giving some suggestions on one way to go about doing that.

403
00:23:52,010 --> 00:23:56,030
She's got the details here about the food. 

404
00:23:56,030 --> 00:24:02,430
This is a controller about different types of vegan meal options.

405
00:24:02,430 --> 00:24:05,370
Basically, she has a couple of different arrays--here we go--

406
00:24:05,370 --> 00:24:13,630
that are all related that tell the type of food she's looking at on the list, the vitamins in that food, 

407
00:24:13,630 --> 00:24:16,630
and then what she calls the food item tips.

408
00:24:16,630 --> 00:24:20,460
Right now, this is kind of a fragile architecture because she's got three separate arrays,

409
00:24:20,460 --> 00:24:24,790
and what ties them together is the key--the index in the array.

410
00:24:24,790 --> 00:24:31,310
The first item--index zero--is apple, vitamin C, and whatever tip corresponds it.

411
00:24:31,310 --> 00:24:33,580
Now, the problem here is if you want to change any of this data,

412
00:24:33,580 --> 00:24:35,420
you've got to make sure you're doing it in the right place,

413
00:24:35,420 --> 00:24:39,190
and that if you add or delete, you have to add or delete to all three lists.

414
00:24:39,190 --> 00:24:44,510
If you use this table view--this TableView DataSource protocol--

415
00:24:44,510 --> 00:24:48,510
then you can also create a custom object which contains all this information.

416
00:24:48,510 --> 00:24:53,940
So if your custom object has the food item, the vitamins, the food item tips,

417
00:24:53,940 --> 00:24:57,560
and the picture of the food--because right now she's got the picture displaying as well--

418
00:24:57,560 --> 00:25:02,490
then you can build that into one custom object, make an array of that object,

419
00:25:02,490 --> 00:25:06,200
and then use the data source for the table view, based on that array.

420
00:25:06,200 --> 00:25:08,660
Again, that's just the best practices from Apple.

421
00:25:08,660 --> 00:25:10,070
It's a common convention you'll see.

422
00:25:10,070 --> 00:25:12,520
I'm sure there are plenty examples that you can find online,

423
00:25:12,520 --> 00:25:15,490
and it's something that Amit is going to cover soon in our iOS classes. 

424
00:25:15,490 --> 00:25:20,560
[Dan] Alright. Well, we want to thank Drew, and Stephanie, and Graham, and Monica

425
00:25:20,560 --> 00:25:22,770
for submitting their projects today to Treeviews.

426
00:25:22,770 --> 00:25:26,340
If you are a member out there, and you have a project that you want to submit as well,

427
00:25:26,340 --> 00:25:30,420
be sure to email us at treeviews@teamtreehouse.com, 

428
00:25:30,420 --> 00:25:32,330
and we'll see if we can get it on the show.

429
00:25:32,330 --> 00:25:35,830
[Allison] Sounds good! [Dan] Alright! See you next time everyone!

430
00:25:35,830 --> 00:25:39,150
[Ben] Thanks everyone! [Allison] 'Bye!

431
00:25:39,150 --> 00:25:42,290
[Narrator] If you'd like your work reviewed on our next episode,

432
00:25:42,290 --> 00:25:47,130
drop us a line at treeviews@teamtreehouse.com.