1
00:00:00,270 --> 00:00:01,040
I'm Nick Pettit.

2
00:00:01,040 --> 00:00:04,510
>> I'm Jason Seifer And you're watching
the Tree House Show, your weekly dose of

3
00:00:04,510 --> 00:00:08,050
internets where we talk about all things
web design, web development, and more.

4
00:00:08,050 --> 00:00:12,090
>> In this episode we'll be talking about
web design trends, sharing buttons,

5
00:00:12,090 --> 00:00:14,630
LexBox techniques and more.

6
00:00:14,630 --> 00:00:15,783
>> Let's check it out.

7
00:00:15,783 --> 00:00:20,942
[MUSIC]

8
00:00:20,942 --> 00:00:24,822
First up,
is seven future web design trends.

9
00:00:24,822 --> 00:00:27,010
>> So this blog post is from the future?

10
00:00:27,010 --> 00:00:32,350
>> They have looked into their crystal
ball and they have seen the future.

11
00:00:32,350 --> 00:00:35,330
>> So the future is today.

12
00:00:35,330 --> 00:00:37,760
>> Is tomorrow?

13
00:00:37,760 --> 00:00:42,400
>> If today were a blog post
from a month and half ago.

14
00:00:44,780 --> 00:00:48,600
>> The first one is,
Gestures are the new clicks.

15
00:00:48,600 --> 00:00:51,470
So if you remember not too long ago,

16
00:00:51,470 --> 00:00:55,330
we had to use our mouse cursors to come
all the way over to the scroll bar.

17
00:00:55,330 --> 00:00:57,276
>> Oh [LAUGH] I remember those days.

18
00:00:57,276 --> 00:00:58,407
>> Pull the scroll bar down.

19
00:00:58,407 --> 00:00:59,361
Oh, my gosh.
>> Oh, boy.

20
00:00:59,361 --> 00:01:00,562
I'm tired just thinking about that.

21
00:01:00,562 --> 00:01:03,401
>> Man, that is horrible to think about.

22
00:01:03,401 --> 00:01:05,922
>> Whew, take a break just looking
at this little animated GIF.

23
00:01:05,922 --> 00:01:11,262
>> It is so much easier to just
scroll down a web page now.

24
00:01:11,262 --> 00:01:14,042
And it just takes a couple of seconds.

25
00:01:14,042 --> 00:01:18,703
And when you're on your phone
it's actually easier to

26
00:01:18,703 --> 00:01:22,972
just scroll down the page
than it is to even click.

27
00:01:22,972 --> 00:01:27,052
And because of that, they're saying,
the fold really is dead this time.

28
00:01:27,052 --> 00:01:30,799
There's this concept of the fold
which comes from newspapers, and

29
00:01:30,799 --> 00:01:34,953
a lot of people in web design have talked
a lot about the fold for a long time.

30
00:01:34,953 --> 00:01:39,564
It's basically the bottom part
of a webpage that you can't see

31
00:01:39,564 --> 00:01:41,392
unless you scroll down.

32
00:01:41,392 --> 00:01:45,290
And they're saying well it's been
declared dead several times before.

33
00:01:45,290 --> 00:01:50,090
But now there really is
no need to worry about

34
00:01:50,090 --> 00:01:53,620
the fold because people can scroll so
easily now.

35
00:01:53,620 --> 00:01:56,620
It's the easiest thing
to do on a web page.

36
00:01:56,620 --> 00:01:58,750
Let's scroll down right now.

37
00:01:58,750 --> 00:02:02,030
Users are quicker and
websites are simplifying.

38
00:02:02,030 --> 00:02:05,750
That may seem obvious, but
basically people are not going

39
00:02:05,750 --> 00:02:09,680
to spend as much time on a website
as they have in the past.

40
00:02:09,680 --> 00:02:13,770
And they expect to be able to scan
information much more quickly.

41
00:02:13,770 --> 00:02:16,350
So you can't have a super
complicated webpage like this,

42
00:02:16,350 --> 00:02:19,210
with tons of text and
lots of stuff to click on.

43
00:02:19,210 --> 00:02:24,643
You would rather have something that's
very simple, just has nice, clean images,

44
00:02:24,643 --> 00:02:29,632
and attracts the user's attention in
maybe just a few different directions.

45
00:02:29,632 --> 00:02:31,452
Not a million different places.

46
00:02:31,452 --> 00:02:35,810
Anyway there's lots more cool stuff in
this article, so be sure to check it out.

