1
00:00:01,480 --> 00:00:03,600
I'm Nick Pettit.  >>I'm Jason Seifer. 

2
00:00:03,600 --> 00:00:06,600
And you're watching the Treehouse show—your weekly dose of Internets

3
00:00:06,600 --> 00:00:09,810
where we talk about all things web design, web development and more.

4
00:00:09,810 --> 00:00:14,180
In this episode, we'll be talking about a tablet-friendly design, gif.js, 

5
00:00:14,180 --> 00:00:18,110
good UI practices and more.  >>Let's check it out.

6
00:00:18,110 --> 00:00:24,700
[The Treehouse Show]

7
00:00:24,700 --> 00:00:29,350
First up is a blog post from the CSS Tricks blog—>> Friend of the show.

8
00:00:29,350 --> 00:00:32,130
Which, of course, is maintained by Chris Coyier.

9
00:00:32,130 --> 00:00:38,370
This is a guest post from Ben Terrill—I hope I'm saying his last name right—

10
00:00:38,370 --> 00:00:42,410
called "A Couple of Best Practices for Tablet-Friendly Design."

11
00:00:42,410 --> 00:00:46,980
The first tip he gives is to increase the font size and the line height

12
00:00:46,980 --> 00:00:50,600
so that your text is legible on tablets.

13
00:00:50,600 --> 00:00:57,380
The next tip is to increase the size of buttons and basically be aware of tap targets

14
00:00:57,380 --> 00:01:01,180
so that your finger can actually hit the buttons,

15
00:01:01,180 --> 00:01:05,340
because it's a little bit less imprecise than a mouse.

16
00:01:05,920 --> 00:01:08,330
You should enable contextual keyboards.  

17
00:01:08,330 --> 00:01:14,490
So, for example, if you need to type in a phone number, you should enable a numeric keyboard

18
00:01:14,490 --> 00:01:17,080
to make it a little bit easier to type in.

19
00:01:17,080 --> 00:01:21,610
And there's a couple of other great tips there, but it's a really great blog post,

20
00:01:21,610 --> 00:01:23,970
and I highly recommend that you check it out.

21
00:01:24,410 --> 00:01:29,130
Yeah, first hand.  Don't just take our word for it.  >>It's awesome.  >>Yeah, it is.

22
00:01:29,130 --> 00:01:34,560
Next up, we have a project called gif.js.  >>Don't you mean gif.js?

23
00:01:34,560 --> 00:01:39,720
Pretty sure it's gif.js.  >>I"m pretty sure you're wrong.  >>Like the peanut butter.

24
00:01:39,720 --> 00:01:45,950
This is a fully featured JavaScript gif encoder that runs in your browser.  How crazy is that?

25
00:01:45,950 --> 00:01:50,290
You can actually create gifs right inside your web browser. 

26
00:01:50,290 --> 00:01:53,850
Let's take a look at the code here.  So pretty easy to use.

27
00:01:53,850 --> 00:01:58,420
You just create a new gif variable, adding in this new gif.

28
00:01:58,420 --> 00:02:02,020
You specify the number of workers you want, as well as the quality.

29
00:02:02,520 --> 00:02:08,770
This uses Canvas to add different images in the case of adding an animated gif.

30
00:02:08,770 --> 00:02:14,270
And you can get the downloads and documentation over on github.

31
00:02:14,270 --> 00:02:17,940
This works in most browsers—works in Google Chrome, Firefox 17,

32
00:02:17,940 --> 00:02:20,250
Safari 6, IE 10 and up.

33
00:02:20,250 --> 00:02:26,340
So 10 different options that you can put in, including whether or not to repeat the gif.,

34
00:02:26,340 --> 00:02:30,060
the quality workers, and just 10 different options.

35
00:02:30,060 --> 00:02:35,670
So anyway, pretty crazy that you can actually fully encode gifs inside the web browser.

36
00:02:35,670 --> 00:02:37,930
And check that out.  We'll have a link to it in the Show Notes,

37
00:02:37,930 --> 00:02:41,520
which you can get to in our iTunes feed, search for "The Treehouse Show,"

38
00:02:41,520 --> 00:02:44,870
or on YouTube at YouTube.com/gotreehouse.

39
00:02:46,000 --> 00:02:54,280
Next up is Portkit, which is this really cool set of UX metaphor equivalents for IOS and Android.

40
00:02:54,280 --> 00:02:59,470
So if you're designing, say, an iPhone app and you want to create the equivalent  

41
00:02:59,470 --> 00:03:03,900
UX on an Android device or on another version of IOS,

42
00:03:03,900 --> 00:03:07,510
you should definitely check this out.  So let's take a look at Portkit.

