Web Design Trends Moving Into 2015

Hey! Good morning Internet fans, it’s Ryan Perry with Simple Biz Support. Today is Thursday, therefore it’s Internet Marketing Thursday. It’s December 4th, it’s a little cold, it’s a little chilly, but fortunately I have Virginie Dorn with Business Website Center on the other end to warm things up today. Good morning Virginie!

Virginie Dorn: Good morning from Petaluma. How are you Ryan?

RP: I’m doing wonderful, thank you. I hope you had a fabulous Thanksgiving.

VD: Yes. Ate too much like everybody, but recuperating from it.

RP: It’s the American way. What are you going to do? Today we’re going to talk about website design and the fact that the website design has gone through a lot of… Website over the years has gone through a night and day difference and transition, but I think technology has changed website design in the fact that mobile devices… I’m starting to see more websites really built around mobile devices versus desktop websites being altered for mobile; it seems mobile is starting to dictate what a desktop website looks like these days. You’re going to go onto some great detail and one of the first things that we wanted to talk about was fonts, which I find interesting because I’m not a designer. So, the last thing I would ever think about are talking about fonts on a website. So, what’s going on with the latest trends as far as website design and fonts?

VD: As you know traditionally, fonts used on websites were limited to about a dozen of them, we call them web safe fonts. A couple of years ago Google Fonts came up, free library of fonts and all you are to do is add a very small piece of coding on the head of your web pages to link to those fonts from Google. Nowadays there are webkit fonts then actually opened the doors to any fonts you want on your website, is pretty much possible. Starting this year any fonts you want; cursive, crazy fonts, bazooka, you name it. They come in all shapes and fonts, are possible in your website, and that’s a new trend, and now designers are getting used to using them as actually a coded font instead of just being in images using Photoshop. So that has opened the doors to great design in terms of a text.

RP: Okay. You say great design, it also scares me because people that don’t understand great design but they have these plethora of fonts available… I can just see the header in our fonts, the sub-header, the H1 tag being a different font, the H2 tag being a different font. Then of course the paragraph is going to be a different font, let’s put the footer in a different font. Hopefully as a web designer obviously you know good font choice is very important. I don’t know. Do you typically limit a website to two, to three different fonts.

VD: Yes. Typically two fonts and then different variations of those fonts; maybe bold, different colored, different letter spacing, you name it. Two fonts max is plenty otherwise, it’s just like you said it becomes like a rainbow website. It just has no order, and are visually not appealing.

RP: Almost takes me back to the ’90s website with the flashing banners that are like, “See me, see me. I’m very obnoxious, see me, see me.” The key thing is a lot of font availability these days that maybe people aren’t aware of, and that’s where it’s really important if you’re talking about re-designing a website; talk to an expert versus just, “Oh I’ll just have Joe down the street, my cousin’s sister’s, nephew’s, best friend build a website for me.” Let’s not beat fonts up though, ’cause I know there is some other things that you want to talk about such as the change in menu. I know one of the big things for me is mobile devices just has the little box now that I’ve actually seen some come into the desktop side, where they don’t actually physically have a menu. Typically have your menu banner across, but it just has the little box that you have to click on it. Of course we were talking before the broadcast that you don’t want to make things difficult for the user, so maybe that’s not the best application. But I’m assuming you have some better applications as far as menus go.

VD: Yeah. Menus are great nowadays. It used to be you could do great menus but they would be incompatible with certain browsers; definitely not working on tablets or phones. Nowadays with new coding techniques you pretty much can do anything. So, I’m going to show you some samples of different menus. Screen share, let’s see. Are you seeing this one? No. Wrong one, sorry.

RP: That’s alright.

VD: How about this? No. I have multiple screens here, I have actually four screens. So, you have to forgive me.

RP: Go ahead and pick a screen, any screen.

VD: How about this one? Alright. Perfect. Do you see this one?

RP: I see it. It looks like your website although it’s different.

VD: Yeah. We’re in the process of re-designing our website, it’s been long overdue. Now taking care of customers first, so it always comes in… Gets put on the back burner. I want to show you different kind of menus. First of all nowadays you can have double menus, and as you scroll down you will see the very top header disappearing while the other one is staying put as you can see. This is very cool, it’s very user-friendly because you could allow yourself to have very long pages, but the menu is still there so people will get to see it the whole time.

VD: Another thing… You’re familiar with the standard drop down menu? Well, nowadays, we can do this expanded mega-menus and again, what’s new about them is they’re now compatible to mobile devices, when in fact we used to do them years ago, but they just didn’t work on phones.