47
00:02:35,810 --> 00:02:37,130
>> And it is from the future.

48
00:02:37,130 --> 00:02:37,980
>> It is.

49
00:02:37,980 --> 00:02:42,110
>> Next up, we have a simple
sharing buttons generator.

50
00:02:42,110 --> 00:02:46,510
So you've seen all of these different
social sharing buttons on web pages and

51
00:02:46,510 --> 00:02:52,230
generally they are created with JavaScript
CSS, and occasionally even IFrames.

52
00:02:52,230 --> 00:02:55,360
Now this website aims to
change that just a little bit

53
00:02:55,360 --> 00:02:57,680
by letting you generate your own.

54
00:02:57,680 --> 00:03:01,002
So we're going to use
the Flat Web Icon Set, and

55
00:03:01,002 --> 00:03:06,002
then we're gonna choose the networks
that we wanna be able to share on.

56
00:03:06,002 --> 00:03:09,294
And then we hit the Next
button right here.

57
00:03:09,294 --> 00:03:11,747
And I'm just gonna hit
the Next button again and

58
00:03:11,747 --> 00:03:13,800
look at this we get this live preview.

59
00:03:13,800 --> 00:03:17,635
Wow these look just like the buttons I'm
normally used to using that are made in

60
00:03:17,635 --> 00:03:22,890
JavaScript and maybe even use Font Awesome
or SVG icons or anything like that.

61
00:03:22,890 --> 00:03:23,735
What about these?

62
00:03:23,735 --> 00:03:25,890
No let's go ahead and
inspect this element.

63
00:03:25,890 --> 00:03:30,310
And when we do that notice this
is just a link and an image.

64
00:03:30,310 --> 00:03:31,440
Boom that's it.

65
00:03:31,440 --> 00:03:33,270
Now I know wow, look at that.

66
00:03:33,270 --> 00:03:35,260
Here is the future of web design.

67
00:03:35,260 --> 00:03:38,000
It is a link that doesn't use JavaScript.

68
00:03:38,000 --> 00:03:42,570
So what's actually very beneficial
about this is just that.

69
00:03:42,570 --> 00:03:47,290
This uses just a regular link and
inputs all of the information for you.

70
00:03:47,290 --> 00:03:50,560
Along with saying, hey, let's go ahead and
just share this on Facebook.

71
00:03:50,560 --> 00:03:54,110
>> And, see, now this is good because
the Reddit icon is right next to

72
00:03:54,110 --> 00:03:55,520
the LinkedIn icon.

73
00:03:55,520 --> 00:03:58,860
And an important tip that
I'd like to give is that

74
00:03:58,860 --> 00:04:02,240
it's always good to put your Reddit
username on your LinkedIn profile.

75
00:04:02,240 --> 00:04:04,120
And that way people can see
what you're really like.

76
00:04:04,120 --> 00:04:06,599
>> That, [LAUGH] that's not
a good tip at all, I think.

77
00:04:06,599 --> 00:04:07,999
>> Oh, no.

78
00:04:07,999 --> 00:04:13,459
>> [LAUGH] It's okay, we can just unsend
a lot of emails right after this show.

79
00:04:13,459 --> 00:04:14,420
>> Okay, all right.

80
00:04:14,420 --> 00:04:15,940
>> So anyway, very, very easy to use.

81
00:04:15,940 --> 00:04:20,006
Once you do that, go ahead and grab
the code, paste it into your webpage, and

82
00:04:20,006 --> 00:04:21,018
you are good to go.

83
00:04:21,018 --> 00:04:23,619
Now, there are a few different
styles to choose from.

84
00:04:23,619 --> 00:04:25,497
Not really too much to say here, but

85
00:04:25,497 --> 00:04:30,190
it's not gonna clutter up your webpages
with a bunch of extra CSS and JavaScript.

86
00:04:30,190 --> 00:04:31,900
So go ahead and check it out.

87
00:04:31,900 --> 00:04:32,540
>> Very nice stuff.

88
00:04:32,540 --> 00:04:37,860
Well next up is a blog post over on the
CSS-Tricks blog from Chris Coyier titled,

89
00:04:37,860 --> 00:04:42,710
Useful Flexbox Technique:
Alignment Shifting Wrapping.

90
00:04:42,710 --> 00:04:44,780
What is alignment shifting wrapping?

91
00:04:44,780 --> 00:04:48,700
>> That's when you rap about
alignment shifting, right?

92
00:04:48,700 --> 00:04:50,385
>> Not exactly, so.

