Lessons

Lesson Info

Session 5: Q&A

I have a question from Denise in Goto Webinar. Um, hello. Is it possible to round corners using CSS three with them? A spry drop down menu? Yes, anything that's a block level. Elements could get a rounded corner applied to it, but those rounded corners wouldn't appear in all versions of IE. So actually know what? You know what? I'm so glad they asked that because I always have an extra thing in my pocket and I think it's in there. I knew that. I can't take credit for this. This was built by if I found this on an online gallery. Let's open this up in Dreamweaver. It's a drop down menu that someone built. This is what it I got it from the Web designer wall looks pretty boring, right? Looks like some boxy things. Looking at the code, you can see that it's a series of nested lists because most dropped on menus are nested list. And that's all really a spry menu asses a series of nested lists. Let's look at a live you look at that, so drop down rounded corners on the drop downs. But to see h...

ow it's breaking just a bit in the hover state in blue. It's defaulting to a rectangle, and maybe that was their choice. Maybe that's or maybe they can't help it. But, um, pretty cool. Let's check it in the browser. I think it's even better in the browser. It's in my other window over here. Look at that. That's all done with CSS three rounded corners. Drop down menus and I don't want the folks on the Internet can see this. But there is that letter press effect with a bevel in and bosses well, without a subtle at the text shadow in a lighter color to look, make the type look, recess kind of like on the IPhone and box shadows on the well, the boxes Thea Nor did lists as well as the block level elements in the NAB Our. So I was pretty impressed when I saw that. So that's I mean, things are changing so rapidly and one of the best comments that I saw on the geographer site. So the experimental type with the quote that looks like a poster, all human beings are free here. Where's his about this experiment? He says to great things on this. If you show me that 10 years ago my head would have exploded If you would have showed me that two years ago, my head would have exploded. Okay, 10 years ago, we were still dreaming about the inner than although I certainly. And then he talks. About what? Browsers? It works. Then he says, Nice. Here we go. But I can't say that I don't endorse. All right, Susan, do you have any questions for here? Um, some people were asking if you could share some more of your inspiration sites, and then Ken and geek asked if you could please put up the page with the links. It's actually, it's in my pdf, but let's just put that in the air. We talking about the demo links for each of the classes where the links that I mentioned today I think the links that you meant bringing up that you know, I will. I will post these later today. Okay, so if anyway so. And actually, since last week at eric, phantom dot com slash live. I have links to all of our project files from people convey you them. And by later this afternoon or evening, every link that I posted today will be at the bottom of this page so you don't even have to get the PdF don't even have to buy the course to get the links. What a bargain and I've actually got. There's actually several others, which I didn't get a chance to look at yet today. But if anybody's rapidly scribbling at home, there it is. In the video, you can calm people down. So I have a couple of the questions. You have a question in the audience. I just want to know how these things to grade and I eat. Then do I have to make another page for I e toe? Tell it to be normal or see previous blawg posters. Comment? Okay, Um, no, they don't degrade. Well, what we're talking about here is the forward thinking web. In the very beginning of the class, we talked about designing for 608 100. We talked about, you know, riding a horse to work using a landline, all sorts of primitive concepts, nuclear families. The wife stays home. Dad works all sorts of antiquity. The family has a PC and uses I OK, so this is these are techniques you're gonna be using 12 to 18 months from now. These air not techniques these air bleeding at shavings. This is when we talk about usability designing for your user base. Most of these techniques we talked about today if you met with your clients and who your users and what your needs, you would probably choose not to use most of these techniques because they wouldn't be applicable. I guarantee you, though. Now, if you're learning them now, you'll be because a lot of people, if they're just learning your best work is ahead of you. You're not getting your big paying job in June from taking my five week Web class. You're getting your big Web page, your big Web job by being really diligent, applying yourself in the next year and say, Oh my God, I was learning about at Font Face and CSS three a year ago. I'm ahead of the curve and your employers will be impressed. David, are you able to show how you upload the index dot html to the Internet? You know, that's a good point. Let me go back into Dreamweaver to show you what needs to go out for this to work. I think I think that's what they're getting at. If I go to my files panel here in Dreamweaver Window files, you know I haven't really defined the site, but let's just go to my if I had to find a site. Just go to my desktop in this vantage folder for the vantage project index dot html style sheet dot CSS My Images folder. If there were any images and my Fonts folder would all need to go up to the Internet so the Fonts folder that holds these fonts and keep in mind that's a lot of funds that had that whole folder has to go up to your server where your website is. And also remember that even though these air called dynamically, let's just grab the one for Firefox. Well, that one's eight K that one's 20 k for your phone. It's 20. Kate. They don't come at no price. They are font family could be up to 50 k added to the total weight of your page. So factor that in. If you're worried about your page loading quickly enough, if you wanted to load faster, do something like type kit and pay because if it's on their servers, it's probably gonna be more reliable. It's built for scalability. Troubling a load more quickly. Questions from the Internet. What was that last question for me? What was that last year or l that should the CSS selectors, Um, and how they do or don't work in different browsers. You mean the chart? Yeah. Find me by I p dot com slash litmus slash target selectors. So as you can see, RGB A which works with opacity and Alpha Channel if you wanted add opacity to your developments will not work in IE 67 or eight whereas CSS font face works in everything but Firefox three. So some work better than others. As you can see, Chrome and Firefox pretty much take the lead and as well a safari. These what we call modern browsers. If you're a web design professional, you're probably if you're forward thinking you're making it work in chrome, firefox and safari because those were the ones on the cutting edge of this technology. If you are a humble nuts and pulls professional who just has to make small websites for small businesses, the reality is it probably has to work in IE 67 or eight. And you have to make compromises, so you should probably post. Are you gonna post that last one on that? Yes. All these links will go up later. Jacket. Excellent. Thank you. Quick question about the font downloads. I know in flash, if you don't use a character, you don't pay for it in the download. But there for everything. This is not a smart slash. No, no, no, no. Partially regard. Okay, that's unfortunate. Yes. Valentyn and Twitter chat would like to know if you know about browser lab dot com. Yes, I was using using browser lab today to test these have actually used browser lab retest some or previous projects. Unfortunately, uh, I think Adobe wants to start charging for it. So as a part of CS live, we'll see if they get away with that, maybe they'll try and it won't work. Then don't continue to be free. I find it indispensable. Okay. Use it all the time. So what's the You are for that one. You want to see how smart Firefox's? I love this. I just type in browser Lab knows where I'm going. Browser labs dot adobe dot com Uh, it's gonna make me, and what you do is you feed it your URL and it shows you in different websites what it's gonna look like in different browsers. I'm sharply Oh, look, it's for no, I do not want No, I do not want any free services. Adobe. Don't forget to turn the key strokes off. Thanks. And just another quick question in the chat room. Will creative suit CS five. Have more CSS three support. Do you have any idea? I don't know. You know? Well, let's let's stay here cause the dough. I've done this before and it w wants me to go through, like five levels of signing. Get to it. I'm not willing to do that. You know, we can do to answer that. We can go to We have Dreamweaver CS five on this machine, and it has doesn't have something similar to Brown's lab, or does it just go in? Dreamweaver CS five browser lab is built right into the Dreamweaver interface. You don't even have to use it in the Web, but let's see what sort of CSS three support they have. That would be really great I know that Dreamweaver CS saga has great support for Wordpress that you can run PHP without an application server. I can't even believe I'm saying that I don't know what that was a year ago because I hope it works because you're not that it was installed on as an on another startup drive start trial. That'll probably work. You've got all the same problems. So this is this is not the boot drive from which you gave your demo last time. I didn't actually do Dreamweaver last time, so Oh, that's right. That was a ravine. So let's try to make a new document and type something and make it into an H one tag. And then let's try to make a new style for that H one tag. We're just make a class for it called test type background Block looks like the same old stuff. No real options for a busy week Control to add the CSS three selectors. So I guess they were assuming that it's not quite ready for a consumer for application yet, But the people who are hand coding or if your hand cutting the way I hand code, which is to find an application to write it for you and copy and paste. Yet you can still integrate it. Or maybe you know, CSS six, Perseus six. I would imagine that census M. I s society that I have a question that maybe you can answer. Can you change the direction of the drop Shadows? Absolutely. Let's go back to our CS three online generator. Choose something. Let's do box shadow. For now, it's horizontal length. Let's just do five pixels, vertical length, five pixels and you can start to see on Blur Radius five pixels. You can see that it goes down and to the right. If, however, wanted my global light to be coming from it. And that's our rule in photo shop, right? Whenever playing a drop shot to make sure there's only one light source. Not conflicting. Drop shadows is that we call it Global Light. If I make thes minus five, the sun is now in the Easter the opposite of wherever it was before, and I could also make it more dramatic. I could make thes when I probably wouldn't want Your shadow wouldn't be there. Would it would be 55 15. There we go. So we have deeper on the bottom and only shallower on one side. But I could also make it much fuzzier with a much softer blur. And that's what I wanted all rights, all the code for you. Other questions from the Internet. Do you have any more questions? David? Um, not directly related. If you got time, we've got time. We have someone who would like to have you discussed. Dynamic image resizing not my not my specialty. Okay, Can I cant I cant do that off the top of my head Or they talk about background images and CSS Not really clear. That's the question is, can you talk about dynamic that could be done both with JavaScript or Jake Worry? Or it could be done with CSS. But it's not something that I can write that that's something that I cut and paste is. Well, so do we mean something that the user can resize images on? Is that possible, or is that what you're thinking? The question. I think what they're talking about is there's a technique in CSS where you can basically set an image to be 100% of a background image and study to be 100%. And as the browser scales the window, large, earthy image grows as well. Okay, Well, um I have a question here about the fonts. Then, um, how do you remedy the issue of they're calling it Found out. F O U T flash of unstylish text. That happens while the font is loading. I know what they're talking about. Sometimes what will happen is before the font that you've specified is chosen. It will show in the default sans serif. It happens quickly. Let me see if I can do this in. Are there any pre loading tricks or anything like that for for this sort of thing? Not that I'm aware of. Let's try to load this up in safari, which I don't think I've played it in safari yet. Let's see if we can. Yes, I have. So let's go so far, it's much easier to empty your cache and history. Let's just clear history. So now when I know if I hit hit my return button, you should see it real quickly in the top left corner. We've got to fast Internet connection. It will happen sometimes. I don't know I don't know a remedy for it. It will be. It's probably going to replace it with your font so quickly. Most people will blink and hesitate and say, Did I really see that? And then they'll just be looking at the thought that you specified and say, Well, that one's there Now no one will ever know. We have a question When you mentioned that you can apply rounded corners, toe block level elements. Um, she she had thought that you had applied rounded corners to pee tag. So it's a P tag. A black bag doesn't need a block level element, do you? Do we attach CSS 32 templates and pages? As with regular CSS? Yes, the syntax is all the same, so you could be writing CSS the way you've been doing it. All we have is a new series of rules or selectors, like I integrated CSS to and C s history together in the same sheet. So just keep writing success that we've been writing it. There's no formatting changes. There's nothing give for that. You need to be doing just copy and paste the code that you get from the CSS three generator. If you're not comfortable writing it yourself and introduce the only challenges which browsers, they're going to display it. But whether you're writing an internal style sheet or an external style sheet, syntax is the same. And also from the chat room does using CSS three effect mobile users Mobile users. Some mobile browsers are ahead of the curve on this one, actually, and other mobile rousers won't display all of these. That's gonna very situation, depending on the mobile browser and the CSS three property. But the mobile Web, in many ways is, is much more forward thinking. Or it doesn't have any things as many things, holding it back from the past as regular browsers. So that's that's a whole other top of conversation. If you're not learning 100 design from the mobile Web right now, you're missing out on a huge opportunity. So those integrating those two things should be on anyone's career path. If they want to be an interactive designer, by the way, I wanted to mention that you're in your pdf. There's a typo on the T t hand, um link link. Yeah, because it's not. It's not going to the right place Okay. How does the rhythm Eric? Just kidding. Question in the audience. It's missing. It's missing the dot com com. Here we go. So we'll have to make sure toe posted later today, Kevin at the page again with a rounded everything in the rouser or in Dreamweaver? Uh, doesn't matter, I guess. And Dreamweaver because sorry, because I would just like to know just for clarity's sake. What the tags applied to that. Like those big the big overall boxes, the three boxes air Those devices are the paragraph. The white boxes are paragraph tax. Those air paragraph tags That's a block open within Dreamweaver. Here they are, they're white. And here they are in live you they get rounded corners going into code view, going to the paragraph tag, which in this case, is middle P. Let's take that away. Let's take away not only the border radius or rounded corner, but the drop shadow is Well, let's take that away. And now they are while they look the same. But in live you they just look like that. So they've lost their shadows, the rounded corners, everything okay, and then the buttons down. These also have a rounded a corner radius, but that's applied to what? I heard a tag of the A tank. Okay, let's go to my CSS styles here. Maybe it's easier to look at them this way. Middle a going out of live you, as you can see middle a here, that's middle P Excuse me is green and it has a little triangle on the background. You can't really see what's going on here. But by going into code view, the hover is where the drop shadow exists. Okay? Or box shadow as they like to call it. And on the a tag itself is where So first, the corner radius is defined in the a tag, and that is carried over to the hover stated inherits it to the CSS principal of inheritance. And then in the a colon hover the rollover state. We add the border shadow Shan or excuse me, box shadow, where they call it what we call drop shadows. Okay, Holbox shadows OK. Or the shattered toe A box. Well, does that mean that you can put a drop shadow on entire container so you could do all this to the Zip Div If you wanted to Let's try. Let's just take this same box shadow from the hover State. Come and see just these three lines and let's go to this Div called container. Return to design view. Make those go away and go to live. You You see that Drop shadows now on my containers? Well, so any block level elements could get a box shadow. Any in line element or text based element could get a text shadow because your dibs air not specified in a certain size. And you might, I mean, if you if you needed it, you certainly could. Okay, Thank you. Welcome. Can you apply it as a class? Yes, you can. So you could You could make a class called Shadow and apply to as many things as you wanted to classes being something that we re use as opposed to a unique I d. Is it possible to use ingredient as a background image for the entire pages? There? Uh, a a short cut for that. As opposed to making a graphic. Absolutely. So let's go back to the Internet. Let's go back to the CSS three generator. Let's go to Grady INTs. And I didn't get to see a says three radiance was there a little more complex, and syntax is a little more complicated. And the guy who wrote this excuse me could have been a woman says I was going to write a CSS Grady in Generator. But then I found the CSS three. Grady in Generator, Which does the job cry Well, so of course, someone is already doing this. This is how on the bleeding edge we are this is all built without a Jackson Jake weary. I can pick a color. And actually, this is a three colored radiant. I'll make it a two color grading by hitting the X. I'll pick a light blue, a little down and then here I'll pick a darker blue. This was working the other day. Does this use Web Web death? No. This This is all CSS three. Okay, this is not using Web. Dad unfortunates doesn't seem to working right. Or at least it's not generating the sample, but in the way I'd like it to. Usually you can see that, but I also have a link, So this will write the code for you, which says Web, Grady and Linear and then a certain number of percentages and RGB colors. But there is a great article, which I have a link to. If someone wants to read further on this to ah Chris Coyer No platoon, I not how could I have not included that length? You want the definitive? So our CSS tricks CSS three. Radiant Grady went. There we go. Here's the best way to do it. You can do is demo. These are all great. It's being defined with CSS three. Dynamically. None of these are using images, but he recommends using a background image as a fallback image. So make an identical Grady Intend photo shop and have that ready to go just in case. This doesn't work in every browser. But here's how to do it as a linear as a 90 degree vertical radiant as well. I found that in my testing that this was not working across every browser, which is why I don't encourage jumping into it, Bruce. So if you're gonna have a fallback image, that's a great and why would you be doing it with CS three in the first place? Afraid you're gonna say that, which tells you that it's not ready for prime time, right? And actually, my file was supposed to have ingredient here in the Footer, and it doesn't seem to be working. Well, maybe safari on that computer isn't the most recent version. Could be I haven't checked in a brown version. So once again on the cutting edge, folks, not everything's gonna work in every browser on the first try. But you're gonna be doing this for a few years. So, like they used to say in the Chicago elections, vote early and vote Often we've got someone online that is asking if you could talk about a strategy for figuring out what's proper level to which to assign properties when elements are nested. That's a complex question that would be that would very situational e. Um, So there's there's a chain of off objects, a chain of elements in HTML document. You might if you want everything you can, you can. You can attach a style at a global level. Like if I knew that the entire page had to be one fund was all gonna be Georgia, but varying sizes. I was at the body tag. I would set the font style to Georgia. The entire pages. Georgia. Then I would say the age two tags or this color and size that paragraphs of this color and size, the foot in length of this color and size. What? They're all Georgia. So that's at the very top of the chain of elements, then it. But if you need a greater degree of specificity or exactitude, dude at the bottom of the chain and there's much greater variation. It's like all the way into the end of the chain of nested elements. Apply your style there like I'm I'm quite fund when I'm styling my links in Dreamweaver. If you remember we started, we made a UL tag, which is a non ordered list, and we made an ally tag, which is the list item, and then we made in a tag. Ah, big mistake. I think this case people try to specify the font in the L I tak or the UL tack, which are outermost containers or outermost elements. You should really specify your font or your visual appearance were the color of the font in the A tag, which is the deepest, most nested element. But different circumstances will call for different choices but those two ways of looking at it Does that hold true for, um, gives a swell. I think I've made that mistake many times. Tryingto specify fonts and stuff like that in in the in the Div style. Yes, I would say that's a mistake. I would not specify phones in the diff style. Cool. Do you know what those rounded corners are gonna work on? IE seven or eight? Let's go back to the CSS three generator. That will tell us since I can't commit this to memory that why not? It's only, you know, 15 browsers with different options. CSS three generator. If I choose Border Radius, are they all gonna be equally rounded? Will just say yes. It is going to work on I e nine and up so it will not work on IE 67 and eight as I is I e. Nine out yet I don't know I e nine release date. It's well, as of March 23rd someone was saying not yet. The final version does not have a release state, but it will render html five, which is good and CSS three Good. It'll work on all those sites that are converting for IPad. Yes, some someone online would like to know what the triangle is in the green buttons. Oh, that's just the background image. Okay, just a little tiny gift. Susan Pepper fly in the chat rooms, realizes that you've been over this a couple times, but would like to know if you could please explain again why the tag is styled with display colon block Theo. The elusive block elements versus in line elements. Let let's let's try something. Let's go back to my Dreamweaver file. You see, my H one tag and my NAB are over here. They're all fitting into the same space, right? Let me go to my CSS styles and go to my H one tag. I didn't work, which I've given a width of 370 pixels. Take that away. That's not working, either. Okay, let me try it a different way. It's like a new document. What makes him text and will say, one of my properties. Inspector, I will make that into a H one tag, and h one tag in its native state doesn't look like anything. Let's restyle it. However, all h one tags. Let's give them to stay. Background color. Since this is what all HTML elements are trying to do, they're trying to fill up all available space that they can By telling this to behave as a block level element. I can control the size of that box. That's that it's in. So I modify this a little bit. Take that H one and I go to block and tell it to display as a block. I can now say, instead of filling up that entire space, let's be 300 pixels wide, 150 pixels high. And now I have much more control over its bounding area. Does that help? Yes. Thank you, Jim. Is there a reason why you wouldn't to find everything is a block? Uh, well, Homa, almost everything will be a block except for things in the middle of paragraphs. You know, if the text is flowing naturally, then it's an in line element. We block and in line in a sense, our behaviors and weaken many h my elements are flexible and be told to go either way. So periodically we're gonna want things displays in line elements because we want them to float or we want to have some flexible control will tell something the more rigid you want your layout to be, the more likely you are to make it into a block level element. The greater degree of flexibility or a liquid lad. If you want things to be elastic, might want to find them to be an in line element. Another question from the Twitter chat room from Valentin and Switzerland. He's asking, Do you do all of your code with Div? Or sometimes you also use table TD, etcetera. I no longer used tables, and I was Charl encourage anyone don't use tables on these tables to display tabular data like you were looking at. Some, like schedules, schedules or results. So our spreadsheets, it's if you're comparing information. Tables are great. Inventory on a website is great, even you, too. But for design purposes don't use tables. No tables for layouts, no tables for layouts. Okay, question from the chat room. What happens if you don't tell it to display is a block, but put info in the box fields, Put info in the box fields. It would actually technically still work. Would it just automatically converted to a block element when you do that, it's in a sense, yes, it's automatically converting it to a block government. So I don't technically need to do that. But I was using that as a more of a way of illustrating what I was trying to do. Okay, Another similar question. What if you gave it a width, but not height? Would it expand to, you know, if depending what the content is? Oh, yes. Yes, it would. It would. Yes, it would. Okay, so that's that's Ah, legitimate technique and cool. Sometimes you want to last two containers and sometimes you want fixed containers. Okay, so I think we may be winding down on our questions now. Yeah. I just want to come in a split level in the chat room. Said this is probably the most informative class. Uh, he's seen on here. So far, so good. Thank you. Actually, want to show one more link for people who want to dive deeper because probably by this summer, I'm gonna be talking about html five. Don't worry, it's not that different from the current hnl you're using. Don't have to learn a whole bunch of stuff, but just it goes along with CSS three in terms of what you need to be learning. Next, is it html five galleries. Html five gallery dot com. If you really want to look at what's exciting and happening in the Web right now 18 05 gallery dot com this is what's happening on the cutting edge. Is Air really forward? Thinking Web designers for pushing the Web? Ford. This is utilizing a Channel five and the techniques that we've talked about today. You see a lot of great stuff here, and I'm gonna start teaching it to some herself. Cool. One last question. It's more of a client manager management question. Um, often, what happens to me is my client sees something on the Web that wasn't really done with kosher code. And they say, Well, I want that. And how do you talk him down from that? I mean, you can start. My clients usually aren't very sophisticated, so you can start talking to them about best practices and how all the browsers are going to see it in their eyes. Glaze over and they just go. But that site was cool, and I want that and you know, I don't really want to go through all the I. I guess I could just say Well, that it cost X. It's more because I have to make it work and I e. To tell him to add a next to zero to the Czech. Okay, you have to talk with them about who their client base is and what what sorts of browsers they're using. And if yet, you might have to show them what a broken experience looks like. You know, I would say when I I hit that as well, frequently. Then for now on I'm bringing Bruce with me. Can you talk to him about usability and designing with the end user in mind? Because that's ah, strongest argument because there's one of the biggest problems in Web design is what the designer wants because designers get these visions and say until they've been building Web pages for a while, then the knuckle under the truth of usability, and that that's where the problem comes up. Really, when my client is the designer, not the ultimate client probably doesn't care, but the designer wants some cool effect, and I'm trying to talk the designer out of it and they don't really care. But then the other problem our clients, because the clients have a vision in their mind about what they want the website to look like. And both of those, both of those parties are ignoring the user and the reality of it and the browser issues. But I find that usability is the best argument you say. Well, if we think about your users and who's using the site, perhaps we can come to a compromise. That's when you add in a dent into the contract. If this site does not work the way that you expect to work, yes, I told you so. A familiar with you on one final note, Even with the comic strip, the online commentary called the oatmeal? No, not familiar with that one. Here we go. How Web Design goes straight to hell from the oatmeal. So this is, Ah, CIA. A Seattle designer, I think Matthew Inman. He worked at eso mas for a number of years. He's very talented in the S E O Field as well as, ah, Web designer, and he actually writes this comic strip called the Oatmeal and has a great, uh, dialogue between client and designer. The new site will be great. Oh, I can't wait. Here's their current site. Here's what the designer suggests. Nice, eloquent solution. The client says. I love it looks amazing, but I want but but a few minor changes where you can kind of fill in the blanks here. I don't need to read small tope, but this is the best part. You are no longer a Web designer, you are now a mouse cursor inside a graphics program, which the client can control by speaking emailing. And there's there's a Dilbert cartoon like that where Dilbert's boss is over his shoulder saying, Okay, now move the mouse over there and point over their point, click, click, click clicked it, and then the Yeah, that's ah, riel improvement. So I suggest anyone who really serious about going into Web design should read this comment will post a link to that as well. And then you could not reassess your goals anyway. Yes. All right. Well, thank you, Eric. Welcoming. We're gonna go ahead and wrap it up now. Thank you.