Streaming live at 10am (PST)

Airbnb - Responsive Rebuild


#1

I did a complete responsive rebuild of the Airbnb property page, just for fun. I've been using Webflow for a few years now, but this is a great way to learn. There are still some wonky things happening that I'm still trying to work out.

As much as I like the design aesthetic of Airbnb, I noticed some weird responsive things they are doing with position of elements. I don't think I would have noticed without having gone through this exercise. For example, they have the price/CTA appear in different places for desktop, tablet and mobile. This was really hard to deal with from a responsive POV.

I felt like I did A LOT of trickery to get the sticky navigations to work across each breakpoint, but I'm happy with the results. I also seem to labor over naming conventions, especially when you have divs inside of divs inside of divs. I usually use "wrapper" and "container", but I'd love to hear any suggestions on better site structure and naming conventions.

Also, it would be great if Webflow had a built-in date picker (Ahem @PixelGeek :wink:)

All in all, I'm loving Webflow and it has absolutely made me a better design thinker.


#2

Very nice rebuild @spoulos

I also think it is a great way to learn Webflow (and code).

I use the exact same name as you concerning classes of divs inside divs :slight_smile:. I would also love to read any suggestions relative to classes naming conventions.

Are you still working on this site? I checked it on an Iphone and the content is "floating" you might want to take a look at your overflows. But very nice work overall!

Best,

Blaise


#3

Great site. Looks like there are some overflow issues, should check those out.


#4

Yes! I can't seem to figure out what's causing that. I believe it's the Slider component?


#5

Looking at the site on mobile device, Nice work, well done....

How do you get that Nav bar to fix at the top as you scroll, great feature that and I would like to give it a go on my site.

I also see the overflow on mobile (IPhone 6s plus)

Thanks


#6

Impressive job!

You should send it over to them to have a look at.


#7

Thanks for the kind comments. I'm still trying to figure out how to fix overflow issue! :thinking:

As for the sticky nav bar... this is fairly simple. Usually I create a symbol of whatever it I want to appear in a few places, and then place that symbol within a div wrapper on the page and then a second instance of that symbol within a hidden div wrapper (usually at the top or the bottom).

So when the default div wrapper scrolls off the page, it triggers the hidden div to display flex. And then when the default div scrolls into view, it triggers the hidden div to display none.

I'm sure there are youtube tutorials on this.

:v:t3:


#8

Nice one, that's I will give that a go, wish me luck


#9

Hi @RoseWebStudio, quick pro tip, to find overflow, open the site in read only mode, using your own read-only link: http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Then on each viewport, see if you can scroll from right to left. If you can, start deleting site elements, starting at the END of the elements in the navigator, i.e. start from the footer. Delete elements one by one in Read only mode until you find the element that causes the overflow.

You will know when you have found the element causing the overflow, because as soon as that element is deleted, the overflow goes away. Simply click on the "UNDO" button to restore the last element deleted and inspect that class on that element.

Repeat process on all views, until all overflow is found, works everytime.

Also, for interactions that start hidden and move left or right onto the body, make sure the starting initial appearance for the element involved in the interaction, is set to Display None. The first step of the interaction to show the element, would be Display Block, or Flex, etc.

Since you are in read-only mode, you can reload the site many times to check things out, and deleting the elements won't hurt the actual design, until you find out where the overflow is to correct that.

I hope this helps!


#10

@cyberdave Thanks. I did exactly this and identified the sections that were causing the overflow. However, I can't seem to eliminate the issue by making sure those elements are set to Overflow/None.


#11

@cyberdave Nevermind, I found the culprit. I had included these empty/hidden divs above each section with negative margin to act as the targets for my anchor links. Which BTW, I'm not sure if this is the proper workaround for this? Because I have sticky navigation at the top of the page, I needed to compensate for the 50 pixels that the sticky nav covers up.


#12

Really great job on this! I agree this is a perfect way to get better at building sites, you get a free pick at the brain of other developers/designers and why they have done things in certain ways.

On the naming conventions, there are whole books on this topic... But I find there are some good methodologies you can apply, I personally favor a BEM'ish approach, it makes your HTML more readable and semantic, same goes for the css, and it kinda forces you to think better about structuring things.

That said this is just a methodology, I don't always follow this to the letter - but it's a nice guide to help you along.
read more about it: http://getbem.com/introduction/

Best,
Sidney


#13

This is great info. Thanks @SidneyOttelohe


#14

Awesome job. You've done some nice work here :slight_smile:
I really want to get better at mobile layouts above and beyond just the standard responsive techniques. e.g. re-designing certain panels that really need to be re-designed for mobile use. Certain panels display on desktop only and then re-built to display on mobile devices. My only concern is the amount of extra code that the page needs to load??


#15

Hatsoff with the build, amazing job.


#16

Wow, this is actually pretty cool. Last time I was looking for overflow elements I spent like 15 minutes looking for that b*tch! Thank you.


#17

#18

#19