93
00:04:50,385 --> 00:04:54,320
>> Like I could beatbox,
you rap about alignment shifting.

94
00:04:55,910 --> 00:04:58,390
>> I think we have a stew going here.

95
00:04:58,390 --> 00:04:59,110
Sounds like a good idea.

96
00:04:59,110 --> 00:05:02,395
All right, so [LAUGH] align-
>> It takes a lot to make a stew.

97
00:05:02,395 --> 00:05:05,270
>> [LAUGH] Alignment shifting wrapping.

98
00:05:05,270 --> 00:05:10,130
So here Chris ran into a situation where
he wants to have a main title, and

99
00:05:10,130 --> 00:05:13,160
then a subtitle right next to it.

100
00:05:13,160 --> 00:05:18,850
But the problem with something like this,
particularly on say a dynamic webpage,

101
00:05:18,850 --> 00:05:21,830
you don't necessarily know what
this title is going to be and

102
00:05:21,830 --> 00:05:23,950
how long the title will be.

103
00:05:23,950 --> 00:05:27,290
And you also don't know
what the subtitle might be.

104
00:05:27,290 --> 00:05:29,520
It could be of any length.

105
00:05:29,520 --> 00:05:34,660
And, then to top that all off, you
could also be looking at this on mobile

106
00:05:34,660 --> 00:05:39,560
devices, and these two titles could
be crunched together even further.

107
00:05:39,560 --> 00:05:40,640
So what do you do?

108
00:05:40,640 --> 00:05:45,560
Well, you might want something that
actually looks like this when it's on

109
00:05:45,560 --> 00:05:51,220
a smaller device or when the text is just
too long and takes up too much space.

110
00:05:51,220 --> 00:05:55,150
You have the title on top and
then the subtitle right below it.

111
00:05:55,150 --> 00:05:57,400
So how would you accomplish
something like this?

112
00:05:57,400 --> 00:06:00,350
Well, there's a couple
of different techniques.

113
00:06:00,350 --> 00:06:02,889
You could absolutely
position it to the right.

114
00:06:02,889 --> 00:06:05,282
You could float it to the right, or

115
00:06:05,282 --> 00:06:10,989
you could also Use a table which is really
maybe not the greatest idea out of those.

116
00:06:10,989 --> 00:06:14,508
But you could actually use FlexBox.

117
00:06:14,508 --> 00:06:19,887
And what Chris says is by making the title
a flex container with display flex and

118
00:06:19,887 --> 00:06:22,333
the title itself, flex-grow 1,

119
00:06:22,333 --> 00:06:26,460
it can push the subtitle all
the way over to the right.

120
00:06:26,460 --> 00:06:29,370
And because flex containers can wrap

121
00:06:29,370 --> 00:06:33,440
we can make sure that that's
happening with flex-wrap: wrap;.

122
00:06:33,440 --> 00:06:36,270
So what does that actually look like?

123
00:06:36,270 --> 00:06:38,680
Well, there's a little video here.

124
00:06:38,680 --> 00:06:39,880
Let's watch this.

125
00:06:39,880 --> 00:06:43,020
And this shows the first
three techniques mentioned.

126
00:06:43,020 --> 00:06:46,353
And then down at the bottom is FlexBox,
and

127
00:06:46,353 --> 00:06:51,198
it shows how FlexBox kind of
wins in this particular case.

128
00:06:51,198 --> 00:06:54,330
So see FlexBox just very
naturally does what it should,

129
00:06:54,330 --> 00:06:58,460
and the other techniques
really don't work at all.

130
00:06:58,460 --> 00:06:59,816
Really cool article.

131
00:06:59,816 --> 00:07:03,279
There's also a CodePen example here.

132
00:07:03,279 --> 00:07:07,733
So be sure to check this one out, because
it is kind of a common situation to want

133
00:07:07,733 --> 00:07:10,850
to have a title and
a subtitle right next to each other.

134
00:07:10,850 --> 00:07:13,660
And then,
what do you do when they're too long?

135
00:07:13,660 --> 00:07:14,990
Well, you can use FlexBox.

136
00:07:14,990 --> 00:07:17,680
>> I would like to see more wrapping
techniques on this show personally.

137
00:07:18,960 --> 00:07:20,420
Anyway, moving on.

138
00:07:20,420 --> 00:07:25,211
Next up, we answer the age old question
of how fast is fast enough for

139
00:07:25,211 --> 00:07:26,569
a webpage to load?

