1
00:00:00,000 --> 00:00:03,790
[? music ?]

2
00:00:03,790 --> 00:00:06,790
[Treehouse Friends]

3
00:00:06,790 --> 00:00:14,260
[? music ?]

4
00:00:14,260 --> 00:00:17,200
Hey, everyone, Dan Gorgone from Treehouse here, 

5
00:00:17,200 --> 00:00:20,340
and I'm at the In Control Conference in Orlando,

6
00:00:20,340 --> 00:00:22,460
and I'm here with Zoe Gillenwater, author.

7
00:00:22,460 --> 00:00:25,070
Zoe, thank you for coming, sharing your time.

8
00:00:25,070 --> 00:00:28,730
>>Thank you for having me. >>I wanted to ask you how you got started,

9
00:00:28,730 --> 00:00:31,670
because I know, I looked at your bio, doing some research,

10
00:00:31,670 --> 00:00:34,570
and you're a freelancer, a designer, a developer.

11
00:00:34,570 --> 00:00:37,920
How'd you get involved all these things? How'd you get started in the industry?

12
00:00:37,920 --> 00:00:43,280
Well, I first learned HTML when I was in high school, and I just thought it was

13
00:00:43,280 --> 00:00:48,340
fun to kind of play around with, but I needed a job in college.

14
00:00:48,340 --> 00:00:55,240
And so I got this job helping do BlackBerry sites for professors who couldn't figure it out,

15
00:00:55,240 --> 00:01:00,570
and so that was kind of my 1st job in the web area.

16
00:01:00,570 --> 00:01:05,290
And I decided that I really liked it, and so I switched my major

17
00:01:05,290 --> 00:01:12,470
and just started kind of focusing on making web design my career from there.

18
00:01:12,470 --> 00:01:15,710
>>So when you were in high school and taking HTML, 

19
00:01:15,710 --> 00:01:20,050
is that something that immediately clicked with you,

20
00:01:20,050 --> 00:01:23,720
and is that something that you can see being useful 

21
00:01:23,720 --> 00:01:26,010
for other students in high school, 

22
00:01:26,010 --> 00:01:29,120
maybe even younger, taking language courses like that?

23
00:01:29,120 --> 00:01:33,080
>>Yeah, I think so. I did definitely have kind of a connection

24
00:01:33,080 --> 00:01:40,250
with it, and I think it was a couple years ago I taught this homeschool class,

25
00:01:40,250 --> 00:01:43,010
so a collection of people who are doing homeschooling

26
00:01:43,010 --> 00:01:46,460
wanted to offer electives to their kids,

27
00:01:46,460 --> 00:01:50,540
and so I did this web design elective, basically, for 

28
00:01:50,540 --> 00:01:54,680
I think they were like middle-school age kids, 

29
00:01:54,680 --> 00:01:59,880
and it was really fun to see  how a few of them were really into it.

30
00:01:59,880 --> 00:02:03,040
They really got it, and they were going and doing way 

31
00:02:03,040 --> 00:02:06,040
more than I gave them for homework every week.

32
00:02:06,870 --> 00:02:09,870
So I like that HTML is so simple. 

33
00:02:09,870 --> 00:02:13,520
You can pick it up really fast, and you can produce something really quickly,

34
00:02:13,520 --> 00:02:19,490
and it may not look awesome to us snooty web designers,

35
00:02:19,490 --> 00:02:23,820
but it's cool that anybody— It's so accessible to so many different people.

36
00:02:23,820 --> 00:02:27,340
>>So would you say that for kids and adults alike,  

37
00:02:27,340 --> 00:02:30,760
that HTML is a good way to get started with design?

38
00:02:30,760 --> 00:02:33,760
With learning how to do websites?

39
00:02:33,760 --> 00:02:36,760
Or is there something new these days?

40
00:02:36,760 --> 00:02:40,330
>>I think it's best if you know it, so you can— I think you can be

41
00:02:40,330 --> 00:02:46,290
a good web designer who comes at it from the graphic-design

42
00:02:46,290 --> 00:02:49,720
end of things, so you learn all the design principles and that 

43
00:02:49,720 --> 00:02:53,070
carries you through web design as well.