RP: Right. Now so, under the “about us,” is that a… Can you put a picture in there or something then?

VD: Yes, you can put anything. You could put a video, you can put photos, you can put even a scrolling slideshow. There’s no limitation to what you can do with this mega menu. I would not suggest having them everywhere. So, for instance, here we have a standard menu of services, and here we have YWVWC. And we were thinking maybe doing some different links, maybe a testimonial, maybe a little video here that can be played upon clicking, or played upon displaying the menu.

RP: Very cool.

VD: Again, we talked about the collapsing menu. Another type of menu, as you can see from this one… It takes full usage of the screen. So, this particular screen is a 24 inch screen… As you can see, it expands from left to right, outside the width of a standard website, as you can see. What’s cool about it, it just makes it very, very neat on large screens. And if you resize it, like this will be your collapsing menu and so forth… So this is under construction. This is another item we are being able to do. Also something… As you can see… As I’m scrolling, I’m minimizing the height of the menu. So when I first start out, it’s fairly large, it has a big call to action in the bottom with a little pop-up here. But if I scroll down, I’m reducing it, because I still want it there, but I don’t want it to take that much real estate as I scroll down. So, those are some of the changes we have with menus.

RP: Alright, very cool. I like that mega menu and the other thing I liked was the pull-down that you had underneath the phone number, so you don’t actually have to go to the contact page, you can see a lot of information right there.

VD: Yes, there’s all kinds of ways… I’ll show you a different example of those too. So those are the cool pop-ups we also have available.

RP: Okay. Now, did you want to talk about background images and video then, or do you want to talk about pop-ups?

VD: No, let’s talk about background images. Nowadays, thanks to everybody having high speed interest, we can have high resolution images, but also, there are different coding techniques now, which allow us to display images of better resolution. So, we’ve talked in the past of parallax image… As you can see, I’m scrolling down here, the menu’s fixed, but you can see a peekaboo of the image and it disappear and you can see image on top of images. So this is parallax. But nowadays, again, with newer coding techniques, like HTML5, even for videos, we can go even further and we can actually have a background video image, just like this example. As you can see, I’m scrolling. The video is following my scroll. You can make it so it displays the video after a few seconds or it displays right on arrival. You can make it with sounds or no sounds. The limits are endless. You can even have the video background as parallax. This one is not. You can see it’s static and moves with my scroll. But this could be a parallax video if we wanted to.

RP: Alright, and when you mean parallax, then at that point the video… If this was a parallax set-up… The video would stay in the background and the page itself would move up over it?

VD: Exactly.

RP: Yeah. And I’m actually in the process of trying to figure out… One of the problems that I have is there’s so many options these days, so I’m in the process of redesigning my website, and I have decided to go with a video theme, ’cause a core part of my business is video marketing, I want a video-themed website. And the hard part is these days, is that there’s so many options., is just going, “Okay, let’s just do what we need to do to get the message across,” and come back to that KISS mentality of “Keep It Simple Stupid.” And it’s overwhelming so, kudos to you to be able to pull all this stuff together and make it beautiful.

VD: Well, thank you, that’s what we do, I guess. Everybody has their own expertise.

RP: Yes. Well, there’s a reason why I’m not a website designer.

VD: Let’s continue, guys. A couple more trends I would like to discuss today… Another one is scrolling, which activates action on your page, instead of clicking. So in the past, if you wanted to action, so you would either use some JavaScript or Flash, or you had to click on something in order to happen. Nowadays… And that’s what you were mentioning about the mobile devices now influencing desktop functionality and design; that’s exactly what it is. So, this is a website… It’s coming live very soon, so I’m going to show it to you. And as I’m scrolling down, you can see some elements arriving on the page. So, take a look at… So, we have four columns I’m going down… Already… Once it’s done it’s done. As you can see, the elements are arriving.

RP: Right.

VD: So those are cool little things. You can make it very subtle, so it gives it some interest without being too flashy, and it’s interesting when you try to convey maybe a 1-2-3 step, or some kind of call to action, and have it arrive in order of importance.

RP: Alright, very interesting. Now that does affect download time? Do you know, is the whole website loaded in the background? I’m thinking mobile devices, SEO, because Google wants a website to load very quickly, so if we’re limiting the amount of content that loads to only what’s visible, does that affect load time, or is it actually loading the entire site in the background?

