First Company Website with Webflow - Video Background, Animations, etc. integrated - Need Feedback

Community resources Show & Tell
1

Hey guys!

I quite worked some time on this website and now is the moment to present it to you…I know it’s not perfect but I think it’s on the right track. Totally frightened :fearful: I’m going to give you the link to the site and hope you can give me some feedback, advice and tips! :smile:

Under www.dicoso.de you can find my site. The company is in the field of digital solutions for different sectors. I’m going to add some more products next week.

Unfortunately the site is just german, but maybe you can give some general advice about the design, the pictures, animatons etc!

That would be very helpful!

Thank you very much in advance!!!
Robin

2 Likes
2

Hi @Robinho,

First, pretty cool site. :smile:

My first impression is that the initial page is wayyy too dark. I’d cut down on the amount of shading personally.

The Disclaimer page is kinda blank on the first forld http://www.dicoso.de/impressum.html

http://puu.sh/lhyJt/6db7b87889.jpg

That ‘loading screen’ is kinda cool but the colouring seems a bit harsh compared to the rest of the site. Seems to be too much blue when there is hardly any blue in the rest of the site. Feels disconnected.

This is what I mean by having way too much space:

http://puu.sh/lhyEp/f1e85f24b8.jpg

Hopefully that’s useful for you.

1 Like
3

Thank you very much for your feedback! It was very helpful!

I think you’re totally right that the initial page is to dark. Sadly that was one of my workarounds since I ran into problems with the video header background on larger screens. The video is not going to change size when the browser is scaled down… don’t know how to describe it better…maybe a image will help …

1271×718 533 KB

I thought the blue on the loading page will add some color to the page. I took this blue since I used it in the buttons, symbol and logo…but maybe you’re right. I’m going to try some other colors :blush:

4

I’ve nto used a video background yet but a quick search of the forums found this post, might be helpful?

http://forum.webflow.com/t/100-video-background-centered-video-possible/16985

1 Like
5

I don’t think that this would help me since my video is centered. I think the problem is, that my video is not resizing in a proper way. It tries to hold the 100% width…so when the browser gets smaller, the video is minimizing and changes the height as well, instead of zooming in or maybe cut the one side of the video.

6

Care to post up the public link, maybe I can fiddle with it for the heck of it and see.

7

https://preview.webflow.com/preview/dicoso4-4ce4e0d6c3461c7e79c052d718da522?preview=46afd7a181fb800564d82e746cb24de5

Of course! Here it is…I cross my fingers :sweat_smile:

8

Well, seems that it’s not an easy thing to fix. I would have to set a site up from scratch to see what happens.

My suggestion is to go through this thread 9http://forum.webflow.com/t/tutorial-how-to-add-a-background-video/1211/112) and if nothing there helps out, then post up your issues.

9

Hi Robinho,

Great work! Looks clean, easy to understand but still has a bit of character (love the video, I think it works really well with the dark gradient at the bottom and the filter over the top, it makes the text easy to read). I think the whole site worked perfectly in my opinion, the interactions are on point and it is responsive.

My only thing I would change… (and this may be out of your hands/not your job) is the logo! I just found it doesn’t go well with the site, and I didn’t like the loading animation (because of the logo, mainly!) and as @DragonDon said, it is a bit too blue.

Completely understand if you’re not involved in the company’s logo design, but I think they would really benefit from an update, even if it’s just a new typeface (could use Brandon Grotesque as in the site, would look nice!)

Anyway well done, really good work on the site and I’ll be remembering that darken filter trick on the video in the future!

Cheers,
Jamie

1 Like
10

Hi nice work!