43
00:03:07,510 --> 00:03:12,760
I'm going to scroll down the page here.  And they have this UX Comparison Chart. 

44
00:03:12,760 --> 00:03:14,870
So on the left side they have IOS 7.  

45
00:03:14,870 --> 00:03:17,440
Then in the middle they have IOS 6.

46
00:03:17,440 --> 00:03:20,920
And on the right they have Android 4 and up.

47
00:03:20,920 --> 00:03:26,320
You can, of course, download PSDs here that will give you all of the UX elements,

48
00:03:26,320 --> 00:03:30,980
or you can go ahead and just compare the individual elements 

49
00:03:30,980 --> 00:03:34,120
that you want to take a look at.

50
00:03:34,120 --> 00:03:37,280
You can also go directly to the documentation.

51
00:03:37,280 --> 00:03:41,290
So say that you were creating this switch in IOS.

52
00:03:41,290 --> 00:03:44,950
You can look at the equivalent documentation for Android

53
00:03:44,950 --> 00:03:47,950
just by looking across the columns here.

54
00:03:47,950 --> 00:03:53,240
So they have all of the UI elements that you could possibly need,

55
00:03:53,240 --> 00:03:57,210
and they also have links to some pretty cool resources—

56
00:03:57,210 --> 00:04:00,420
there it is down at the bottom.  

57
00:04:00,420 --> 00:04:05,460
So definitely check that out if you're designing iPhone apps, Android apps

58
00:04:06,040 --> 00:04:08,050
and you want them to be cross-platform.

59
00:04:08,050 --> 00:04:11,140
Just check it out even if you're doing less or more than that too.

60
00:04:11,140 --> 00:04:14,670
Yeah.  Check it out no matter what.  >>Yeah, don't discriminate.  >>Yes.

61
00:04:14,670 --> 00:04:16,680
Next up we have a blog post called

62
00:04:16,680 --> 00:04:20,579
"What Every Web Developer Needs to Know about URL Encoding."

63
00:04:20,579 --> 00:04:25,010
Now, when you link to something, you know what you have is the URL.

64
00:04:25,010 --> 00:04:29,010
And encoding refers to changing the characters around just a little bit

65
00:04:29,010 --> 00:04:31,010
if you need to paste them somewhere else.

66
00:04:31,010 --> 00:04:34,150
As an example, if you're trying to link to a webpage

67
00:04:34,150 --> 00:04:39,760
and you want to set a parameter that has a space in it—like someone's full name—

68
00:04:39,760 --> 00:04:43,730
well, that space needs to be encoded because you can't have spaces in a URL.

69
00:04:43,730 --> 00:04:46,840
And that's where you have that nasty %20.

70
00:04:46,840 --> 00:04:49,840
>>Yeah.  See, Nick knows it off the top of his head.  >> Yep. 

71
00:04:49,840 --> 00:04:52,170
>>Just Tweet him if you need to know any of those characters.  << Yeah.

72
00:04:52,170 --> 00:04:54,670
But anyway, there's a great article that goes into

73
00:04:54,670 --> 00:04:57,830
everything that you would need to know about this.

74
00:04:57,830 --> 00:05:00,820
Now, there are things that are common pitfalls—

75
00:05:00,820 --> 00:05:07,200
what are the reserved characters, what are character encodings, using ASCII or UTF-8.

76
00:05:08,000 --> 00:05:11,600
So it goes through how to fix that as well as common mistakes.

77
00:05:11,600 --> 00:05:15,520
Anyway, there is probably a bit too much to go into right on the show here,

78
00:05:15,520 --> 00:05:17,730
but definitely check out the blog post,

79
00:05:17,730 --> 00:05:21,580
get a good idea of what's going on with URL encoding.  >>Very cool stuff.

80
00:05:21,580 --> 00:05:27,580
Well, as you may or may not know, HTML5 has introduced a number of new form elements.

81
00:05:27,580 --> 00:05:31,850
Of course, support for those form elements is a little bit shaky

82
00:05:31,850 --> 00:05:33,960
depending on which browser you're using.

83
00:05:33,960 --> 00:05:37,200
But fortunately, there's this really cool webpage

84
00:05:37,200 --> 00:05:40,430
that you can look at all the HTML5 elements in.

85
00:05:40,430 --> 00:05:45,350
And you can basically see what that looks like in your particular browser.

86
00:05:45,350 --> 00:05:49,710
So in this case, I'm using the latest version of Google Chrome.

87
00:05:49,710 --> 00:05:53,700
And so if I go ahead and scroll down the page here

88
00:05:53,700 --> 00:05:59,250
to something like input type=datetime-local,

