Am I fighting against Webflow or against geometry and math with trying to line these images up here?

Design help General
1

I just recently signed up for Webflow. Great tool. I’m still a noob so please be patient if I sound like an Idiot and just tell me nicely I’m an idiot. I was just trying to learn and mocked up this:
https://webflow.com/design/blurry?preview=e4dc41355ac188b6835007c92d946eff
I would like to try to get the images so they align better, like have the middle column one always line up on the height on top and bottom of the 2 images in the first column. Does that make sense? I’ve tried all sorts of ways but when I re-size the browser, it always moves out of alignment.

Obviously I’d like to keep it responsive. After hours struggling with every option, I’m starting to feel dumb. Is this actually impossible to do because of different aspects, image, sizes and percentages? Am I fighting against math itself here?

2

Ok, where to begin… Your question raises many points. And to begin with there is many ways to achieve the same goal with HTML and CSS, especially when it comes to layout. Unless you work for a website with a huge traffic, only the visual result counts. If it’s what you want, good and loads in decent time, you’re done, and you’re not an idiot.

That said, welcome into the weird world of CSS layouting: making layouts with a technology that was never really intended to do this : )

  1. your layout is what we call elastic. You’ve put a box into the body, and set margins to the box. So when the body’s dimensions change (when you resize your browser), your box’s dimensions change too. Elastic layout is something you could want, but in your case I doubt it. What you are better to do is have a fixed layout that you adapt for every device (devices are the responsive views, the devices icons on the left side of Webflow.).
  2. So start by adding a section to your body. into that section, place a container. The container has a fixed width that is ok for modern web, you can let it as is. Now place your bow in the container and adjust its margins. Now your box doesn’t move every time you touch the browser. You can adjust its properties for every device view.
  3. Now to make a nice grid of images there’s nothing really working in HTML or CSS. People usually use Javascript libraries such as Masonery to achieve that. But you can stull fine tune your magins to align your images. Here I just decreased the upper margin of the lower left image:

1231×531 683 KB

You should start to try that and come back with more precise questions :slight_smile:

2 Likes
3

Here’s a little screencast playing with your site:

https://v.usetapes.com/xZtRJfnWDr

At a moment you can see I edit the properties of the Row (table) to make it behave horizontally for the second device. For every device you can set a table to be horizontal or vertical. I personally usually let the rows horizontal for the three first devices and set a different layout for mobiles.

At the end I added a Overflow: hidden" property so that the images appear with sliding within the box.

2 Likes
4

Hey Vincent,
Thanks so much for taking the time to explain this and for doing the screencast. I really appreciate it. The paradigm of responsive layout is new to me and I think I was confusing myself with some of that and I also didn’t quite realise the difference of a container.

So if I’m understanding correctly, it seems I should use a container, which uses a width of 960 for desktop. I think I had tried it before but didn’t like the fact it made the box so small. I think that’s why I didn’t use one and had mistaken the elastic box to be a better responsive design.

You see, we have these huge monitors where I work with this insane resolution, way beyond 1080p (probably at least 2k or more I would guess), and my mock up looked so tiny on that, which is probably how I ended deciding on putting a box inside of the body directly, so it would upscale more nicely. But now I see that had unpleasant side effects.

It got me to thinking and I searched about it and I ran across this post:
http://forum.webflow.com/t/are-we-stuck-with-960px-containers/

Anyway, I’ve followed the changes you made on the screencast and was very pleased with the result :slight_smile: I understand more clearly now, it might be better to stick to that whole 960 container grid for this one. To be honest, I’m not a big fan of the box within a box design but my friend had been working on a boxed concept for something different and I decided to play around with the concept myself, which came off looking very IOS7-like in this case.

I’ve downloaded a few books on responsive design now which I plan on looking over to better acquaint myself with with the paradigm. I also have a lot more Webflow videos to watch to get better using this tool.

My goal is to actually learn to code responsive design and get proficient with HTML,CSS, and Jquery, etc…

Right now I’m using webflow as a crutch to quickly work out design concepts and then take a look at the code. And plus, i’ve had a few paid jobs for simple static sites, which I was using Adobe Muse for but I think I much prefer Webflow’s concept and how it’s model more closely ties in with how things are actually coded and thought of.

Sorry for the long reply, I get carried away sometimes. Thanks so much again for being so generous with your time and welcoming me and explaining this basic so nicely. You’re a legend!

