Los Angeles, CA's Olympic Games bid website is BEAUTIFUL!

https://la24.org/

wow…just… wow.

8 Likes

ohhh my… it is breathtaking

Oh damn…

We need some on scroll interactions in Webflow, so that when you even scroll a little bit the interaction initiates.

1 Like
2 Likes

Oh wow. Beautiful. Loving the Get Involved section.

Edit: The Leadership page is a pain to navigate. I like the concept, but it’s not very efficient at finding someone and actually getting to their page. I do like the traveling (X) cursor.

pretty sweet. Looks like they are going all out.

Insanity, I freaking love it.

Ahh now now now, I saw this a few days ago and I have to say, not impressed! Yes it is damn slick and looks incredible, but it doesn’t work very well. At all.

I’m not a developer pro but I know when a site looks rubbish in mobile view:

They need some help from Webflow with responsivity haha.

I have seen a few websites on awwwards.com like this as well, and I think it is a shame as they look great… But I think that not being designed for devices is inexcusable. Or am I being too harsh?

Cheers,
Jamie

1 Like

I try to find the best joke here but I fall short :smiley:

What you could say is: “Their site doesn’t work on a very very tiny browser window on desktop”. Because if you test it on any device, the experience is flawless… and different.

Not all the websites have to be responsive. You can even say that the best case scenario for a website is NOT to be responsive—which means adaptative—but to provide a good experience for every device and the desktop. Sometimes the experience can be similar, sometimes it’s totally different, because what you chose for desktop doesn’t have a reason to transfer to mobile. If you rely on a lot of :hover behaviors for example, you’re good to invent a totally other experience for mobile.

So instead of relying on responsive breakpoints, this site redirects to another page for mobile, wether it detects a mobile OS or device—or another method, I quickly glanced at the code but couldn’t find it.

Using Webflow, it’s easy to do the same. You’ll find here in the forum multiple scripts to redirect to another page depending on OS. It works great. When you’re building a one pager, rather to fight and deprecate an experience for mobile, duplicate the page and adapt it for mobile… Webflow is great even for that :slight_smile:

When you do so, in addition to the redirect, and to avoid the experience you just had when you’ve resized the window, use the breakpoints on the desktop version to blank out the whole page and add a message saying that a whole special experience awaits the viewers on mobile, with maybe a link to the page if it transfers good to desktop with a tiny browser.

So I guess you can go back on Awwwwards but with your smartphone in hand this time :wink:

Edit: you can sometimes check the real device version with developers tools. But it doesn’t work everywhre. For example, Safari will show the desktop version in its Responsive Design Mode (because it’s supposed to address only the responsive aspects).

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

However, Chrome has a Device Mode, which sends the website fake infos about the client you’re using, so you can see exactly what’s crafted for devices. Here, it is set for iPhone 6:

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

This mode in Chrome is really neat, you can even configure a bad connection (green arrow)

7 Likes

I wish I could make websites as good looking as this :heart_eyes:

it takes a team to create something that beautiful. but yes. I would love to be a part of a project like that :slight_smile:

Haha well that’s me certainly told!

I didn’t know any of that, cheers @vincent I thought a site had to rely on breakpoints to be responsive. So does the redirect happen automatically or do you get a page when you visit the site on mobile saying ‘click here for our mobile site’?

I will definitely be using Chrome’s device mode in the future.

One last point though about the LA site. Personally, and this is just my opinion, I do think that from the outset an entire web design should be completely flexible and adapt to every browser size. I just find it a shame when I see a site like this that has been beautifully designed but doesn’t hold up when I reduce the size of my window. I also think it saves resources having one site that is flexible across all devices/window sizes, you don’t have to create a new one and redirect people to it on mobile.

Just my opinion and this ^ is fundamentally why I love Webflow, it does it all for me!

Ta,
Jamie

It’s not noticeable when you browse, unless you’re good at counting milliseconds :wink:

I used this method the first time on designer Dan Mazig’s website. I developed it for him using Webflow, and we ran into an issue: there is no mobile breakpoint for tablets landscape. tablets landscape default to the desktop view, and so it prevents you to make things or desktop that aren’t compatible with mobile, such as looping video bakgrounds.

So I asked @bartekkustra to help me with a script and he made me a JS script that I keep using now. The script is read and executed before the page has the chance to load and be shown. Try to browse www.danmazig.com on desktop and mobile, you’ll end up on a ifferent page on mobile but you’ll hardly notice.

Although the use case we’re talking about here (resizing your browser like crazy until it reaches ridiculous sizes) is only applying to us, webdesigners, a very small population, I think you’re right, they could have checked what happened in the browser when resizing. And even if they didn’t work the site to be responsive to that extents, they could have done a fun thing of masking everything and put an inspirational message… it’s in the details, as we say :slight_smile:

This, a hundred thousands times. Webflow is way more than a tremendous live editor. It made us free, free to concentrate only on design, free to have so much time available that we can address all the little aspects of a design. It’s a game changer. I’m seriously not going back. Would Webflow cease to exist, I’ll open a food truck or whatever, but I’m not going back writing code, learning pre-processors, listening to developers telling me again that this is not possible because blabla jquery version blabla, trying to find which one of the 55 wordpress plugins a client has installed is making the site break every five minutes, and so on, you name it :slightly_smiling:

2 Likes

Well put my man! I haven’t had to experience any of the horror of plugins jquery etc etc but that sounds horrific haha.

Best advert for Webflow I’ve heard yet. :smiley:

Not finished yet but here is my layout for the homepage of my website for my company I have been building on web flow.

I have managed to get full page.js working with side navigation and it should disable on mobile view.

I also added a cool feature to save trying to design in landscape which forces the user to rotate back to portrait.

Have a look, see what you think!

http://primalhealth-4e44886a44ce41b9bbe7477be7.webflow.io

J

2 Likes

@johndvv - glad you got it working. Looks awesome :slightly_smiling:

Did you find out what the issue was in the end? Just curious!

It was something to do with naming the the sections. When i removed everything and just left the part of code for the side navigation, fullpage kind of took care of the rest. I can copy and paste what I used if anyone is interested in using this style.

Check out

http://PepeprmintCloudz.com

Also designed this with FullPage.js.

I remeber I had a bunch of issues with it at first too. Especially on iOS devices. (If you have an iOS device i would love for you to make sure it isn’t broken again with various updates)!

Link doesn’t work? Interested to see other peoples work with fullpage.js though!

Speechless!
I want to be able to make a website like this :heart_eyes: