SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 71
  1. #26
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Here's what I mean by not floating the middle column:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    	
    <style media="all">
    .wrap {width: 95%; max-width: 60em; margin: 50px auto 0;}
    .content {background: rgba(133,97,61,0.3); -moz-border-radius: 30px; -webkit-border-radius: 30px; -khtml-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; overflow: hidden; padding: 2%;}
    .left {float: left;}
    .left, .right {width: 25%;}
    .right {float: right;}
    .mid {width: 44%; margin: 0 28%;}
    .inner {padding: 10px; border: 2px solid white; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px;}
    </style>
    	
    </head>
    <body>
    
    <div class="wrap">
    	<div class="content">
    		<div class="left">
    			<div class="inner">
    				<p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>
    
    				<p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p>
    			</div>
    		</div>
    		
    		<div class="right">
    			<div class="inner">
    				<p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>
    
    				<p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p>
    			</div>
    		</div>
    
    		<div class="mid">
    			<div class="inner">
    				<p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>
    
    				<p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p>
    
    				<p>O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. Nos autem fortes viri satis facere rei publicae videmur, si istius furorem ac tela vitemus. Ad mortem te, Catilina, duci iussu consulis iam pridem oportebat, in te conferri pestem, quam tu in nos omnes iam diu machinaris.</p> 
    			</div>
    		</div>
    	</div>
    </div>
    
    </body>
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  2. #27
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help Ralph. I really appreciate it. That thing I mentioned before about the new FW CS6 creating CSS is working. I have added the CSS to the page. You can see it here...http://foxdenwebsolutions.com/CACNR/index2.html. The inner boxes need to be tweaked as I don't have them set correctly. I tested it in IETester, which has older versions of IE and IE8 hates it. IE9 accepts it. I know that there are still a lot of people are using IE8 so I don't know what to do. Am I going to have to slice anyway?

    BTW I have everything with px first because I need to do the math (YUCK!) to figure out the percentages and I am not good at math!

  3. #28
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    In terms of the layout, have a look at what I posted, as it's a better centering method, and also notice how the round corners are done. Editing CSS generated by an Adobe product isn't much fun, so I'd recommend you avoid that kind of code.

    In terms of CSS3 compatibility in IE8 and under (round corners, rgba etc.), there are some JS add-ons you can use to get them going, such as this:

    http://css3pie.com/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #29
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok I will take your advice and learn from it. I will also look into the JS add-on. But.....what if the viewers have JS turned off? There is always that possibility.

  5. #30
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cgacfox View Post
    Ok I will take your advice and learn from it. I will also look into the JS add-on. But.....what if the viewers have JS turned off? There is always that possibility.
    Ha ha, there's only so much you can do for people. As long as the content is fully accessible, they are being well served.

    One other issue you will face with that background image is that there is space around it on large screens. One option is to use a full-size background. Here is one way to implement that:

    http://buildinternet.com/project/supersized/3/core.html

    OK, it's a bit JS heavy. There is a CSS3 method, but too many browsers don't support it as yet.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #31
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey Ralph. I have pretty much finished with the code for the site but am still really confused on how to change px to % to really get this to be responsive. I was wondering if you would be willing to walk me through the site step by step so that others can follow how to make existing code responsive. We can start a new thread for it. Most of my code right now is px. BTW, I tested the site at W3C (which includes the code snippet you did for the content area) and the CSS3 code is showing as not supported. I thought these techniques have been around for a while that the W3C would accept them. The site is up at http://foxdenwebsolutions.com/CACNR/index.html.

  7. #32
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Wow ralph, you really earn that staff member badge! :)

  8. #33
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cgacfox View Post
    I was wondering if you would be willing to walk me through the site step by step so that others can follow how to make existing code responsive.
    To start with, just remove the width on the body (never put a width on body) and on the wrapper. That will allow the content area to expand and contract.

    I tested the site at W3C (which includes the code snippet you did for the content area) and the CSS3 code is showing as not supported.[/QUOTE]

    Yes, when validating against CSS 2.1, CSS3 properties don't validate. But you can choose to validate against CSS3, in which case it's OK. The vendor prefixes may still throw warnings or errors, but that's not a problem. Remember that validation is just there to give you a heads up about any potential problems. As long as you put CSS3 in there consciously, you have nothing to worry about.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #34
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I removed the width on the body and wrapper. I figure I need to make the font sizes to ems. Then work on the branding and the nav. I changed the background on the site. I am trying to go with something that not seen every day. I did upload it again and will with each change.

  10. #35
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Responsive web design... grid... Responsive web design... grid... Responsive web design... grid...

    BWAHAHAHAAA... Oh man, you slay me. That's the funniest thing I've heard in some time! Ranks up there with acute apathy, non-fat cream, noiseless sound, and being 'just a little pregnant'.

    Do yourself a favor, forget that grid nonsense even exists. Double-wrap the middle column to put it content first floated, put a wrapper around both side columns so you can width trigger to a single column, and just declare widths that make sense without any of that grid idiocy screwing it up.

    NOT that your starting picture (which I consider a flawed approach to making a website in the first place) is a viable concept for a fluid or semi-fluid layout with media query switches per-se... To even approach that a number of the visual concepts would probably have an axe swung at them.

  11. #36
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok death, seems you hate the grid approach. I am just trying to learn a new technique. Give this old lady a break. I want to learn the proper way to do this. Some sites say that you need to start with a mobile site first and build up from there. I had already started this when my client then told me that he wanted this accessible via different devices. I have never designed for anything but PCs and laptops so I had to start doing a lot of research. This site has always been kind and helpful to me in learning how to things I have never done before. If you want to help Ralph help me design this site properly, then I appreciate your help. I figure with the background graphic, it will go away for smaller devices. That is where the media queries will come into play. I know for smaller devices it would probably be best to have a very simple layout with not a lot of graphics to have to re-size. For right now, I just want to get the full sized site in % and ems instead of pxs. This is where I am getting confused.

    Now I am confused by what you mean with the middle column. What do you mean by double wrapping it? I think I understand what you are talking about with the side columns. Put each in a wrapper and declare % instead of px? Is that correct?

  12. #37
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Grabbing breakfast, but right after I'll belt out a demo of what I meant... I would end up with a few questions -- like that "webtrak" section -- what's actually going there? If that's a full width image rotator, fixed image, flash movie or other such content it will NOT be viable for a 'responsive' layout - AT ALL.

    Also, the transparencies are a coding nightmare to actually implement if you give a flying fig about accessibility. It can be done, doesn't mean it SHOULD be done. Likewise the equal height columns? That's either right out, or needlessly complex; typical of drawing a pretty picture instead of making the layout where layout creating belongs.... in the CSS.

  13. #38
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    ... and here's what I came up with:

    http://www.cutcodedown.com/for_other.../template.html

    As with all my examples the directory:

    http://www.cutcodedown.com/for_others/cgacfox

    ... is unlocked for easy access to the bits and pieces. I didn't go for a full out translation of the page, just enough to show the basics of doing a responsive layout.

    I prefer to design for 'middle widths' first -- since there are still a lot more IE8 and lower users than there are people with crappy outdated mobile. I dislike the notion of giving IE8 and lower users the mobile layout; and that's really the decision you have to make with responsive and where to start.

    I always start with a semi-fluid layout -- meaning the outer wrapper gets a min and max-width thus:
    Code:
    	min-width:752px;
    	max-width:66em;
    	width:95%;
    	margin:0 auto;
    The EM max-width lets the layout be 'elastic' on the high end, so large font/120dpi users (like myself) or those of even larger sizes get a wider maximum width. The layout will expand to fit it. Since we're at a 'narrow' width we really should only try to fit one column. That's what the outer "sideBarWrapper" is there to accomplish.

    The #contentWrapper/#content pairing is what I meant by a 'content first' approach. The center column contains (or should contain) the most important data on the page -- what the visitor is actually on the site to see, so we want it first. Floating the outer wrapper full width means there's 0px free to fit #sideBarWrapper. Setting a negative left-margin on #sideBarWrapper equal to it's width 'sucks in' the 'flow width' of that DIV to 0 -- and if it's reporting 0 width in flow, it can fit in that 0px wide spot next to #contentWrapper. We then just add a side margin on #content to push that out from under the sidebar.

    Notice again I declare the sidebars in EM width since their content is dynamically sized, so large font/120dpi (or larger) users (like me) don't end up with uselessly tiny sidebars.

    There's also just not enough room at these width constraints to fit the menu on the left, so I centered it above.

    The magic for three column and one column comes in here:
    Code:
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="bigScreen.css"
    	media="screen and (min-width:66em)"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="smallScreen.css"
    	media="screen and (max-width:751px)"
    />
    Loading extra stylesheets as needed for wider or narrower widths.

    For bigScreen.css I increase the max-width. Really the only reason we set a max-width (or min-width for that matter) in the screen.css is for browsers that don't know media queries... with bigScreen we'll go to three columns, so go ahead and get wider. #content gets a margin on both sides to make room for both sidebars. I had to add 0.15em (roughly 2px or more depending on font size) to make room for the border around both sidebars which get added to their width. (which is stupid, but hey). #sideBarWrapper gets all it's floating behavior and margin tricks stripped off it, and instead we apply them to #firstSideBar and #secondSideBar. #firstSideBar then gets the opposite negative margin, which still makes it 0 width in flow, but rendering to the right instead of left of where it would normally be. Using relative positioning to slide it left the full width pops it into our desired position. Poof, 3 column layout.

    I also then play with the footer to put it into a three column setup with the footer menu on the left as per the original image... and naturally we play with the paddings and margins to make things purty.

    Smallscreen.css is a bit more complex since on mobile a lot of the CSS3 stuff can suck memory, battery and make scrolling painful, the extra paddings chew up precious screen real-estate, etc. A the floats and margins for having sidebars are stripped out to make it all a single column, and I threw in some border tags to separate the sections. One final tweak I give it addresses really small (272px or narrower) displays, like the 192px many phones using Opera Mini run -- it's too narrow to fit the calendar without shrinking the font size, and the 'airplane divider' looks funky chopped off so we change it's background-position.

    ... and that's how you do responsive layout; no malfing 'grids' needed. If anything it's simpler because you don't have to do math to figure out every column's width. You let the center column be dynamic, the side columns be elastic, the outer wrapper be semi-fluid, and you're golden. Grids go hand in hand with this 'declaring fixed widths on everything' mentality that to be frank, has about as little to do with accessible web design as being able to draw a goofy picture in photoshop and then call yourself a 'designer'.

    I used CSS3 for the rounded corners and some light shadow effects. IE8 and lower get square corners and no shadows, OH WELL. Site tested as at least functional and usable all the way back to IE 5.5 -- though IE7 and 8 only get elastic between 752 and 66em, and IE6/lower get a 752px fixed width -- again, oh well. We could waste weeks trying to get those old browsers perfect and still not be happy with the result... so just feed them working but less attractive/functional versions.

    -- edit -- BTW, from a layout perspective I'd seriously consider axing the extra border around all the columns.

  14. #39
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wow death, thank you so much! This is a great Mother's Day present! I will study the code more in depth when I get home from the day job and then start asking all the questions that I am sure I will have!

  15. #40
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yes, great work, Jason. I'm pouring over that code, too.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  16. #41
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    WOW! Just read over the code....where to begin with questions? I appreciate your comments within the code. It helps understand what you are doing.

    Now don't get mad at me but why no page or body background and transparency with the content area? Also why XHTML and not HTML5?

    I am not sure what this is used for. <meta name="viewport" content="width=device-width; initial-scale=1.0"/>.

    My "header" text is an image because I would have to embed the text in order to get it to look the same. Is there any way to play with the image to get it to work? I think I have seen tutorials for this. The client likes the font and wants to keep it.

    WebTrak is a Flash site that a lot of airports use. There is no way to embed it, so we are back to an image slider. Now I have seen sliders that do work in responsive sites so I will have to look in that more.

    I see that you used separate CSS pages for each "size". Is this better practice? The tutorials that I have seen show everything on one CSS page.

    Ok I think this is enough for now. Once you answer these so I get where you are coming from, this I will continue to ask more questions about the choices you made. Again thank you so much for showing me how responsive code is done.

    Oh BTW I don't use Photoshop for graphics. I use Fireworks.

  17. #42
    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 cgacfox View Post
    WOW! Just read over the code....where to begin with questions? I appreciate your comments within the code. It helps understand what you are doing.
    It's actually a bit comment-light, but really the only time comments should be needed is when you are doing something that needs explanation... IMHO that's things like 'why are you hiding tags' or 'you're not actually chopping off content, why the overflow?'

    Quote Originally Posted by cgacfox View Post
    but why no page or body background and transparency with the content area?
    I didn't implement them but they are easy enough to add -- though the body background image used in the 'pretty picture' is NOT viable IMHO for web deployment for simply being too large; your design image all by itself as a jpeg with horrid compression artifacting is 30k larger than the upper limit I allow for an entire PAGE on a website (HTML+CSS+IMAGES+SCRIPTS!) -- there's no reason to think that a full tileable version of that background would be any smaller; quite the opposite in fact.

    Literally I target 70k in 16 files as my 'ideal' page size, with 140k in 24 files the 'upper limit' for something mundane like a page full of informational text.

    The transparencies to that background CAN be done, but it requires some trickery and multiple extra DIV for each section if you don't want the text/content to gain transparency too. Transparencies like that also cause major legibility issues which is why as a rule I try to avoid them. Personally I hate them on desktop OS, I hate them in applications, why would anyone want that on a website. "OH it looks pretty" -- if the result is impossible to read for many people it doesn't matter how "pretty" it is.

    Quote Originally Posted by cgacfox View Post
    Also why XHTML and not HTML5?
    Because IMHO HTML 5 is a fat bloated wreck that offers NO real world benefits over HTML4/XHTML1 - in fact the loosening of structural rules, allegedly semantic tags that aren't actually semantic, introduced pointless redundancies, all seem carefully crafted to cater to the people who have spent the past 14 years crapping out sites in 4 tranny -- which is to say they've been in 'transition' from 1997 to 1998 for almost a decade and a half. HTML 5 seems to have absolutely NOTHING to do with writing cleaner, easier to debug, easier to maintain or even more functional markup, and instead is chock full of "gee ain't it neat" nonsense that seems to exist JUST so that authors can sell more books, professional lecturers can get more buns in seats, to placate the people who never even got the point of semantic markup or STRICT, as well as giving certain scam artists a tool to prey on the ignorance of nubes with.

    I literally cannot fathom how anyone who actually understands HTML and semantics can be DUMB ENOUGH to see any advantages to it -- in that "you had to go to college to say something that stupid" sense-- and it's why many developers right now are writing HTML 4.01 STRICT or XHTML 1.0, and slapping the 5 tranny doctype on it so that clients who refuse to listen to reason THINK they're getting 5 - when they aren't. Me? I'd rather explain to them that much like the sick buzzword "Web 2.0" getting technical advice from the pages of Forbes is like getting financial advice from Popular Electronics. Might as well start throwing the words "paradigm" and "proactive" in there.

    Quote Originally Posted by itchyScratchyAndPoochie
    Lady: We at the network want a dog with attitude. He's edgy, he's "in your face." You've heard the expression "let's get busy"? Well, this is a dog who gets "biz-zay!" Consistently and thoroughly.

    Krusty: So he's proactive, huh?

    Lady: Oh, God, yes. We're talking about a totally outrageous paradigm.

    Meyer: Excuse me, but "proactive" and "paradigm"? Aren't these just buzzwords that dumb people use to sound important? ..... Not that I'm accusing you of anything like that. ..... I'm fired, aren't I?
    Quote Originally Posted by cgacfox View Post
    I am not sure what this is used for. <meta name="viewport" content="width=device-width; initial-scale=1.0"/>.
    That's a mobile specific meta that tells mobile browsers NOT to automatically resize the page using 'their rules' and instead obey what we are telling it. Mobile browsers on Windows Phone, Android and iOS are designed to automatically 'lie' to websites claiming to be 800 or even 1024 wide as "width" regardless of what it REALLY is... and then playing games with all the font sizes so that sites not designed for mobile are at least semi-functional. Since responsive layout is about designing a custom appearance for that, we have to turn that functionality off...

    In the CSS you'll find two other rules:
    Code:
    * {
    	-webkit-text-size-adjust:none;
      -ms-text-size-adjust:none;
    }
    That also help with this. The trio combine to try and make the various phones stop overriding what we're trying to tell it to do in terms of font sizes, paddings and widths.

    Quote Originally Posted by cgacfox View Post
    My "header" text is an image because I would have to embed the text in order to get it to look the same.
    Which being transparent to the background would cause massive headaches as a IMG unless you play some alignment trickery; at least if you care about graceful degradation for images off users -- like people on crappy mobile plans or on metered accounts. The normal gilder-levin image replacement sounds like the answer, but you'd have to be sure to pre-composite the background so you aren't using alpha transparency to pull it off.

    NOT that there's a legitimate reason to waste bandwidth on alpha transparent images.

    Quote Originally Posted by cgacfox View Post
    WebTrak is a Flash site that a lot of airports use. There is no way to embed it, so we are back to an image slider. Now I have seen sliders that do work in responsive sites so I will have to look in that more.
    I looked it up -- the MASSIVE delay in it loading, the poor compatibility even on systems that support flash, and lack of flash on many clients all mean that if I were to include it on the site, I'd give it a separate page all to itself -- then you'd have more screen real-estate available to fit it, and not have it shoving the useful content on the page explaining the who/what/where further down.

    Quote Originally Posted by cgacfox View Post
    I see that you used separate CSS pages for each "size". Is this better practice? The tutorials that I have seen show everything on one CSS page.
    I consider it better practice just because the majority of site traffic remains 'desktop resolutions' from 800 to 1280; why waste bandwidth sending the mobile CSS to users who won't use it -- same for the bigScreen.css since IE8 and lower users won't even receive it.

    I also find it easier to work with multiple separate files since I can open them each in separate editor windows -- letting me put them side-by-side across monitors. When you are writing the code to override the default screen.css -- it helps to be able to have that original side-by-side with the other sheet. Same goes for writing the CSS -- I laugh at developers who put it in the markup during development as if that's somehow easier -- because constantly scrolling up to the css and down to the markup and up to the css and down to the markup is SO much easier than having CSS in one window, markup in the other, side-by-side.

    Though that's also why I'm one of the freaks who considers tabbed editors a step backwards in functionality.

    Quote Originally Posted by cgacfox View Post
    Oh BTW I don't use Photoshop for graphics. I use Fireworks.
    Dollars to donuts really -- a paint program is a paint program... ESPECIALLY with that Adobe label on it. BE it GIMP, PSP, Pixel, Photoshop -- it's still drawing pretty pictures, something that IMHO shouldn't even be involved in the development process until AFTER you have semantic markup of content and a layout done up in CSS. The reason I say this is content should dictate layout, NOT the other way around; and people visit websites for the content -- NOT the goofy graphics you put around it.

    Look at the major successes of the web -- Google, Amazon, eBay, Facebook -- not exactly a visual tour de force. It's why you only tend to see the over the top graphical stuff on crappy little personal designer pages, and businesses who don't realize their bloated page is turning it into an expense, instead of the advertising investment it should be.

  18. #43
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Good morning, Jason, if I may call you that. I understand pretty much where you are coming from. I have been "freelancing" for 7 years now after I graduated college. Yes I went to college at the age of 40 and graduated at 46. My degree is in IT and when the core web design classes started I fell in love. This was a way to release my creativity and really enjoy a career. Unfortunately my instructor taught us all incorrectly. This was 2004 and she taught us to use TABLES to design. She was in to the Macromedia line of DW, FW, ColdFusion, etc. I did learn to code by hand (which I have gotten away from with DW). OMG it took me a while to realize that TABLES were NO LONGER USED. CSS was what was used to make the site pretty! I came here for questions on how to use CSS and everyone that I have dealt with since has been beyond helpful.

    The other pages involved in this site will be 2 column instead of 3 column. So do I drop firstSideBar for those pages? Will it screw anything up with the elasticity?

    I will ask more questions tonight when I get home.

  19. #44
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You don't have to tiptoe around Crusty here. He's just a bit crusty (and a good resource).

    Quote Originally Posted by Crusty
    I literally cannot fathom how anyone who actually understands HTML and semantics can be DUMB ENOUGH to see any advantages to it -- in that "you had to go to college to say something that stupid" sense-- and it's why many developers right now are writing HTML 4.01 STRICT or XHTML 1.0, and slapping the 5 tranny doctype on it so that clients who refuse to listen to reason THINK they're getting 5 - when they aren't.
    That said, XHTML is a waste of good slashes! Think of the environment! Think of the children!

    Minor correction but you should fix this:
    Quote Originally Posted by fox/crusty
    I am not sure what this is used for. <meta name="viewport" content="width=device-width; initial-scale=1.0"/>.
    No semi-colon between the two despite what is floating around the web in great numbers. Content is a comma-separated value. Apparently lots of devices don't care at the moment, but some of the them do, or so rumour teh interwebs, so use the comma. Another thing I've seen floating around the web is a semi-colon after the scale (or whatever the last item is). Also a no-no.

    Major and needs a correction:
    -webkit-text-size-adjust: none; will prevent users from enlarging text. I'd much rather let someone's iThing screw up with my text size and let the user adjust to their needs, than to force everyone to use my chosen text size (and y'all know in my case this would already be huge text... but let's face it, 99% of websites out there don't look like zeldman's). There's got to be some other better way to tame iSafari.
    Bug means desktop is affected, unless latest webkits have finally disabled this monstrosity.

    You might get -webkit-text-size-adjust: 100% working okay though.

    Quote Originally Posted by crusty
    because constantly scrolling up to the css and down to the markup and up to the css and down to the markup is SO much easier than having CSS in one window, markup in the other, side-by-side.
    Either is two keystrokes away if you use a proper editor, muhahaha. Love "gg" and "G" and ":''". Look ma, no scrolling!
    Just had to say it :P

    Quote Originally Posted by fox
    This was 2004 and she taught us to use TABLES to design. She was in to the Macromedia line of DW, FW, ColdFusion, etc.
    My foster-brother-in-law was in school last year and they were learning <font> tags in dreambeaver. So yeah we're still getting these students churned out... everyone has to unlearn what they learned if they were unlucky in school.

  20. #45
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok now I am getting conflicting advice. I understand that each designer/developer has his or her own preferred way of doing things and they bash everyone else's way. This does not help those of us that are really trying to learn a new technique. I only like and use the <!doctype html> for HTML5 so far. Everything else I use tags as I have always done. Opening and closing divs, classes, etc. Now CSS3 has some really cool stuff that can be done to really make sites stand out, but it seems that Jason likes his pages without ANY decoration or very minimal decoration. I like to use a lot of decoration. I realize that it eats up bandwidth. Most people on PCs or laptops I am sure have Cable or at the very least DSL. Now mobile users will not get my fancy crap that Jason hates. I understand that bandwidth is very precious when it comes to smart phones. I actually hate smart phones and don't use one. I do, however, now own a Kindle Fire and do surf at home only using my wireless connection. So I can test what the site will look like on small tablets. I also understand that below IE9 CSS3 is pretty much a waste unless you install some JS but I saw some posts from Jason bashing JS! I give up! I did bring up the JS thing with Ralph because in the Ethan Marcotte book, he does take into account users that have JS turned off. I realize that you can't please everybody all the time. This site will be mainly used by the city counsel members that are on the noise roundtable counsel. After about 8 prototypes, they finally decided on what I posted in the beginning of this thread. I am just trying to understand how to make this responsive and then how to get it into WP. If you look at Ethan Marcotte's site to back up his book, http://responsivewebdesign.com/robot/, it works with a background and a slider. His background and slider go all the way down to small screens. Now there has to be a way I can do the transparancy with CSS3 and have it work in IE8 or above. I will no longer support IE7 or below and maybe that is wrong but MS is about to release IE10 and people need to get with the times. Yeah that is MY opinion.

    I do appreciate all that Jason, Ralph and the rest of the guys here have done to help me, don't get me wrong. I will continue to come here for those times when this old brain just an't figure out how to do something. That is unfortunately the life of a freelancer. We don't have team members to bounce stuff off of each other and use each other's expertise to get through a difficult build.

    Jason, I will play around with what you gave me to see what I can do to make it look more like what the original prototype looks like, but understand that I am SO grateful for your help on this. I also want to set up some sort of "boilerplate" that I can use over and over so I don't have to invent the wheel each time I design a site. I have been looking at the HTML5 boilerplate but I can almost "hear' Jason bashing that as well.

    One day I will be comfortable with whipping out sites like there is no tomorrow, but of course things will change again and I will have to start all over with the learning curve!

  21. #46
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Don't get too worried about all this bashing. It doesn't hurt to picture an ideal world, even if we all know it will never exist. At least it provides an ideal that we can aspire to. There are still varying opinions on what's best practice, but it's good at least to know what the options are.

    Quote Originally Posted by cgacfox View Post
    I only like and use the <!doctype html> for HTML5 so far. Everything else I use tags as I have always done.
    And that's fine.

    And using JS is fine. Just be aware of its shortcomings, and ask yourself in each case what's more important. If you just pull back a bit on JS when it's not really necessary, you've gotten the whole point of discussing things like this.

    The majority of web designers out there—even the famous ones—would cry "Huh?" at most of the discussions/rants that go on here. It doesn't mean they aren't important, though.

    I will no longer support IE7 or below and maybe that is wrong but MS is about to release IE10 and people need to get with the times. Yeah that is MY opinion.
    Fair enough, I say. IE7 nly has about a 2% market share anyhow. If your code is well written, people using old browsers will still be able to access the content, and that's the important thing.

    We don't have team members to bounce stuff off of each other and use each other's expertise to get through a difficult build.
    You have them here.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  22. #47
    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 Stomme poes View Post
    No semi-colon between the two despite what is floating around the web in great numbers. Content is a comma-separated value.
    Which is ignored if you use comma's on original iPhones... since the use of semi-colons for it originated with... the iPhone. Thankfully 2nd generation and later do recognize commas, but the original does not.

    Quote Originally Posted by Stomme poes View Post
    1) Omitting that results in a broken layout on most of my sites BECAUSE it also allows the engine to auto-resize the content.

    2) Never new that about it on DESKTOP, but without it mobile is shtupped... so I'm looking at finding a way to send that to JUST mobile? JOY. Funny how on mobile you can still zoom in and out, but the fix for mobile messes up desktop. That's just brilliant; so in other words mobile webkit uses a different zoom than desktop? WOW. ... and I thought the ineptitude couldn't get any worse.

    Quote Originally Posted by Stomme poes View Post
    Either is two keystrokes away if you use a proper editor, muhahaha. Love "gg" and "G" and ":''". Look ma, no scrolling!
    Just had to say it :P
    Completely missing the point -- of being able to SEE both at the same time.

  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 cgacfox View Post
    I also want to set up some sort of "boilerplate" that I can use over and over so I don't have to invent the wheel each time I design a site. I have been looking at the HTML5 boilerplate but I can almost "hear' Jason bashing that as well.
    Good guess -- not only is HTML 5 a steaming pile, frameworks are universally such massive dung heaps you'd think you were at a non-grazing dairy farm. You end up with this massive mess of code before you even start making your layout, it forces you into using presentational markup, and on the whole is a sleazeball shortcut that costs everyone in the long run.

    BTW, yes, bash things. Question EVERYTHING (even me). Stripping things down to the bone and building them back up is how we make things better; blindly accepting new specifications because "ooh, shiney" without questioning "why" or "what good is it" is just part of this limp, soft, "status quo" mentality that is a hefty part of why so many coders still seem to end up with their heads wedged up 1998's backside.

    Which of course seems to be the point of HTML 5, to legitimize 1998 style HTML 3.2 coding and sleazy half-assed practices.

    But to put that in perspective, I'm the nut who would obsolete all the tags deprecated in STRICT, obsolete the STYLE tag, greatly restrict what you are allowed to do with the STYLE attribute, obsolete EVERY "on___" attribute (methods should be attached by the script, not the other way around), and try to make the various browser makers allow everything they are doing in AUDIO and VIDEO actually work in OBJECT, and give a hard ride to those browser makers who STILL don't have object working properly... Naturally I'd likely keep NONE of the new HTML 5 tags as they all seem to be pointless bloat, and probably only keep about a third of the new attributes.

    Again, I can't believe anyone sees benefits to HTML 5 -- at all. It's not like with HTML 4 where the benefits were there, the user agents weren't -- at least not until we were able to kick Nyetscape 4 to the curb (which really wasn't practical until 2003, when practical non-IE alternatives matured into something useful). In this case there are no real tangible benefits other than fatter bloated code and encouraging people to make less useful websites -- laughably in the name of doing the exact opposite.

    -- edit --
    Actually, that's not entirely fair -- to HTML 3.2 -- since apart from a few minor new tags, most of 4 Strict is a SUBSET of 3.2; the real advantages came from CSS and separation of presentation from content. Kind of like today, where all the really neat stuff that people call HTML 5 are actually CSS3 and Javascript; which is why those are lumped under 5's banner since without them, the emperor is in the buff.

  24. #49
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Almost forgot:
    Quote Originally Posted by Stomme poes View Post
    but let's face it, 99% of websites out there don't look like zeldman's).
    You mean the only website I have to zoom OUT to use?

  25. #50
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by crusty
    Omitting that results in a broken layout on most of my sites BECAUSE it also allows the engine to auto-resize the content.
    Try the one with "100%" as the value. I don't have a mobile so I can't test.

    Quote Originally Posted by crusty
    You mean the only website I have to zoom OUT to use?
    Damned right.

    It's refreshing, having at least one site on teh whole internets that actually doesn't require a CTRL++. Finally, a site where all those 12px-loving iMac designer guys actually have to do what the rest of us do on their sites all the time: adjust the text to make it readable.
    It's too bad he doesn't also let me actually make my browser smaller so I can haz other applications open at the same time, but I guess one can't haz her cheeze with her whine.

    Frankly, I want more sites to go this way, just to get devs used to this idea.

    Another great one would be a page where all users are forced to use keyboard cause the mouse'll be ignored. That would be fun. Could do it for global-think-of-accessibility-day or something.


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
  •