89
00:05:59,250 --> 00:06:04,270
I can see, oh, look, that actually seems to work in my browser.

90
00:06:05,000 --> 00:06:08,870
You can also have a color picker here.  So it looks like that one works.

91
00:06:08,870 --> 00:06:15,100
There's also sliders here, which is input type=range.

92
00:06:15,100 --> 00:06:19,390
So there's a bunch of different form elements here

93
00:06:19,390 --> 00:06:25,530
that you may have not seen accept in the context of a jQuery plug-in or something like that.

94
00:06:26,410 --> 00:06:33,160
And it's good to know if it's okay to use those in the browser that you're targeting.

95
00:06:33,160 --> 00:06:36,480
Like I said, you should definitely check this out

96
00:06:36,480 --> 00:06:39,410
if you're planning to use HTML5 form elements

97
00:06:39,410 --> 00:06:43,300
and you're not sure if the browsers you're targeting supports them.

98
00:06:43,300 --> 00:06:46,050
And for more of an overview for that, you can go review 

99
00:06:46,050 --> 00:06:49,580
other episodes of "The Treehouse Show" where we've talked about this before.

100
00:06:49,580 --> 00:06:56,230
We have talked about HTML5 form elements quite a bit.  >>HTML5.  >>Bam.

101
00:06:56,230 --> 00:06:58,230
Next up we have an app called Prepros.

102
00:06:58,230 --> 00:07:04,710
This is an application where you can preprocess your CSS and JavaScript.

103
00:07:04,710 --> 00:07:08,260
Super easy to use and it is also cross-platform.

104
00:07:08,260 --> 00:07:11,750
So if we take a look at the Prepros website,

105
00:07:11,750 --> 00:07:16,320
it says, hey, preprocessing just got easier with Prepros.  This is what it looks like.

106
00:07:16,320 --> 00:07:19,250
So what you would do is grab your app, drag it in here

107
00:07:19,250 --> 00:07:24,580
or click that little plus sign, and then you can see the different items that you have in here.

108
00:07:24,580 --> 00:07:28,250
Now, this works with CoffeeScript, Sass, Jade, HAML,

109
00:07:28,250 --> 00:07:30,520
ton of different templating languages.

110
00:07:30,520 --> 00:07:35,470
And you can actually tell your web browser to reload live.

111
00:07:35,470 --> 00:07:38,850
It can optionally use the live reload plug-in.

112
00:07:38,850 --> 00:07:42,990
So this works on Windows and Mac cross-platform.

113
00:07:42,990 --> 00:07:45,670
Download it, totally free.  Check it out.

114
00:07:45,670 --> 00:07:50,120
And I think we should probably address what preprocessing actually is—

115
00:07:50,120 --> 00:07:54,130
Good call, Nick.  >>—for people that may not be quite—>>I always do this.

116
00:07:54,130 --> 00:07:56,130
—as hip as us.  >>I always do this.

117
00:07:56,930 --> 00:08:01,450
Basically preprocessing is just a way for you to make—

118
00:08:03,000 --> 00:08:07,890
it's basically a way to add features on top of things like CSS or JavaScript.

119
00:08:08,300 --> 00:08:13,680
So if you're writing CSS and you want to use, say, a variable,

120
00:08:13,680 --> 00:08:17,140
you can go ahead and do that in Sass or Les.

121
00:08:17,140 --> 00:08:24,530
And it will process that and output CSS that you can then include in your webpage.

122
00:08:24,530 --> 00:08:27,030
So it's a cool way to get some additional functionality

123
00:08:27,030 --> 00:08:30,830
that is not necessarily provided in the languages by default.

124
00:08:30,830 --> 00:08:33,530
Good explanation.  >>Thanks, Jason.

125
00:08:33,530 --> 00:08:38,860
Next up is Real Shadow, which is a piece of JavaScript

126
00:08:38,860 --> 00:08:42,820
that will make it really easy for you to generate shadows in the browser.

127
00:08:43,700 --> 00:08:48,270
So if we go ahead and take a look here, I'll mouse over these shadows here.

128
00:08:48,270 --> 00:08:50,900
And whoa!  >>Who—ho—hoa!  

129
00:08:50,900 --> 00:08:56,970
It actually casts these shadows as if there were real lighting.  >>Is your mouse daylight?

130
00:08:56,970 --> 00:09:01,520
It looks that way, but actually I imagine—I haven't looked at the code,

131
00:09:01,520 --> 00:09:07,720
but I imagine that this is using some sort of box shadow to generate these

132
00:09:07,720 --> 00:09:13,520
and just multiplying the shadow a number of times to actually make it cast there.

133
00:09:13,520 --> 00:09:19,750
So if you look at, say, this little red triangle here, and I move the mouse to the upper right,