5

This is not a bad idea to stick with this structure of 1 section with a few containers inside, then another section, etc, etc. until you’re more familiar with HTML, webflow, reponsiveness. Don’t just put things in the body like that for now. Webflow embrace what we can call the “sectioned design” trend, which is an easy way to think responsive websites. (Sectioned design websites have no sidebars, and are usually qui immersive, with large sections taking up all the space)

I have the same screen than you I guess. Be careful, its size is bigger than the screen of most users of your future website. A good thing is to double check your creations on a laptop, as often as you can, to avoid designing too big elements.

I’m not sure what you really mean by that. But doing HTML/CSS nowadays is essentially nesting things. The more nested boxes you put the more control you have. Don’t put too may properties on a single box. Try to think about what you can re-use. A box with a class name a a few properties can be reproduced elsewhere by applying the same class name to another box. (Just to be clear, when I say Box, it can be a section, a container or a DIV. They’re all the same thing with different names.

You’ll at a moment realise that as easy and accessible Webflow looks to be, it doesn’t negate your HTML/CSS skills. If you’re skilled, you can achieve better optimised pages in Webflow. That’s what is awesome about WF I think.

Muse, Edge Reflow, Macaw are not even yet real alternatives to Webflow. No doubt some of them will become serious players, but this is not even happening in 2015 I bet.

I’m working on a video for two weeks and I have free time every time I render a piece of it :smiley:

6

I’m not sure what you really mean by that. But doing HTML/CSS nowadays is essentially nesting things. The more nested boxes you put the more control you have.

I just meant that on desktop, the browser window is now the box, so it’s not usually necessary to have a box within that box IMHO. :wink: Sorry, it’s semantic and not a reference on actual ‘boxes’ in the code sense (if that makes sense).

You’ll at a moment realise that as easy and accessible Webflow looks to be, it doesn’t negate your HTML/CSS skills. If you’re skilled, you can achieve better optimised pages in Webflow. That’s what is awesome about WF I think.

Oh yes, I fully realise I need to learn to code and that webflow is only a tool to optimise the foundation of that process.

Muse, Edge Reflow, Macaw are not even yet real alternatives to Webflow. No doubt some of them will become serious players, but this is not even happening in 2015 I bet.

I totally agree. I’ve tried all of the above and I preferred webflow after as soon as I tried it. Muse is great for people with a Design and Publishing background as it allows to you to draw things and lay them out simply but it does not take into account responsive web design and it’s code is terrible to try to examine. Macaw, I actually really liked as an alternative to Muse but it still lacks on functionality very much. At best I could use it as a mock up tool, like a responsive alternative to photoshop. Reflow I absolutely hated for some reason. Maybe for the same reasons I hate other Adobe products (But I won’t get into that right now).

But in essence, yes, Webflow, is a product I believe in. Otherwise I would not have signed up for a year on the ‘personal’ plan. I’m hoping that once I start earning money doing web design, I will use it much more for mock ups and also for simple static sites.

I’m working on a video for two weeks and I have free time every time I render a piece of it

Now this is my area of expertise as I’ve been doing Video Editing for the last 10 Years. I render every day! Haha. :wink:

Thanks again and good luck with your video project.

7

If you’re an expert at performance settings for After Effects and première on Mac, I’m all ears :smiley:

8

Sorry for the slow reply. I’ve been out of it these last 2 days. I haven’t used Premiere to edit for about 11 years so I’m a bit out of date on that app. My Expertise lies more in Avid Media Composer, which also loves to just sit there and take it’s time rendering as well.

Probably the most helpful performance boost is in the form of hardware. I believe After Effects and Premiere both use GPU acceleration quite a bit. When I render out from After Effects at work, I noticed some codecs are much faster to render out than others. Animation QT will take ages while Pro Res or DNxHD seem to output much faster. I don’t know what timeline settings there may be for Premiere but I’d probably use a modern codec like Pro Res if I was using it.

At home lately, I’ve been playing around with FCPX. Though it’s sort of been considered a joke in my industry, I was impressed by it’s background rendering. I was able to start cutting much faster.

Anyway, if you need any keys, titles, or any sort of gfx done, I’d be happy to do some for you. Lately I’ve been playing around a lot with motion graphics in Cinema 4d. You want to talk about rendering…you can spend 30 hours rendering a 5 second clip!

1 Like