CSS3 and Front-End Design - Zoe Gillenwater

[? music ?] 0:00 [Treehouse Friends] 0:03 [? music ?] 0:06 Hey, everyone, Dan Gorgone from Treehouse here, 0:14 and I'm at the In Control Conference in Orlando, 0:17 and I'm here with Zoe Gillenwater, author. 0:20 Zoe, thank you for coming, sharing your time. 0:22 >>Thank you for having me. >>I wanted to ask you how you got started, 0:25 because I know, I looked at your bio, doing some research, 0:28 and you're a freelancer, a designer, a developer. 0:31 How'd you get involved all these things? How'd you get started in the industry? 0:34 Well, I first learned HTML when I was in high school, and I just thought it was 0:37 fun to kind of play around with, but I needed a job in college. 0:43 And so I got this job helping do BlackBerry sites for professors who couldn't figure it out, 0:48 and so that was kind of my 1st job in the web area. 0:55 And I decided that I really liked it, and so I switched my major 1:00 and just started kind of focusing on making web design my career from there. 1:05 >>So when you were in high school and taking HTML, 1:12 is that something that immediately clicked with you, 1:15 and is that something that you can see being useful 1:20 for other students in high school, 1:23 maybe even younger, taking language courses like that? 1:26 >>Yeah, I think so. I did definitely have kind of a connection 1:29 with it, and I think it was a couple years ago I taught this homeschool class, 1:33 so a collection of people who are doing homeschooling 1:40 wanted to offer electives to their kids, 1:43 and so I did this web design elective, basically, for 1:46 I think they were like middle-school age kids, 1:50 and it was really fun to see how a few of them were really into it. 1:54 They really got it, and they were going and doing way 1:59 more than I gave them for homework every week. 2:03 So I like that HTML is so simple. 2:06 You can pick it up really fast, and you can produce something really quickly, 2:09 and it may not look awesome to us snooty web designers, 2:13 but it's cool that anybody— It's so accessible to so many different people. 2:19 >>So would you say that for kids and adults alike, 2:23 that HTML is a good way to get started with design? 2:27 With learning how to do websites? 2:30 Or is there something new these days? 2:33 >>I think it's best if you know it, so you can— I think you can be 2:36 a good web designer who comes at it from the graphic-design 2:40 end of things, so you learn all the design principles and that 2:46 carries you through web design as well. 2:49 But if you know the structure of how your design is actually going to be built, 2:53 it gives you a better understanding of how to design 3:00 for the strengths of that and 3:04 avoid potential tricky things 3:07 that are hard to do when it comes to actually building the page. 3:10 So I think you don't have to know HTML or CSS, 3:13 but I think it's really helpful to know those things. 3:17 >>Well, you gave a great talk this morning about CSS3 3:20 and how a lot of the best practices, 3:23 a lot of the tips and tricks for the people in the audience— 3:27 How has CSS3 changed the way that front-end design happens these days? 3:31 >>I think one of the big ways it's changed front-end design is 3:36 that this whole design-in-the-browser idea is a lot more possible. 3:39 It's now possible to get immediately into the HTML and the CSS and start 3:46 playing around with things, to see how they look, trying out different styles— 3:51 I think it kind of can create just a lot more speed 3:55 of getting going on a new design. 4:01 You know, opposite end of that, sometimes it can be kind of limiting. 4:03 If you're only designing in the browser, you may never try out 4:06 different things that would require images to do, rather than just CSS3. 4:09 So I think you can use both tools, but I think that's one of the great things 4:14 about it is that it does get us away from using as many images, 4:18 which is great for a whole number of reasons, 4:23 performance being a big one, and— 4:25 >>And mobile as well. >>Yeah, and that's great for mobile as well. 4:30 Not having so many resources to download, and all that stuff. 4:35 >>Is thinking mobile first, like designing for mobile first? 4:38 Is that really the way that design should be done these days? 4:42 Is that the way we should think about it in design? Is mobile first? 4:47 >>It's a lot more of a— not so much of a linear process. 4:50 So I think sometimes when people talk about mobile first, 4:56 it's important to remember that we still don't want it to be totally linear, 5:00 where we're not thinking about desktop experience 5:05 when we're designing mobile experience. 5:08 So I like the idea of thinking mobile first, with the caveat 5:10 of also keeping in mind desktop and things like that. 5:15 So it's a lot more iterative and not so much of that waterfall development process. 5:19 So you wouldn't just design mobile and then say, okay, got mobile down, 5:25 now I'm going to design desktop. 5:30 So you're kind of doing them all together at once. 5:32 >>I know you've also done a lot of research on accessibility. 5:36 And it seems like if there's anything that's kind of universal, 5:41 it's the best practices behind accessibility. 5:45 How has that informed your design process and your design decisions? 5:50 >>Yeah, that's a great question. I definitely see accessibility 5:55 as something that is not optional. 6:00 It's not like something that I would charge a client extra for. 6:02 It's not a feature, it's just how things should be done. 6:06 So it is something that I keep in mind whenever I'm designing. 6:10 A lot of it's simple stuff like not having really small text 6:13 or making sure that the color contrast is easy to read—things like that. 6:18 And some of it is bigger design decisions, 6:25 because a lot of these interactive widgets that we have on our pages now— 6:28 There are ways to make them accessible, but a lot of times that can be 6:34 really difficult, or it may—Even the accessible version 6:39 may not be as good of a user experience. 6:43 So maybe we should think about designing a different interface 6:45 that more people can all interact with, instead of this interface is so 6:49 target towards people who have sight or are really good with their fingers, whatever. 6:55 >>You've recently written about mobile accessibility, 7:02 which, I know, for some people—they may not make the connection 7:07 between accessibility and mobile, like how would I be able to 7:12 design something that, say, a blind person would be able 7:16 to use on a mobile site? 7:21 Or even mobile apps. How does mobile accessibility change things 7:23 for designers out there, or does it change things at all? 7:29 Is it really just the same best practices? 7:31 >>It's mainly the same best practices. 7:34 A lot of the technical details about how you would achieve them 7:38 would be different on mobile, but the kind of overarching ideas 7:41 and goals you're going for would be the same, 7:45 as well as just structuring your HTML, having that semantic 7:49 HTML, and things like that. 7:52 That foundation applies to mobile as well. 7:55 I think mobile accessibility is so important because mobile devices are 7:58 actually a really great tool for a lot of people with disabilities 8:03 that allow them to do so many things that they weren't able to do before 8:07 or weren't able to do easily before. 8:11 And so when we create websites or web apps that don't allow them 8:14 to accomplish those tasks, it's even harder on them, 8:21 because they've got this device that now lets them do 8:25 all of these new things they couldn't do before. 8:28 They're excited about that, but then your website stops them. 8:30 So I kind of feel like mobile accessibility is really important, 8:33 and it is something that most people don't really think about. 8:40 >>Something I noticed when I hand my iPad to my 2 boys, who are both under 8:43 the age of 7, is that they don't know exactly how it works, 8:50 but they're going to figure it out, and with apps that are built for kids 8:56 especially, you will figure out the problems almost immediately, 9:02 with interface and the accessibility of apps. 9:06 And you have kids of your own? >>Yeah. 9:10 >>Have you seen that as well, have you noticed 9:14 that they—just the way that they go through things, that they 9:16 kind of figure things out, and they highlight the mistakes of other designers immediately? 9:19 >>Yeah, absolutely. I've totally noticed that as well. 9:24 >>Some parting thoughts for you, or parting thoughts for our audience. 9:27 We talked about accessibility, CSS3, and design. 9:32 How can people stay current with this ever-changing landscape of 9:36 coding, design, and everything else? 9:41 What do you do to stay current? 9:43 Yeah, it is hard to stay current. 9:45 I rely on Twitter a lot to just get all of this new information. 9:49 So I read a lot of blogs, but I kind of find out about them through Twitter. 9:54 I think that that's a really great tool, because you can see what is 9:59 on people's minds right at that moment. 10:02 They don't have to take a long time to craft some big long blog post. 10:05 You can see what other designers and developers are thinking about 10:08 and working on right at that moment. 10:11 And I think a lot of staying current, too, is just being willing to just 10:13 try something new. 10:18 So recently, I just tried Sass for the 1st time, 10:20 and I hadn't used a CSS preprocessor before, just because 10:26 I've been doing CSS forever, and it works, right? 10:31 I'm used to writing it, and so I can just write it and I'm fine without a preprocessor. 10:34 So I had never taken the time to learn that, but I finally just was like— 10:39 I'm going to give this an hour, right, and try it out. 10:46 And I really enjoyed it. So a lot of times, I think, we think that 10:50 we have to devote like, okay, now I'm going to learn JavaScript, 10:54 and I'm going to take the next 6 months to do that. 10:58 Don't think about it that way, just think about—I'm just going to learn 11:01 something, 1 new thing, in this hour. 11:04 And just try something new and see what 1 new thing you can learn. 11:07 >>Or sometimes you can take less time, and put a Treehouse.com, 11:12 and learn it on there? >>Yeah. >>So, all right, well thank you for your time. 11:17 Author Zoe Gillenwater, sharing her time here at the In Control Conference in Orlando. 11:21 Thanks for watching here on Treehouse Friends. We'll see you next time. 11:26 [? music ?] [Treehouse Friends] 11:29

You need to sign up for Treehouse in order to set up Workspace

Sign up