134
00:09:19,750 --> 00:09:22,010
you can see that the shadow becomes longer.

135
00:09:22,010 --> 00:09:25,110
And it looks like there's multiple shadows being generated there

136
00:09:25,110 --> 00:09:27,110
and they're just being spread out.

137
00:09:27,110 --> 00:09:31,860
This is a plug-in for jQuery, but you can use it without jQuery.

138
00:09:31,860 --> 00:09:34,130
That was a recent addition that was made.

139
00:09:34,130 --> 00:09:38,650
If you scroll down here, you can see how to use it with jQuery,

140
00:09:38,650 --> 00:09:42,860
how to use it without jQuery, how to use it with Inset Shadows, 

141
00:09:42,860 --> 00:09:47,330
and you can even use it with a couple of other JavaScript libraries.

142
00:09:47,330 --> 00:09:52,740
You don't necessarily have to use it with jQuery.  So pretty nifty stuff.

143
00:09:52,740 --> 00:09:57,560
And if you're trying to do that on your own, it would be pretty difficult to do,

144
00:09:57,560 --> 00:10:00,940
so it's nice that somebody has already written the code for you.

145
00:10:00,940 --> 00:10:06,680
Next, we have a site called Good UI.  This is a site for good landing page design.

146
00:10:06,680 --> 00:10:10,810
That's good.  Because I hate it when people try to make bad UI.

147
00:10:10,810 --> 00:10:14,350
I'm glad somebody finally had the idea to make good UI.  >>Yeah, exactly.

148
00:10:14,350 --> 00:10:17,800
We had two submissions to the show this week—one was good UI, one was bad UI.  

149
00:10:17,800 --> 00:10:21,800
Guess which one we picked?  >>The good one.  >>Good UI.

150
00:10:21,800 --> 00:10:27,600
So this webpage actually has a ton of great tips when creating landing pages.

151
00:10:27,600 --> 00:10:31,720
So if you want to have high conversion rates and make your site easier to use,

152
00:10:31,720 --> 00:10:34,220
give all of these a try.

153
00:10:34,220 --> 00:10:38,290
So there's some great tips in here using a one-column layout instead of multi-columns.

154
00:10:38,290 --> 00:10:41,830
And you'll also notice that this site looks pretty great. 

155
00:10:41,830 --> 00:10:44,230
It's very easy to read.  It's very simple.

156
00:10:45,380 --> 00:10:49,740
So they actually go through and do all their own tips while they're showing you the page.

157
00:10:49,740 --> 00:10:54,550
They're saying, hey, give people a gift.  They're more likely to download your stuff.

158
00:10:54,550 --> 00:10:57,820
Merge similar functions instead of fragmenting your UI.

159
00:10:57,820 --> 00:11:02,040
As you build a site, you tend to add different elements to the page,

160
00:11:02,040 --> 00:11:05,550
and sometimes more than one of them can do pretty much the same thing.

161
00:11:05,550 --> 00:11:10,160
So you always want to be looking and seeing how you can simplify your webpages.

162
00:11:10,160 --> 00:11:13,130
Anyway, there's a ton of great tips in here.  Don't want to spoil it.

163
00:11:13,130 --> 00:11:16,450
You can find the link in the Show Notes.  And I recommend giving it a read.

164
00:11:16,450 --> 00:11:21,470
It really is a bunch of really good tips, not bad tips.  We don't want any of those.

165
00:11:21,470 --> 00:11:27,370
Yeah.  Really cool stuff.  Well, I am @NICKRP on Twitter.  >>And I am @JSEIFER.

166
00:11:27,370 --> 00:11:30,050
For more information on anything we talked about —including Show Notes—

167
00:11:30,050 --> 00:11:33,020
check out our YouTube channel at YouTube.com/gotreehouse.

168
00:11:33,020 --> 00:11:37,060
You can also find us in iTunes.  Search for "The Treehouse Show."

169
00:11:37,060 --> 00:11:40,340
And, of course, if you'd like to see more videos like this one

170
00:11:40,340 --> 00:11:44,520
about web design, web development, mobile development and so much more,

171
00:11:44,520 --> 00:11:48,040
be sure to check us out at teamtreehouse.com.

172
00:11:48,040 --> 00:11:52,800
Thanks so much for watching and we'll see you next week.

173
00:11:55,100 --> 00:11:57,810
[treehouse]

174
00:11:57,810 --> 00:12:01,270
If you'd like to see more advanced videos and tutorials like this one,

175
00:12:01,270 --> 00:12:05,240
go to teamtreehouse.com and start learning for free.

176
00:12:05,240 --> 00:12:25,660
[? music ?]