Hello
I want my site www.samtaleterapi.com to be responsive
I have uploaded my first attempt to www.samtaleterapi.com/debug
What is the current wisdom on:
Any other considerations would be much appreciated as well
Thanks
Rasmus
I avoid absolute positioning for layout like the plague. It’s just not flexible enough. If you ever decide to have a footer, for example, you’ll be in a world of pain, as the natural flow of elements is disabled with absolute positioning of elements. I also suspect that it’s unpredictable and hard to work with on small screen devices, too.
javascript dependent navigation (on mobile.css)?
It seems less likely that people have JS turned off on mobile devices, but still, at least make sure there’s a fallback for when it is disabled or not available. It’s just adding another layer of complexity and opportunities for the layout to fail.
Hi,
I have uploaded my first attempt to www.samtaleterapi.com/debug
If you are looking for a review then you need to post in the review forum after reading the guidelines there.
Regarding the questions you posted then I agree with Ralph and absolute positioning for whole layout is not a good idea. It’s fine for small controlled areas within a layout but generally not the main structure.
Your layout looks to be floated anyway or was your question not about your own layout?
Absolute positioning kicks in as the browser narrows.
[ot]
No need to bring religion into the debate, although I agree with you, all the same.[/ot]
lol - I should employ a proof-reader.
You should first look at skeleton css framework and several tutorials to learn more. Also always make sure your website resize to browser size.
Hi
The allmedia.css layout is floated, the tablet.css is completely absolute and the mobilejavasafe.css is continuous with selected absolutely postioned elements
I hear what you are saying, but I dont understand why a absolutely positioned layot isnt logical and browser safe
It does what I want (on tablet.css): a fixed width navigation and a content column that adapts to varying viewport sizes
Can you explain what the problems are?
Thanks
Rasmus
I gave you a clue in post #2:
If you ever decide to have a footer, for example, you’ll be in a world of pain, as the natural flow of elements is disabled with absolute positioning of elements. I also suspect that it’s unpredictable and hard to work with on small screen devices, too.
Suppose I dont need a footer
How could it be unpredictable and hard to work with? I use absolute positioning for a medium size viewport, so there is enough room (as I use a different layout for smaller viewports)
Are you talking about absolute positioning in generel or the way I propose to use it?
Thank you very much
Rasmus
In general—because it’s rarely a good way to lay out a page. It’s inflexible and has unpredictable results on various devices.
OK thanks
Unpredictable results are certainly undesirable
Will search for different solution to my wish
Cheers
Rasmus
The standard layout means currently is to float page items side by side on larger screens and remove the float on narrow screens and set elements to width: 100% (or thereabouts) on smaller screens. This is done nicely with media queries.
Hi,
I dont understand why a absolutely positioned layout isnt logical and browser safe
One of the most important aspects of web design (regardless of device) is to maintain the flow of the document.
In simple terms that means that one element can follow the next and you don’t have to do anything special to make that happen. If you want another paragraph you just add the text and there it is under the paragraph above. If you then want to remove the first paragraph you just delete it and the content underneath just rises up into position all on its own. If you narrow the browser window all paragraphs flow together and push down the page without overlapping.
Now imagine you are absolutely placing those paragraphs. If you want to place a second paragraph you have to absolutely place it below the other one at an exact height or it will overlap. However if the content changes, the text is resized, or the window narrowed then the content overlaps because all elements are removed from the flow and do not care about anything else.
If you remove one of the absolute paragraphs you leave a hole in the page and the other content does not fill the space. If you want to add more paragraphs you have to position them at the bottom but you don’t actually know where the bottom is.
As you can see its a nightmare to manage at every stage unless you have the simplest layout. A 2 column absolute layout is not that bad and can be maintained but you can never have a footer or put content at below both columns. In this case it would just make sense to float them (or use display:table-cell for ie8+ if needed) and avoid the issue altogether.
Floats, although removed from the flow , can be cleared and thus thus flow of the page is maintained. You should always take the route of least resistance and when you code with the flow of the page then in most cases you don;t need to do anything special as content takes care of itself. Just a few margins and tweaks and everything falls into position.
That doesn’t mean avoid absolute positioning as you can use it in controlled situations to good effect. e.g. within a fixed height container such as a header banner you could absolutely place a logo in the top corner easier than floating especially if you want it on top of something else.
There are always special cases but in the main you want to keep everything in the flow of the document (one element follows another naturally).
so would the following be safe and maintainable (simplified version) - or does it depend too much on absolute positioning?
tablet.css
mobile.css
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
<link rel=“stylesheet” media=“screen and (min-width: 527px) and (max-width: 769px)” href=“sheets/tablet.css” type=“text/css” />
<link rel=“stylesheet” media=“screen and (max-width: 526px)” href=“sheets/mobile.css” type=“text/css” />
<!–[if lt IE 9]>
<link rel=“stylesheet” type=“text/css” href=“sheets/allmedia.css” />
<![endif]–>
<body onLoad=“P7_swapClass(1,‘navigation’,‘showIt’,‘hideIt’,‘div’)”>
<div id=“outer”>
<div id=“header”>
<div id=“headertext”></div>
<div id=“mobileface”></div>
<div id=“clear”></div>
</div><!–header–>
<div id=“tabletface”></div>
<div id=“navigation” class=“showIt”></div><!–navigation–>
<div id=“content”></div><!-- content –>
<div id=“clear”></div><!–clear–>
<div id=“menu” onClick=“P7_swapClass(1,‘right’,‘showIt’,‘hideIt’,‘div’)”><a href=“javascript:;”><img /></a></div>
</div><!–outer–>
</body>
thanks
rasmus
ps there is one thing that doesnt work proporly: when i open the site on a mobile portrait and tilts it to landscape the text size increases until i refresh the page - can that be fixed?
It’s hard to tell without all the content but as you are switching the menu from bottom to top then you will need to absolute place it when you want it at the top but of course you will need to preserve the space for it. I assume the menu is a fixed height so you should be ok.
The columns should be ok as long as you don’t need a footer.
Regarding the text-size in landscape you could try this which is present in bootstrap and boilerplate.
body{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
Well the webkit/ms fix works great
The content is all there on www.samtaleterapi.com/debug
I forgot to mention that the #menu div is not displayed on tablet.css
I dont understand what you say about switching the menu from the bottom to the top
On tablet.css the #navigation div is always visible (the javascript isnt active, and the #menu div is hidden), and on mobile.css the #menu div is just the button that shows and hides the #navigation div
On mobile.css the #navigation div isnt absolute or relative/floated but - what is it called? - continuous(?)
Im very grateful that you (plural) are taking an interest
Would you judge the layout to be workable?
Or is it just not good idea?
Rasmus
oh now i get it
yes that is what i do with both layouts
i use padding on the left to clear a space and then absolute place something in that area
on tablet.css its the whole #navigation div that is placed absolutely (below #header on the left of Content)
on mobile.css its the #menu div {width: 35px; height: 100%;} (on the left of #header, #navigation and Content)
sorry to not be able to clarify that from the beginning
thanks
rasmus
I think now that you understand the implications and limitations you will be fine and the layout should suffice.
The beauty and problem with CSS is that there is always more than one way to do something and the method you use usually depends on what happens next