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.
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?’
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.
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.
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…
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.
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.
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.
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.
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.
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.
You don’t have to tiptoe around Crusty here. He’s just a bit crusty (and a good resource).
That said, XHTML is a waste of good slashes! Think of the environment! Think of the children!
Minor correction but you should fix this:
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.
You might get -webkit-text-size-adjust: 100% working okay though.
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
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.
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! :smoke::drink: 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. :twocents:
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!
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.
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.
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.
Omitting that results in a broken layout on most of my sites BECAUSE it also allows the engine to auto-resize the content.
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.
Completely missing the point – of being able to SEE both at the same time.
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.
Try the one with “100%” as the value. I don’t have a mobile so I can’t test.
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.
Is it just me but that Zeldman site gives me an instant migraine for some reason? The very large #222 text on a #f9f9f9 background seems to flicker and dance all over the place. I find it totally unusable and could not continue to read. I’m still having trouble focussing now as though its burned into my retina
Hm, 'twas OK for me. It’s the white text on black backgrounds that makes my eyes go all funny.
I usually bump up the text like this anyway, so Zeldy has saved me the trouble. Though I much preferred his previous design (sigh). And although I’ve been on a personal campaign to obliterate sidebars, I find the lack of one on his site now very disconcerting.
Ok gentlemen, quick question…does one have to use RBGA for transparent graphics without having to resort to sliced images? I saw an article by Chris Coyier on his CSS Hacks site about this little hack.
However, some of the posts say it doesn’t work in IE 7 (or 8) and older.
Is there a way to do the RGBA and images? No that would use up precious bandwidth. I need to get Jason’s template to have the transparent backgrounds that I originally designed for the client and that the client wants. I am trying to decide what would be the best way to handle this.
You could have a small, semi-transparent brown image repeating in that content area instead of using rgba. In Photoshop, choose the brown you want, then reduce the opacity to about 20% or so.
I wouldn’t bother with all that horrid Microsoft code.
Ok so it is best go to with a sliced image to support older IE browsers. Start slicing! I wish that IE 6, 7, and 8 would just disappear so that we can enjoy doing what we do without fighting with browsers that DON’T like what we do.
I also have to embed a font for the main text heading. I can’t use what I used in the mockup as that is a MS font and it has a different kind of license. I found similar fonts to Segoe Script and will get the font kit from fontsquirrel.com. Do all browsers understand font kits?
It’s best to forget you ever heard the word “slice” in relation to the web. It’s a term for the bad old table days. Just sayin’ You don’t need to slice anything. Just make a single, small image about 20px x 20px and let it repeat across the background of the element as a background image.
I wish that IE 6, 7, and 8 would just disappear so that we can enjoy doing what we do without fighting with browsers that DON’T like what we do.
Then stop paying lip service to them! Let users of those browsers get their solid backgrounds and square corners, which is what they deserve. Pandering to them only maintains the status quo.
I also have to embed a font for the main text heading … Do all browsers understand font kits?
There are various options, some free and some that come at a fee, but FontSquirrel is the best service I’ve used yet, and it’s free. Yes, it works well in all browsers.
I am stuck again. I am trying to get flexslider to work with this site and I can’t get it working correctly. The site is at http://foxdenwebsolutions.com/CACNR/index.html. Instead of posting a bunch of code you can view the code at the site. I am thinking that what Jason built for the Webtrak area (which is now the flexslider area) is preventing the slider from working properly. I know Jason will be mad at me for adding this but oh well! I still appreciate you, Jason!
The first problem seems to be that the images are not in the right place. Where are they stored in relation to that page? According to the links, they should be in the same folder as the page itself (i.e. /CACNR/).
:smoke::drink: 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, 