I’m working so much with video background that I can’t help giving you my two cents (:

In some cases, we can see the lower edge of the video. From this viewport size:

http://vincent.polenordstudio.fr/snap/34hxk.jpg

to this viewport size:

http://vincent.polenordstudio.fr/snap/m5wk5.jpg

Also you must be aware that in tablet portrait mode, you’ll get the desktop breakpoint so the video bg won’t work.

For the video bg, you could make it extend all the way of the viewport. There’s 2 steps for that:

  • give the HTML Code Widget those properties:

http://vincent.polenordstudio.fr/snap/flbpz.jpg

  • and make sure the HTML code you put in gets the following min-width and min-height properties in the <video> tag (just after autoplay loop for example):

    style=“min-width:100%; min-height:100%;”

Doing so, the video will always take up all the room of the viewport. (Of course the parent element must have either:

  • 100vh and 100 vw, OR
  • width 100% and height 100% with the <body> element having height 100% as well)

Downside: the video won’t be centered in the viewport (in width). I’m working on some code to achieve this but it’s not yet perfect. Actully nowhere close to be acceptable yet (:

2 Likes
11

Thank you very much for your feedback! It’s really helpful and good to know that I reached some of my goals (clean and understandable design).

Yeah the logo is not really in my hand, but since it is a a relatively small company I could try to work on that. But it’s good to know and I will speak about this issue with the company.

And it seems to me that I really have to change the blue of the loading screen :sweat_smile:

Thank you very much for your time!
Robin

1 Like
12

Oh that’s so nice of you and I’m going to try your solutions immediately and give feedback! Hopefully it’s finally the solution for my problem :smiley:

13

@vincent Thank you so so much! It’s totally working - I’m so glad for your advice!!! But is there really no way of provide a proper background image instead of the video for tablets is portrait mode?

14

The only way I know to address this issue is to use a script to redirect anyone with a mobile OS to a copy of your homepage, specifically crafted for mobile… that’s not the solution you’re looking for I’m sure.

But here is the script nevertheless :smile:

<script>
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 window.location.replace("/mobile-page");
}
</script>

You have to

  • edit the /mobile-page prt with the name of your duplicated page.
  • paste the code in the second custom code section at page level
  • make sure you don’t leave the code in the duplicated page

http://vincent.polenordstudio.fr/snap/86ei4.jpg

But again, this is a solution for a one pager, but then you get 2 pages to maintain. I don’t always use it because the portrait tablet breakpoint is not very much used.

When I use it, I replace the video bg by animated gif I make from the video, keeping just a 1 to 1,5 second loop at around 350px/350px (gifs are heaaaavyyyy).

15

Yeah I think it’s not the solution for this project, but maybe for future projects.

The problem with the tablets and the mobiles, that they can’t play videos, is it because of the autoplay? Or is it maybe possible to provide a video that starts by clicking a play trigger, and in the time the video is not playing, it shows a preview picture of the video?

16

Mobiles will display a play button. No autostart.

Smartphones will also not play the video inline (within the content, as a background for instance) but fullscreen in a player.

This behavior can be acceptable for normal videos but not for background videos.

Hopefuly Webflow will address this breakpoint issue one day.

1 Like
17

Ok thanks for the explanation!

Now I used in my design an extra block/section for tablets and mobiles …so I just have to hope that the users hold their tablets vertical :laughing:

But nevertheless thank you for your time and help - you’re a webflow genius and I learned so much in your “Webflow Sandbox”! :blush:

18

If I was really a Webflow genius I’d grant you three Webflow wishes and you wouldn’t have any more breakpoint issue I assume :wink:

But thanks for the words I really appreciate (:

2 Likes
19

Hey,
Looks clean and well done for the most part. However, I think you should try to eliminate the loading screen if at all possible. There’s really no reason for a site (especially just a landing page like this) to ever have a loader in this day and age. One of the biggest reasons people navigate away from a site is if it takes too long to load. And this is true even within one or two seconds. Even with my good internet connection, I was on the loading screen for 2-3 seconds, which is easily enough for people to navigate away, and this would only be exacerbated if someone had a slower connection or was viewing on mobile.

20

Hello,

Simple and clean, good job. I’m not a fan of the logo though, but I understand its not in your hands. I’d definitely try to get them to update.

I would clean up the business card shadows on the home page… so they look a little more natural and clean. I’m not sure if the loading is part of the design, or if its needed. But it is a bit much for every page I visit, and revisit. I can be an easily annoyed site visitor myself, but not every visitor will be. So do what makes your client and visitors happy. Much success… and good luck.

Enjoy