1
00:00:00,000 --> 00:00:04,650
[Web Design Q&A with Nick Pettit]

2
00:00:04,650 --> 00:00:06,480
[Nick Pettit @nickrp] Hey everybody, I'm Nick Pettit.

3
00:00:06,480 --> 00:00:09,160
My Twitter handle is @nickrp,

4
00:00:09,160 --> 00:00:13,230
and this is a live Q&A session about web design,

5
00:00:13,230 --> 00:00:16,120
so you can go ahead and ask me any question

6
00:00:16,120 --> 00:00:18,830
about web design, web development,

7
00:00:18,830 --> 00:00:23,000
careers in the web industry, or whatever else is on your mind.

8
00:00:23,000 --> 00:00:25,980
We already have our first question here.

9
00:00:25,980 --> 00:00:29,170
Rodrigo asks is there any CSS framework

10
00:00:29,170 --> 00:00:32,400
that uses ems in media queries?

11
00:00:32,400 --> 00:00:34,900
I'm sure the answer to this is yes.

12
00:00:34,900 --> 00:00:37,320
That's probably the simple answer.

13
00:00:37,320 --> 00:00:43,010
But we can go ahead and look and see what a popular framework does.

14
00:00:43,010 --> 00:00:47,680
If we head over to Bootstrap here,

15
00:00:47,680 --> 00:00:51,840
we can go ahead and download Bootstrap,

16
00:00:51,840 --> 00:00:56,930
unzip it, and dig into the CSS.

17
00:00:56,930 --> 00:01:01,380
We'll go ahead and open that up in Sublime Text.

18
00:01:01,380 --> 00:01:05,160
It looks like it already was open there.

19
00:01:05,160 --> 00:01:11,820
I'll go ahead and search for em,

20
00:01:11,820 --> 00:01:16,080
and it looks like it's being used in a couple of places.

21
00:01:16,080 --> 00:01:19,100
It's being used for some positioning, some padding.

22
00:01:19,100 --> 00:01:23,460
It looks like there was an h1 there that already had it

23
00:01:23,460 --> 00:01:30,100
being used for some font size adjustment.

24
00:01:30,100 --> 00:01:33,500
But I'm assuming that the question that Rodrigo was asking

25
00:01:33,500 --> 00:01:39,330
is related to resizing text in media queries.

26
00:01:41,750 --> 00:01:44,500
I'm looking here. I don't see it used in that way.

27
00:01:44,500 --> 00:01:50,010
And it's also not actually used to describe the minimum and maximum widths

28
00:01:50,010 --> 00:01:52,180
for the media queries either.

29
00:01:52,180 --> 00:01:59,060
That is typically described in pixels, because that's the way that you want to try to define your break points

30
00:01:59,060 --> 00:02:02,110
in media queries is by using pixels.

31
00:02:02,110 --> 00:02:07,020
If you were to use ems, you might get some pretty strange results.

32
00:02:07,020 --> 00:02:09,199
I'm not actually sure what would happen.

33
00:02:09,199 --> 00:02:13,530
I guess it would adjust as you're resizing the browser,

34
00:02:13,530 --> 00:02:18,010
but not in the same ways that you would expect with pixels.

35
00:02:18,010 --> 00:02:22,840
The next question is what is the advantage in learning Python

36
00:02:22,840 --> 00:02:25,900
if you already know PHP?

37
00:02:25,900 --> 00:02:32,370
Well, there's a ton of advantages to diversifying the languages that you know.

38
00:02:32,370 --> 00:02:36,760
Python and PHP are both back-end languages,

39
00:02:36,760 --> 00:02:38,340
at least typically,

40
00:02:38,340 --> 00:02:42,380
and that allows you to interact with the database.

41
00:02:42,380 --> 00:02:49,530
You can do all sorts of back-end business logic and basically create front-end code

42
00:02:49,530 --> 00:02:51,960
that's then delivered to the client side.

43
00:02:51,960 --> 00:02:55,650
You generate your HTML, CSS, JavaScript,

44
00:02:55,650 --> 00:02:59,740
and you can go ahead and deliver that to the client in general.

45
00:02:59,740 --> 00:03:06,480
That's back-end/front-end programming in a nutshell.

46
00:03:06,480 --> 00:03:10,480
PHP is really great if you're just getting started

47
00:03:10,480 --> 00:03:14,370
and you have no back-end programming experience whatsoever.

48
00:03:14,370 --> 00:03:20,450
PHP is really easy to get into because the environment is typically a little bit easier to set up

49
00:03:20,450 --> 00:03:23,620
than for something like Ruby on Rails, for example.

50
00:03:23,620 --> 00:03:26,750
I'm actually less familiar with Python,

51
00:03:26,750 --> 00:03:31,290
but Python and its framework, Django,

52
00:03:31,290 --> 00:03:36,290
is a little bit more I guess comparable to Ruby on Rails

53
00:03:36,290 --> 00:03:40,630
in that it's a more robust web app framework,

54
00:03:40,630 --> 00:03:43,580
and in PHP you do have those.

55
00:03:43,580 --> 00:03:48,340
You have those with things like CakePHP and a couple of others,

56
00:03:48,340 --> 00:03:52,340
but the really, really popular ones

57
00:03:52,340 --> 00:03:56,490
for building web apps are Django and Rails.

58
00:03:56,490 --> 00:04:01,250
If you've done a little bit of PHP and you're ready to move into something more advanced,

59
00:04:01,250 --> 00:04:04,420
Django might be a really good option.

60
00:04:04,420 --> 00:04:08,680
But knowing as many languages as possible

61
00:04:08,680 --> 00:04:12,990
is always going to be your best bet, because once you learn one language,

62
00:04:12,990 --> 00:04:17,060
it's really easy to pick up other languages.

63
00:04:17,060 --> 00:04:20,360
How's that for a non answer?

64
00:04:20,360 --> 00:04:26,070
The next question is David asks do you use browser feature detection

65
00:04:26,070 --> 00:04:29,330
when creating websites?

66
00:04:29,330 --> 00:04:31,650
It depends.

67
00:04:31,650 --> 00:04:34,020
I typically do not.

68
00:04:34,020 --> 00:04:41,550
I try to build my sites so that they can be progressively enhanced

69
00:04:41,550 --> 00:04:44,470
or gracefully degrade, whichever term you prefer.

70
00:04:44,470 --> 00:04:46,830
They're similar terms.

71
00:04:46,830 --> 00:04:52,210
It basically means that you have some sort of fallback plan

72
00:04:52,210 --> 00:04:55,200
for browsers that don't support particular features,

73
00:04:55,200 --> 00:05:00,390
and if you want to use feature detection you can.

74
00:05:00,390 --> 00:05:03,940
It's a perfectly legitimate way to go.

75
00:05:03,940 --> 00:05:10,420
In fact, in CSS there's a new rule that's being introduced pretty soon.

76
00:05:10,420 --> 00:05:12,550
I believe it's @supports.

77
00:05:12,550 --> 00:05:17,000
I'm going to google that real quick

78
00:05:17,000 --> 00:05:22,010
to see if that is on the way,

79
00:05:22,010 --> 00:05:27,300
because I know David Walsh was blogging about that.

80
00:05:27,300 --> 00:05:29,460
Hmm, this is interesting.

81
00:05:29,460 --> 00:05:31,920
It is on the Mozilla Developer Network.

82
00:05:31,920 --> 00:05:36,920
I'm going to go ahead and see if supports—

83
00:05:36,920 --> 00:05:41,060
actually, I'm going to go to caniuse.com

84
00:05:41,060 --> 00:05:48,350
and see where support is at.

85
00:05:48,350 --> 00:05:51,970
Yeah, so CSS Feature Queries.

86
00:05:51,970 --> 00:05:54,350
It doesn't look like it's supported in Internet Explorer

87
00:05:54,350 --> 00:05:56,250
even in version 11.

88
00:05:56,250 --> 00:05:58,410
That's not terribly surprising.

89
00:05:58,410 --> 00:06:00,910
But it looks like Firefox and Chrome support it,

90
00:06:00,910 --> 00:06:04,530
so that's actually interesting.

91
00:06:04,530 --> 00:06:07,560
I have not used supports a whole lot.

92
00:06:07,560 --> 00:06:11,630
I didn't know that both Firefox and Chrome supported it at this point.

93
00:06:11,630 --> 00:06:14,230
It looks like Safari is still lagging behind, though,

94
00:06:14,230 --> 00:06:19,450
so that might make you not want to use it at this point,

95
00:06:19,450 --> 00:06:25,420
but that's another way of doing feature detection for CSS.

96
00:06:25,420 --> 00:06:29,100
You could also do feature detection in JavaScript,

97
00:06:29,100 --> 00:06:37,300
and that's testing whether or not something is actually available for you to use in the browser.

98
00:06:37,300 --> 00:06:44,670
The next question is Carlos asks what is the best way to create and use responsive

99
00:06:44,670 --> 00:06:48,060
and retina-ready images?

100
00:06:48,060 --> 00:06:53,890
That's a really great question, because the answer is kind of in flux,

101
00:06:53,890 --> 00:06:57,640
and I guess in short, the answer would be it depends.

102
00:06:57,640 --> 00:07:00,450
It depends on what kind of site you're trying to build,

103
00:07:00,450 --> 00:07:05,780
how many images maybe you really want to load up.

104
00:07:05,780 --> 00:07:10,350
There's a simple answer and a complex answer.

105
00:07:10,350 --> 00:07:14,380
The complex answer is to use basically a tool

106
00:07:14,380 --> 00:07:17,480
that will go ahead and swap out your image sources.

107
00:07:17,480 --> 00:07:20,380
I'll take a look at those in just a second.

108
00:07:20,380 --> 00:07:27,170
The simpler answer is to actually create just 1 retina-sized image

109
00:07:27,170 --> 00:07:30,640
and not bother switching over to a smaller image

110
00:07:30,640 --> 00:07:33,380
if the screen isn't a retina display

111
00:07:33,380 --> 00:07:38,680
or I guess a high resolution display, if you will.

112
00:07:38,680 --> 00:07:43,740
Retina-ready images actually tend to compress really well.

113
00:07:43,740 --> 00:07:47,370
You can get away with a lot more JPEG compression

114
00:07:47,370 --> 00:07:51,400
on larger images than you can on smaller images.

115
00:07:51,400 --> 00:07:55,500
For example, if you had a photograph

116
00:07:55,500 --> 00:08:02,150
at 2x resolution, you could probably get away with setting the compression

117
00:08:02,150 --> 00:08:06,260
in Photoshop in Save for Web to 20% or 30%,

118
00:08:06,260 --> 00:08:10,680
which sounds really low, but once you set that

119
00:08:10,680 --> 00:08:14,820
and it gets resized for retina displays

120
00:08:14,820 --> 00:08:20,860
and it gets rescaled in the browser, even if the device isn't a high res display

121
00:08:20,860 --> 00:08:23,380
it will still look really good.