44
00:02:53,070 --> 00:03:00,950
But if you know the structure of how your design is actually going to be built,

45
00:03:00,950 --> 00:03:04,020
it gives you a better understanding of how to design 

46
00:03:04,020 --> 00:03:07,160
for the strengths of that and 

47
00:03:07,160 --> 00:03:10,780
avoid potential tricky things 

48
00:03:10,780 --> 00:03:13,880
that are hard to do when it comes to actually building the page.

49
00:03:13,880 --> 00:03:17,930
So I think you don't have to know HTML or CSS, 

50
00:03:17,930 --> 00:03:20,530
but I think it's really helpful to know those things.

51
00:03:20,530 --> 00:03:23,800
>>Well, you gave a great talk this morning about CSS3

52
00:03:23,800 --> 00:03:27,430
and how a lot of the best practices, 

53
00:03:27,430 --> 00:03:31,840
a lot of the tips and tricks for the people in the audience—

54
00:03:31,840 --> 00:03:36,030
How has CSS3 changed the way that front-end design happens these days?

55
00:03:36,030 --> 00:03:39,730
>>I think one of the big ways it's changed front-end design is

56
00:03:39,730 --> 00:03:46,200
that this whole design-in-the-browser idea is a lot more possible.

57
00:03:46,200 --> 00:03:51,780
It's now possible to get immediately into the HTML and the CSS and start 

58
00:03:51,780 --> 00:03:55,690
playing around with things, to see how they look, trying out different styles—

59
00:03:55,690 --> 00:04:01,350
I think it kind of can create just a lot more speed 

60
00:04:01,350 --> 00:04:03,350
of getting going on a new design.

61
00:04:03,350 --> 00:04:06,290
You know, opposite end of that, sometimes it can be kind of limiting.

62
00:04:06,290 --> 00:04:09,930
If you're only designing in the browser, you may never try out

63
00:04:09,930 --> 00:04:14,970
different things that would require images to do, rather than just CSS3.

64
00:04:14,970 --> 00:04:18,870
So I think you can use both tools, but I think that's one of the great things

65
00:04:18,870 --> 00:04:23,500
about it is that it does get us away from using as many images,

66
00:04:23,500 --> 00:04:25,940
which is great for a whole number of reasons,

67
00:04:25,940 --> 00:04:30,460
performance being a big one, and—

68
00:04:30,460 --> 00:04:35,230
>>And mobile as well. >>Yeah, and that's great for mobile as well.

69
00:04:35,230 --> 00:04:38,160
Not having so many resources to download, and all that stuff.

70
00:04:38,160 --> 00:04:42,210
>>Is thinking mobile first, like designing for mobile first?

71
00:04:42,210 --> 00:04:47,120
Is that really the way that design should be done these days?

72
00:04:47,120 --> 00:04:50,470
Is that the way we should think about it in design? Is mobile first? 

73
00:04:50,470 --> 00:04:56,840
>>It's a lot more of a— not so much of a linear process.

74
00:04:56,840 --> 00:05:00,310
So I think sometimes when people talk about mobile first,

75
00:05:00,310 --> 00:05:05,380
it's important to remember that we still don't want it to be totally linear,

76
00:05:05,380 --> 00:05:08,240
where we're not thinking about desktop experience 

77
00:05:08,240 --> 00:05:10,470
when we're designing mobile experience.

78
00:05:10,470 --> 00:05:15,570
So I like the idea of thinking mobile first, with the caveat 

79
00:05:15,570 --> 00:05:19,730
of also keeping in mind desktop and things like that.

80
00:05:19,730 --> 00:05:25,800
So it's a lot more iterative and not so much of that waterfall development process.

81
00:05:25,800 --> 00:05:30,220
So you wouldn't just design mobile and then say, okay, got mobile down,

82
00:05:30,220 --> 00:05:32,760
now I'm going to design desktop.

83
00:05:32,760 --> 00:05:36,310
So you're kind of doing them all together at once.

84
00:05:36,310 --> 00:05:41,280
>>I know you've also done a lot of research on accessibility.

85
00:05:41,280 --> 00:05:45,600
And it seems like if there's anything that's kind of universal,

86
00:05:45,600 --> 00:05:50,260
it's the best practices behind accessibility.

