You've already started watching Episode 148: Web Design Trends, Sharing Buttons, Flexbox Techniques
In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about the latest in web design, web development, html5, front end development, and more.
-
0:00
I'm Nick Pettit.
-
0:01
>> I'm Jason Seifer And you're watching the Tree House Show, your weekly dose of
-
0:04
internets where we talk about all things web design, web development, and more.
-
0:08
>> In this episode we'll be talking about web design trends, sharing buttons,
-
0:12
LexBox techniques and more.
-
0:14
>> Let's check it out.
-
0:15
[MUSIC]
-
0:20
First up, is seven future web design trends.
-
0:24
>> So this blog post is from the future?
-
0:27
>> They have looked into their crystal ball and they have seen the future.
-
0:32
>> So the future is today.
-
0:35
>> Is tomorrow?
-
0:37
>> If today were a blog post from a month and half ago.
-
0:44
>> The first one is, Gestures are the new clicks.
-
0:48
So if you remember not too long ago,
-
0:51
we had to use our mouse cursors to come all the way over to the scroll bar.
-
0:55
>> Oh [LAUGH] I remember those days.
-
0:57
>> Pull the scroll bar down.
-
0:58
Oh, my gosh. >> Oh, boy.
-
0:59
I'm tired just thinking about that.
-
1:00
>> Man, that is horrible to think about.
-
1:03
>> Whew, take a break just looking at this little animated GIF.
-
1:05
>> It is so much easier to just scroll down a web page now.
-
1:11
And it just takes a couple of seconds.
-
1:14
And when you're on your phone it's actually easier to
-
1:18
just scroll down the page than it is to even click.
-
1:22
And because of that, they're saying, the fold really is dead this time.
-
1:27
There's this concept of the fold which comes from newspapers, and
-
1:30
a lot of people in web design have talked a lot about the fold for a long time.
-
1:34
It's basically the bottom part of a webpage that you can't see
-
1:39
unless you scroll down.
-
1:41
And they're saying well it's been declared dead several times before.
-
1:45
But now there really is no need to worry about
-
1:50
the fold because people can scroll so easily now.
-
1:53
It's the easiest thing to do on a web page.
-
1:56
Let's scroll down right now.
-
1:58
Users are quicker and websites are simplifying.
-
2:02
That may seem obvious, but basically people are not going
-
2:05
to spend as much time on a website as they have in the past.
-
2:09
And they expect to be able to scan information much more quickly.
-
2:13
So you can't have a super complicated webpage like this,
-
2:16
with tons of text and lots of stuff to click on.
-
2:19
You would rather have something that's very simple, just has nice, clean images,
-
2:24
and attracts the user's attention in maybe just a few different directions.
-
2:29
Not a million different places.
-
2:31
Anyway there's lots more cool stuff in this article, so be sure to check it out.
-
2:35
>> And it is from the future.
-
2:37
>> It is.
-
2:37
>> Next up, we have a simple sharing buttons generator.
-
2:42
So you've seen all of these different social sharing buttons on web pages and
-
2:46
generally they are created with JavaScript CSS, and occasionally even IFrames.
-
2:52
Now this website aims to change that just a little bit
-
2:55
by letting you generate your own.
-
2:57
So we're going to use the Flat Web Icon Set, and
-
3:01
then we're gonna choose the networks that we wanna be able to share on.
-
3:06
And then we hit the Next button right here.
-
3:09
And I'm just gonna hit the Next button again and
-
3:11
look at this we get this live preview.
-
3:13
Wow these look just like the buttons I'm normally used to using that are made in
-
3:17
JavaScript and maybe even use Font Awesome or SVG icons or anything like that.
-
3:22
What about these?
-
3:23
No let's go ahead and inspect this element.
-
3:25
And when we do that notice this is just a link and an image.
-
3:30
Boom that's it.
-
3:31
Now I know wow, look at that.
-
3:33
Here is the future of web design.
-
3:35
It is a link that doesn't use JavaScript.
-
3:38
So what's actually very beneficial about this is just that.
-
3:42
This uses just a regular link and inputs all of the information for you.
-
3:47
Along with saying, hey, let's go ahead and just share this on Facebook.
-
3:50
>> And, see, now this is good because the Reddit icon is right next to
-
3:54
the LinkedIn icon.
-
3:55
And an important tip that I'd like to give is that
-
3:58
it's always good to put your Reddit username on your LinkedIn profile.
-
4:02
And that way people can see what you're really like.
-
4:04
>> That, [LAUGH] that's not a good tip at all, I think.
-
4:06
>> Oh, no.
-
4:07
>> [LAUGH] It's okay, we can just unsend a lot of emails right after this show.
-
4:13
>> Okay, all right.
-
4:14
>> So anyway, very, very easy to use.
-
4:15
Once you do that, go ahead and grab the code, paste it into your webpage, and
-
4:20
you are good to go.
-
4:21
Now, there are a few different styles to choose from.
-
4:23
Not really too much to say here, but
-
4:25
it's not gonna clutter up your webpages with a bunch of extra CSS and JavaScript.
-
4:30
So go ahead and check it out.
-
4:31
>> Very nice stuff.
-
4:32
Well next up is a blog post over on the CSS-Tricks blog from Chris Coyier titled,
-
4:37
Useful Flexbox Technique: Alignment Shifting Wrapping.
-
4:42
What is alignment shifting wrapping?
-
4:44
>> That's when you rap about alignment shifting, right?
-
4:48
>> Not exactly, so.
-
4:50
>> Like I could beatbox, you rap about alignment shifting.
-
4:55
>> I think we have a stew going here.
-
4:58
Sounds like a good idea.
-
4:59
All right, so [LAUGH] align- >> It takes a lot to make a stew.
-
5:02
>> [LAUGH] Alignment shifting wrapping.
-
5:05
So here Chris ran into a situation where he wants to have a main title, and
-
5:10
then a subtitle right next to it.
-
5:13
But the problem with something like this, particularly on say a dynamic webpage,
-
5:18
you don't necessarily know what this title is going to be and
-
5:21
how long the title will be.
-
5:23
And you also don't know what the subtitle might be.
-
5:27
It could be of any length.
-
5:29
And, then to top that all off, you could also be looking at this on mobile
-
5:34
devices, and these two titles could be crunched together even further.
-
5:39
So what do you do?
-
5:40
Well, you might want something that actually looks like this when it's on
-
5:45
a smaller device or when the text is just too long and takes up too much space.
-
5:51
You have the title on top and then the subtitle right below it.
-
5:55
So how would you accomplish something like this?
-
5:57
Well, there's a couple of different techniques.
-
6:00
You could absolutely position it to the right.
-
6:02
You could float it to the right, or
-
6:05
you could also Use a table which is really maybe not the greatest idea out of those.
-
6:10
But you could actually use FlexBox.
-
6:14
And what Chris says is by making the title a flex container with display flex and
-
6:19
the title itself, flex-grow 1,
-
6:22
it can push the subtitle all the way over to the right.
-
6:26
And because flex containers can wrap
-
6:29
we can make sure that that's happening with flex-wrap: wrap;.
-
6:33
So what does that actually look like?
-
6:36
Well, there's a little video here.
-
6:38
Let's watch this.
-
6:39
And this shows the first three techniques mentioned.
-
6:43
And then down at the bottom is FlexBox, and
-
6:46
it shows how FlexBox kind of wins in this particular case.
-
6:51
So see FlexBox just very naturally does what it should,
-
6:54
and the other techniques really don't work at all.
-
6:58
Really cool article.
-
6:59
There's also a CodePen example here.
-
7:03
So be sure to check this one out, because it is kind of a common situation to want
-
7:07
to have a title and a subtitle right next to each other.
-
7:10
And then, what do you do when they're too long?
-
7:13
Well, you can use FlexBox.
-
7:14
>> I would like to see more wrapping techniques on this show personally.
-
7:18
Anyway, moving on.
-
7:20
Next up, we answer the age old question of how fast is fast enough for
-
7:25
a webpage to load?
-
7:26
And the answer is fast.
-
7:29
Also it depends.
-
7:31
So the question is what is the best user experience, and when is it fast enough?
-
7:36
What should we optimize?
-
7:38
So the question becomes what is the ideal page load time?
-
7:42
Well, some experts recommend 100 milliseconds.
-
7:46
>> Question mark.
-
7:46
>> Question mark? >> I feel like this article is filled with
-
7:48
questions so far.
-
7:49
>> It is filled with questions.
-
7:51
And then the answers come after the questions because
-
7:54
there would be no point in answering before.
-
7:56
Then you don't get to have people read all of the questions.
-
8:00
So the question is, okay, if you have a webpage that loads in 100 milliseconds,
-
8:04
1 second or 2 seconds, what happens?
-
8:06
Well, that depends largely on what your site does.
-
8:10
Google, which is a search engine,
-
8:12
found people bouncing the more time was spent with a web page loading.
-
8:16
However, an e-commerce site, if it is a specialty site,
-
8:23
users are more willing to wait for the page to load.
-
8:27
So the answer is Nick, I'm so glad you asked, there is no single right answer.
-
8:33
So what you need to do when optimizing your site is measure.
-
8:36
Measure absolutely everything.
-
8:38
Now here is that specialty goods and merchandise site I told you about.
-
8:43
The bounce rate, as you can see,
-
8:45
on the blue line is pretty linear on the specialty site.
-
8:49
But a general merchandise site, well,
-
8:52
that has a lot higher of a bounce rate the longer the page takes to load.
-
8:57
So that becomes, hey okay,
-
8:59
I'm a general merchandiser, I need to optimize absolutely everything.
-
9:04
Now here is conversion rate verses page load TUT, so
-
9:08
users are actually buying things.
-
9:11
Again on the specialty site, same rate and general merchandise,
-
9:14
that goes down the longer the page takes to load.
-
9:17
So you also have to take into account your sales funnel and
-
9:20
actually quite a few more things.
-
9:22
So I'm not gonna get into all this.
-
9:24
But there are measuring techniques that are on the site.
-
9:26
And you should definitely check it out in the show notes if you are looking into
-
9:30
just optimizing a site.
-
9:31
Because when you hear, okay, we gotta make our site faster, how, where, why,
-
9:35
where do you start?
-
9:37
This post helps you answer those questions.
-
9:39
>> Good questions.
-
9:40
Next up is a post on the Codrops blog titled
-
9:44
Card Expansion Effect with SVG clipPath.
-
9:48
What is this?
-
9:49
Well, there's a whole bunch of code here but you know what?
-
9:52
That's kind of boring.
-
9:52
Let's just look at the demo.
-
9:55
So here we have a couple of different photographs and
-
9:58
what happens when I click on one?
-
10:01
Whoa!
-
10:02
Are we on a webpage or in the future?
-
10:05
So I can close that out and it will reverse the effect.
-
10:09
And there are three other effects here.
-
10:11
So let's take a look at those.
-
10:12
They have kind of a polygonal effect there.
-
10:16
>> A mild winter more.
-
10:18
That was like an intense tornado of effects.
-
10:21
>> We'll go to demo three here.
-
10:25
And see it swimming in the ocean so pretty similar looking effect there but
-
10:29
it's kinda neat.
-
10:31
And then we've got one more here, we'll take a look at.
-
10:36
And this one is actually in color and
-
10:39
it has sort of this triangular shattering effect.
-
10:43
It is pretty neat there and you can actually do that in reverse as well.
-
10:48
So, how the heck are they doing this?
-
10:51
Well.
-
10:52
>> It's actually a major motion picture, right?
-
10:54
Those aren't real articles or elements or anything like that, right?
-
11:01
>> Exactly, they're basically using this really cool app I guess you could call it.
-
11:07
It's called Trianglify and basically it will generate these
-
11:11
triangular backgrounds for you but that's all it will do.
-
11:15
You also need to use SVG,
-
11:19
sorry the SVG clipPath property.
-
11:24
So you could have used the CSS clip-path property but
-
11:28
you have to use the SVG clipPath one to provide Internet Explorer 9 support.
-
11:35
So they basically create these cards and
-
11:39
then flip them around and use image clip on them and
-
11:43
the polygonal background and do a whole bunch of code there as you can see.
-
11:48
And they come up with those really cool demos.
-
11:51
So you just throw all the ingredients together and then.
-
11:54
>> And then just mash it around.
-
11:55
>> Yup, and then out comes the cake out of the oven.
-
11:58
It's that simple.
-
12:00
Actually, this is a pretty complicated effect.
-
12:03
But it is a very cool effect so we wanted to show it to you.
-
12:06
So if you want to learn how to do this, be sure to check out the article and
-
12:10
really go through their code because it is very impressive, very nice stuff.
-
12:15
Anyway, that is all we have time for this week.
-
12:20
I am @nickrp on Twitter.
-
12:21
>> And I am @jseifer.
-
12:22
For more information on anything we talked about,
-
12:24
make sure to check out the show notes right below this video.
-
12:26
Thank you everybody for watching and we will see you next week.
-
12:30
[MUSIC]
You need to sign up for Treehouse in order to download course files.
Sign up