122
00:08:23,380 --> 00:08:26,590
All of those compression artifacts will shrink away,

123
00:08:26,590 --> 00:08:31,320
and in some cases the larger image, when it's heavily compressed,

124
00:08:31,320 --> 00:08:34,700
actually ends up with a smaller file size

125
00:08:34,700 --> 00:08:39,929
than a smaller image with less compression.

126
00:08:39,929 --> 00:08:44,550
Hopefully that made sense, and in most cases,

127
00:08:44,550 --> 00:08:49,610
you can really get away with having just the retina sized image or just the 2x image

128
00:08:49,610 --> 00:08:53,390
and putting a lot of compression on it.

129
00:08:53,390 --> 00:08:55,630
That's the simple answer.

130
00:08:55,630 --> 00:09:03,470
The more complex answer is to use some sort of framework,

131
00:09:03,470 --> 00:09:09,980
I guess if you will, to swap out your image sources.

132
00:09:09,980 --> 00:09:11,100
There's a couple.

133
00:09:11,100 --> 00:09:14,760
Is it adaptive images that I'm thinking of?

134
00:09:14,760 --> 00:09:19,580
Yeah, so this will actually go ahead and swap them out

135
00:09:19,580 --> 00:09:29,100
using a PHP file, so adaptive images is one option.

136
00:09:29,100 --> 00:09:36,240
Let's see, responsive images.

137
00:09:36,240 --> 00:09:41,460
I'm trying to think what this other project is called.

138
00:09:41,460 --> 00:09:43,500
I can't think of the name of it.

139
00:09:43,500 --> 00:09:45,640
There's another one.

140
00:09:45,640 --> 00:09:48,270
There's Zurb Interchange

141
00:09:48,270 --> 00:09:51,490
from Zurb Foundation.

142
00:09:51,490 --> 00:09:55,070
Let's type in "interchange" here.

143
00:10:00,950 --> 00:10:03,210
This was actually for Foundation 4.

144
00:10:03,210 --> 00:10:05,480
I believe Foundation 5 just came out.

145
00:10:05,480 --> 00:10:10,320
I haven't taken a look at it yet, but I would assume Interchange is still a part of that,

146
00:10:10,320 --> 00:10:14,130
and Interchange, again, is just another option

147
00:10:14,130 --> 00:10:17,040
for swapping out your image sources,

148
00:10:17,040 --> 00:10:19,990
and this is nice because not only can you swap them out

149
00:10:19,990 --> 00:10:25,070
for resolution reasons or I guess for DPI reasons,

150
00:10:25,070 --> 00:10:29,350
so for example, you could swap image sources from a retina image

151
00:10:29,350 --> 00:10:34,260
to a non-retina image, but you can also swap image sources

152
00:10:34,260 --> 00:10:37,720
if you want maybe slightly different cropping

153
00:10:37,720 --> 00:10:41,110
on a smaller display.

154
00:10:41,110 --> 00:10:46,440
I'm trying to think what that other project was.

155
00:10:46,440 --> 00:10:52,920
Let me go ahead and Google this really quick.

156
00:10:52,920 --> 00:10:57,370
I blogged about this recently,

157
00:10:57,370 --> 00:11:00,330
and I might be able to find it here.

158
00:11:00,330 --> 00:11:08,640
Let's see, I think it's svg first is the title of the blog post.

159
00:11:16,320 --> 00:11:19,500
I can't quite find it. Ah, there it is.

160
00:11:19,500 --> 00:11:21,240
It was called "Scalable Web Design,"

161
00:11:21,240 --> 00:11:24,820
and I know the link is in here somewhere.

162
00:11:24,820 --> 00:11:31,860
This is actually a blog post where I talk about how it's good to use SVGs first

163
00:11:31,860 --> 00:11:33,000
if at all possible.

164
00:11:33,000 --> 00:11:36,700
A-ha, okay, there it is.

165
00:11:36,700 --> 00:11:39,130
I googled responsive images, but I couldn't find it.

166
00:11:41,570 --> 00:11:45,690
Responsiveimages.org is the responsive images community group,

167
00:11:45,690 --> 00:11:50,950
and this is yet another way to go ahead and swap out your image sources.

168
00:11:50,950 --> 00:11:53,310
They're kind of pushing for the picture element,

169
00:11:53,310 --> 00:11:56,390
which would make swapping image sources pretty easy,

170
00:11:56,390 --> 00:11:58,570
but here they have a really great example

171
00:11:58,570 --> 00:12:03,350
of what you can do when you swap out image sources on different devices.

172
00:12:03,350 --> 00:12:06,930
On a large display you might want to show the entire picture,

173
00:12:06,930 --> 00:12:10,270
but if there was a focal point in the image,

174
00:12:10,270 --> 00:12:13,330
and in this case it's this dog here,

175
00:12:13,330 --> 00:12:16,140
they want to go ahead and zoom in

176
00:12:16,140 --> 00:12:18,370
to the most important part of the image,

177
00:12:18,370 --> 00:12:20,320
because if you have this very large image

178
00:12:20,320 --> 00:12:24,430
and it was shrunken down to this portrait view

179
00:12:24,430 --> 00:12:28,090
on this phone, it would be a little bit difficult

180
00:12:28,090 --> 00:12:33,130
to really see all the detail there that you'd want to see.

181
00:12:33,130 --> 00:12:35,520
Anyway, those are a couple of options.

182
00:12:35,520 --> 00:12:39,880
I'm sure that's probably more complex of an answer

183
00:12:39,880 --> 00:12:42,640
than you were hoping for, but that's the truth.

184
00:12:42,640 --> 00:12:49,070
There's no simple answer to creating retina-ready images.

185
00:12:49,070 --> 00:12:51,450
What's your opinion on SVGs?

186
00:12:51,450 --> 00:12:55,340
I'm having problems with cross-browser compatibility.

187
00:12:55,340 --> 00:13:00,620
Well, it depends on what browsers you're trying to support,

188
00:13:00,620 --> 00:13:03,590
but SVGs are pretty well supported at this point.

189
00:13:03,590 --> 00:13:08,280
I have Can I use... here up at caniuse.com.

190
00:13:08,280 --> 00:13:16,410
And SVGs are currently supported with basic support

191
00:13:16,410 --> 00:13:19,800
all the way back to Internet Explorer 9.

192
00:13:19,800 --> 00:13:22,020
That's 2 versions back now,

193
00:13:22,020 --> 00:13:27,610
so you should be fairly safe to go ahead and start using SVGs

194
00:13:27,610 --> 00:13:31,100
as long as you provide some sort of image fallback.

195
00:13:31,100 --> 00:13:34,840
They're also supported in Firefox,

196
00:13:34,840 --> 00:13:36,850
Chrome, and Safari

197
00:13:36,850 --> 00:13:42,890
and pretty well supported across all mobile browsers.

198
00:13:42,890 --> 00:13:45,980
You can go ahead and use SVGs in the image element,

199
00:13:45,980 --> 00:13:50,890
so that's actually using them as the source for your image.

200
00:13:50,890 --> 00:13:54,740
You can also use SVGs in CSS backgrounds,

201
00:13:54,740 --> 00:13:59,020
and that for some time was a little bit less supported,

202
00:13:59,020 --> 00:14:03,490
but it looks like support is pretty good at this point.

203
00:14:03,490 --> 00:14:07,060
You can also do SVGs inline,

204
00:14:07,060 --> 00:14:11,890
and something that's a little bit newer are SVG filters,

205
00:14:11,890 --> 00:14:17,630
so that's described as using Photoshop-like effects on SVG objects.

206
00:14:17,630 --> 00:14:20,780
You can go ahead and do things like blurring or color manipulation,

207
00:14:20,780 --> 00:14:23,650
all sorts of other cool effects.

208
00:14:23,650 --> 00:14:27,790
That is still a bit less supported,

209
00:14:27,790 --> 00:14:30,370
and it's also pretty computationally intensive,

210
00:14:30,370 --> 00:14:32,670
so it's something that you don't want to use in abundance.

211
00:14:32,670 --> 00:14:38,220
But it looks like support is coming pretty soon here.

212
00:14:38,220 --> 00:14:41,010
That's good.

213
00:14:41,010 --> 00:14:45,460
But if you do need to support Internet Explorer 8 and back,

214
00:14:45,460 --> 00:14:47,720
you will need some sort of fallback,

215
00:14:47,720 --> 00:14:52,080
so again, in this same article, "Scalable Web Design,"

216
00:14:52,080 --> 00:14:57,560
I talk about using vectors first,

217
00:14:57,560 --> 00:15:05,070
and you can go ahead and create a bitmap-based fallback,

218
00:15:05,070 --> 00:15:07,740
and there's a really great tool that does that.

219
00:15:07,740 --> 00:15:12,870
It's called Grumpicon or Grump icon.

220
00:15:12,870 --> 00:15:15,480
I'm not really sure how you pronounce it.

221
00:15:15,480 --> 00:15:19,640
You can go ahead and drag and drop an SVG right here,

222
00:15:19,640 --> 00:15:28,200
and it will create a bitmap-based fallback for you.

223
00:15:28,200 --> 00:15:30,700
That's a really good solution if you need to support browsers

224
00:15:30,700 --> 00:15:36,290
that don't necessarily support SVGs as well as you'd like.

225
00:15:36,290 --> 00:15:39,530
Hopefully that answers your question.

226
00:15:39,530 --> 00:15:44,480
The next question says I'm just getting started at Treehouse on building websites.

227
00:15:44,480 --> 00:15:46,110
Awesome.

228
00:15:46,110 --> 00:15:48,840
But I'm still having trouble grasping the basics.

229
00:15:48,840 --> 00:15:52,860
I was recommended starting with Bootstrap.

230
00:15:52,860 --> 00:15:55,190
Any other suggestions?

231
00:15:55,190 --> 00:15:59,200
It depends what you're trying to accomplish.

232
00:15:59,200 --> 00:16:03,500
If you're still really, really new to web design

233
00:16:03,500 --> 00:16:09,390
I'd recommend going on to Treehouse and learning about HTML and CSS.

234
00:16:09,390 --> 00:16:13,430
You probably started with the project How to Build a Simple Website

235
00:16:13,430 --> 00:16:18,570
where we actually build this website called Smells Like Bakin'.

236
00:16:18,570 --> 00:16:21,670
You can see a sample of it at smellslikebakin.com.

237
00:16:21,670 --> 00:16:24,290
And it's a simple website for a bakery.

238
00:16:24,290 --> 00:16:27,110
We do use a simple grid system,

239
00:16:27,110 --> 00:16:30,450
but we don't use a full-blown framework

240
00:16:30,450 --> 00:16:33,350
in this particular project.

241
00:16:33,350 --> 00:16:38,460
If you do feel like you have some of the basics of HTML and CSS down

242
00:16:38,460 --> 00:16:42,710
you may want to go on to using a more robust framework.

243
00:16:42,710 --> 00:16:45,880
The one you mentioned is Bootstrap,

