I'd like to get some feedback on using padding and margins for page layout versus absolute positioning. I realize that there are and will be scenarious where either or both are preferred and that will depend on the scenario.
But what I'm getting at is overall page layout for pixel perfect designs what is the general rule of thumb? I'm a little more than a year into HTML and CSS and I'm coming from a graphic design background, so most of my train of thought lies heavily on approaching a design from a layout standpoint first. So far in my web designs I have used the rule of thumb to use appropriately titled divs with floats, padding and margins when laying out a page, and if something requires absolute positioning (like an element to be stuck on the edge of the screen or a div) use it when necessary.
But lately I've really been starting to re-think my approach to page layout and wondering if starting with usign absolute positioning as a general rule of thumb is a better idea?
Can somebody point out some good articles or resources on this topic, and I'd love to hear everyone's personal feedback as well.
I can see where you're coming from, but using absolute positioning for your layout is extremely inflexible. I think you'd be best to carry on as you are, using the CSS box model. That's not to say absolute positioning is a bad thing, just that it's not flexible enough to handle fluid layouts, changing box-sizes etc.
I've been learning more and more about CSS layout and its quirks over the last 2 years and I am pretty much using the float/margin technique as it seems to give me the best results across different browsers.
Maybe it was just the way I was doing it, but I have experienced some pain with positioning (absolute inside relative containers) when trying to get the same results in all browsers. IE was usually the outlier and that was mostly with IE6/7. I have hesitations with going straight to absolute positioning, but perhaps others here might have had a better experience and can point you in a better direction.
Good luck and I hope you find something that feels comfortable to you!
As Rowan mentioned, absolute position is to inflexible with all the different devices and screensizes.
What you should do, especially if you come from a graphic background, is using a grid layout in your website designing process that corresponds to a grid framework for webpages, for example bootstrap.
Then you'll get
A: Symmetric and appealing layout
B: Someone that knows this a lot better than any of us that has handled all the problems that floats and margins might cause and that will update the framework in the future to compensate for the turns web development is taking.
Related
I am new in front end design and when I was looking information about this I found 2 techniques about positioning: float and flexbox.
My question is: What should I use more? I'm oriented in mobile design too.
As this great article sums up:
Floats
Advantages
Most popular way to lay things out; most grid frameworks follow this.
Everyone's aware of float bugs due to the popularity of floating, and there are well documented ways to overcome them.
Disadvantages
Need to be cleared. Can be quite painful if you're changing widths at 2-3 media query breakpoints, because the floats will need to be cleared that many times.
No vertical centering
No equal heights
No source order independence
Use for:
Large layout blocks that don't need equal heights and vertical centering
Flexbox
Advantages
Source order independence. Could be of tremendous value for responsive layouts and eliminates the need for JS for this.
Vertical centering
Equal heights
Flex boxes move along interchangebly the X and Y axis, with such ease, that you can really change things around with a couple of properties.
Boxes grow and shrink, can be columns or rows, fit to the available space however you wish to declare this.
There are multiple ways to do the same thing with flexbox.
Disadvantages
Syntax is initially unintuitive. You spend the first few hours looking at demos saying WOW, followed by WTF.
I've been noticing weird cross browser inconsistencies [...]
A deep understanding of Flexbox takes a while. Once the layout gets more complex, or you add a couple of divs, things can get confusing. I'm going to document this more in an article.
Lots of vendor prefixes, with a different syntax for older IE and Webkit. Use something like Autoprefixr to work around this. Or write some mixins. Or do something..
Doesn't work on IE9. If you don't have to support IE9, you're fine.
Reports of the older syntax impacting performance. I wouldn't care too much about this honestly, especially if you were using JS to do the things Flexbox now can...
Use for
You can already start using it for vertical centering, if you don't need things to look the same on IE9.
If you don't need IE9 support, it's perfect for source order independent layouts, equal heights.
I would highly recommend using it for personal projects.
App layouts where things need to stretch and squish. Flexbox really shines here.
So to recap', flexbox is the modern way, very powerfull but harder to learn. As it is kind of new, there is also a lot of bugs and it is not seemlessly compatible. floats are the old way: it is more basic, but easy to use.
Can anyone please enlighten me on how the new Flexbox layout model is any better than current tables way? (display:table and all those are includedin my case) ?
It's not supported at all under IE10 which isn't very good for the near future, and I just can't see any benefits over table layout. But still, the internet is starting to get full of "worshipers" of this new CSS method of layout, and all the examples I see can be easily done with normal css without problems.
Update 25.12.15:
I have been using flexboxes a lot since they were introduced to modern browsers and had stopped using display:table and so on, because flexboxes are more powerful and easy to use.
There are three distinctions I can think of between using flexbox and using table display values or floats to layout a page:
Being able to re-order elements irrespective of the HTML source order, while keeping elements in the normal flow - you can do this by specifying an integer value with the order property.
It requires less typing than traditional float layouts (you don't need all of the pseudo-elements for clearing purposes) and is more semantic, while using floats or tables for layouts obviously isn't.
The ability for flex-items to grow and shrink to fill horizontal and vertical space based on an ancestor elements' dimensions - by using the flex-grow and flex-shrink properties.
The problem (as you've pointed out) is that support is still pretty bad; In fact Firefox is still implementing an older version of the flexbox module, so you have to account for minor discrepancies in syntax and behavior, depending on which browser you're using. It has been said quite a bit, though, that it is the future for layouts, especially for complex web apps that are popping up more often. It's worth learning if you're okay with making an inevitably wise investment - at the cost of not really being useable right now.
I also suggest you take a look at this smashing magazine article for a friendly introduction to flexbox (it's fairly recently written)
The Flexbox model is more powerful than display table. Flexbox supports layouts for right to left languages for example. And yes indeed, flexbox is a bit complex and that's an entry barrier. Float and clearfix layouts are a (clever) hack, somehow in the same way table layouts are a hack, flexbox is meant for layout.
The browser support is getting better lately, some say we should use it now. Bootstrap 3 does however not make use of flexbox, but i can imagine that the next version will.
Simply put, it's something that'll be beneficial in a few years. Like many advanced css techniques, HTML5, etc., a few people will adopt them with painful fallbacks and shims/shivs for the next couple of years.
When browsers support it in the future, we'll have a party and all hate on the 'old' browsers that don't support them :).
Flexboxes are more flexible and semantically appropriate since tables were never meant to be used for layout. From MDN introduction to Flexbox:
Why Flexbox?
For a long time, the only reliable cross-browser compatible tools available for creating CSS layouts were features like floats and positioning. These work, but in some ways they're also limiting and frustrating.
The following simple layout designs are either difficult or impossible to achieve with such tools in any kind of convenient, flexible way:
Vertically centering a block of content inside its parent.
Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.
As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. Let's dig in!
Having asked this question How to reach CSS zen?, I now understand that the issues I have are mostly related to positioning. I've found some articles telling that CSS is not always good enough as a layout system.
http://echochamber.me/viewtopic.php?f=11&t=40154
http://www.flownet.com/ron/css-rant.html
http://blog.workaround.org/2009/03/17/dont-abuse-css-for-page-layout/
Do you as CSS designers limit yourselves upfront to designs that CSS can handle? Should I avoid things that seems perfectly easy are in fact difficult to do with CSS?
Of course you limit yourself. As a designer, you should always think about the medium you're working with. If I were designing a magazine ad, I wouldn't be thinking about animations or video. There are certain rules you must adhere to, and it doesn't make sense to ignore that.
But of course, rules were always meant to be broken.
Why?
If you are "designing", why would you limit yourself based on a the limitation of one technology? When you design your site, you should always try to achieve the most usuable interface for the user.
If you do limit yourself, then you are just asking for the site to not be used, and then what's the point of creating it?
I don't limit myself upfront to any designs that CSS can handle (within reason of course), just figure out your design and there will be someway that you can get it looking right using CSS, but it might involve a lot of hair pulling, especially if IE6 is involved!
When implementing a web design (assuming I've got an image/drawing of what the site will look like) I always follow these steps:
I look at the design and determine what components it has. Examples are navigation areas, headers, content areas, and so on.
I implement (X)HTML that can represent the content areas without really taking the design into account (there are certain things such as content order that I use the design to determine.)
I start making the CSS and images needed for the site to look the same way it did in the original design document. Depending on the complexity of the design, I might come up short of elements to use for styling the page, and may end up adding elements that don't really make sense for the content. I try to avoid it as much as possible, though, and I try to create the elements in a way that isn't obtrusive to the content.
As you can see, I never limit the design to the capabilities of CSS. CSS comes last. Now, depending on the complexity of the design, it might not look exactly like it did in the original design document, but the goal is always to make it as identical as possible, while still maintaining clean HTML so that the design can easily be updated in the future.
Most layouts I find can be done with CSS. There are a very few exceptions (normally to do with verically centering text).
For me the main factor which limits my designs is a reluctance to use huge background images. If an effect can't be done by combining/repeating a few tiny bg images I tend to reject or tweak it. Eg a diagonal gradient on a box with curved corners which could be any height might fall into this category using CSS2.1
Almost every painter limits themselves to paint on canvas, almost every sculptor makes 3D shapes from stone or clay or metal...
But there's also the few who dream new dreams and create new things. Some flop, some shine.
Should you limit yourself based on what CSS can do with layouts? Not completely. I say dream big.
Once you've got your dream design, either figure out how to create it, find a technology other than CSS that can do it, or go start inventing!
You can do absolutely almost anything using CSS 2.1 as far as layout. Its a complete pain in the ass that has no reason to ever exist, but you can do rounded corners (using background images), gradient backgrounds (more background images) and all kinds of other bloated crap you don't need all together and still not completely destroy the semantics of your HTML.
Doing all that garbage and still attempting to be standards compliant reduces usability, because its the designers who need round corners and other frivolous crap and not the users. Usability tests have confirmed this. Sites that are bloated to accommodate presentation and usability at the cost of semantics and efficient fail in usability tests compared to their competition. I work for a website that gets several million visitors a day and I have seen the results of our usability tests.
CSS provides a very good way to create an overall design that easily can be changed by small changes in one CSS file, and instantly applies the design changes to all your pages. Of course there are things that are tricky to do with CSS, and in those cases you might want to do it in other ways, but even if your layout is mainly based on CSS, doesn't mean that you can't do some special parts using other technology! You can mix!
So you don't limit yourself when you go for CSS. You just make use of a powerful technology that can be used in perfect harmony along with others!
One of the arguments I've heard about blueprint css is that it lets you think of your layout in terms of a grid rather than in terms of floats. This seems like a big advantage to me because I always get confused about where my floats are going to end up - sometimes a float will unexpectedly drop down below some other floats and I have a hard time figuring out how to reposition everything. Does this make blueprint css a good choice for me - or should I just put the time in to learn how to use floats properly and do all of my layouts manually?
Yes, absolutely it lets you use a grid - see this example page, which makes the grid visible by striping the background according to the grid columns.
(But I have to say, a little time spent learning how CSS layout really works would pay big dividends - better to understand it than to give up and try to work around it. And you'll then have the option of creating flexible layouts that work well on all sorts of different devices.)
One of the biggest issued with anything that is absolutely positioned is that items that are not absolutely positioned do not know that the absolutely positioned items exist.
Of course this is a debate that will go on forever about which is better but you will probably be better off using elements that can be scaled depending on the browser size and resolution.
Under the hood, Blueprint still uses floats.
Here's a novel approach to creating "float-less" layouts that are semantic and accessble,
http://www.tjkdesign.com/articles/css-layout/no_div_no_float_no_clear_no_hack_no_joke.asp
As stated, BluePrint is a grid system, but is based on CSS floats. So understanding CSS Floats is somewhat important to really grasp what BluePrint does.
I rarely use floats over absolute positioning for a variety of reasons.
I am watching the ASP.NET learn video on http://www.asp.net/learn/3.5-videos/video-13.aspx
and it is showing you can place controls on a page using Absolute positioning. I am just wondering if this is a best practice or should I avoid Absolute positioning? It seems like a nice, easy feature, but there must be some reason why it is not selected by default in the VS IDE.
Many users change the font size of your page by configuring their browser settings. If you use absolute positioning, things will not align right for them.
In absolute positioning, when your page gets more complex, a single design decision would require you to reposition all of the elements, but in relative positioning, you would only need to change one value, and all the other elements would adjust accordingly.
Absolute positioning takes the element out of the flow of the document. This means that it will no longer align with other elements. There are very good reasons to do this sometimes but generally you want to avoid it.
ASP.NET is notorious for using bad HTML/CSS practices. This framework is designed for 'rapid development' not 'elegant, web standards development.
You are right to be suspicious :)
Basically, don't use it for controls.
I only use it for dialogs, or other features which I can calculate the correct position relative to the page size.
I think this question is more about css than the visual studio. Because of the reasons explained in other answers, you should use relative positioning where possible.
This doesn't mean absolute positioning has no use at all. Check out http://csszengarden.com/, to see how you can use a simple html structure and still use some really interesting designs.