Episode 87: Creating Style Guides, Writing Interface Copy, Ratchet

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, your weekly dose of internets 0:02 where we talk about all things web design, web development and more. 0:04 >> In this episode we'll be talking about 0:08 creating style guides, writing interface copy, Ratchet, and more. 0:09 >> Let's check it out. 0:14 [MUSIC] 0:15 [MUSIC] 0:19 First up is an article from a list of part called creating style guides. 0:21 >> Now first- A style guide is basically how you wanna dress, right? 0:26 >> Not quite, a style guide is basically a living document of code. 0:29 So it's a place where you can put all of the elements and modules and visual 0:35 pieces of your application as it is described in your HTML and CSS. 0:41 So, famously, Starbucks has made their style 0:47 guide available for anybody to look at. 0:52 So, this is what their style guide looks like for all of their web properties. 0:55 You should use a style guide to make sure that all of your code 1:01 is in sync, so everybody is om the same page, and everybody's making something 1:05 that's very consistent with one another, and 1:09 they're not going off and creating their 1:12 own, components if something is already created 1:14 so it helps with the reusability of code. 1:18 If you scroll down a little further here, then go into 1:22 how to build your own style guide, and they first suggest 1:25 going with just the basics of things like typography, how your 1:29 grid system works, how the color palette should look and so on. 1:33 And then after you've build that out, you can start to add in components, so, things 1:37 like content cards, or buttons or things that, have multiple pieces of markup. 1:42 And need to be put together. 1:48 >> Yeah this is great, even for somebody n, newly joining your project. 1:51 You know if they don't know how to use 1:54 a certain element, or even what colors to use. 1:55 They can always just refer to style guide to 1:57 see how to do specific implementations of something, right? 1:59 >> Exactly. 2:02 So, a style guide basically just makes your site a lot more 2:03 maintainable and makes it much easier to work on a team together. 2:07 So, putting together that documentation can help a lot. 2:10 Especially on large projects. 2:14 >> Nick and I actually have a style guide for our hair. 2:16 But we're not going to link to that, publicly. 2:19 Speaking of style guides. 2:22 Once you've written your style guide, it'd be 2:23 great to have good interface copy on your site. 2:24 And that's the next article we're talking about. 2:27 This is a blog post from, Google Ventures 2:29 called 5 Rules for Writing Great Interface Copy. 2:31 Now as you might expect there are 2:35 five rules inside here, about writing interface copy. 2:37 And the first one, clarity is king. 2:40 Some people say short is best, and some people say longer is better. 2:42 Some people say that people only scan text on the web and that they don't read. 2:46 That's true! 2:49 I didn't even read this article. 2:50 No, I'm just kidding. 2:51 So anyway, the author makes a bunch of great points on what 2:53 to watch out for when you are writing copy for your web page. 2:57 Like one, be specific, don't say search when you 2:59 mean filter, save is not the same as submit. 3:02 Something that people typically strive for a lot 3:06 is having site with a lot of personality. 3:08 And the author says that personality doesn't matter as much as you think. 3:12 Instead of trying to stand out, actually just write more 3:16 effective copy and your personality will shine through that way. 3:19 Number three just tell me. 3:24 Really describe what's going on as simply as you possibly can. 3:27 Number four. 3:31 By the way people really do read. 3:31 That is false. 3:33 Number five. 3:35 Writing is part of the design process. 3:35 That's probably the biggest takeaway from this article. 3:38 Most people think of writing and copy as one of the 3:41 last parts of creating a website or even a web application. 3:44 And writing is something that should be done throughout the process 3:49 of design because the author says that writing is actually design. 3:52 When you look at the visual design of a web page that 3:56 is just one part of it, copy is another part of design. 3:59 Anyway, this article is actually great and I did read it. 4:03 You can find the link to it in the show notes, which 4:06 you can get to in YouTube.com\gotreehouse, 4:07 or search for us in iTunes\WearetheTreehouseShow. 4:10 And drop us a rating while you're there. 4:13 >> You know, that is really good advice, dropping us a rating. 4:14 But also considering copy as part of the design process. 4:18 Basically I always will put in real copy as often as 4:23 I can instead of, like, placeholder text or lorem ipsum text, 4:27 because sometimes something is gonna end up being a lot longer 4:31 than you think it is or might be shorter, and you know? 4:34 It's a good way to figure out how things 4:37 should actually look as well as read on your site. 4:40 >> That is actually one thing the author says is 4:43 do not use lorem ipsum text when designing the site. 4:46 The writing and copy of your site or app will evolve as the design does. 4:49 >> Good tip. 4:54 Well next up is a new mobile framework called Ratchet. 4:55 This is a front end framework from the same people that 4:59 brought you a boot strap frame work that is much more popular. 5:02 But this is just hitting version 2.0. 5:06 It hit 2.0 around February and they've been maintaining pretty consistently. 5:09 It's in version 2.0.2 as of this recording. 5:14 And let's take a look at some of the components. 5:17 So, this is, like I said, a front end frame work for building mobile websites. 5:21 Now, it's for building mobile-only websites so 5:26 these won't actually work on desktop devices. 5:29 So, this is maybe useful for a very specific instance where 5:34 you want to create a separate mobile site from your desktop site. 5:38 Now, as you can see, the styling is very similar to what you might find on A native 5:42 mobile app so they have this base styling, they 5:47 have iOS styling and then they have Android styling. 5:51 So you can use all of the same components here and then 5:54 just use a different style sheet and it will automatically restyle it. 5:58 So if we scroll down a little further here we can look at some of the 6:03 various components has everything you'd expect including table 6:06 views uh,button bars, badges, and that sort of thing. 6:11 Lets scroll down a little further here. 6:15 They have some really nice toggles here 6:18 that look very close to their native equivalents. 6:19 Switch over to Android here so we can see what that looks like. 6:23 But in general, it's pretty cool I played around with it 6:26 a little bit myself fairly recently and it's very easy to use. 6:30 To go from one page to another it does rely on push J.S. so 6:35 you will need to be running a 6:40 local web server when doing development with Ratchet. 6:41 So even though it's just HTML CSS with JavaScript you can't just download 6:45 it and expect it to work immediately, you have to be running a server. 6:48 The other thing to keep in mind with Ratchet is that you also have to enable 6:52 Touch Events if you're expecting it to work 6:56 in a normal desktop browser like Chrome or FireFox. 6:59 What I actually did when I was playing around with it, is I just used the iOS 7:03 simulator that comes with X Code on Mac OS 10, but it's pretty great. 7:07 It's, like I said, it just hit 2.0, which was a 7:13 complete rewrite, so at this point it's starting to get fairly mature. 7:17 And I think it's worth checking out if you're maybe wanting to just prototype a 7:20 native app, this would be a really good thing to, to go to and use. 7:26 >> No, very cool. 7:29 Next up, we have a project called elementTransitions.js. 7:31 You may remember an article on co-drops we covered 7:35 a little while ago on these same element transitions. 7:38 Well, this is now a JavaScript library that lets you use them in your web pages. 7:41 Now look at all these transitions we have here. 7:47 If you can focus on one just for a second and you see is, 7:49 hey look, we've got a rotate slide in and also a rotate slide out. 7:51 So these are actually extremely easy to use. 7:56 They also are very performant because they are using CSS3 transitions. 7:58 Now, if we scroll down and get through all of this 8:03 while being able to focus, we can see the examples right here. 8:06 So if we wanna rotate an element on a click, wow, look at that. 8:10 Element One rotates out and Element Two comes in. 8:14 >> Amazing! 8:16 >> Isn't it? 8:17 And this is all it takes right here to get back to work. 8:17 Now, you can also add in different classes for these transitions. 8:21 So we can see that the date of class is an 8:25 element transition wrapper, and then 8:28 the button applies certain different transitions. 8:31 Now, where is the stand alone example, it is 404 'ing right now. 8:35 But I promise it is extremely easy to use you 8:40 just include jQuery, include the element transition CSS and also 8:44 the JavaScript, and then you can do it by applying 8:49 classes to the existing markup, or toggling them through JavaScript code. 8:52 Anyway, great project. 8:57 Definitely check it out. 8:58 >> Very cool stuff. 9:00 Well, next up is Magic Effects. 9:01 I believe this is called Magic CSS if I'm not 9:04 mistaken, but basically, it is a bunch of transitions and animations. 9:07 >> Are we in space? 9:13 >> That you could apply to different elements on your website. 9:14 And yes Jason it does look like we're in space. 9:18 I think they're using a full screen HTML video on background. 9:20 >> huh. 9:24 >> Yeah, pretty cool. 9:25 >> Some say it's magical. 9:27 >> Yeah, it's almost more interesting than 9:28 this actual framework, but you know, that's cool. 9:30 >> [LAUGH]. 9:32 >> Anyway, you can make things puff in and puff out. 9:33 You can make things go to the left and right just like that. 9:37 There's a couple of different static effects here. 9:42 There's some perspective effects. 9:45 So, those will actually transform in 3D space. 9:48 That's pretty cool. 9:51 You can slide a few of these, so if you want to, maybe, reveal something. 9:53 Maybe something like that. 9:59 >> I feel like most of the names of these effect could also be dance moves. 10:00 >> I, I think that's where the inspiration for this comes from Jason. 10:05 >> Yeah. 10:08 >> Dance moves. 10:09 >> Wanna tin right out. 10:09 Can we see that next? 10:10 >> Let's do it. 10:12 There it goes. 10:12 Tin right up. 10:13 If we go over to the GitHub page you can see that it's just some CSS here. 10:17 And to add it to your site you 10:23 just include CSS file, so that's pretty straightforward. 10:26 They also have a minified version if you prefer that. 10:29 And if you want to use it with jQuery you 10:32 can actually just add and remove classes just like that. 10:35 So, oh, actually you have to use it with jQuery. 10:38 So this is what that would look like. 10:42 So you just add and remove the classes or you can toggle 10:45 classes if you want to have an effect here and then go away. 10:48 And you can also adjust the timing. 10:53 So the default timing is set for you but you 10:56 can go ahead and change that if you want to. 11:00 Anyway, not a whole lot to say about it. 11:02 But, I thought the effects were pretty cool. 11:03 So just wanted to point that out. 11:06 >> Hm. 11:08 Well I'm just gonna tend right into our next article right here. 11:08 >> I'm ready. 11:12 >> Which is a GitHub cheat sheet by Tim Green on GitHub. 11:12 And as you may expect from the name, this is a cheat sheet for working with GitHub. 11:17 They say it's a collection of cool hidden and 11:22 not so hidden features of both Git and GitHub. 11:24 Now we're not gonna go over everything because there is so much stuff here. 11:28 Look, look at all this. 11:33 Just look at this table of contents. 11:34 But you might not have known that if you 11:36 add this, this little query string right here, W equals 11:38 one to any URL on GitHUb It will ignore the 11:41 white space to see only the code that has changed. 11:45 Isn't that cool? 11:48 anyway, it lets you do just a ton of stuff, I didn't even know that 11:50 you could do some of the things in this article like I said, so much 11:53 going on here, even if you're been working with git and GitHub for a while, 11:57 I guarantee you will pick something up in this cheat sheet, so check it out. 12:00 We'll have a link in the show notes. 12:03 >> Very cool stuff. 12:05 Well, next up is a blog post from John 12:06 Resig, on his personal website called Write Code Every Day. 12:08 And this is actually a pretty timely article for me personally because this is 12:13 something I'm also trying to do to improve my coding habits so. 12:17 >> John Resig is the author of jQuery, right? 12:24 >> That is correct Jason. 12:26 Thank you for pointing that out. 12:27 [LAUGH] So John Resig set up a couple of rules for himself. 12:28 He said I must write code every day. 12:33 I can write dots and blog posts and other 12:35 things but in addition to that, I must write code. 12:37 He also wants to make sure he's writing 12:42 useful codes, so just, you know, making sure 12:44 he doesn't do any just tweaking or reformatting 12:46 or things like that, has to actually do something. 12:50 The code must be written before midnight and 12:52 it must be open source and up on GitHub. 12:54 So he's been doing this for 20 consecutive weeks now and 12:57 you can see his GitHub history and that's pretty impressive there. 13:00 But I think one of the things that I'd like to highlight that came out of this is 13:05 that he said it used to be that getting work done on weekends was totally critical 13:10 to any kind of forward momentum on his 13:16 own side projects and that's pretty tough especially when 13:19 you are working on something like jQuery or 13:23 other frameworks that that John has been working on. 13:26 So, you know, side projects really are super important to progressing your career 13:30 and progressing your skills so that's why I think this article is so great. 13:36 It tells you exactly how to maintain those side 13:40 projects and keep the momentum going, which can be tough. 13:43 >> WCED. 13:47 Write code every day. 13:48 Next up we have a project called vis.js. 13:51 This is a visual interaction system 13:53 a, a, dynamic browser based visualization library. 13:57 So what does this let you do? 14:02 Let's just take a look at a examples gallery that they have on 14:03 the site that is in GitHub and we can't access right at the moment. 14:07 And let me go back here. 14:11 Because it launched in a new page. 14:16 Okay, let's look at the timeline here. 14:17 This is something that was generated completely programatically. 14:19 And as you can see you can scroll down, put different items in here. 14:22 And then if we go back, there's just a ton of different things you can do, here's 14:27 this example that has quote much data so you 14:30 can see it has a hundred items in here. 14:34 Very performantly we can add in another couple 14:36 zeros worth, hit draw, and if we wait 14:38 just a moment all those things will load onto the end of the pay tray here. 14:41 I'm not gonna make us scroll through all ten thousand of them. 14:46 >> No, let's do it right now. 14:48 >> We'll just, we'll just trust us that we're there. 14:49 So you can also do graphs here. 14:51 Basic usage graph right here just a few nodes 14:54 anyway ton of different options that you can do. 14:57 Uh,very extensive documentation walking through the different data 15:00 sets and views that you need to do. 15:03 You can install this via NPN or Bauer eh 15:06 as you can see it is extremely easy to use. 15:09 So if you need any visualizations in your site, go ahead and check out this project. 15:12 >> Very cool stuff, well I am @nickrp on Twitter. 15:17 >> And I am @jseifer. 15:20 For more information on anything we talked about, check out the show notes that you 15:21 can get to at www.YouTube.com/gotreehouse, or search for 15:23 us on iTunes, we are the Treehouse Show. 15:27 >> And, of course, if you'd like to see more videos like this one about web 15:30 design, web development, mobile, business, and so much 15:33 more, be sure to check us out at teamtreehouse.com. 15:36 Thank you so much for watching. 15:40 And we will see you next week. 15:41 [MUSIC] 15:43

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

Sign up