244
00:16:45,880 --> 00:16:52,030
which I have up here, and that's what's called a front-end framework.

245
00:16:52,030 --> 00:16:54,430
It's basically going to be a collection

246
00:16:54,430 --> 00:17:02,400
of CSS and JavaScript, and you can use Bootstrap

247
00:17:02,400 --> 00:17:07,550
to build more complex grids rather than using the simple grid system

248
00:17:07,550 --> 00:17:09,650
that we introduced in that project.

249
00:17:09,650 --> 00:17:14,710
Bootstrap is very robust, and it's used by lots of websites.

250
00:17:14,710 --> 00:17:16,800
It's really, really great,

251
00:17:16,800 --> 00:17:21,339
and it does make it very easy to get started building grids.

252
00:17:21,339 --> 00:17:25,210
There are other options for front-end frameworks, though.

253
00:17:25,210 --> 00:17:27,040
This is another one,

254
00:17:27,040 --> 00:17:30,510
and it's called Zurb Foundation.

255
00:17:30,510 --> 00:17:32,520
Let me pull it up here.

256
00:17:32,520 --> 00:17:35,770
Zurb is the company that puts it together,

257
00:17:35,770 --> 00:17:37,670
and as I mentioned previously,

258
00:17:37,670 --> 00:17:39,780
it's now in version 5,

259
00:17:39,780 --> 00:17:45,540
and you'll find a lot of the features in Zurb that you would find in Bootstrap.

260
00:17:45,540 --> 00:17:49,260
They're very, very competitive with one another,

261
00:17:49,260 --> 00:17:53,130
so one is not necessarily better than the other.

262
00:17:53,130 --> 00:17:58,320
It really comes down to personal preference, so if you're still new to web design

263
00:17:58,320 --> 00:18:02,550
and you're just starting out and you're ready to start using a framework like this

264
00:18:02,550 --> 00:18:05,810
to try and accelerate the pace at which you can build websites,

265
00:18:05,810 --> 00:18:11,680
I would try using Zurb and try using Bootstrap

266
00:18:11,680 --> 00:18:15,000
in 2 separate projects and see which one you like better,

267
00:18:15,000 --> 00:18:18,940
because you might find that you have a preference for one over the other,

268
00:18:18,940 --> 00:18:20,120
and that's perfectly fine.

269
00:18:20,120 --> 00:18:23,420
That's why there's more than one front-end framework,

270
00:18:23,420 --> 00:18:25,590
and those are actually just 2.

271
00:18:25,590 --> 00:18:28,160
They are 2 major front-end frameworks

272
00:18:28,160 --> 00:18:32,160
that are very popular and very feature-complete.

273
00:18:32,160 --> 00:18:35,230
But there's lots and lots of other front-end frameworks

274
00:18:35,230 --> 00:18:37,930
if you feel like these are a little bit too robust for you.

275
00:18:37,930 --> 00:18:41,640
You can type in front-end framework into Google

276
00:18:41,640 --> 00:18:43,770
and start searching around a little bit,

277
00:18:43,770 --> 00:18:50,790
maybe read some blog posts, and you'll find lots of others that you can go ahead and test out.

278
00:18:50,790 --> 00:18:55,050
The next question is from Rodrigo,

279
00:18:55,050 --> 00:19:00,640
and he says is an Internet Explorer 8 fallback still needed?

280
00:19:00,640 --> 00:19:04,140
Well, that depends on the audience for your site.

281
00:19:04,140 --> 00:19:10,200
If you are looking in your Google Analytics for the site

282
00:19:10,200 --> 00:19:13,920
and you're noticing you're getting a lot of Internet Explorer 8 traffic,

283
00:19:13,920 --> 00:19:19,360
then yeah, you probably still need to support Internet Explorer 8

284
00:19:19,360 --> 00:19:22,160
in some degree or another.

285
00:19:22,160 --> 00:19:27,680
If you look there and you see that your site really isn't getting a lot of traffic

286
00:19:27,680 --> 00:19:31,810
from IE 8, then you're probably okay.

287
00:19:31,810 --> 00:19:34,890
If it's down to 1% or 2%,

288
00:19:34,890 --> 00:19:37,890
that's probably the point where you can start cutting off support

289
00:19:37,890 --> 00:19:43,650
or at least not offering support for some of the more advanced features

290
00:19:43,650 --> 00:19:47,430
that require a newer browser.

291
00:19:47,430 --> 00:19:54,300
Let's go ahead and look up browser market share,

292
00:19:54,300 --> 00:19:58,440
because you usually get a pretty good idea

293
00:19:58,440 --> 00:20:02,050
of some usage statistics here.

294
00:20:02,050 --> 00:20:11,820
Let's see, I'm actually looking for a particular version of IE.

295
00:20:11,820 --> 00:20:15,060
I'm not sure if this table offers that.

296
00:20:17,580 --> 00:20:20,810
This Wikipedia article actually uses a variety of sources

297
00:20:20,810 --> 00:20:25,430
for their statistics on browser market share,

298
00:20:25,430 --> 00:20:28,710
but this isn't what I'm looking for.

299
00:20:28,710 --> 00:20:33,210
Let's see, let's go ahead and go back

300
00:20:33,210 --> 00:20:38,610
and see if we can find net applications,

301
00:20:38,610 --> 00:20:45,150
because they usually have a pretty good—

302
00:20:45,150 --> 00:20:48,240
is this it, NetMarketShare?

303
00:20:48,240 --> 00:20:50,530
I'm not sure.

304
00:20:50,530 --> 00:20:53,690
We're going on an adventure here together.

305
00:20:53,690 --> 00:20:59,120
Anyway, I would just look at the usage stats for IE8.

306
00:20:59,120 --> 00:21:02,430
You can usually find it pretty easily by googling,

307
00:21:02,430 --> 00:21:04,180
a little bit more easily than that.

308
00:21:04,180 --> 00:21:08,180
But also make a decision based on your audience.

309
00:21:08,180 --> 00:21:12,170
That's really the most important thing because if nobody is visiting your site that's using IE8,

310
00:21:12,170 --> 00:21:15,080
then in your case it doesn't really matter.

311
00:21:15,080 --> 00:21:17,820
Something to think about.

312
00:21:17,820 --> 00:21:22,210
The next question says do you have any good recommendations

313
00:21:22,210 --> 00:21:29,190
or resources for blog post templates?

314
00:21:29,190 --> 00:21:31,320
Not really.

315
00:21:31,320 --> 00:21:35,320
I'm actually not too much of a WordPress guru.

316
00:21:35,320 --> 00:21:38,710
I've used WordPress quite a lot in the past.

317
00:21:38,710 --> 00:21:42,000
But I'm definitely not an expert.

318
00:21:42,000 --> 00:21:44,210
WordPress goes pretty deep.

319
00:21:44,210 --> 00:21:48,140
But for blog post templates, when I think of blog post templates

320
00:21:48,140 --> 00:21:53,370
I think of WordPress themes.

321
00:21:53,370 --> 00:21:57,960
If you're using WordPress, that would definitely be the place to look.

322
00:21:57,960 --> 00:22:03,520
You would want to type into Google WordPress themes,

323
00:22:03,520 --> 00:22:08,770
and you'll find tons and tons of themes that are both free

324
00:22:08,770 --> 00:22:11,750
and paid ones as well,

325
00:22:11,750 --> 00:22:17,680
and it's definitely a case where you're going to get what you pay for for the most part.

326
00:22:17,680 --> 00:22:19,920
There's plenty of really great free themes,

327
00:22:19,920 --> 00:22:22,660
but some of the paid ones are pretty nice,

328
00:22:22,660 --> 00:22:24,920
and there's a reason that they're paid.

329
00:22:24,920 --> 00:22:29,850
It's because the people that made them put a lot of work into them.

330
00:22:29,850 --> 00:22:33,840
I don't have any great recommendations or resources in that regard,

331
00:22:33,840 --> 00:22:38,810
but our WordPress teacher Zach at Treehouse definitely would,

332
00:22:38,810 --> 00:22:43,170
so if you're a Treehouse member you might want to hit up Zach in the forum and ask him

333
00:22:43,170 --> 00:22:46,550
if he has any good recommendations.

334
00:22:46,550 --> 00:22:51,310
The next question says any advice for back-end developers

335
00:22:51,310 --> 00:22:53,770
who are interested in web design?

336
00:22:53,770 --> 00:22:55,520
Oh, yes.

337
00:22:55,520 --> 00:22:58,000
I have worked with lots of developers in my time.

338
00:22:58,000 --> 00:23:00,190
In fact, I've done lots of development myself.

339
00:23:00,190 --> 00:23:03,840
I self-identify as a web designer,

340
00:23:03,840 --> 00:23:08,090
but that doesn't mean I don't do any development at all.

341
00:23:08,090 --> 00:23:10,950
In fact, I do quite a lot.

342
00:23:10,950 --> 00:23:16,110
I have plenty of advice for developers that are looking to break into web design.

343
00:23:16,110 --> 00:23:19,110
The #1 thing that I see from developers

344
00:23:19,110 --> 00:23:25,190
in terms of designing websites is that they tend to ignore

345
00:23:25,190 --> 00:23:28,190
the use of space.

346
00:23:28,190 --> 00:23:32,530
You can always tell when a layout is designed by a developer

347
00:23:32,530 --> 00:23:37,960
because there will be text that's running right up against the edge of the site

348
00:23:37,960 --> 00:23:39,000
or another element.

349
00:23:39,000 --> 00:23:44,370
There won't really be enough space between all the elements on the page,

350
00:23:44,370 --> 00:23:51,280
because if you're newer to design, it can be a little bit strange

351
00:23:51,280 --> 00:23:57,530
to actually include a lot of space, because it feels like you're literally adding nothing

352
00:23:57,530 --> 00:24:00,210
to the page, but space is important,

353
00:24:00,210 --> 00:24:04,390
because when you have negative space between elements,

354
00:24:04,390 --> 00:24:08,620
it makes things a lot easier to read and navigate.

355
00:24:08,620 --> 00:24:13,600
I actually wrote a blog post about this as well,

356
00:24:13,600 --> 00:24:17,470
and I'm going to go ahead and search here.

357
00:24:17,470 --> 00:24:26,440
I think it's called 5 mistakes web developers make

358
00:24:26,440 --> 00:24:31,210
or something like that.

359
00:24:31,210 --> 00:24:34,460
Let's see.

360
00:24:34,460 --> 00:24:42,190
Or it's 5 things every developer should know.

361
00:24:42,190 --> 00:24:47,740
Five design tips every developer should know.

362
00:24:47,740 --> 00:24:51,980
I just went over the first one, use negative space.

363
00:24:51,980 --> 00:24:56,970
So just make sure there's enough space between your elements,

364
00:24:56,970 --> 00:25:01,900
and there's a bunch of more detailed tips about that there.

365
00:25:01,900 --> 00:25:05,570
You also need to pay attention to contrast,

366
00:25:05,570 --> 00:25:11,980
and you want to create contrast through value or lightness and darkness.

