SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 50 of 50
  1. #26
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Haha, poor Deb... look, if you use versioning software, you can dare to try some stuff out and if everything totally horribly dies in a fire, you always have your older, "working" version to go back to : )

    Re multiple stylesheets:
    Won't back down on this one.

    It is *much* easier for me to debug and conceptualize my code with the different "buckets". (If I even make it to "Go Live", I'll consider cramming things into one or two style-sheets.)
    ...
    Sorry, again, organization and filing versus one style-sheet. (Especially in development.)

    Besides, I *highly* doubt that 5 sheets at 2k is any different than 1 sheet at 10k from a performance standpoint?!
    Oh, there's a performance difference, but dunno if it would matter enough for you to be bothered. Here's how it works (and it's the same reason people use image sprites instead of lots of separate little images):
    Each stylesheet is a separate request, and each request to the server has a minimum amount of latency. That is, no matter how fast your browser, your internet connection, or the site's, it always takes a certain minimum of time to have the client (browser) ask for a resource and the server to determine if it has that resource, has permissions to send it, and then to do so. Crusty usually says about 200ms; I have little idea (other than, when I measure it with wget, it's never instantaneous).

    So 5 stylesheets each has a asking-checking-sending thing from the server going on.

    All that said you are not alone in finding development a lot easier with separate stylesheets! Drupal does this all the time, as does most CMSes.

    So, keep them all separate for ease-of-development on your local copy, but when you upload to "live", smoosh them all together (in the same order you have now). If they stay in order then they'll act the same as they act now. This means, one request for styles, your site gets loaded on the user's machine a bit faster.

    Frankly the difference is more measureable when the site is huge. I looked at a site done by a company I was interviewing at and they had, I kid you not, 30 separate stylesheets, plus 5 more stylesheets that came with various jQuery plugins... and almost 30 separate javascript calls.

    Later they fixed this so I'm sure it really was that someone was stupid enough to upload the dev version... IE won't even bother loading stylesheets after the 31st or 32nd one (IE has a limit).

    Re: Gilder-Levin image replacement
    I Googled that term, but didn't find anything really helpful.

    Care to explain or provide a link to a useful tutorial?
    http://www.mezzoblue.com/tests/revis...e-replacement/
    the last one.

    Gilder-Levin image replacement is what we use to place an image on top of text. If the image doesn't load, the text is sitting right there and styled however you like. If the image does load, it sits right on top of the text and covers it. It's nice. You see he mentions it's not going to work if the image is semi-transparent. It also won't work if the image is way smaller than your text.
    Frankly, I don't see anything wrong with
    <h1><img src="debbie.png" width="whatever" height="whatever" alt="Debbie"></h1> if on the main page that is your h1. Any user agent who doesn't load the image basically gets
    <h1>Debbie</h1>
    since that's how alt text is supposed to work. However, you won't really be able to style that text for those with CSS on but images off (except in Mozilla) and Gilder-Levin lets you do that.

    Re id on the h1:
    Not true.

    My strategy is to have <h1> be my Company Name (e.g. "Debbie's Small-Business Central") on the Home Page, however, every other page will have a different <h1> which will most likely be the title of the article.
    Okay, if you have an id on this h1 because it will be styled different from all other h1s throughought the site, then yeah, it does make sense to put an id on this one. Take Crusty's words to mean "in general" because it's not uncommon for people to put id's on all their h1's.
    Another option is to have the id on something else, like the body, if the main page had plenty of things that were different.

    Re: clearfix
    Had a thread going with Paul O' and others about this a week or two ago. (Never got the answers I really wanted.)

    If you can look at my 3-column layout and tell me how to remove ClearFix and not break things I am here to listen...
    Mostly, you don't have to worry about it. Crusty hates clearfix technique because it's way more code than all the other float clearing/enclosing methods out there, and frankly that's all you care about: floats remain in their containers instead of popping out and stuff riding up all over everywhere like a bad wedgie.

    I usually tend to use a combination of haslayout for IE and overflow: hidden. Sometimes I can't afford to hide overflow so since I usually still have Haslayout triggered I do just use a version of clearfix using :after, where all I do is make no character (content: "";), make it a block and clear: both. Still much smaller than the original clearfix, which took into account IE for Mac, IE5 and 6, and went out of its way to trigger Haslayout in some hidden way. A lot of the time you already have Layout because the box has a width or something anyway.
    Paul O'B also only uses clearfix when all the other methods aren't suitable or cause more problems than they solve.
    http://stommepoes.nl/floaties.html I think I've listed most of them here, except the Yahoo one with a :before and :after and display: table and all that junk. Then they go adding "zoom:1" to stuff which to me is retarded, since we've already dealt with Haslayout somewhere.

    You're not breaking anything using clearfix, it's just a wordier way of clearing/enclosing floats. You can safely leave it.

    Re the sidebars:
    You lost me here...

    1.) Won't using em's on my page layout break Paul O's "masterpiece"?!
    They don't have to. In fact, if you decide you want to go along with Crusty's suggestion of the middle part first, you can do it pretty easily. I assume Crusty is thinking of the "Holy Grail" layout. I'll outline it further down.

    2.) I am on a MacBook with FF8 and I can hit command + until things are as big as they get and nothing breaks in my layout...
    You're zooming. So is Crusty. But Crusty is zooming on a machine whose own system fonts are ginormous.
    I don't zoom, because I hate zoom *most of the time* (if there are any images, I hate zoom, because it makes the images large and blurry which always gives me a headache. If I'm zooming in, it's because I can't read the text, so let me enlarge the text!)... (directed at browser makers who only make the retarded zoom)

    3.) "Both sidebars are WAY too tiny to have such large dynamic fonts inside them..."

    I don't understand what you mean?!
    Your sidebars are small. There is text in there that easily gets so large that it disappears on some machines (ours). If text has the ability to grow a lot and it's already pretty big, then small-width containers can be a problem. I can show a Holy-Grail version with ems where at least the boxes would also get bigger (at some point, they'd get so big the middle would be squashed, but that would be extreme text-enlarge). If you have a mobile stylesheet and mobile-first setup, then actually Opera and other browsers will, if the user zooms in too much, actually switch to the mobile stylesheet. This is one plus of zooming browsers, and is really nice to read big text on.
    (an example, open Opera and zoom the hell out of this page and you'll see Opera switch because there'll be no more images)

    Again, not following you. My layout has worked fine in FF3.5 and FF8 for me.
    When you test your site, first try to set your fonts (on your computer, somewhere there's a place you can change the "default" font setting for most of your applications) a few times bigger than what you have now. Most pages if well-built should only look a little funny, but nothing important should overlap or get cut off.

    The reason MY firefox shows stuff bigger is, Firefox is one browser who will accept the "Application Settings" fonts I set in my windowing system (this machine is running the XFCE desktop environment, which is based on Gnome, on Debian) so it'll make text larger like it does in my music-playing program Banshee, my graphical text editor gEdit, and even my Terminal application (real terminals are tiny on this thing). Now Opera and Chrome don't bother looking at my desktop settings so your page probably fits better on those (I didn't check, sorry) and then those both zoom, so everything would fit the same way except just bigger.
    So this "problem" hits only people who have a different default font setting either in their browser (chrome for example does not offer this option, which some google employees have complained about) or further up where the browser will accept those settings. Zooming can't fix this for them, but the site can accommodate these people a bit more.

    I'm concerned about these comments... I spent AGES getting my base page "template" *exactly* like it needs to be to work, and I thought that Paul O' all but blessed it...
    You could make it absolutely perfect and there would be critical feedback. We assumed you wanted it : ) But it's YOUR site, and YOU get to make all the final decisions on it. For the most part, your site certainly isn't worse than most other web pages out there, nobody's going to die from it, and you can pick and choose any improvements you want to make. If you try something and it breaks, or you don't like the effect, go back to what you had. It's not a huge deal.

    (unless you like Crusty's rewrite, in which case, you ought to be able to easily plug his into your pages and it should Just Work anyways)

    Re content-first:
    Using position: relative or something?

    Again, won't that break my page layout?
    It's too bad the site that used to show 40 examples of Holy Grail is gone, or at least, I can't find them anymore. Though there are two decent ways to do middle-first (or content-first, when the assumption is the sidebars are less important).

    What is the ROI on doing that?
    If your sidebars are considered less-important than the middle section (where most sites put the meat), getting that as first originally was a benefit to search index because long ago the spiders actually had a limit in how far into a page they'd index.
    This isn't true anymore, but it does still help insure that if a bot does for whatever reason leave a page before it has finished indexing (esp if on each page the sidebar material is the same, which for many sites it is), it will have grabbed the meatiest part first.

    More importantly it's nicer for anyone browsing linearly like in a text browser or a screen reader where the user doesn't realise they can navigate where they want without needing to tab everywhere. Sighted keyboarders don't have the luxury of a screen reader's navigation capabilities.

    Lastly, printing rocks, if you want the sidebar content to be printed out, but the meat first, you've already got the source-order you need.

    It will just please people like you and your reading style?
    Visually it should look exactly the same, which is what's cool about it (site looks how you want, but meat comes first). Also heading level order.

    It will take me to #1 of Google?
    Frankly, despite what I mentioned above about search spiders, there is a dark SEO claim that it will help rankings, but it won't. It's really more for a small segment of your human visitors and catches the off-chance that a spider only comes once and gets interrupted (or follows a link and never comes back) or whatever. It seems pages get indexed often and regularly though.

    Also, you are assuming that I want the Middle Column first...

    I sorta thought "Featured Article" was a 1st choice?
    Well, visually you're implying the small business facts is the most important. The text is biggest, it's in the Easy Center (grabs most of the first attention on the page), and visually, if you asked me "what is this page mostly about?" I'd say "small business facts, and some other business-related stuff." Likely most other people would think the same.

    If the Featured Article is the most important chunk of the page (it seems to me to be more of something between a "testimonial" and a "story where the product helps a customer"), you're telling my eyes it's very minor.

    Newspapers put the stuff they want to scream out in the middle. They put ads for the local car wash Super Saturday Sale in little side columns in small text.

    Your markup will say the Featured Article is fairly important; your CSS is telling me it isn't. So I'm a little surprised it's not taking up center stage, but you may have a reason for that...

    And if I wanted to make money by giving Small-Business Workshops, then that might be 1st?
    If that's the point of the site, say it! Start off with your most-important section (and give it Center Stage!) stating the (potential) client's problems: want to start your own business but don't know where to start? Think you're just a housewife so you could never fulfill your dream? Go for it! With my help!
    -I help people start their small-business dreams get started with informative workshops blah blah...
    (cue Pamela) See this woman? She'd lay around her house in a housecoat with rollers in her hair smoking cigarrettes and watching Matlock and Golden Girls all day while her 16 cats peed on everything. Today, she's running her own business! (link) READ PAMELA'S AWESOME SUCCESS STORY!(/link).

    That kinda thing. It seems your site wants to be a general resource for your target audience, but if it's also mostly where YOU are helping OTHERS and that's your SERVICE, make that the most important thing! Both in the markup, AND visually!

    (again, remember this is the opinion of some random person on teh interwebs)

    Re <!-- excessive comments -->
    Well smarty pants, I use NetBeans and it shades all comments gray. As such, I add a comment before all logical sections so I can scan my code for the color gray and easily read my code...
    Crusty can't stand different colours in his code, so he won't understand how it helps you so much.

    But like with the multiple stylesheets, you could still serve the deployment version without the comments.

    Re comment rendering bug:
    What is a "rendering bug"???
    http://www.adrianpelletier.com/2007/...haracters-bug/
    He links to the PositionIsEverything explanation, which at the time they thought was only IE6 but it also hits IE7 too.
    It has nothing to do with Layout.

    It has to do (partially) with how IE6 and 7 think comments are part of the DOM. Here's an example.

    If you'd like to see what it looks like, I once managed to trigger it by having hidden stuff between floated elements (div) in a form.

    Frankly, it's not something you'll see terribly often, especially as IE6 and 7 usage go down. But you should be aware of it. I avoid the problem by not having comments between floats by pretty much not having comments at all in the deployed versions.


    I'm using em's all the way through.
    Yay!

    I don't see how changing from fixed-width Left & Right Columns using pixels to em's would blow up Paul o's layout?!
    Not if the middle part can also deal with ems. They could all share the same sandbox without someone playing "cat".

    Re definition lists (and to make it very clear: I *love* definition lists, but I *don't* think they're helping you here at all and would remove them):
    Okay. (Think the Search Engines would like that better too?)
    They won't care either way, except that the dl adds a bit more code per amount of content. Which, your page isn't dense enough to make anything measureable for a spider anyway (Crusty's always going on and on about Code to Content Ratio, and I think it does matter (you always want the least amount of code to present the content you want), but I don't think it's a huge deal here).
    While a dt->dd setup is supposed to show a "term-and-definition"-type of relationship (which I believe a Q &A is, or an FAQ), even screen readers don't get any real association between the two, search engines likely nothing, and inside your dl you have heading-paragraph pairs which are giving ALL the relational information you want to show anyway.
    Screen readers and search engines know what headings are (and actually Opera users can also navigate by headings!) and here, it looks like that's all you need. I don't believe a dl is reinforcing that idea more.

    Re padding reset:
    Sure I won't blow up all of my work thusfar? (Sounds pretty risky to me...)
    It's true that if a disaster is going to hit you, it's most likely when you change a reset after a page is mostly written rather than before you write any styles, but you can always try it. Either you have ctrl-z or u to undo and/or versioning software to let you go back anyways, if it totally destroys everything.
    But you can keep the
    * {
    margin: 0;
    }
    if you want: your styles are written for it and while it's a very heavy selector, whatever. Users won't notice. The problem with forms is just the padding. And as I said, most inlines don't even have padding, and neither do heading tags (h1-6) nor divs.

    You can try copying this and see if anything explodes:
    * {margin: 0;}
    html, body, ol, ul, dd, th, td, fieldset, legend, p {padding: 0;}

    And you may not even need that much, if you don't have *tiny* tables, don't want to really style legends (mostly removing the padding from legend meant it didn't leave a little gap behind when I absolutely-positioned it offscreen, for when I'm making accessible-but-redundant legends... a gap you only see if you let the fieldset have a border anyway).


    Re current-page highlight:
    Quote Originally Posted by poes
    I like your highlight for "current page".
    Why so?
    It's really obvious, for one (I like obviousness in user-centric design), and I like the colours. I often (not always, but most of the time) have the same highlight for hover, focus, and current page. The plus with this is it also reinforces to users who mouseover/focus on the menu item that leads to the current page that they're already there (they don't get any noticeable highlight because... it's already highlighted, cause they're already there) which is considered good usability (some UX even say "take the link out" but I don't bother).

    What color would use use assuming hyperlinks stay blue?
    I dunno, I suck at combining colours. If you want to extend the girlyness of your menu you could use one of those, but you'd really want to ask one of the more artsy people around here.

    I was using red for Facts, but wondered if that was too "loud"?!
    Yeah, and also, red and black are very commonly seen on the Get Rich Quick SEO crap sites. They all have that "look" and you wouldn't want to inadvertantly imitate it. Any other dark colour but red.


    Next post, so I don't lose all this, will be center-first if you want to try it. Or Crusty will beat me to it.

  2. #27
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Two ways to do middle-first:

    Holy Grail
    Has the disadvantage of not working well in IE6 (I'm sure Paul knows the easiest way around that) and in its own way is kinda brittle.

    Basic page markup, using pseudo-code NOT real code, these would be id's or classes:
    Code:
    <header />
    <wrapper>
      <maincontent />
      <leftsidebar />
      <rightsidebar />
    </wrapper>
    <footer />
    You always have that extra wrapper in there and it's purely to make this work.
    Also, something else will have to constrain the width of the wrapper assuming you want the page to have limited width and centered in teh viewport (like an all-encompassing pagecontainer thing).
    Code:
    wrapper {
      float: left;
      width: 100%;
    }
    
    maincontent {
    haslayout trigger if you want, but NO WIDTH;
      margin: 0 widthOfSidesInEm 1em; (1em bottom margin)
    }
    (so let's say you wanted sidebars of 10em width. set 11em as the side margins of maincontent. They also don't have to be the same width; they only need to be the width of the sidebars)
    
    leftsidebar {
      position: relative; (otherwise I've noticed browsers sometimes don't let you click on the links in here)
      float: left;
      width: 10em;
      margin-left: -100%; (this is why it doesn't work well in IE6, but if the page and wrapper have a set width, then you can use a non% unit here and then IE6 is also ok with it... but IE6 doesn't seem to know what 100% means here)
    }
    
    rightsidebar {
      position: relative;
      float: left;
      width: 10em;
      margin-left: -11em; (something more than its 10em width anyway... 11em might be too much, you play with it)
    }
    
    footer {
      clear: both;
    }
    That's Holy Grail in a nutshell. Basically, be aware you're placing the sidebars on top of some sidemargin owned by maincontent. It's actually very close to absolute positioning, meaning the rest of the page can't see the sidebars. This can sometimes be a problem so you've got to be careful.

    Advantage: if you *don't* have a set page width, or have a flexible (like 80%) page width, the middle can grow with the user's screen width while the sidebars only grow when fonts are enlarged.


    Option 2, not too unlike what you have now actually:
    Nested floats
    When Magento had their rewrite to do "content-first", this is the technique they used, partially because of course as a templating system, some users would have only a left or right sidebar, or none at all.

    This also assumes all these players are in a main page container restricting width and centering the page.
    Code:
    <header />
    <wrapper>
      <maincontent />
      <leftsidebar />
    </wrapper>
    <rightsidebar />
    <footer />
    Code:
    wrapper {
      float: left;
      width: totalOfMaincontentAndLeftsidebarAndSpaceBetweenThem;
    }
    
    maincontent {
      float: right;
      width: mostOfTheWidthMinusGutters;
      margin-left: gutterWidth;
    }
    
    leftsidebar {
      float: left;
      width: restOfTheWidth;
    }
    
    rightsidebar {
      float: right;
      width: what'sLeftAfterWrapperTookItsSpace;
    }
    
    footer {
      clear: both;
    }
    Disadvantage compared to Holy Grail: you need to know all your widths at the beginning, which restricts page growth. Floats don't naturally expand, they shrink, so nobody's going to be growing here with screen width. Unless you use %s for everything.

  3. #28
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'm on the laptop right now so I can't go into a full response -- but the easiest way to have holy grail without it breaking and without the hacks ALA always seems to have raging chodo's for is to simply add one extra wrapping DIV around the first column. Oh noes, not one DIV.

    Code:
    <div id="contentWrapper"><div id="content">
    	Page content
    <!-- #content, #contentWrapper --></div></div>
    
    <div id="firstSidebar">
    	First Sidebar
    <!-- #firstSidebar --></div>
    
    <div id="secondSidebar">
    	Second Sidebar
    <!-- #secondSidebar">
    Code:
    #contentWrapper {
    	float:left;
    	width:100%;
    }
    
    #content {
    	margin:0 12em; 
    }
    
    #firstSideBar,
    #secondSideBar {
    	position:relative; /* depth sorting AND positioning */
    	float:left;
    	width:12em;
    }
    
    #firstSideBar {
    	margin-right:-12em;
    	right:100%; /* you could also say left:-100% here, same thing */
    }
    
    #secondSideBar {
    	margin-left:-12em;
    }
    Works flawless all the way back to IE 5.0

    "Holy Grail" goes absolutely nuts trying to avoid that one extra DIV... it's one of the few times I end up saying "You know what? Use the extra DIV". It's more reliable/stable/bulletproof. Like a lot of things on ALA -- some really interesting ideas, but often the solutions are more a "what's possible" than a "What you should do" due to being needlessly complex or reliant on major hacks.

  4. #29
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Arg! Looking at Crusty's, I realise I have my divs for Holy Grail in the wrong order! Disregard my HTML from earlier post!!

    Code:
    <header />
    <wrapper>
      <maincontent />
    </wrapper>
    <leftsidebar />
    <rightsidebar />
    <footer />
    That's how it should be. Close wrapper before sidebars.

  5. #30
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,914
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Stomme poes & DeathShadow,

    You know at any respected University or College, I'd easily get 3-credit-hours for all of these comments (and work to make the changes)...

    Mega-exhausted tonight.

    Will reply tomorrow.

    Looks like I know what I'll be doing all weekend!!! (When will the change-requests ever end?! "Perfection" seems so far away again...)


    Debbie

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You can use ems in my layout much in the same way that Jason has used them above. Just use ems for the side columns and account for them much in the same way. Of course having em side columns in a pixel width layout can have drawbacks despite what the others may say. After a couple of zooms the side columns are now bigger than the main section and all your important content in the main section is going to be squashed or broken in some way which seems to defeat the purpose. You could use ems for the main container but then that means it will scale out of the viewport and seems to be more annoying to users than a bit of overlapping text here and there.

    On the other hand you shouldn't use narrow side columns if you have fixed width content or large text or images etc or at the least make sure it can all wrap (word-wrap:break-word). Whatever way you do it has drawbacks so you need to decide which approach is best for you and your visitors.

    Using position:relative to shift the columns for source order can break the zoom in IE7 and the columns get shifted awkwardly (its the same effect when using width on the body element to centre the page) so I would avoid it. Usually negative margins can achieve the same thing though and avoid the zoom issue. However, I don't believe its worth the extra effort to have content first due to the extra complexity and the odd bug but the option is there of course.

    There is also an issue with the floated 100% width column and negative margin (in both mine and Jasons code) in that the min-width needs to be controlled or you lose the scrollbar for some of the content in the middle column equal to the negative margin applied.

    All methods have drawbacks in one way or another and you will never get a definitive answer because it all depends who you ask and what their take on the problem is.

  7. #32
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You can use ems in my layout much in the same way that Jason has used them above. Just use ems for the side columns and account for them much in the same way. Of course having em side columns in a pixel width layout can have drawbacks despite what the others may say.
    Which is why pixel width (or at least fixed pixel width) layouts are a miserable steaming pile of /FAIL/ at web design.

    Quote Originally Posted by Paul O'B View Post
    After a couple of zooms the side columns are now bigger than the main section and all your important content in the main section is going to be squashed or broken in some way which seems to defeat the purpose.
    Which is what min-width is for.

    Quote Originally Posted by Paul O'B View Post
    You could use ems for the main container but then that means it will scale out of the viewport and seems to be more annoying to users than a bit of overlapping text here and there.
    Or you let the center column be dynamic, the outer wrapper be dynamic, and it all plays nice... well, except for the handful of ... I'll be nice people out there still letting FF resize content like the sweetly retarded cousin to nyetscape 4 that it really is, instead of the default Opera style zoom every browser maker has been adopting as the default behavior... and to be frank, if those people aren't used to EVERY layout being broken using that bekaptah useless 'text-resize' asshattery by now...

    It is VERY rare that I say to blazes with certain groups of users, but people who still use that outdated broken half-assed "text-resize" nonsense? Oh well!

    In case you couldn't tell, I was never a fan of that type of content resizing... once again, Opera did it right, did it first, and everyone else is left in the dust...

  8. #33
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    If I could just force Opera not to enlarge images, border thicknesses, and all that graphical junk, but just the stuff I want to see (the text), zoom would be alright.

    Seriously, who thought it was a good idea to blow up images? They look terrible and BLURRY and make me sick (literally if my eyes skim over them). Who enjoys blurring blown-up images???? Who?????

    This is zoom's biggest fail, and that's Fail like FAIL WHALE failing so faily it faily fails in fail-ness. And it's why I can't use Opera as my main browser.

  9. #34
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post

    This is zoom's biggest fail, and that's Fail like FAIL WHALE failing so faily it faily fails in fail-ness.
    You didn't fail to make your point though.

    I don't use zoom and I don't like it much either. I just want the text resized so I can read it. I'm at an age where I can't read anything without glasses and even with glasses I can't read some small text and I much prefer to click up the text size to read the small section and then click it back down again. I don't want zoomed layouts.

    Which is why what I said above still holds true and you can't please everyone. Everyone is different and has different expectations so often one solution will annoy someone else so you try to do the best you can and keep everyone half happy.

  10. #35
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    If I could just force Opera not to enlarge images, border thicknesses, and all that graphical junk, but just the stuff I want to see (the text), zoom would be alright.

    Seriously, who thought it was a good idea to blow up images? They look terrible and BLURRY and make me sick (literally if my eyes skim over them). Who enjoys blurring blown-up images???? Who?????
    Because if you don't zoom the images, you are blurring the line with text-size.

    Some layouts look really, really stupid if you zoom in the text but leave the images the same size. It's a compromise. What I've found really irritating, just practising zooming on this thread, is that it doesn't zoom to the point I'm currently looking at, so I zoom in on your text and find I'm reading DS60's, which is confusing to say the least...

  11. #36
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Some layouts look really, really stupid
    So the heck what? Was I zooming to make it look good? Or because some hotshot Designer thought 9px light grey fonts were hip?

    You're saying my browser should force me (if I was a sad sad-sack who was forced to use Opera or Chrome) to get dizzy on enlarged pixel-based images that don't look any better and aren't easier to freaking see because now they're freaking blurry so that "the layout looks good" when I'm diving for the CTRL++ so I can do what I came there to do: READ STUFF?

    Does it look weird sometimes? Yeah. So does high-contrast setting. For me, zoom/text-enlarge is an accessibility function that's there purely to assist the browser user in seeing. Like high-contrast does, like blocking animated images does, or changing all the fonts to one readable font.

    So seeing it as an accessibility function, making it a worse and less-accessible function to prevent teh Fuglies from breaking out is, frankly, bad design.

    At the very least, make it an option. Firefox lets you do either. I'm sure there are plenty of people (like Crusty here) who don't mind large, blurry images and who would rather keep "the layout looking good" but that's why it should be a choice, because current zoom prevents me from being able to use it for its intended goal.

  12. #37
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Some layouts look really, really stupid if you zoom in the text but leave the images the same size.
    The layouts look broken. The designers look stupid.

  13. #38
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    "stupid" is rather a cheap shot on my part. Let's say naive, careless, misinformed, pragmatic, "only obeying orders"...

  14. #39
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,354
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    I agree with everything in posts #33, #34, #36 and #37.

    Also, zooming everything generally throws a horizontal scroll bar at small font sizes than just zooming the text. Pages that require horizontal scrolling should be consigned to one of the more pestilential pits of hell.

    Edit: also #38
    Last edited by TechnoBear; Dec 4, 2011 at 10:36. Reason: Victorinox got #38 in first.

  15. #40
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Victorinox View Post
    The layouts look broken. The designers look stupid.
    If a design is based around images being a certain size, and you then change the size of everything except the images, of course it's going to look a mess, and you can't blame the designed for that.

    I'm not talking about where the designer has gone for a pixel perfect layout that breaks at any font size other than his default – it is perfectly possible to make a design that works fine at different font sizes, but where the graphics break completely at different zoom levels.

    Quote Originally Posted by TechnoBear View Post
    Also, zooming everything generally throws a horizontal scroll bar at small font sizes than just zooming the text. Pages that require horizontal scrolling should be consigned to one of the more pestilential pits of hell.
    That depends on the site. In my default window width of about 900px, I can zoom this page up to 140% without it invoking a horizontal scrollbar. Maximise it to 1280px and I can get up to 180% with it fitting widthwise. If you double the size of everything on a page that doesn't have a simple linear layout then it shouldn't be a great surprise when it doesn't fit. If you're getting horizontal scrolling when you zoom to where you need to, see if the site has a mobile version – sometimes that will have a linearised layout that works better with zooming in.

  16. #41
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    That depends on the site. In my default window width of about 900px, I can zoom this page up to 140% without it invoking a horizontal scrollbar. Maximise it to 1280px and I can get up to 180% with it fitting widthwise.
    Also keep in mind not all browsers (or sites) are equal on zoom... Case in point at the 960 width I run the browser at with the custom CSS applied to this site, in Opera, I can zoom to 200% and not even get a scrollbar and that's with the fonts already bumped up 25% by the user.css... and what's the scrollbar lead to? NOTHING!!! Big empty gray area -- it's the fault of certain elements in the layout being poorly designed and missing end tags in the markup. Opera pretty much will make the content fit, and is a BILLION times smarter at it than every other browser.

    @Stomme -- oh noes, crappy little icons get a bit blurry resized, not that... photographs usually scale well... the only really bad thing resize-wise being when people use images instead of text... In otherwords, non-content elements or wastes of bandwidth. Big deal.

    Though not all browsers are made equal at resizing images either; and whether or not it's a big deal likely hinges on what the content is; if the important part of the page is text, who gives a flying fig what happens to the images as long as the layout doesn't become unusable... If the content is the images... well... there might be something wrong with the content.

  17. #42
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,354
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Why is it that needing to employ a screen reader or similar assistive technology to use a web site is an accessibility issue we should all take seriously, but needing to enlarge text only to use a site is a cause for ridicule?

  18. #43
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Why is it that needing to employ a screen reader or similar assistive technology to use a web site is an accessibility issue we should all take seriously, but needing to enlarge text only to use a site is a cause for ridicule?
    Quote Originally Posted by deathshadow60 View Post
    who gives a flying fig what happens to the images as long as the layout doesn't become unusable...
    Resizing JUST the text tends to break layouts -- I'd probably be more friendly to the nyetscape 4 approach to content resizing if they did what IE did, and left PX alone; you resize one thing declared in px, you should resize all things declared in px... anything else is just begging for a broken page... it's why no new browser uses the old resize method by default. It was a bad idea fifteen years ago, it's bad idea today who's time has come and gone.

    Besides if you need text larger you probably need it that way by default, which is why we should be designing in %/em and letting the user decide. If the user even has to dive for the zoom in the first place, you've probably already shtupped the proverbial puppy design-wise.

    See the default skin for this forum with everything declared in PX... which I'm STILL having to override with user.css

  19. #44
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Resizing JUST the text tends to break layouts
    You mean badly designed layouts. I also have my browser set just to resize text, because I often find the text too small, yet I don't want the whole site blown up at the same time. If the layout isn't designed to handle increased font sizes, won't it just fail anyway if someone—like you—has system fonts set larger than the default? If so, then browser zoom is a fool's paradise for many a web designer.

  20. #45
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,354
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If the layout isn't designed to handle increased font sizes, won't it just fail anyway if someone—like you—has system fonts set larger than the default? If so, then browser zoom is a fool's paradise for many a web designer.
    My thoughts, too. I use FF as my default browser, but I when I test sites in other browsers, I want to be able to test them at various font sizes. The point of setting font-size 100% is to accommodate the user's default, whatever that may be.

    Quote Originally Posted by deathshadow60 View Post
    Besides if you need text larger you probably need it that way by default
    Actually, no. Sometimes I do have to zoom because of some lousy design, but mostly I have to zoom because I'm having a bad day and therefore having more difficulty than usual in reading. If there's one thing I can't do, ever, not even on the very best of days, it's scan from the end of one line to the start of the next without being able to see both ends at the same time. So, if I've enlarged my text to make it readable, I do not want a scroll bar to make reading it impossible.

    All we're asking is to have "Zoom Text Only" as a browser option for those who prefer it. Why is that so controversial?

  21. #46
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    but mostly I have to zoom because I'm having a bad day and therefore having more difficulty than usual in reading. If there's one thing I can't do, ever, not even on the very best of days, it's scan from the end of one line to the start of the next without being able to see both ends at the same time.
    Yes, at some times of day I like to have text bigger—like at night, when I don't feel like sitting upright. Say I'm reading an article on A List Apart: I like to bump up the text size several times, lean back in the chair and read at a distance (preferably with a glass of wine ) I love having the text bigger but the lines the same width as before. That's my ideal, rather than big, long lines that make it look like I'm watching a tennis match (on this big screen).

  22. #47
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,354
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I love having the text bigger but the lines the same width as before. That's my ideal, rather than big, long lines that make it look like I'm watching a tennis match (on this big screen).
    Exactly. Zooming text-only respects any max-width setting; zooming everything does not.

  23. #48
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Exactly. Zooming text-only respects any max-width setting; zooming everything does not.
    Huh? I'd be more concerned with min-width on that... max-width is max-width.. if it's a fluid layout where's the problem? If it's a fixed layout and you need zoom, it's probably a "crappy little stripe" anyways.

  24. #49
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    @Stomme -- oh noes, crappy little icons get a bit blurry resized, not that... photographs usually scale well... the only really bad thing resize-wise being when people use images instead of text... In otherwords, non-content elements or wastes of bandwidth. Big deal.
    Just icons wouldn't be a problem. Buttons, logos, those useless decorative stock photos they place in the middle of articles to break up the text... all makes me sick. Photographs do scale better than originally-vector-based things, but... bleh.

    It does help to block images, but again I'm doing that from Firefox: not from the browser itself the but easy one-click Web Dev ToolBar, which frankly I only use sometimes for web dev and a lot of times for surfing. Hell of a lot easier than crawling through about:conf crap.

    Off Topic:

    Oh and found an ASM-lover and sent him a link to your paku-paku. He was all like "Someone writes DOS games in 2011?? So cool!" haha

  25. #50
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,914
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Getting back on topic...

    THANK YOU DeathShadow and Stomme poes for all of your help and suggestions!!!

    I have incorporated some of your suggestions and am working on the others when I can after work. (May take until next weekend to finish things up.)

    Will post more *related* questions and my updated Test Website as soon as possible.

    Thanks,


    Debbie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •