I'm Nick Pettit.

>> I'm Jason Seifer And you're watching the Tree House Show, your weekly dose of

internets where we talk about all things web design, web development, and more.

>> In this episode we'll be talking about web design trends, sharing buttons,

LexBox techniques and more.

>> Let's check it out.

[MUSIC]

First up, is seven future web design trends.

>> So this blog post is from the future?

>> They have looked into their crystal ball and they have seen the future.

>> So the future is today.

>> Is tomorrow?

>> If today were a blog post from a month and half ago.

>> The first one is, Gestures are the new clicks.

So if you remember not too long ago,

we had to use our mouse cursors to come all the way over to the scroll bar.

>> Oh [LAUGH] I remember those days.

>> Pull the scroll bar down.

Oh, my gosh. >> Oh, boy.

I'm tired just thinking about that.

>> Man, that is horrible to think about.

>> Whew, take a break just looking at this little animated GIF.

>> It is so much easier to just scroll down a web page now.

And it just takes a couple of seconds.

And when you're on your phone it's actually easier to

just scroll down the page than it is to even click.

And because of that, they're saying, the fold really is dead this time.

There's this concept of the fold which comes from newspapers, and

a lot of people in web design have talked a lot about the fold for a long time.

It's basically the bottom part of a webpage that you can't see

unless you scroll down.

And they're saying well it's been declared dead several times before.

But now there really is no need to worry about

the fold because people can scroll so easily now.

It's the easiest thing to do on a web page.

Let's scroll down right now.

Users are quicker and websites are simplifying.

That may seem obvious, but basically people are not going

to spend as much time on a website as they have in the past.

And they expect to be able to scan information much more quickly.

So you can't have a super complicated webpage like this,

with tons of text and lots of stuff to click on.

You would rather have something that's very simple, just has nice, clean images,

and attracts the user's attention in maybe just a few different directions.

Not a million different places.

Anyway there's lots more cool stuff in this article, so be sure to check it out.

>> And it is from the future.

>> It is.

>> Next up, we have a simple sharing buttons generator.

So you've seen all of these different social sharing buttons on web pages and

generally they are created with JavaScript CSS, and occasionally even IFrames.

Now this website aims to change that just a little bit

by letting you generate your own.

So we're going to use the Flat Web Icon Set, and

then we're gonna choose the networks that we wanna be able to share on.

And then we hit the Next button right here.

And I'm just gonna hit the Next button again and

look at this we get this live preview.

Wow these look just like the buttons I'm normally used to using that are made in

JavaScript and maybe even use Font Awesome or SVG icons or anything like that.

What about these?

No let's go ahead and inspect this element.

And when we do that notice this is just a link and an image.

Boom that's it.

Now I know wow, look at that.

Here is the future of web design.

It is a link that doesn't use JavaScript.

So what's actually very beneficial about this is just that.

This uses just a regular link and inputs all of the information for you.

Along with saying, hey, let's go ahead and just share this on Facebook.

>> And, see, now this is good because the Reddit icon is right next to

the LinkedIn icon.

And an important tip that I'd like to give is that

it's always good to put your Reddit username on your LinkedIn profile.

And that way people can see what you're really like.

>> That, [LAUGH] that's not a good tip at all, I think.

>> Oh, no.

>> [LAUGH] It's okay, we can just unsend a lot of emails right after this show.

>> Okay, all right.

>> So anyway, very, very easy to use.

Once you do that, go ahead and grab the code, paste it into your webpage, and

you are good to go.

Now, there are a few different styles to choose from.

Not really too much to say here, but

it's not gonna clutter up your webpages with a bunch of extra CSS and JavaScript.

So go ahead and check it out.

>> Very nice stuff.

Well next up is a blog post over on the CSS-Tricks blog from Chris Coyier titled,

Useful Flexbox Technique: Alignment Shifting Wrapping.

What is alignment shifting wrapping?

>> That's when you rap about alignment shifting, right?

>> Not exactly, so.

>> Like I could beatbox, you rap about alignment shifting.

>> I think we have a stew going here.

Sounds like a good idea.

All right, so [LAUGH] align- >> It takes a lot to make a stew.

>> [LAUGH] Alignment shifting wrapping.

So here Chris ran into a situation where he wants to have a main title, and

then a subtitle right next to it.

But the problem with something like this, particularly on say a dynamic webpage,

you don't necessarily know what this title is going to be and

how long the title will be.

And you also don't know what the subtitle might be.

It could be of any length.

And, then to top that all off, you could also be looking at this on mobile

devices, and these two titles could be crunched together even further.

So what do you do?

Well, you might want something that actually looks like this when it's on

a smaller device or when the text is just too long and takes up too much space.

You have the title on top and then the subtitle right below it.

So how would you accomplish something like this?