367
00:25:11,980 --> 00:25:15,990
You don't want to create contrast through color too much.

368
00:25:15,990 --> 00:25:19,810
You actually really want to rely on the lightness and darkness of the color

369
00:25:19,810 --> 00:25:23,130
before you rely on color itself.

370
00:25:23,130 --> 00:25:27,080
A really great way to test that is to put your page

371
00:25:27,080 --> 00:25:32,470
in black and white and look at it in gray scale

372
00:25:32,470 --> 00:25:36,140
and see if you notice any areas that are too light

373
00:25:36,140 --> 00:25:39,770
or too dark or aren't really contrasting with one another enough,

374
00:25:39,770 --> 00:25:42,620
because by removing all color,

375
00:25:42,620 --> 00:25:46,630
you'll see areas that are not contrasting through value

376
00:25:46,630 --> 00:25:53,070
but might be contrasting through color and are just hidden as a result.

377
00:25:53,070 --> 00:25:56,650
There's a couple more here, add variety with texture,

378
00:25:56,650 --> 00:25:59,530
although flat design is all the rage right now,

379
00:25:59,530 --> 00:26:02,150
so maybe that's not such a great tip anymore.

380
00:26:02,150 --> 00:26:04,640
I can't really tell these days.

381
00:26:04,640 --> 00:26:07,470
You want to try to communicate using shape,

382
00:26:07,470 --> 00:26:12,240
so websites are really great for creating rectangles,

383
00:26:12,240 --> 00:26:16,730
but it can be difficult to create non-rectangular shapes.

384
00:26:16,730 --> 00:26:22,680
Fortunately, it is actually a little easier these days

385
00:26:22,680 --> 00:26:28,690
with CSS3 because you can create really nice shapes

386
00:26:28,690 --> 00:26:33,480
using things like border radius or pseudo elements

387
00:26:33,480 --> 00:26:37,110
and a couple of other things, so this is a list of shapes

388
00:26:37,110 --> 00:26:40,460
on CSS Tricks, and it's linked here in this article,

389
00:26:40,460 --> 00:26:45,820
and all of these shapes are created with a single HTML element.

390
00:26:45,820 --> 00:26:49,420
It's pretty incredible some of the shapes that you can make,

391
00:26:49,420 --> 00:26:52,500
and you can do a lot to draw attention to an element

392
00:26:52,500 --> 00:26:55,780
just by changing its shape slightly.

393
00:26:55,780 --> 00:27:00,520
And the last one is to make sure that you have really good balance on the page,

394
00:27:00,520 --> 00:27:07,290
so you don't want elements to be too heavy on one side and too light on another or vice versa.

395
00:27:07,290 --> 00:27:12,600
And a good way to check that is to flip your page upside down.

396
00:27:12,600 --> 00:27:15,080
You could take a screenshot of it

397
00:27:15,080 --> 00:27:17,350
and flip it upside down in an image editor,

398
00:27:17,350 --> 00:27:21,300
or you could actually go ahead and use CSS3

399
00:27:21,300 --> 00:27:23,700
and rotate the entire body of the page.

400
00:27:23,700 --> 00:27:25,680
You could do that in the developer tools, for example,

401
00:27:25,680 --> 00:27:29,580
in Google Chrome or Firefox or a lot of other browsers.

402
00:27:29,580 --> 00:27:31,670
You could go ahead and flip your page upside down,

403
00:27:31,670 --> 00:27:35,150
and that way you'll be able to look at the composition of the page

404
00:27:35,150 --> 00:27:40,130
and judge without looking at the text

405
00:27:40,130 --> 00:27:42,870
or other elements that seem familiar,

406
00:27:42,870 --> 00:27:45,640
does the page feel heavier on one side or the other?

407
00:27:45,640 --> 00:27:48,590
That's a really good way to check balance.

408
00:27:48,590 --> 00:27:52,370
Hopefully that answers your question.

409
00:27:52,370 --> 00:27:57,430
The next question says how do you handle image sizing

410
00:27:57,430 --> 00:28:01,670
when dealing with 2x images in your CSS?

411
00:28:01,670 --> 00:28:04,020
There's a couple of different ways.

412
00:28:04,020 --> 00:28:10,230
Generally you want to have your images at 2x the resolution

413
00:28:10,230 --> 00:28:12,940
that you would need them to be at.

414
00:28:12,940 --> 00:28:15,430
If it is a background image,

415
00:28:15,430 --> 00:28:19,050
you need to set the background size to 50%.

416
00:28:19,050 --> 00:28:22,620
I think that's correct. My math might be slightly off on that.

417
00:28:22,620 --> 00:28:26,350
Or it's the other way. I'm not sure.

418
00:28:26,350 --> 00:28:31,150
But in general, I think you need to set them to 50%

419
00:28:31,150 --> 00:28:33,620
in order to size them down.

420
00:28:33,620 --> 00:28:37,990
You also can set an explicit width on images

421
00:28:37,990 --> 00:28:42,440
or on elements that are the container for images.

422
00:28:42,440 --> 00:28:45,640
If you know that the container is going to be a certain size,

423
00:28:45,640 --> 00:28:49,530
you just need to set the image to be 2x that size

424
00:28:49,530 --> 00:28:52,780
when you're actually creating it so that when you drop it in

425
00:28:52,780 --> 00:28:54,910
it's resized by the browser.

426
00:28:54,910 --> 00:28:59,730
But that is the general rule is that you want to create 2x images.

427
00:28:59,730 --> 00:29:02,570
You need them to be at 2x the resolution

428
00:29:02,570 --> 00:29:07,310
and then resized in the browser.

429
00:29:07,310 --> 00:29:09,430
The next question is from Kevin.

430
00:29:09,430 --> 00:29:12,460
He asks for a large website project,

431
00:29:12,460 --> 00:29:15,460
would you recommend starting with Bootstrap,

432
00:29:15,460 --> 00:29:18,440
Foundation, or neither?

433
00:29:18,440 --> 00:29:21,570
Well, we've already answered this previously.

434
00:29:21,570 --> 00:29:27,440
You should use whatever front-end framework you feel most comfortable with,

435
00:29:27,440 --> 00:29:32,220
and you should try out a couple different ones to see which matches your personal preferences.

436
00:29:32,220 --> 00:29:35,910
However, the second part of the question, or neither,

437
00:29:35,910 --> 00:29:39,500
I would definitely use a front-end framework every time.

438
00:29:39,500 --> 00:29:42,130
I wouldn't go into a huge web project

439
00:29:42,130 --> 00:29:49,010
without some sort of framework there, because you're going to have such an easier time

440
00:29:49,010 --> 00:29:54,550
developing new features rapidly if you have a framework already in place

441
00:29:54,550 --> 00:29:59,520
unless it's some sort of legacy project that develops CSS over time

442
00:29:59,520 --> 00:30:03,430
and really just kind of works, and you don't want to mess with it.

443
00:30:03,430 --> 00:30:07,950
If you're starting a new project, you should really try to seek out

444
00:30:07,950 --> 00:30:10,230
a front-end framework that you think is going to work great

445
00:30:10,230 --> 00:30:14,050
for that particular project and for your own personal preferences

446
00:30:14,050 --> 00:30:16,250
or the preferences of your team.

447
00:30:18,450 --> 00:30:22,700
In terms of Bootstrap and Foundation or any other, though,

448
00:30:22,700 --> 00:30:26,240
you should try it out and see which one you like.

449
00:30:26,240 --> 00:30:28,120
The next question is from Andy.

450
00:30:28,120 --> 00:30:31,920
He asks what's the best approach for creating an app

451
00:30:31,920 --> 00:30:36,570
that allows others to build their own custom mobile apps?

452
00:30:36,570 --> 00:30:40,840
For example, a business that wants to be able to brand and customize an app

453
00:30:40,840 --> 00:30:43,420
for each of their clients.

454
00:30:45,810 --> 00:30:49,570
That's getting a little bit more specific

455
00:30:49,570 --> 00:30:54,350
than I think I'm able to answer here.

456
00:30:54,350 --> 00:30:58,870
I'd have to see the project and see the code and stuff.

457
00:30:58,870 --> 00:31:04,420
But in general, I think you want to focus on the areas

458
00:31:04,420 --> 00:31:07,560
that are going to be different for each client

459
00:31:07,560 --> 00:31:11,390
and then try to standardize the parts that are going to be the same.

460
00:31:11,390 --> 00:31:17,520
If you know that, for example, the logo is going to need to change for each client,

461
00:31:17,520 --> 00:31:20,430
obviously that's something you're going to want to include

462
00:31:20,430 --> 00:31:27,590
as maybe an image upload, so if you're building out, say, the customization for the app,

463
00:31:27,590 --> 00:31:32,010
you really want to have it all in one nice, neat form

464
00:31:32,010 --> 00:31:36,650
that shows what parts are going to be different.

465
00:31:36,650 --> 00:31:38,250
They can upload their logo.

466
00:31:38,250 --> 00:31:40,650
They can upload their tagline.

467
00:31:40,650 --> 00:31:43,320
They can upload their bio, all that kind of stuff.

468
00:31:43,320 --> 00:31:46,800
For building actual functionality into applications,

469
00:31:46,800 --> 00:31:49,240
that differs from one app to another.

470
00:31:49,240 --> 00:31:52,320
That's a pretty complex project,

471
00:31:52,320 --> 00:31:56,330
and it's hard to make a recommendation without more specifics.

472
00:31:56,330 --> 00:32:01,000
But hopefully that answers your question at least partially.

473
00:32:01,000 --> 00:32:03,240
The next question is from Kay.

474
00:32:03,240 --> 00:32:06,500
They ask what is your web design process

475
00:32:06,500 --> 00:32:09,070
for a medium sized project?

476
00:32:09,070 --> 00:32:11,440
That's interesting.

477
00:32:11,440 --> 00:32:14,540
For a medium to large sized project

478
00:32:14,540 --> 00:32:17,850
or I guess medium and up we'll say,

479
00:32:17,850 --> 00:32:23,150
again, I'm always going to use a framework like Bootstrap or Foundation.

480
00:32:23,150 --> 00:32:25,100
I personally like Bootstrap better.

481
00:32:25,100 --> 00:32:29,430
It doesn't mean that it's better than Foundation or vice versa.

482
00:32:29,430 --> 00:32:33,580
But yeah, I'm always going to use a framework every time,

483
00:32:33,580 --> 00:32:38,720
and in terms of design process,

484
00:32:38,720 --> 00:32:42,060
I usually will start with wire framing,

485
00:32:42,060 --> 00:32:45,370
so I'll start some sort of paper mockup

486
00:32:45,370 --> 00:32:48,310
or I'll do wireframes in a wireframing tool

487
00:32:48,310 --> 00:32:54,980
like Balsamic Mockups, and from there I'll try to iterate on those a couple of times.

488
00:32:54,980 --> 00:33:02,050
I'm really a big fan of iterating and not just going with the first idea that pops into my head.

