Episode 148: Web Design Trends, Sharing Buttons, Flexbox Techniques

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