140
00:07:26,569 --> 00:07:29,210
And the answer is fast.

141
00:07:29,210 --> 00:07:31,930
Also it depends.

142
00:07:31,930 --> 00:07:36,450
So the question is what is the best user
experience, and when is it fast enough?

143
00:07:36,450 --> 00:07:38,570
What should we optimize?

144
00:07:38,570 --> 00:07:42,550
So the question becomes what
is the ideal page load time?

145
00:07:42,550 --> 00:07:46,190
Well, some experts
recommend 100 milliseconds.

146
00:07:46,190 --> 00:07:46,960
>> Question mark.

147
00:07:46,960 --> 00:07:48,790
>> Question mark?
>> I feel like this article is filled with

148
00:07:48,790 --> 00:07:49,690
questions so far.

149
00:07:49,690 --> 00:07:51,110
>> It is filled with questions.

150
00:07:51,110 --> 00:07:54,120
And then the answers come
after the questions because

151
00:07:54,120 --> 00:07:56,530
there would be no point
in answering before.

152
00:07:56,530 --> 00:08:00,050
Then you don't get to have people
read all of the questions.

153
00:08:00,050 --> 00:08:04,330
So the question is, okay, if you have
a webpage that loads in 100 milliseconds,

154
00:08:04,330 --> 00:08:06,290
1 second or 2 seconds, what happens?

155
00:08:06,290 --> 00:08:10,346
Well, that depends largely
on what your site does.

156
00:08:10,346 --> 00:08:12,010
Google, which is a search engine,

157
00:08:12,010 --> 00:08:16,716
found people bouncing the more time
was spent with a web page loading.

158
00:08:16,716 --> 00:08:21,630
However, an e-commerce site,
if it is a specialty site,

159
00:08:23,100 --> 00:08:27,440
users are more willing to wait for
the page to load.

160
00:08:27,440 --> 00:08:32,100
So the answer is Nick, I'm so glad you
asked, there is no single right answer.

161
00:08:33,180 --> 00:08:36,580
So what you need to do when
optimizing your site is measure.

162
00:08:36,580 --> 00:08:38,290
Measure absolutely everything.

163
00:08:38,290 --> 00:08:43,470
Now here is that specialty goods and
merchandise site I told you about.

164
00:08:43,470 --> 00:08:45,260
The bounce rate, as you can see,

165
00:08:45,260 --> 00:08:49,660
on the blue line is pretty
linear on the specialty site.

166
00:08:49,660 --> 00:08:52,420
But a general merchandise site, well,

167
00:08:52,420 --> 00:08:57,330
that has a lot higher of a bounce rate
the longer the page takes to load.

168
00:08:57,330 --> 00:08:59,750
So that becomes, hey okay,

169
00:08:59,750 --> 00:09:03,160
I'm a general merchandiser,
I need to optimize absolutely everything.

170
00:09:04,840 --> 00:09:08,250
Now here is conversion rate
verses page load TUT, so

171
00:09:08,250 --> 00:09:09,569
users are actually buying things.

172
00:09:11,070 --> 00:09:14,450
Again on the specialty site,
same rate and general merchandise,

173
00:09:14,450 --> 00:09:17,620
that goes down the longer
the page takes to load.

174
00:09:17,620 --> 00:09:20,720
So you also have to take into
account your sales funnel and

175
00:09:20,720 --> 00:09:22,710
actually quite a few more things.

176
00:09:22,710 --> 00:09:24,439
So I'm not gonna get into all this.

177
00:09:24,439 --> 00:09:26,898
But there are measuring
techniques that are on the site.

178
00:09:26,898 --> 00:09:30,233
And you should definitely check it out in
the show notes if you are looking into

179
00:09:30,233 --> 00:09:31,320
just optimizing a site.

180
00:09:31,320 --> 00:09:35,320
Because when you hear, okay, we gotta
make our site faster, how, where, why,

181
00:09:35,320 --> 00:09:37,300
where do you start?

182
00:09:37,300 --> 00:09:39,460
This post helps you
answer those questions.

183
00:09:39,460 --> 00:09:40,800
>> Good questions.

184
00:09:40,800 --> 00:09:44,540
Next up is a post on
the Codrops blog titled

185
00:09:44,540 --> 00:09:48,210
Card Expansion Effect with SVG clipPath.

186
00:09:48,210 --> 00:09:49,130
What is this?

187
00:09:49,130 --> 00:09:52,000
Well, there's a whole bunch of
code here but you know what?