489
00:33:02,050 --> 00:33:07,220
When I'm designing a page, I'll list out all the things I know need to be somewhere on the page,

490
00:33:07,220 --> 00:33:10,260
and then I'll start placing and laying out the elements

491
00:33:10,260 --> 00:33:12,540
in terms of shapes.

492
00:33:12,540 --> 00:33:14,760
I'll block out the different areas.

493
00:33:14,760 --> 00:33:18,780
After that, it really depends,

494
00:33:18,780 --> 00:33:24,470
but for a medium project I'll probably skip the Photoshop mockup,

495
00:33:24,470 --> 00:33:28,180
and I'll even do this for larger projects.

496
00:33:28,180 --> 00:33:33,300
I'll go straight into the HTML and CSS

497
00:33:33,300 --> 00:33:38,750
unless there's really specific parts that I know need to be fleshed out

498
00:33:38,750 --> 00:33:45,710
in more detail and are going to need some really fine-tuning, I guess you could say.

499
00:33:45,710 --> 00:33:48,360
Then I'll go ahead and go into Photoshop,

500
00:33:48,360 --> 00:33:51,370
but otherwise I'll try to skip Photoshop when I can.

501
00:33:51,370 --> 00:33:55,950
For a medium project I'm probably not going to do any kind of mockup

502
00:33:55,950 --> 00:34:01,400
in Photoshop or in Illustrator or some other tool.

503
00:34:01,400 --> 00:34:05,720
For really small projects I will sometimes not use a framework

504
00:34:05,720 --> 00:34:08,739
if I know it's going to be 1 page,

505
00:34:08,739 --> 00:34:10,810
and it's going to be really simple.

506
00:34:10,810 --> 00:34:13,040
I'll go with a simple CSS reset

507
00:34:13,040 --> 00:34:16,870
and hand code it from there.

508
00:34:16,870 --> 00:34:19,980
But for a medium project, yeah, I'm definitely going to use a framework,

509
00:34:19,980 --> 00:34:26,870
and every time I'm going to use some sort of wireframing mockup tool.

510
00:34:26,870 --> 00:34:29,429
I think that's really essential.

511
00:34:29,429 --> 00:34:33,880
The next question says what kind of projects

512
00:34:33,880 --> 00:34:36,290
would AngularJS be a good fit for?

513
00:34:36,290 --> 00:34:38,750
That's a good question.

514
00:34:38,750 --> 00:34:45,040
Let's go ahead and type in "angular JS" so that for those of you that aren't familiar

515
00:34:45,040 --> 00:34:48,219
we can go ahead and take a look at this.

516
00:34:48,219 --> 00:34:52,719
AngularJS is basically a front-end framework,

517
00:34:52,719 --> 00:34:57,460
and it says "Why AngularJS?" or what is it?

518
00:34:57,460 --> 00:35:00,960
HTML is great for declaring static documents,

519
00:35:00,960 --> 00:35:06,070
but AngularJS allows you to create dynamic views

520
00:35:06,070 --> 00:35:09,050
on top of that HTML.

521
00:35:09,050 --> 00:35:12,820
It says AngularJS lets you extend HTML vocabulary

522
00:35:12,820 --> 00:35:15,320
for your application.

523
00:35:15,320 --> 00:35:18,920
Now, I have not used AngularJS extensively,

524
00:35:18,920 --> 00:35:23,400
but basically it allows you to drop in

525
00:35:23,400 --> 00:35:25,720
little things like this.

526
00:35:25,720 --> 00:35:28,810
It says "Hello" and then "yourName"

527
00:35:28,810 --> 00:35:33,160
with 2 curly braces surrounding either side.

528
00:35:33,160 --> 00:35:36,340
And if you're familiar with PHP

529
00:35:36,340 --> 00:35:40,690
or Ruby or Python, all of those languages do the same thing.

530
00:35:40,690 --> 00:35:43,450
But they do it on the back end.

531
00:35:43,450 --> 00:35:45,610
This is done on the front end,

532
00:35:45,610 --> 00:35:48,230
so it's actually talking to the database

533
00:35:48,230 --> 00:35:50,900
and then dropping in that information

534
00:35:50,900 --> 00:35:54,390
after the HTML has loaded, so the HTML loads up,

535
00:35:54,390 --> 00:35:56,910
talks to the database, drops in all the information,

536
00:35:56,910 --> 00:36:01,270
and it's basically a way of creating dynamic view templates.

537
00:36:01,270 --> 00:36:04,400
What kind of projects would it be a good fit for?

538
00:36:04,400 --> 00:36:08,010
Any kind of web application where you need dynamic views,

539
00:36:08,010 --> 00:36:10,880
which is pretty much almost every web application.

540
00:36:10,880 --> 00:36:16,850
Internally, and our founder and CEO Ryan Carson has blogged about this,

541
00:36:16,850 --> 00:36:20,890
we use a custom built app,

542
00:36:20,890 --> 00:36:23,080
and we use AngularJS with it.

543
00:36:23,080 --> 00:36:26,520
And it's basically like a clone of Reddit

544
00:36:26,520 --> 00:36:30,350
where we can up vote and down vote different posts,

545
00:36:30,350 --> 00:36:32,910
and we can have Reddit discussions,

546
00:36:32,910 --> 00:36:35,970
and we use AngularJS to populate those views,

547
00:36:35,970 --> 00:36:37,680
and it's worked out great for us.

548
00:36:37,680 --> 00:36:43,170
It's kind of a medium sized project at this point.

549
00:36:43,170 --> 00:36:49,410
But Angular has been great, so I guess that's at least 1 specific example.

550
00:36:49,410 --> 00:36:52,300
The next question says do you have any advice

551
00:36:52,300 --> 00:36:56,270
for someone looking for a web design job right out of college?

552
00:36:56,270 --> 00:36:59,270
I'll be graduating in May with a marketing degree,

553
00:36:59,270 --> 00:37:01,670
but I've been learning web design with Treehouse.

554
00:37:01,670 --> 00:37:03,860
Well, that's awesome.

555
00:37:03,860 --> 00:37:06,770
I'm so glad that you're learning with Treehouse.

556
00:37:06,770 --> 00:37:12,180
I realized at the beginning I did not talk about Treehouse.

557
00:37:12,180 --> 00:37:16,920
Treehouse, if you're not familiar, is a website where you can learn web design,

558
00:37:16,920 --> 00:37:19,050
web development, business, mobile,

559
00:37:19,050 --> 00:37:21,290
and so much other stuff.

560
00:37:21,290 --> 00:37:23,670
It's really awesome.

561
00:37:23,670 --> 00:37:25,630
You can check us out at teamtreehouse.com.

562
00:37:25,630 --> 00:37:27,960
Here's our beautiful home page.

563
00:37:27,960 --> 00:37:29,980
We recently redesigned the site.

564
00:37:29,980 --> 00:37:31,240
It's really awesome.

565
00:37:31,240 --> 00:37:33,250
You can go ahead and click the Get Started button.

566
00:37:33,250 --> 00:37:36,050
You can drop into our library here

567
00:37:36,050 --> 00:37:38,660
and get an idea of what the site is like.

568
00:37:38,660 --> 00:37:41,980
There's a bunch of topics you can choose from here,

569
00:37:41,980 --> 00:37:44,940
and it's really, really cool.

570
00:37:44,940 --> 00:37:46,480
There's a ton of stuff to explore.

571
00:37:46,480 --> 00:37:50,030
We have really awesome forums where people are very, very helpful.

572
00:37:50,030 --> 00:37:52,050
It's great.

573
00:37:52,050 --> 00:37:56,590
Anyway, that's the 5-second view of what Treehouse is.

574
00:37:56,590 --> 00:37:58,240
I'm glad you're learning with us.

575
00:37:58,240 --> 00:38:04,600
But to your question, do I have any advice for somebody right out of college

576
00:38:04,600 --> 00:38:08,020
if you want to go into web design?

577
00:38:08,020 --> 00:38:11,380
I think it's great that you studied marketing.

578
00:38:11,380 --> 00:38:13,720
That's going to be a really big help

579
00:38:13,720 --> 00:38:19,010
in any kind of web design career because a lot of web designers

580
00:38:19,010 --> 00:38:24,520
just getting your voice heard, the Internet is really like a megaphone

581
00:38:24,520 --> 00:38:26,180
for your ideas in a way,

582
00:38:26,180 --> 00:38:32,090
and it's also a really great way to interact and communicate with people.

583
00:38:32,090 --> 00:38:37,020
So it's this incredible mixed medium,

584
00:38:37,020 --> 00:38:39,000
and it's very interdisciplinary,

585
00:38:39,000 --> 00:38:45,140
so there's room for lots of other types of expertise besides just web design.

586
00:38:45,140 --> 00:38:47,380
Marketing will definitely be applicable there,

587
00:38:47,380 --> 00:38:51,740
because once you create the next great iPhone app

588
00:38:51,740 --> 00:38:55,010
or web app or whatever it might be,

589
00:38:55,010 --> 00:38:57,070
you're going to have to market it.

590
00:38:57,070 --> 00:38:59,010
That's really important.

591
00:38:59,010 --> 00:39:02,530
If you're just getting started, though,

592
00:39:02,530 --> 00:39:05,500
and let's say you're trying to do freelance

593
00:39:05,500 --> 00:39:08,750
and you're trying to build a portfolio

594
00:39:08,750 --> 00:39:13,050
or even if you're trying to get a job you're still going to need a portfolio,

595
00:39:13,050 --> 00:39:18,740
and a great way to build that up is to do really small projects

596
00:39:18,740 --> 00:39:22,690
that maybe you get paid a small amount for.

597
00:39:22,690 --> 00:39:24,250
Or you can do stuff for free.

598
00:39:24,250 --> 00:39:27,440
So how do you find people that need websites?

599
00:39:27,440 --> 00:39:29,210
Well, there's lots of ways.

600
00:39:29,210 --> 00:39:33,050
Really the best way is to reach out to people in your community.

601
00:39:33,050 --> 00:39:37,510
For example, if there's a farmers' market nearby where you live,

602
00:39:37,510 --> 00:39:41,780
you might want to go there and talk to a couple of the small vendors

603
00:39:41,780 --> 00:39:44,650
and ask them, "Hey, do you have a website?"

604
00:39:44,650 --> 00:39:46,930
And maybe they do, maybe they don't.

605
00:39:46,930 --> 00:39:49,790
If they do, maybe you can try to improve their website,

606
00:39:49,790 --> 00:39:53,250
because a lot of small businesses

607
00:39:53,250 --> 00:39:55,700
don't really have the resources

608
00:39:55,700 --> 00:39:59,340
or the know-how to do really awesome websites.

609
00:39:59,340 --> 00:40:01,870
If that's something you can contribute to them,

610
00:40:01,870 --> 00:40:05,350
that's awesome, and it's a really fast way to build up your portfolio.

611
00:40:05,350 --> 00:40:07,810
That's a good place to look.

