Hi,
my name is Joe, I’m from the UK. I’m not a coder - I have a passing knowledge of HTML and CSS, but my background is in digital illustration and 2D animation.
I’m new to Webflow, and I’m feeling overwhelmed by the number of ways of doing things. I want to keep this simple in the hopes of getting some useful feedback.
I’m trying to create some simple web pages that tell stories. Users will scroll down, and read some text elements while illustrative elements scroll past and provide simple animated cues.
Because my background is in illustration, where I can lay out images and text on a page in any way I like, I’m struggling with the number of different ways to lay out information. - do I use flex, do I use grid, do I use containers, div blocks etc etc.
So my question is, if I want to create a web page as described above, and I want it to be responsive in the simplest way (ie simply everything scales down to fit the width of the viewport), can anyone give me any pointers on which elements I should use?
I’m not including a site link because there’s very little to see! But in terms of what I’m trying to achieve, the page from the parallax on scroll tutorial is a good start.
https://preview.webflow.com/preview/parallax-movement-on-scroll?preview=12c1d0749077ddc42bd697298add0b4c
I’ve had a go at picking it apart and there’s even a proper tutorial with it (the old UI version), so it feels like the right starting point, except for one thing - it doesn’t scale with the viewport - it’s not responsive. Is it possible to make something like this that is responsive?
Thanks in adavnce,
Joe
Hello @Joe_Berger,
So without seeing at your read-only link I can’t tell you for sure why your design isn’t responsive. But based on the example from the tutorial you are using I’m going to do my best to try to give you some tips about making things responsive. First, create a section with position relative, leave the height and width on auto. Add a first layer of pictures on that layer using flex. Add a second layer of pictures on the section by giving these pictures a position of absolute, modify the absolute position as you preffer. Add a third layer of pictures with position absolute with a higher z index. Check the other breakpoints and proceed to animate like shown on the tutorial you shared. Let me know how it goes.
1 Like
Thanks Pablo,
I’ll do this and send you a read-only link. Just to be clear;
“Add a first layer of pictures on that layer using flex.”
Add the pictures straight into the section, and make the section a flexbox? Or add a container/divblock to the section to hold the images?
thanks again,
Joe
So here’s a link.
https://preview.webflow.com/preview/joes-blank-site-bdc24d?utm_medium=preview_link&utm_source=dashboard&utm_content=joes-blank-site-bdc24d&preview=e0a4a2a33ccf9e4050c4a73caa7c27cf&mode=preview
[edit: it is the page in my project called new test,not the home page]
I haven’t added any parallax yet, just dropped 9 placeholder images in to the section, and adjusted the z depth to make ABC behind DEF behind GHI.
When I look at the other breakpoints the images stay the same size, so it doesn’t appear to be responsive. Feel like I’m falling at the first hurdle but if you can see what I’m doing wrong I’d be grateful for your continued advice,
thanks again
Joe
Hello @Joe_Berger,
Im sorry I think my explanation confused you rather than put you on the right track. So in order for pictures to be responsive they have to be on a container that makes them responsive, in your case and since you want to have a parallax effect, what I would do is to use boxes with different background images, sizes, and positions scattered on a container. You will have to go back and forth between break points but once you set them up on desktop, they will be easy to modify. I did a quick video that I hope will put you on a right track I used two layers for the letters, but you can just use one if you prefer, it is up to you. https://www.loom.com/share/a328ffc4a3584f8783d02bfc06c7f521 I had to hide the vines you had on your page, but you can put them back once you are finished with your letter design. I hope this helps. Let me know how it goes.
1 Like
Hi Pablo,
wow! I hugely appreciate you taking the time to help me wrap my head around this great piece of software. Thanks so much - the video looks extremely helpful I will watch it again tomorrow with a clear head and get cracking on,
thanks again,
Joe
1 Like
Hi Pablo,
thanks again for your help previously. I had to step away to work on something else but am back working on my Webflow, and things are starting to fall into place - and make sense to me!
I’ve made a test page to get to grips with some of the elements I want to use. Panels and text, with visual elements that animate as the user scrolls. At this stage it’s just a very simple layout that I’m using to test things as I go.
I’m using a section set to flex, with my panels lined up vertically inside. Their position set to relative, which allows me to place elements like figures and speech bubbles within them and set their positions to absolute.
So my question now, which is really still the original question, is what’s the easiest way to make this scale so the layout is the same on smaller devices? It occurs to me now that perhaps what I’m looking for is the opposite of a responsive design - I just want the layout to scale down as the width of the screen decreases…
I recognise this would make things unreadably small on a vertical smartphone screen, but on a horizontal it would still work pretty effectively, and the same on anything larger.
Is there a straightforward solution? Any advice welcomed,
thanks again
Joe
The link is the same, and the page in question is the new test page, with yellow panels and a few simple figures on it.
Hello @Joe_Berger,
Congrats man, your site is looking good, you use the animations pretty well. For responsive design the way I go about is as follows:
- for containers and sections I prefer to use either vw and vh or % rather than pixels, or use auto depending on the design sometimes pixels make sense.
- I built on desktop first and then I move down to make appropriate changes to each break point. Once I am comfortable with the design, I start thinking about interactions.
- Assign classes to pictures to indicate a different sizes for different breakpoints.
- Decide what makes more sense, a picture element or a background picture, decide what setting for the background picture works better for my design or resize a picture accordingly.
In short, responsiveness is a lot of back and forth, here is a short video about what im talking about applied on your site Loom | Free Screen & Video Recording Software | Loom. I hope this helps.
2 Likes
Thanks Pablo -that video looks really interesting, once again that’s a big help, I really appreciate it,
cheers
Joe
Hey @Pablo_Cortes
I’ve had a look at your video, very useful thanks again.
I’ve since had a play around with my test site and managed to make all the elements scale robustly - I thought I’d share my mini-epiphany with you. The key, I’ve found, is setting the vertical size and spacing of all elements as a proportion of VW. It seems counter-intuitive to be using Viewport Width to determine the height, but it keeps everything in proportion. And I haven’t had to adjust anything across any breakpoints, which seems like a big benefit time-wise - see what you think,
cheers
Joe
2 Likes
That is great @Joe_Berger, the site looks great. I will encourage you to test it now in as many devices as you can. Since you are using a proportion of width on height, double check how it looks on phone’s landscape view. Some devices like the iPhoneX and similar inherit tablet view for landscape mode. If your landscape view in mobile is broken use auto for height for some instances, like section heights, that normally fixes the issue. Congrats man, please share your work once you are done. Take care.
2 Likes