Could you please show me a website (preferably, a forum) that has perfect liquid layout (that does not break at all if the browser window gets resized)? Would be nice to see...
Once again, where on the web can I see a website that doesn't become a mess when squeezed down and doesn't cap its own width when enlarged?
Have you ever been concerned about that? Or a fat lot you care? 'Cause I see that popular websites (even portals, I am not going to name any) have this problem (as I consider it to be).
Well, I'd like to see what your code would be for an avatar on the left and some user's info on the right. Please see this picture to figure out what I mean: savepic.ru/780576.png
The main reason why this is broken in many places is that it's broken at the fundamental level: CSS doesn't really support fluid layouts, there are still corner cases even when you start using tables for layout. On top of that, every browser and every version of every browser does CSS a little bit different.
The net result is that even highly paid web designers can't get it right (or someone would have come up with a solution by now and every would be using that).
The only hope is that browser developers finally agree to make their products compliant to the Acid3 test. But as I write this, my Firefox 3.5.1 gets only 92%. WebKit (Safari and Google Chrome) and Opera go the full 100% (see this article).
I personally have given up on this and I won't revisit this topic until IE 7 drops below 5% in the popular usage charts which will probably take five to ten years (IE 6 is dead as a log but still gets 12%).
Smashing Magazine have a couple of posts on fluid layouts. Try searching around there to find good examples and explanations.
One of my favourite from their examples is Vivabit.
Personally I haven't been to concerned about it yet, but I probably should, with the rise of netbooks and mobile browsers. I still believe you should serve a different layout to mobile browsers, though, but it's interesting to look at possibilities of serving the same to all browsers.
Well, Slashdot has a completely fluid middle column (down to some minimum which is pretty small) with fixed-width columns to left and right. As far as I can see it doesn't cap its width (tested on my 1900x1200 monitor).
It's not a forum on the main page, but the comments to articles are kind of like it. It doesn't have the avatar example you're looking for though :(
Related
If you look at the attached screenshot you will see a design I have created for HTML email.
Screen Shot
In all of the tests I run, the following are on one row next to each other.
The logo, "VIP Edition" and the View all Deals button.
In Safari the VIP Edition and the View all Deals fall down a row and the logo centers. Can anyone explain this behaviour to me? I'm struggling to understand why it doesn't happen for the rest of the email, and I can't think how to phrase this question to find my answer.
It would be great to see your code, even if just for that section.
But I have seen this before and I know that when I see this it's usually when I have two aligned tables with an align=center on the parent td.
So for example in your instance, the VIP Edition logo would be in a left aligned table and the View all deals button would be in a right aligned table.
Make sure the td housing both of those aligned tables does not have an align attribute set.
Taking that off always fixes the issue for me.
If you need to center elements for mobile, set the align=center further up
I ended up starting again, I can only assume that it was something to do with the widths of the columns. I found this post which was useful.
In the frameworks section I decided to try a few. The first I tried was Zurb Foundations Ink, because I have used Zurb Foundation in the past. However, their supported clients wasn't comprehensive enough for my liking. They make no mention of the differing browsers, and in my opinion that matters. I've done a lot of testing in the last month. I will test it more thoroughly when I get time, at least they offer a version that works responsively in Gmail which doesn't use media queries.
Wanting something that worked on all platforms out of the box I tried Email on Acid's responsive template. It looks great, and I use Email on Acid to test, so I thought they would have it solved. Their website is full of useful tit-bits. However, their template didn't work in Safari and had the drop down issue I had initially started with. They don't claim it works there, but being as they offer a testing service, I had hoped it would work on all the platforms they use.
Then I moved onto AntWorts solution. That worked in my initial tests, and I found it remarkably easy to adapt to my needs, eventually adding additional columns using their methodology which was clearly explained in one of the templates.
My final template has 1,2,3,4 column grids which work responsively part fluid part adaptive. My advise to people in the future is to start with this boilerplate, I redid my whole template from scratch and it took half the time I have spent trying to troubleshoot a different boilerplate to start with.
This might be a poor question for this exchange but is it worth styling for zoomed out browsers? For instance, I can zoom chrome out to 25% and my navigation breaks, should I accommodate for this or will 99% of cases be fine without the extra effort in styling? What case would I run into problems like that?
25%? I wouldn't worry about it unless you have a use case for your page where your users will be that far out.
Now, 75%-125%, you might consider it. Usually your page will work fine at other zoom levels. If it doesn't, it's likely because you have hard-coded something you shouldn't have. (For instance, you might assume that text on a certain line will never wrap. That isn't a good assumption. Different devices use different fonts, which could cause text to wrap in some cases.) In those cases, make sure to only set the sizes to specific values when needed. Let the page flow as much as possible.
Probably not.
A good responsive design and sticky footer might work around this issue. That said, how many people zoom out this far?
See Marshall Roch's comment towards the bottom of that link - he says a small percentage have 1 zoom level off normal on facebook. So to zoom all the way to 25% seems quite extreme. I suspect any users who DID use that zoom level would be used to sites looking weird.
I'm working on a new web site that currently is configured as a full height (that is, 100% available browser window) application. In terms of layout, it is something like this - http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html.
Our web site does nothing with the actual browser window size, like switch browser into full screen mode. It only uses the available space.
Operationally, this is going to be a semi-internal data entry application. Almost all pages are data entry forms or summary pages
Personally, I think makes a very nice looking app. However, some of the other developers are comparing this design with content in scrollable tags to be the same as iFrames. And as such should be avoided.
Is there any background / best practices information about designing a web site this way?
I personally love sites that choose to do this; I think that it's a great way to use up the available real-estate that you have. My one piece of advice would be to add a min-width and a min-height to your page so that you don't have to worry about your site breaking if the browser gets too small. This will not only improve the overall user experience, but will also prevent future headaches when trying to get your design to work in obscure dimensions.
It looks fine, and at first looks more like a 'real' app. The only weirdness with this sort of thing is that on OSX you get a bit of a bouncy effect when you hit the top and bottom because of the rubberbanding on the scroll. If you aren't sure what I mean, grab an iPhone/iPad/Mac and scroll up and down past the top or bottom of the content.
In reality it shouldn't be too hard to enable or disable this feature, so why not start with it, then revaluate once you have gotten going.
There aren't any good practices or background information that I know of on this subject. Just follow the normal rules of thumb, if it looks good, is light and loads well, and it is usable, why not?
In our current project, we have one particular page where, when viewed in IE7 or IE8, fonts seem .1 or .2 em larger than they should be. Having inspected the code and css, I cannot see where this is coming from. This issue affects ONLY ONE PAGE which is to all intents and purposes exactly the same as many others in the site, which display as expected.
Some things I have ruled out:
Text-size settings (it's not that, set to medium, and anyway if so why one page only)
DPI settings (same reason as above)
Browser zooming (it's set to 100% - the problem scales with the zoom setting, btw)
Browser-specific CSS (no browser specific rules are applied to the elements in question)
Stray font-size setting code in the markup (I've been through and eliminated this)
Voodoo (okay I haven't ruled this out - as my frustration increases I'm starting to think it might be this though)
The page displays as expected in Firefox. This is not a live site yet so unfortunately I can't point you at the URL.
Has anyone come across something similar and, if so, what was it?
Many thanks,
G
Without showing us or replicating it at least, asking is pretty much near useless but I suspect it's probably just a tag that wasn't closed on an element with an above average font size.
I'd recommend validating the HTML. If it's good, then it's hard to say without looking at the code/page.
One of the pages on my website is pretty tall. It's under 200KB in size, but it's a series of tables that takes a lot of vertical space. After about 40 screenfuls (about 1/4 of the total scrolling height of the webpage), it just stops drawing: everything above that looks fine, and everything below that is plain white background -- except the footer (in a different div, I guess), which shows up fine at the very bottom.
I've asked around the office, and other people have seen this before, but don't know what causes it. We certainly have other pages here that are just as tall, and have no problem. I've seen pages render fine which are much longer. It's not a complex document at all -- some nested divs, some tables (4 or 5 columns, a couple hundred rows each), some CSS.
The page renders great in both IE7 and Chrome. Only Firefox 3 does this.
Any clues as to what's causing this? Or a workaround? I don't even know what to google for here.
EDIT: I've seen this on another, completely unrelated page. In both cases, it cuts off at about 33000 px from the top -- ha. I know FF3 can have divs and tables longer than that. Anybody know what they might be using a 16-bit size/coordinate for?
Sounds like this may be related to Firefox Bug 215055 or Firefox Bug 333994. Check these out. If it is indeed related, you can always attach your testcase to one of these bugs and add your comments to the bug.
I also recommend, like zodeus does, trying a nightly build or a beta of 3.1. If it's fixed there, that doesn't mean you force your customers to upgrade, but at least you know it's fixed in a future build and you can campaign for Mozilla.org to bring the fix back to a more current build where you might get people to upgrade.
Try downloading the Fire Fox 3.1 Beta or Nightly Build. They have reworked a lot of their internals. If it works there then I would say it's a reported and fixed FF3.0 bug.
This bug filed in Bugzilla may be related...