612
00:40:07,810 --> 00:40:09,940
But once you've built up your portfolio,

613
00:40:09,940 --> 00:40:15,130
it's really not too dissimilar

614
00:40:15,130 --> 00:40:18,850
from other industries, so you want to of course apply for jobs

615
00:40:18,850 --> 00:40:22,660
in the same way you might apply for any other job.

616
00:40:22,660 --> 00:40:25,370
You can search on job boards and stuff.

617
00:40:25,370 --> 00:40:27,720
Treehouse has a job board, so you might want to look there.

618
00:40:27,720 --> 00:40:31,810
But you also want to make sure that you're networking within the community.

619
00:40:31,810 --> 00:40:36,520
You want to try to look for web design conferences

620
00:40:36,520 --> 00:40:40,020
where you can go ahead and buy tickets and attend

621
00:40:40,020 --> 00:40:43,570
and interact with other people that are there.

622
00:40:43,570 --> 00:40:46,450
There's also lots of free stuff that you can do,

623
00:40:46,450 --> 00:40:50,330
so locally you might find user groups for whatever

624
00:40:50,330 --> 00:40:53,530
type of language or thing that you're interested in.

625
00:40:53,530 --> 00:40:56,360
There might be a Ruby or PHP users group

626
00:40:56,360 --> 00:40:58,890
or a JavaScript users group.

627
00:40:58,890 --> 00:41:02,020
There could be a web design group that meets up

628
00:41:02,020 --> 00:41:05,400
for coffee every Wednesday morning or something like that.

629
00:41:05,400 --> 00:41:09,520
So try to look around in your local community and network,

630
00:41:09,520 --> 00:41:12,450
because oftentimes that's also what leads to a job.

631
00:41:12,450 --> 00:41:14,900
Somebody knows somebody else

632
00:41:14,900 --> 00:41:17,760
that has an opening at their company,

633
00:41:17,760 --> 00:41:20,400
and you can go ahead and network that way.

634
00:41:20,400 --> 00:41:24,760
It's actually pretty low-fi

635
00:41:24,760 --> 00:41:26,940
the way that you'd apply for a job in the web industry.

636
00:41:29,100 --> 00:41:31,690
Just like a lot of other industries.

637
00:41:31,690 --> 00:41:34,890
It just takes hustle.

638
00:41:34,890 --> 00:41:36,740
Let's see.

639
00:41:36,740 --> 00:41:39,600
I actually lost my place here.

640
00:41:39,600 --> 00:41:42,810
The next question says

641
00:41:42,810 --> 00:41:45,130
which do you prefer, responsive design

642
00:41:45,130 --> 00:41:47,160
or a separate mobile site?

643
00:41:47,160 --> 00:41:49,000
That's such a good question.

644
00:41:49,000 --> 00:41:52,210
I am going to make a responsive site

645
00:41:52,210 --> 00:41:54,920
99 times out of 100.

646
00:41:54,920 --> 00:41:59,120
I find responsive sites to be so much easier to manage

647
00:41:59,120 --> 00:42:01,800
because you're only dealing with 1 code base.

648
00:42:01,800 --> 00:42:04,620
Granted, it is slightly more complicated.

649
00:42:04,620 --> 00:42:08,590
It's still going to probably be easier

650
00:42:08,590 --> 00:42:12,020
in the long run to maintain a single code base

651
00:42:12,020 --> 00:42:15,320
rather than having to sync up a mobile site

652
00:42:15,320 --> 00:42:18,210
with a desktop site

653
00:42:18,210 --> 00:42:20,730
and have one-to-one feature parity

654
00:42:20,730 --> 00:42:23,570
and design parity with both of them,

655
00:42:23,570 --> 00:42:28,050
because that's difficult enough as it is

656
00:42:28,050 --> 00:42:31,780
if, say, you have a native application and a web app.

657
00:42:31,780 --> 00:42:34,110
You don't want to create additional headaches for yourself

658
00:42:34,110 --> 00:42:37,440
by creating 2 different versions of your web app

659
00:42:37,440 --> 00:42:39,020
when it can be the same.

660
00:42:39,020 --> 00:42:42,130
The only instance in which you might want to create

661
00:42:42,130 --> 00:42:46,020
a separate mobile site is—

662
00:42:46,020 --> 00:42:50,620
it's hard to even think of one anymore but if you have a very specific

663
00:42:50,620 --> 00:42:53,340
mobile experience that you want to target

664
00:42:53,340 --> 00:42:57,690
or you have a very well established website

665
00:42:57,690 --> 00:43:00,650
that's already built out, and it looks great.

666
00:43:00,650 --> 00:43:03,000
It just needs a mobile experience.

667
00:43:03,000 --> 00:43:08,890
Then you might want to go ahead and build a separate mobile web app,

668
00:43:08,890 --> 00:43:12,050
but that kind of thing is becoming

669
00:43:12,050 --> 00:43:14,460
more and more rare as time goes on.

670
00:43:14,460 --> 00:43:18,960
It's really difficult to find a site

671
00:43:18,960 --> 00:43:20,360
that has a great desktop site

672
00:43:20,360 --> 00:43:22,710
and no mobile site whatsoever.

673
00:43:22,710 --> 00:43:25,060
That's kind of a rarity.

674
00:43:25,060 --> 00:43:28,490
But yeah, I recommend going with responsive.

675
00:43:28,490 --> 00:43:31,770
I think it's going to be a lot easier in the long run

676
00:43:31,770 --> 00:43:34,070
unless you have a really specific use case

677
00:43:34,070 --> 00:43:37,040
for the mobile app.

678
00:43:37,040 --> 00:43:41,610
The next question says what's your favorite source of inspiration as a web designer?

679
00:43:41,610 --> 00:43:44,390
Gosh, it comes from all over really.

680
00:43:44,390 --> 00:43:47,430
I know that's a very vague answer,

681
00:43:47,430 --> 00:43:50,750
but I find inspiration in movies

682
00:43:50,750 --> 00:43:55,190
and video games and by walking outside

683
00:43:55,190 --> 00:43:57,110
in nature.

684
00:43:57,110 --> 00:43:59,220
I love to look at fine art.

685
00:43:59,220 --> 00:44:05,560
I find that a lot of fine art techniques

686
00:44:05,560 --> 00:44:09,060
tend to get lost in the realm of web design

687
00:44:09,060 --> 00:44:11,880
because it's so much more technically oriented

688
00:44:11,880 --> 00:44:13,690
with computer code.

689
00:44:13,690 --> 00:44:18,250
But there's a lot that we can learn from fine art and art history

690
00:44:18,250 --> 00:44:22,550
that can be drawn upon as a great source of inspiration.

691
00:44:22,550 --> 00:44:26,460
I do personally like to look there a lot.

692
00:44:26,460 --> 00:44:30,580
There's plenty of other places to look.

693
00:44:30,580 --> 00:44:34,020
I know I've been referring to my own blog posts a lot here,

694
00:44:34,020 --> 00:44:38,010
but I did just recently blog about this

695
00:44:38,010 --> 00:44:44,900
as well, and it's a blog post called "How to Break a Creative Block,"

696
00:44:44,900 --> 00:44:48,620
and in there I talk about a couple of sources of inspiration.

697
00:44:48,620 --> 00:44:51,620
You can look at Dribbble or Pinterest,

698
00:44:51,620 --> 00:44:54,790
and there's lots of other sites like it.

699
00:44:54,790 --> 00:44:57,060
Those are just 2 popular ones.

700
00:44:57,060 --> 00:44:59,300
There's also Behance and Forrst

701
00:44:59,300 --> 00:45:01,040
I mention later on there.

702
00:45:01,040 --> 00:45:04,460
But one thing that I like to do on Dribbble

703
00:45:04,460 --> 00:45:09,530
is go to an artist that I like.

704
00:45:09,530 --> 00:45:12,780
I'm looking at the front page here, popular.

705
00:45:12,780 --> 00:45:15,270
Let's say that I look at this, and I say, "Oh, wow,

706
00:45:15,270 --> 00:45:17,340
that's really cool."

707
00:45:17,340 --> 00:45:19,910
I'll go ahead and click on the artist's name,

708
00:45:19,910 --> 00:45:24,410
and then I click on who they're following,

709
00:45:24,410 --> 00:45:30,040
and from there I can go ahead and look and see where did the source

710
00:45:30,040 --> 00:45:32,490
of their inspiration come from?

711
00:45:32,490 --> 00:45:34,970
And usually you can trace things back

712
00:45:34,970 --> 00:45:36,960
to something that looks similar

713
00:45:36,960 --> 00:45:40,980
to the stuff you really like that they're producing.

714
00:45:40,980 --> 00:45:46,770
And in that way, you can start to find I guess real sources

715
00:45:46,770 --> 00:45:49,550
of creativity.

716
00:45:49,550 --> 00:45:52,920
It's hard to have an original idea anymore,

717
00:45:52,920 --> 00:45:56,800
but it's totally fine to be inspired by other stuff,

718
00:45:56,800 --> 00:46:00,870
and that's where most artists go to.

719
00:46:00,870 --> 00:46:03,960
They go to inspiration in other artists.

720
00:46:05,970 --> 00:46:10,850
The next question—and I think we're starting to get close to the end here.

721
00:46:10,850 --> 00:46:12,510
I'll do a couple more.

722
00:46:12,510 --> 00:46:15,680
We usually run for about an hour here, and we're 47 minutes in.

723
00:46:15,680 --> 00:46:21,550
The next question says with websites like Wix

724
00:46:21,550 --> 00:46:25,120
that allow users to make websites with no coding,

725
00:46:25,120 --> 00:46:28,160
do you feel that will lower the value

726
00:46:28,160 --> 00:46:31,380
of designer jobs in the future?

727
00:46:31,380 --> 00:46:34,400
Yes and no but mostly no.

728
00:46:34,400 --> 00:46:39,180
So yes, there are lots of websites like that now

729
00:46:39,180 --> 00:46:44,300
that can go ahead and help maybe those smaller businesses

730
00:46:44,300 --> 00:46:46,230
I mentioned earlier create websites

731
00:46:46,230 --> 00:46:48,880
without much programming knowledge at all.

732
00:46:48,880 --> 00:46:52,030
However, there's always going to be a place

733
00:46:52,030 --> 00:46:55,170
for customized web designs.

734
00:46:55,170 --> 00:46:59,090
And maybe that will eat into the market a little bit.

735
00:46:59,090 --> 00:47:01,740
Maybe a lot of people will see these sites

736
00:47:01,740 --> 00:47:05,660
and think, "I don't really need to hire a web designer

737
00:47:05,660 --> 00:47:08,640
"to create this whole website for me.

738
00:47:08,640 --> 00:47:10,880
I can go ahead and do it myself."

739
00:47:10,880 --> 00:47:13,020
But even if that does start to happen,

740
00:47:13,020 --> 00:47:17,370
that's only going to make a web designer even more valuable,

741
00:47:17,370 --> 00:47:20,080
because those skills are going to become a little bit more rare,