Well, there's a couple of different techniques.

You could absolutely position it to the right.

You could float it to the right, or

you could also Use a table which is really maybe not the greatest idea out of those.

But you could actually use FlexBox.

And what Chris says is by making the title a flex container with display flex and

the title itself, flex-grow 1,

it can push the subtitle all the way over to the right.

And because flex containers can wrap

we can make sure that that's happening with flex-wrap: wrap;.

So what does that actually look like?

Well, there's a little video here.

Let's watch this.

And this shows the first three techniques mentioned.

And then down at the bottom is FlexBox, and

it shows how FlexBox kind of wins in this particular case.

So see FlexBox just very naturally does what it should,

and the other techniques really don't work at all.

Really cool article.

There's also a CodePen example here.

So be sure to check this one out, because it is kind of a common situation to want

to have a title and a subtitle right next to each other.

And then, what do you do when they're too long?

Well, you can use FlexBox.

>> I would like to see more wrapping techniques on this show personally.

Anyway, moving on.

Next up, we answer the age old question of how fast is fast enough for

a webpage to load?

And the answer is fast.

Also it depends.

So the question is what is the best user experience, and when is it fast enough?

What should we optimize?

So the question becomes what is the ideal page load time?

Well, some experts recommend 100 milliseconds.

>> Question mark.

>> Question mark? >> I feel like this article is filled with

questions so far.

>> It is filled with questions.

And then the answers come after the questions because

there would be no point in answering before.

Then you don't get to have people read all of the questions.

So the question is, okay, if you have a webpage that loads in 100 milliseconds,

1 second or 2 seconds, what happens?

Well, that depends largely on what your site does.

Google, which is a search engine,

found people bouncing the more time was spent with a web page loading.

However, an e-commerce site, if it is a specialty site,

users are more willing to wait for the page to load.

So the answer is Nick, I'm so glad you asked, there is no single right answer.

So what you need to do when optimizing your site is measure.

Measure absolutely everything.

Now here is that specialty goods and merchandise site I told you about.

The bounce rate, as you can see,

on the blue line is pretty linear on the specialty site.

But a general merchandise site, well,

that has a lot higher of a bounce rate the longer the page takes to load.

So that becomes, hey okay,

I'm a general merchandiser, I need to optimize absolutely everything.

Now here is conversion rate verses page load TUT, so

users are actually buying things.

Again on the specialty site, same rate and general merchandise,

that goes down the longer the page takes to load.

So you also have to take into account your sales funnel and

actually quite a few more things.

So I'm not gonna get into all this.

But there are measuring techniques that are on the site.

And you should definitely check it out in the show notes if you are looking into

just optimizing a site.

Because when you hear, okay, we gotta make our site faster, how, where, why,

where do you start?

This post helps you answer those questions.

>> Good questions.

Next up is a post on the Codrops blog titled

Card Expansion Effect with SVG clipPath.

What is this?

Well, there's a whole bunch of code here but you know what?

That's kind of boring.

Let's just look at the demo.

So here we have a couple of different photographs and

what happens when I click on one?

Whoa!

Are we on a webpage or in the future?

So I can close that out and it will reverse the effect.

And there are three other effects here.

So let's take a look at those.

They have kind of a polygonal effect there.

>> A mild winter more.

That was like an intense tornado of effects.

>> We'll go to demo three here.

And see it swimming in the ocean so pretty similar looking effect there but

it's kinda neat.

And then we've got one more here, we'll take a look at.

And this one is actually in color and

it has sort of this triangular shattering effect.

It is pretty neat there and you can actually do that in reverse as well.

So, how the heck are they doing this?

Well.

>> It's actually a major motion picture, right?

Those aren't real articles or elements or anything like that, right?

>> Exactly, they're basically using this really cool app I guess you could call it.

It's called Trianglify and basically it will generate these

triangular backgrounds for you but that's all it will do.

You also need to use SVG,

sorry the SVG clipPath property.

So you could have used the CSS clip-path property but

you have to use the SVG clipPath one to provide Internet Explorer 9 support.

So they basically create these cards and

then flip them around and use image clip on them and

the polygonal background and do a whole bunch of code there as you can see.

And they come up with those really cool demos.

So you just throw all the ingredients together and then.

>> And then just mash it around.

>> Yup, and then out comes the cake out of the oven.

It's that simple.

Actually, this is a pretty complicated effect.

But it is a very cool effect so we wanted to show it to you.

So if you want to learn how to do this, be sure to check out the article and

really go through their code because it is very impressive, very nice stuff.

Anyway, that is all we have time for this week.

I am @nickrp on Twitter.

>> And I am @jseifer.

For more information on anything we talked about,

make sure to check out the show notes right below this video.

Thank you everybody for watching and we will see you next week.

[MUSIC]