188
00:09:52,000 --> 00:09:52,880
That's kind of boring.

189
00:09:52,880 --> 00:09:55,020
Let's just look at the demo.

190
00:09:55,020 --> 00:09:58,750
So here we have a couple of
different photographs and

191
00:09:58,750 --> 00:10:01,860
what happens when I click on one?

192
00:10:01,860 --> 00:10:02,670
Whoa!

193
00:10:02,670 --> 00:10:05,320
Are we on a webpage or in the future?

194
00:10:05,320 --> 00:10:08,040
So I can close that out and
it will reverse the effect.

195
00:10:09,080 --> 00:10:11,590
And there are three other effects here.

196
00:10:11,590 --> 00:10:12,920
So let's take a look at those.

197
00:10:12,920 --> 00:10:16,960
They have kind of
a polygonal effect there.

198
00:10:16,960 --> 00:10:18,270
>> A mild winter more.

199
00:10:18,270 --> 00:10:20,190
That was like an intense
tornado of effects.

200
00:10:21,610 --> 00:10:24,240
>> We'll go to demo three here.

201
00:10:25,300 --> 00:10:29,640
And see it swimming in the ocean so
pretty similar looking effect there but

202
00:10:29,640 --> 00:10:31,120
it's kinda neat.

203
00:10:31,120 --> 00:10:36,940
And then we've got one more here,
we'll take a look at.

204
00:10:36,940 --> 00:10:39,790
And this one is actually in color and

205
00:10:39,790 --> 00:10:43,884
it has sort of this
triangular shattering effect.

206
00:10:43,884 --> 00:10:48,764
It is pretty neat there and you can
actually do that in reverse as well.

207
00:10:48,764 --> 00:10:51,820
So, how the heck are they doing this?

208
00:10:51,820 --> 00:10:52,740
Well.

209
00:10:52,740 --> 00:10:54,690
>> It's actually a major motion picture,
right?

210
00:10:54,690 --> 00:11:01,540
Those aren't real articles or
elements or anything like that, right?

211
00:11:01,540 --> 00:11:07,170
>> Exactly, they're basically using this
really cool app I guess you could call it.

212
00:11:07,170 --> 00:11:11,590
It's called Trianglify and
basically it will generate these

213
00:11:11,590 --> 00:11:15,850
triangular backgrounds for
you but that's all it will do.

214
00:11:15,850 --> 00:11:19,324
You also need to use SVG,

215
00:11:19,324 --> 00:11:24,128
sorry the SVG clipPath property.

216
00:11:24,128 --> 00:11:28,393
So you could have used the CSS
clip-path property but

217
00:11:28,393 --> 00:11:35,190
you have to use the SVG clipPath one
to provide Internet Explorer 9 support.

218
00:11:35,190 --> 00:11:39,130
So they basically create these cards and

219
00:11:39,130 --> 00:11:43,320
then flip them around and
use image clip on them and

220
00:11:43,320 --> 00:11:48,230
the polygonal background and do a whole
bunch of code there as you can see.

221
00:11:48,230 --> 00:11:51,080
And they come up with
those really cool demos.

222
00:11:51,080 --> 00:11:54,400
So you just throw all
the ingredients together and then.

223
00:11:54,400 --> 00:11:55,670
>> And then just mash it around.

224
00:11:55,670 --> 00:11:58,570
>> Yup, and
then out comes the cake out of the oven.

225
00:11:58,570 --> 00:12:00,020
It's that simple.

226
00:12:00,020 --> 00:12:03,689
Actually, this is a pretty
complicated effect.

227
00:12:03,689 --> 00:12:06,249
But it is a very cool effect so
we wanted to show it to you.

228
00:12:06,249 --> 00:12:10,341
So if you want to learn how to do this,
be sure to check out the article and

229
00:12:10,341 --> 00:12:14,860
really go through their code because
it is very impressive, very nice stuff.

230
00:12:15,980 --> 00:12:20,120
Anyway, that is all we have time for
this week.

231
00:12:20,120 --> 00:12:21,289
I am @nickrp on Twitter.

232
00:12:21,289 --> 00:12:22,409
>> And I am @jseifer.

233
00:12:22,409 --> 00:12:24,271
For more information on
anything we talked about,

234
00:12:24,271 --> 00:12:26,490
make sure to check out the show
notes right below this video.

235
00:12:26,490 --> 00:12:30,289
Thank you everybody for watching and
we will see you next week.

236
00:12:30,289 --> 00:12:37,209
[MUSIC]