742
00:47:20,080 --> 00:47:24,120
so it will always be a great profession to be in.

743
00:47:24,120 --> 00:47:30,510
The other thing to keep in mind is that there is no shortage of websites to be designed.

744
00:47:30,510 --> 00:47:32,670
There's always going to be more stuff,

745
00:47:32,670 --> 00:47:36,330
and in fact, there's small businesses,

746
00:47:36,330 --> 00:47:39,160
medium, large businesses,

747
00:47:39,160 --> 00:47:41,880
and lots and lots of individuals

748
00:47:41,880 --> 00:47:43,500
that all need websites.

749
00:47:43,500 --> 00:47:47,470
So for the most part, no, I don't think

750
00:47:47,470 --> 00:47:50,090
that's really ever going to be a serious problem

751
00:47:50,090 --> 00:47:52,260
that web designers are going to face.

752
00:47:54,000 --> 00:47:57,490
The next question says what's a good way to find a mentor

753
00:47:57,490 --> 00:47:59,560
in the industry?

754
00:48:01,440 --> 00:48:03,880
That's a difficult question to answer

755
00:48:03,880 --> 00:48:08,120
because a lot of times people aren't necessarily

756
00:48:08,120 --> 00:48:12,920
able to give their time to individuals

757
00:48:12,920 --> 00:48:18,550
that really need to learn stuff, so they can't spend a couple hours

758
00:48:18,550 --> 00:48:23,560
a day with somebody, but if you're looking for critique,

759
00:48:23,560 --> 00:48:25,570
there's plenty of ways to get that.

760
00:48:25,570 --> 00:48:31,320
You could post stuff on a site like Dribbble

761
00:48:31,320 --> 00:48:34,190
or other critique sites.

762
00:48:34,190 --> 00:48:36,670
Forrst is really good for getting critique as well.

763
00:48:36,670 --> 00:48:38,980
And in that way,

764
00:48:38,980 --> 00:48:44,050
you might not have a mentor that's going to teach you one on one,

765
00:48:44,050 --> 00:48:48,890
but in a way you'll actually get something that's maybe a little bit better

766
00:48:48,890 --> 00:48:52,860
because you'll get the hive mind and community feedback

767
00:48:52,860 --> 00:48:56,680
from a lot of people, and in that way you can start to evolve

768
00:48:56,680 --> 00:48:58,660
your own skills.

769
00:48:58,660 --> 00:49:01,320
You may also want to check out the Treehouse forum

770
00:49:01,320 --> 00:49:03,000
if you haven't done so already.

771
00:49:03,000 --> 00:49:07,920
There's lots of students there that are totally willing to collaborate

772
00:49:07,920 --> 00:49:12,860
on projects with one another, so if you're looking for maybe a project collaborator,

773
00:49:12,860 --> 00:49:15,830
that might be a good way.

774
00:49:15,830 --> 00:49:20,100
Another good way to learn new skills if you're still really new

775
00:49:20,100 --> 00:49:22,570
is to try and find an internship

776
00:49:22,570 --> 00:49:24,020
in the web design industry.

777
00:49:24,020 --> 00:49:30,140
And those types of positions or junior developer positions

778
00:49:30,140 --> 00:49:34,920
will be really good because you'll be in a real environment

779
00:49:34,920 --> 00:49:36,460
where you have to do real stuff,

780
00:49:36,460 --> 00:49:42,010
and that's a great trial by fire, if you will,

781
00:49:42,010 --> 00:49:44,730
because you're going to learn so much more than you're going to learn

782
00:49:44,730 --> 00:49:49,620
just by working on your own projects.

783
00:49:49,620 --> 00:49:53,830
Hopefully that answers your question.

784
00:49:53,830 --> 00:49:58,110
Let's see, the next question says is there a way to remove

785
00:49:58,110 --> 00:50:00,040
unused CSS selectors

786
00:50:00,040 --> 00:50:03,260
from a large front-end framework?

787
00:50:03,260 --> 00:50:05,770
Oh, my gosh, yes, there is.

788
00:50:05,770 --> 00:50:11,750
There's a couple of different ways that you can do this.

789
00:50:11,750 --> 00:50:16,480
Let's see, I think it's called CSSCSS.

790
00:50:16,480 --> 00:50:20,620
Yeah, here we go.

791
00:50:20,620 --> 00:50:22,630
I found it on the first try. Awesome.

792
00:50:22,630 --> 00:50:27,320
There is a CSS redundancy analyzer called CSSCSS,

793
00:50:27,320 --> 00:50:31,150
and it says here it will parse any CSS files

794
00:50:31,150 --> 00:50:33,410
you give it, and it will let you know

795
00:50:33,410 --> 00:50:39,280
which rule sets have duplicated declarations.

796
00:50:39,280 --> 00:50:41,200
That's pretty cool.

797
00:50:41,200 --> 00:50:44,450
If we go on, say, another website here

798
00:50:44,450 --> 00:50:47,750
and we open up the Chrome dev tools—

799
00:50:47,750 --> 00:50:51,480
I did that by hitting Command Option I on Mac.

800
00:50:51,480 --> 00:50:54,090
It's Control Shift I on a PC.

801
00:50:54,090 --> 00:50:56,730
You can go ahead and click on the Audits panel,

802
00:50:56,730 --> 00:51:00,340
and then hit run.

803
00:51:00,340 --> 00:51:07,030
And it should tell you if there are redundant selectors here.

804
00:51:07,030 --> 00:51:11,030
This is taking an awful long time to audit.

805
00:51:11,030 --> 00:51:13,100
I'm not really sure why.

806
00:51:13,100 --> 00:51:15,500
Maybe I can try it on another page here.

807
00:51:15,500 --> 00:51:19,360
I apologize to Chris Coyier for running an audit here.

808
00:51:19,360 --> 00:51:22,020
A-ha, okay.

809
00:51:22,020 --> 00:51:24,010
You can run an audit using the Chrome dev tools,

810
00:51:24,010 --> 00:51:28,120
and it will say, "Remove unused CSS rules."

811
00:51:28,120 --> 00:51:32,360
And it will give you some classes

812
00:51:32,360 --> 00:51:35,760
of CSS rules that are not being used by the current page.

813
00:51:35,760 --> 00:51:39,530
So just to caveat that,

814
00:51:39,530 --> 00:51:45,210
it's important that you don't meddle with a framework too much.

815
00:51:45,210 --> 00:51:48,560
You don't want to remove stuff that you might really need.

816
00:51:50,650 --> 00:51:55,530
But if you are looking to make a framework a little bit leaner,

817
00:51:55,530 --> 00:51:58,280
most major frameworks have a customization tool.

818
00:51:58,280 --> 00:52:01,490
If you go to Bootstrap here and click on Customize,

819
00:52:01,490 --> 00:52:06,900
you can go ahead and check which parts of the framework

820
00:52:06,900 --> 00:52:11,680
that you want to include, and you can uncheck parts

821
00:52:11,680 --> 00:52:13,550
that you don't want to include.

822
00:52:13,550 --> 00:52:17,990
That's one way to also remove CSS,

823
00:52:17,990 --> 00:52:20,180
so hopefully that answers your question.

824
00:52:20,180 --> 00:52:23,330
The next question says how do you find balance

825
00:52:23,330 --> 00:52:25,590
in learning web design and development

826
00:52:25,590 --> 00:52:27,870
when there's so much information out there?

827
00:52:27,870 --> 00:52:32,690
Are there specific areas one should focus on?

828
00:52:32,690 --> 00:52:34,560
Yes and no.

829
00:52:34,560 --> 00:52:37,630
So it can be hard figuring out

830
00:52:37,630 --> 00:52:41,750
what's new and what you should be paying attention to.

831
00:52:41,750 --> 00:52:46,820
But really the answer is that nobody knows everything,

832
00:52:46,820 --> 00:52:50,190
and it's really impossible to try and learn everything.

833
00:52:50,190 --> 00:52:52,100
For example, like I said earlier,

834
00:52:52,100 --> 00:52:54,360
I haven't really gotten into Python at all.

835
00:52:54,360 --> 00:52:58,290
I just haven't had the time or been interested in other things.

836
00:52:58,290 --> 00:53:00,450
It doesn't mean that Python isn't good

837
00:53:00,450 --> 00:53:02,460
and that I should try to learn it.

838
00:53:02,460 --> 00:53:04,290
I just haven't.

839
00:53:04,290 --> 00:53:08,820
You just can't learn everything,

840
00:53:08,820 --> 00:53:10,150
so always keep that in mind.

841
00:53:10,150 --> 00:53:12,210
There's always going to be more stuff to learn

842
00:53:12,210 --> 00:53:15,730
no matter how far you're able to advance your career

843
00:53:15,730 --> 00:53:18,420
and your knowledge.

844
00:53:18,420 --> 00:53:24,700
But I guess one thing you can do is watch the Treehouse show.

845
00:53:24,700 --> 00:53:27,850
Not to self-promote anymore,

846
00:53:27,850 --> 00:53:31,530
but we do a show every week at Treehouse.

847
00:53:31,530 --> 00:53:33,240
It's called the Treehouse Show.

848
00:53:33,240 --> 00:53:35,630
You can check it out on iTunes or on our YouTube channel

849
00:53:35,630 --> 00:53:38,180
at youtube.com/gotreehouse.

850
00:53:38,180 --> 00:53:43,370
And it's a roundup of links and other cool bits of information

851
00:53:43,370 --> 00:53:48,440
about the web industry, and you can keep up that way.

852
00:53:48,440 --> 00:53:52,570
But you're never going to learn everything,

853
00:53:52,570 --> 00:53:54,680
so what should you do instead?

854
00:53:54,680 --> 00:53:56,660
Well, you should try and focus.

855
00:53:56,660 --> 00:54:00,330
A lot of developers will self-identify

856
00:54:00,330 --> 00:54:04,110
as a PHP developer or a Ruby developer

857
00:54:04,110 --> 00:54:06,730
or maybe a front-end developer

858
00:54:06,730 --> 00:54:08,820
where they do a lot of JavaScript work, for example,

859
00:54:08,820 --> 00:54:11,310
or a lot of CSS work.

860
00:54:11,310 --> 00:54:15,920
So if you can try and pick a little bit more of a narrow focus,

861
00:54:15,920 --> 00:54:17,920
maybe you start really getting into front end,

862
00:54:17,920 --> 00:54:20,480
you might want to look at something like Angular

863
00:54:20,480 --> 00:54:24,630
and say, "Okay, I'm really getting good at front-end development.

864
00:54:24,630 --> 00:54:27,590
"I want to go ahead and specialize even further

865
00:54:27,590 --> 00:54:30,970
"and learn things like Angular and other front-end frameworks

866
00:54:30,970 --> 00:54:33,360
and become really awesome at that."

867
00:54:33,360 --> 00:54:35,850
And that's a perfectly okay way to market yourself.

868
00:54:35,850 --> 00:54:38,400
You don't have to be an all-around developer