VD: No, so it renders in steps for a desktop. On the mobile device version, typically we don’t have that effect, we just move the elements so they are on top of each other. So you just scroll with your little thumb, and you just see the elements one on top of each other, however visually appealing it needs to be. And the last item I’d like to discuss and that’s very cool, is pop-ups. I know they’re annoying. They were a thing of the past for a while, but now they are back, but they’re made very nice and intuitive. So, you mentioned earlier how you liked that little pop-up here.

RP: Mm-hmm.

VD: We love the slow ones there as well, very easy. But sometimes it’s kind of hard to tell people where to click, and you can make it either clickable or mouse over. So, I could have actually had something where I would just mouse over and will show it. Another type of pop-ups we do nowadays, maybe something on the side, as you can see here, there’s a mini-contact form. It’s available on every single page or I can even have addressed… So, if I go to, maybe the American flag section, you can see they’re still there. And we can make them move, see a little trick of the eyes here?

RP: Right.

VD: So, there is one.

RP: And this is all mobile-friendly also, correct? Or does that attribute just appear on a mobile device?

VD: No. It’s mobile-friendly. Depending on what the pop-up is, we make it a pop-up or a press, or something that comes upon arrival, but again, it depends on the site and what the pop-up is. Another version of pop-ups for instance, is for instance, we’re working on different versions of a contact form for this gentleman, and we have a pop-up form. So, if you wanted a clean page which primarily focused on his address, maybe some testimonial, as you can see there’s a pop-up inside Google Map here, we have a thing about to do a script. So here, you could click on the little indicator, and it gives you some text. And if you wanted to send an email, you click on “send an email”, and the pop-up arrives.

RP: Very cool.

VD: And there are so many ways to do it. This is some other examples. This is what I was showing you where you had a mega pop-up coming. What I like about those is we keep the integrity of the website behind, so you know you’re still on the website. We darken it, or we put some diagonal lines, but the focus is on the pop-up for sure.

RP: Alright.

VD: You can do it where the pop-up arrives this way, this will be a pop-up and comes from above, from below, something to the left. You can do tool tips, those are… They’ve been around for a long time, but nowadays they’re just nicer. With CSS free we’re about to style them in a way that is very visually appealing. You can have warning sign then show up on the top right, or top left, or in the middle of the page. Pretty much whatever you want to do is now possible, it’s incredible.

RP: Very cool. Well, with that, that unfortunately ends our time. We talked about the fact that fonts used to be very limited. You have a plethora of fonts pretty much, if it’s out there, it’s available as fonts go these days, for the most part?

VD: Yes.

RP: Okay. Menus? The mega menu…

RP: But know about other people, but very cool. Background images, I think that we’ve seen quite a big trend in 2014, background. I’m just now starting to see more and more sites incorporating video into their background. And that’s what I plan on doing, which is very exciting just from the bandwidth side of it, to being able to manage that and then have that video show up quickly and be responsive on a mobile device and a tablet is just very cool. And then of course, scrolling instead of clicking, and then some of these really cool pop-up things that you’re doing. And definitely the social media is an area where I’ve seen the pop-ups. But just having that little sub-menu I think is pretty cool, because I just got a Samsung tab… Rah, rah, rah, what is it? The little… It’s like an eight and a half inch tablet basically, and you swipe, and on the side is a menu of what your most common features are, so I think having that little flags on the left-hand side… Or on the right side like you did, maybe the contact us, or social media, where you have quick, easy access to information is very cool. And ultimately it’s going to make the end user experience better, which therefore is going to result in a better understanding of your business, increase sales, increase phone calls, everything that is going to incorporate a better brand image ultimately.

VD: I agree. The whole idea is to impress your visitors in three seconds or less. So whatever we can do to make that happen, that’s the goal.

RP: If there’s anybody who can impress a visitor in three seconds or less, it’s Virginia Dorn… Virginie Dorn, excuse me, with…

VD: That’s right.

RP: Business Website Center. As always, it’s always a pleasure speaking with you, Virginie. I appreciate your time and that’s the end of our episode. We’re going to come up with something fabulous and exciting for next week. And then I think we have two more episodes before the week of Christmas and we’re going to take that week off. And we might even have to take New Year’s off too, we’ll see what happens. But we’ll get the next two shows planned out for everybody and we’ll talk to you next Thursday. I hope you have a great day.


About the Author:

Ryan Perry is the founder and CEO of Simple Biz Support, Inc. Ryan started video blogging in 2009 as an alternative to written blogs to create visibility and credibility online. During the workweek, he enjoys helping small business owners harness the power of video to grow their companies. On the weekends, he enjoys hiking and searching out waterfalls throughout the state of California.

Leave A Comment