Streaming live at 10am (PST)

Advice and feedback please?


#1

Hi...

I came to Webflow as a complete novice, although I've made a few ultra simple websites using the drag and drop editor on Moonfruit. I've now been playing on here for a few days and think I've got to grips with the basics if you guys could give me some feedback?

Also can anyone give me some advice about margins and padding? I understand what the difference is sort-of, but I'm still not 100% about when to use them. Are there any recommended 'rules' about when to use padding and when to use margins and why? And if you could give me answers along the lines of "Web Design for Dummies", that would be great, as I'm not kidding when I say that 90% of this is new to me, but I'm a quick study, so any advice would be much appreciated.

Here's my site so far - https://webflow.com/design/vad?preview=e2a01d2b8377b05838fe14625d757ab1


#2

Margin, paddings, borders, dimensions... all of this is called the box-model in CSS, and you're right it's good to know as much as you can about it. Most of the cross browser issues in the past came from the box model because browser were'nt calculating its size the same way (some oncluded the margins, some not, imagine the mess.... at a time no one were ballsy enough to put both margin and padding values to one element, we would nest 2 divs to achieve both margins and padding and have a site that doesn't break with IE).

So basically, you use padding when you want your background to expand, or the borders to be pushed away. Margins are outside the border and background.

http://www.w3schools.com/css/css_boxmodel.asp

Webflow is pretty rock solid considering the rendering of the box model, you can use and abuse of properties on one box and it will be rendered the same on every browser. (also IE6 died long ago, it was the ennemy of the box model).


#3

Thanks @vincent... I get that. So if for example I'm wanting to space out some headings, I'm better to use margin rather than padding then, but if I was to have a heading placed inside a coloured background and I wanted to add some space between the heading and the edges of the background, then I should use padding?


#4

Yes for the first. For the second, you'd have many options... like adding the background to another element containing the heading. But in the case of static websites, I almoist want to say only the result counts (:


#5

Thanks @vincent ... any comments on the site as it stands?

I've stuck to using some of the features with video tutorials, but curious to know how I'm doing.

Thanks


#6

Well you still have a bit of work to do for the responsivity to be ok, like add some margins for devices so the texts aren't close to the edges.

Design wise you could reduce the amout of different colors used (maye ditch the burgundy title color). You could improve the graphic design by balancing colors, easing contrasts.. for example, look what can be done with a simple background and border

from there:

to there:

Same colors but everything is more subtle, less vibrant, less full blue values.

Also, notice the strange step in the animation when you click on the pink button to display the blue block? It's because you've used margins on the blue block: margins aren't taken into account in the calculation of the dimensions of the element. So when you say to webflow pass this elment to 0 px height, there still some left, all the margins. So when you click the button, the interaction starts by isplaying the block, which appear to already be sopme pixels of margins, then it expands. Remove the margins (set them to other elements like the button and what's under the blue block) and you will end up with a sliky smooth animation revealing your blue block.


#7

#8