869
00:54:38,400 --> 00:54:40,410
that can do absolutely everything.

870
00:54:40,410 --> 00:54:44,020
There are some really talented developers out there

871
00:54:44,020 --> 00:54:47,200
than can definitely do both front end and back end coding.

872
00:54:47,200 --> 00:54:49,240
You don't have to do that, though.

873
00:54:49,240 --> 00:54:51,960
You can be a really awesome Ruby developer

874
00:54:51,960 --> 00:54:56,640
and leave the design work and everything else to other people on a team,

875
00:54:56,640 --> 00:55:00,230
so I hope that answers your question.

876
00:55:00,230 --> 00:55:02,480
We've got about 5 more minutes here,

877
00:55:02,480 --> 00:55:05,000
so I'm just going to do a couple more.

878
00:55:05,000 --> 00:55:08,920
The next question says what's the best way to make images responsive?

879
00:55:08,920 --> 00:55:12,470
I feel like we already talked about that.

880
00:55:12,470 --> 00:55:15,710
The next question says can you explain Grunt

881
00:55:15,710 --> 00:55:20,000
and how someone would integrate it into their workflow?

882
00:55:20,000 --> 00:55:24,050
So CSSCSS

883
00:55:24,050 --> 00:55:27,560
actually I think can be used

884
00:55:27,560 --> 00:55:31,030
by Grunt or integrated to a Grunt workflow.

885
00:55:31,030 --> 00:55:33,430
Yes.

886
00:55:33,430 --> 00:55:35,500
Grunt CSS is a Grunt task

887
00:55:35,500 --> 00:55:38,820
to automatically run CSS.

888
00:55:38,820 --> 00:55:40,040
But what is Grunt?

889
00:55:40,040 --> 00:55:44,830
Well, it is self-described as a JavaScript task runner,

890
00:55:44,830 --> 00:55:49,700
and a task runner basically allows you to automate things

891
00:55:49,700 --> 00:55:51,830
when you're building your website.

892
00:55:51,830 --> 00:55:55,980
So if you have a lot of repetitive tasks

893
00:55:55,980 --> 00:55:57,780
such as running testing

894
00:55:57,780 --> 00:56:01,780
or you need to do minification on your CSS and JavaScript,

895
00:56:01,780 --> 00:56:06,110
you can build out a tool chain

896
00:56:06,110 --> 00:56:10,260
of tasks and run those tasks

897
00:56:10,260 --> 00:56:15,760
when you're exporting your code for the web.

898
00:56:15,760 --> 00:56:19,210
That's basically what Grunt is.

899
00:56:19,210 --> 00:56:21,940
I don't have a whole lot of time here to go into it.

900
00:56:21,940 --> 00:56:24,940
I want to wrap up a few more questions here,

901
00:56:24,940 --> 00:56:27,060
but that's basically what it is in a nutshell,

902
00:56:27,060 --> 00:56:29,860
and there's plenty of great documentation

903
00:56:29,860 --> 00:56:33,940
you can check out on gruntjs.com.

904
00:56:33,940 --> 00:56:38,680
The next question says what color scheme do you use in Sublime Text?

905
00:56:38,680 --> 00:56:40,000
I'm not really sure.

906
00:56:40,000 --> 00:56:43,060
Let's open up Sublime Text and see.

907
00:56:43,060 --> 00:56:45,030
Preferences, color scheme.

908
00:56:45,030 --> 00:56:48,560
It looks like I'm using Mac Classic right now.

909
00:56:48,560 --> 00:56:53,150
I have been known to use Zenburnesque,

910
00:56:53,150 --> 00:56:56,610
so I do use this quite a bit.

911
00:56:56,610 --> 00:56:59,990
But I try to use Mac Classic

912
00:56:59,990 --> 00:57:03,950
when screen casting because it's a little bit easier to see dark text

913
00:57:03,950 --> 00:57:06,610
on a lighter background.

914
00:57:06,610 --> 00:57:10,230
How different are web design and web development?

915
00:57:10,230 --> 00:57:12,360
It's kind of like a Venn diagram.

916
00:57:12,360 --> 00:57:14,250
There's areas that overlap.

917
00:57:14,250 --> 00:57:18,530
There's areas that are definitely classified as development

918
00:57:18,530 --> 00:57:21,050
and definitely classified as design.

919
00:57:21,050 --> 00:57:24,220
For example, if you're making wireframes

920
00:57:24,220 --> 00:57:27,270
or Photoshop and Illustrator mockups,

921
00:57:27,270 --> 00:57:29,620
that's most definitely web design.

922
00:57:29,620 --> 00:57:33,840
If you're writing back-end code that interacts with the database,

923
00:57:33,840 --> 00:57:35,850
that's definitely web development.

924
00:57:35,850 --> 00:57:38,060
I think the area where it gets fuzzy

925
00:57:38,060 --> 00:57:42,070
is on the front end with HTML, CSS, and JavaScript.

926
00:57:42,070 --> 00:57:46,090
What is design, and what is development?

927
00:57:46,090 --> 00:57:48,370
It's kind of hard to say,

928
00:57:48,370 --> 00:57:53,070
because a designer I would expect to code CSS

929
00:57:53,070 --> 00:57:58,300
whereas it's perfectly okay for a developer to go ahead and write CSS code as well.

930
00:57:58,300 --> 00:58:03,960
It varies depending on the particular intent,

931
00:58:03,960 --> 00:58:07,060
so a designer might be writing CSS

932
00:58:07,060 --> 00:58:11,730
to try and make the site look really great

933
00:58:11,730 --> 00:58:13,360
and aesthetically pleasing

934
00:58:13,360 --> 00:58:16,260
or more clear and create a great user experience.

935
00:58:16,260 --> 00:58:19,780
A developer might be writing CSS code because they want to go ahead

936
00:58:19,780 --> 00:58:22,200
and maybe optimize something,

937
00:58:22,200 --> 00:58:25,690
or there's this new feature that they're building,

938
00:58:25,690 --> 00:58:28,610
and it doesn't really require a lot of design work.

939
00:58:28,610 --> 00:58:31,910
It just needs to show this new message on the page or something.

940
00:58:31,910 --> 00:58:34,470
They might write a little bit of CSS

941
00:58:34,470 --> 00:58:37,650
to include that.

942
00:58:37,650 --> 00:58:42,030
JavaScript is another area where it gets a little bit funky.

943
00:58:42,030 --> 00:58:46,760
It's hard to say whether a designer

944
00:58:46,760 --> 00:58:49,960
or a developer should be doing that.

945
00:58:49,960 --> 00:58:51,670
Yes, it is computer code,

946
00:58:51,670 --> 00:58:54,720
so it seems like a developer should be doing that.

947
00:58:54,720 --> 00:58:57,230
But a lot of the interactions

948
00:58:57,230 --> 00:59:01,110
or animations and other things you might be creating

949
00:59:01,110 --> 00:59:05,210
with JavaScript could be classified as design,

950
00:59:05,210 --> 00:59:08,110
because it's affecting the overall user experience.

951
00:59:08,110 --> 00:59:12,240
Now, the same could be said about the back end,

952
00:59:12,240 --> 00:59:15,530
so for example, if the site is not performant

953
00:59:15,530 --> 00:59:17,660
that's going to affect the user experience.

954
00:59:17,660 --> 00:59:20,630
But JavaScript handles that a little bit more directly.

955
00:59:20,630 --> 00:59:23,710
So to answer your question, it is different,

956
00:59:23,710 --> 00:59:26,920
but there's areas where it does get fuzzy.

957
00:59:26,920 --> 00:59:32,670
Our last question is how often do you find yourself referring to code documentation?

958
00:59:32,670 --> 00:59:36,990
I have a hard time remembering all the CSS3 goodies.

959
00:59:36,990 --> 00:59:38,910
I refer to documentation all the time.

960
00:59:38,910 --> 00:59:42,910
If I had to write out a CSS3

961
00:59:42,910 --> 00:59:47,980
radial gradient for WebKit right now I couldn't do it.

962
00:59:47,980 --> 00:59:49,000
I'd need to look it up,

963
00:59:49,000 --> 00:59:51,300
and that's perfectly okay.

964
00:59:51,300 --> 00:59:54,260
There are so many HTML elements in CSS properties

965
00:59:54,260 --> 00:59:57,970
you're never going to remember them all.

966
00:59:57,970 --> 01:00:01,040
And even if you do, you're never going to remember

967
01:00:01,040 --> 01:00:04,270
quite the right syntax for all of them,

968
01:00:04,270 --> 01:00:06,490
and if you can, then good for you.

969
01:00:06,490 --> 01:00:08,600
You're probably a super human.

970
01:00:08,600 --> 01:00:13,220
But it's really, really hard to memorize all that stuff,

971
01:00:13,220 --> 01:00:16,390
so don't feel bad if you feel like you need to look stuff up all the time,

972
01:00:16,390 --> 01:00:18,680
because all the pros do it.

973
01:00:18,680 --> 01:00:20,330
They always look up stuff.

974
01:00:20,330 --> 01:00:22,490
They're always referring to documentation.

975
01:00:22,490 --> 01:00:25,700
Even for functions they use all the time,

976
01:00:25,700 --> 01:00:30,220
if they're programming they'll start to use a function,

977
01:00:30,220 --> 01:00:33,740
and they'll say, "What's that 3rd argument

978
01:00:33,740 --> 01:00:36,490
that this method is asking for?"

979
01:00:36,490 --> 01:00:38,850
They'll go ahead and look it up in the documentation.

980
01:00:38,850 --> 01:00:44,600
Don't feel bad about memorizing all the HTML elements and CSS properties.

981
01:00:44,600 --> 01:00:46,650
It's really, really difficult to do.

982
01:00:46,650 --> 01:00:49,540
That about wraps things up.

983
01:00:49,540 --> 01:00:52,860
Thanks so much for sending me so many great questions.

984
01:00:52,860 --> 01:00:57,070
Wow, I'm pretty blown away by the response to this.

985
01:00:57,070 --> 01:01:00,390
I'm so glad so many people participated.

986
01:01:00,390 --> 01:01:02,550
It's been really, really fun.

987
01:01:02,550 --> 01:01:04,550
Again, I'm Nick Pettit.

988
01:01:04,550 --> 01:01:07,020
I am @nickrp on Twitter.

989
01:01:07,020 --> 01:01:09,840
If you'd like to learn more about us

990
01:01:09,840 --> 01:01:14,260
and check out Treehouse you can check us out at teamtreehouse.com,

991
01:01:14,260 --> 01:01:17,190
which of course is the best way to learn web design,

992
01:01:17,190 --> 01:01:21,540
web development, business, mobile and so much more.

993
01:01:21,540 --> 01:01:23,670
Thanks so much for watching.

994
01:01:23,670 --> 01:01:26,140
We do these every Tuesday at 2 PM Eastern Time.

995
01:01:26,140 --> 01:01:29,470
Hopefully I will see you next week.