87
00:05:50,260 --> 00:05:55,570
How has that informed your design process and your design decisions?

88
00:05:55,570 --> 00:06:00,250
>>Yeah, that's a great question. I definitely see accessibility 

89
00:06:00,250 --> 00:06:02,600
as something that is not optional.

90
00:06:02,600 --> 00:06:06,440
It's not like something that I would charge a client extra for.

91
00:06:06,440 --> 00:06:10,010
It's not a feature, it's just how things should be done.

92
00:06:10,010 --> 00:06:13,910
So it is something that I keep in mind whenever I'm designing.

93
00:06:13,910 --> 00:06:18,110
A lot of it's simple stuff like not having really small text

94
00:06:18,110 --> 00:06:25,270
or making sure that the color contrast is easy to read—things like that.

95
00:06:25,270 --> 00:06:28,760
And some of it is bigger design decisions,

96
00:06:28,760 --> 00:06:34,480
because a lot of these interactive widgets that we have on our pages now—

97
00:06:34,480 --> 00:06:39,070
There are ways to make them accessible, but a lot of times that can be

98
00:06:39,070 --> 00:06:43,230
really difficult, or it may—Even the accessible version 

99
00:06:43,230 --> 00:06:45,640
may not be as good of a user experience.

100
00:06:45,640 --> 00:06:49,770
So maybe we should think about designing a different interface

101
00:06:49,770 --> 00:06:55,660
that more people can all interact with, instead of this interface is so

102
00:06:55,660 --> 00:07:02,440
target towards people who have sight or are really good with their fingers, whatever.

103
00:07:02,440 --> 00:07:07,410
>>You've recently written about mobile accessibility,

104
00:07:07,410 --> 00:07:12,370
which, I know, for some people—they may not make the connection

105
00:07:12,370 --> 00:07:16,460
between accessibility and mobile, like how would I be able to

106
00:07:16,460 --> 00:07:21,010
design something that, say, a blind person would be able 

107
00:07:21,010 --> 00:07:23,220
to use on a mobile site?

108
00:07:23,220 --> 00:07:29,120
Or even mobile apps. How does mobile accessibility change things

109
00:07:29,120 --> 00:07:31,650
for designers out there, or does it change things at all?

110
00:07:31,650 --> 00:07:34,210
Is it really just the same best practices?

111
00:07:34,210 --> 00:07:38,880
>>It's mainly the same best practices.

112
00:07:38,880 --> 00:07:41,720
A lot of the technical details about how you would achieve them 

113
00:07:41,720 --> 00:07:45,800
would be different on mobile, but the kind of overarching ideas

114
00:07:45,800 --> 00:07:49,600
and goals you're going for would be the same,

115
00:07:49,600 --> 00:07:52,960
as well as just structuring your HTML, having that semantic

116
00:07:52,960 --> 00:07:55,000
HTML, and things like that.

117
00:07:55,000 --> 00:07:58,240
That foundation applies to mobile as well.

118
00:07:58,240 --> 00:08:03,050
I think mobile accessibility is so important because mobile devices are

119
00:08:03,050 --> 00:08:07,740
actually a really great tool for a lot of people with disabilities

120
00:08:07,740 --> 00:08:11,850
that allow them to do so many things that they weren't able to do before

121
00:08:11,850 --> 00:08:14,360
or weren't able to do easily before.

122
00:08:14,360 --> 00:08:21,150
And so when we create websites or web apps that don't allow them

123
00:08:21,150 --> 00:08:25,990
to accomplish those tasks, it's even harder on them,

124
00:08:25,990 --> 00:08:28,790
because they've got this device that now lets them do

125
00:08:28,790 --> 00:08:30,790
all of these new things they couldn't do before.

126
00:08:30,790 --> 00:08:33,770
They're excited about that, but then your website stops them.

127
00:08:33,770 --> 00:08:40,510
So I kind of feel like mobile accessibility is really important,

128
00:08:40,510 --> 00:08:43,890
and it is something that most people don't really think about.

129
00:08:43,890 --> 00:08:50,500
>>Something I noticed when I hand my iPad to my 2 boys, who are both under

130
00:08:50,500 --> 00:08:56,290
the age of 7, is that they don't know exactly how it works,

131
00:08:56,290 --> 00:09:02,220
but they're going to figure it out, and with apps that are built for kids

132
00:09:02,220 --> 00:09:06,830
especially, you will figure out the problems almost immediately,

133
00:09:06,830 --> 00:09:10,530
with interface and the accessibility of apps.

134
00:09:10,530 --> 00:09:14,270
And you have kids of your own? >>Yeah.

135
00:09:14,270 --> 00:09:16,290
>>Have you seen that as well, have you noticed

136
00:09:16,290 --> 00:09:19,400
that they—just the way that they go through things, that they 

137
00:09:19,400 --> 00:09:24,210
kind of figure things out, and they highlight the mistakes of other designers immediately?

138
00:09:24,210 --> 00:09:27,440
>>Yeah, absolutely. I've totally noticed that as well.

139
00:09:27,440 --> 00:09:32,710
>>Some parting thoughts for you, or parting thoughts for our audience.

140
00:09:32,710 --> 00:09:36,530
We talked about accessibility, CSS3, and design.

141
00:09:36,530 --> 00:09:41,280
How can people stay current with this ever-changing landscape of

142
00:09:41,280 --> 00:09:43,880
coding, design, and everything else?

143
00:09:43,880 --> 00:09:45,880
What do you do to stay current?

144
00:09:45,880 --> 00:09:49,690
Yeah, it is hard to stay current.

145
00:09:49,690 --> 00:09:54,450
I rely on Twitter a lot to just get all of this new information.

146
00:09:54,450 --> 00:09:59,550
So I read a lot of blogs, but I kind of find out about them through Twitter.

147
00:09:59,550 --> 00:10:02,570
I think that that's a really great tool, because you can see what is

148
00:10:02,570 --> 00:10:05,190
on people's minds right at that moment.

149
00:10:05,190 --> 00:10:08,470
They don't have to take a long time to craft some big long blog post.

150
00:10:08,470 --> 00:10:11,210
You can see what other designers and developers are thinking about

151
00:10:11,210 --> 00:10:13,210
and working on right at that moment.

152
00:10:13,210 --> 00:10:18,820
And I think a lot of staying current, too, is just being willing to just

153
00:10:18,820 --> 00:10:20,970
try something new.

154
00:10:20,970 --> 00:10:26,000
So recently, I just tried Sass for the 1st time,

155
00:10:26,000 --> 00:10:31,760
and I hadn't used a CSS preprocessor before, just because 

156
00:10:31,760 --> 00:10:34,650
I've been doing CSS forever, and it works, right?

157
00:10:34,650 --> 00:10:39,540
I'm used to writing it, and so I can just write it and I'm fine without a preprocessor.

158
00:10:39,540 --> 00:10:46,160
So I had never taken the time to learn that, but I finally just was like—

159
00:10:46,160 --> 00:10:50,370
I'm going to give this an hour, right, and try it out.

160
00:10:50,370 --> 00:10:54,010
And I really enjoyed it. So a lot of times, I think, we think that

161
00:10:54,010 --> 00:10:58,090
we have to devote like, okay, now I'm going to learn JavaScript,

162
00:10:58,090 --> 00:11:01,240
and I'm going to take the next 6 months to do that.

163
00:11:01,240 --> 00:11:04,360
Don't think about it that way, just think about—I'm just going to learn

164
00:11:04,360 --> 00:11:07,780
something, 1 new thing, in this hour.

165
00:11:07,780 --> 00:11:12,090
And just try something new and see what 1 new thing you can learn.

166
00:11:12,090 --> 00:11:17,280
>>Or sometimes you can take less time, and put a Treehouse.com,

167
00:11:17,280 --> 00:11:21,170
and learn it on there? >>Yeah. >>So, all right, well thank you for your time.

168
00:11:21,170 --> 00:11:26,770
Author Zoe Gillenwater, sharing her time here at the In Control Conference in Orlando.

169
00:11:26,770 --> 00:11:29,740
Thanks for watching here on Treehouse Friends. We'll see you next time.

170
00:11:29,740 --> 00:11:36,000
[? music ?] [Treehouse Friends]