CSS

CFUnited 09

I have been to several CFUnited’s in the past, an CFUnited Alumni if you will. I am typically there to help Fusion Authority Quarterly Update, as I am the Creative Director and weirdly enough now know more CF people then almost anyone else. I am a designer who codes, not a hardcore CF developer like Ray Camden or Sean Corfield. (I secretly would love to be, but not sure I have what it takes — a logical mind) I’ve learned a lot about CF from making sure it all looks great from inside the comfort of InDesign. I’ve also learned a lot going to the conferences and sitting in on the sessions. Sean’s last year actually made perfect sense to me. Of course, Sean is an amazing speaker, so that helped. If he can make me understand Edmund, hey, anyone will get it.  🙂

This next year though, I finally made the speaker deadline and submitted 3 sessions and 2 BOF’s (birds of a feather). They put it up for a vote this year for the first time. As a past attendee, I really thought that was great. You can’t complain about the sessions if you helped pick them. So I submitted a Hands-on CSS session, and 2 Flash Catalyst sessions. I assumed of course that Catalyst might be out by August of next year. Ya never know though about betas and when they’ll be released. I had hoped for a public beta by then at least. I am pretty excited about Catalyst and am hoping it will do wonders for bridging the gap between designer and developer which is my current passion.

I submitted the Hands-on session for CSS because you can’t really learn something you aren’t touching, and these are developers, they need to touch some code, right? So what will they learn? Since CF developers spend a lot of time with tables, for data consumption only of course, we’ll make sure they can style a table first. Then we’ll go into how easy it is to lay out a page with pure CSS then styling navigation. If we can’t finish, we’ll end up in the bar or the pool coding CSS on napkins. 🙂

My 2 Flash Catalyst sessions aren’t picked so far, but the CSS one is. Yippee. It might take awhile for people to see the true benefit for Flash Catalyst. For me, right now, it’s a fantastic wireframing tool. Use Catalyst to lay out the page, then it can be handed to the developer in Flex to make it function, then when the artwork is ready, brought back into Catalyst then back into Flex without missing a beat. It’ll save tons of time making sure the app works correctly, and the client is happy. Since Catalyst takes a design from Photoshop Illustrator or Fireworks (not yet, but it will), the designer will feel like he/she finally gets the pixel perfect feel to their designs. Sounds great, right?

Now I have 2 BOF’s I need to decide from. My first is a Personal Brand BOF. There are a ton of things to make sure your personal brand is up to date. Why should you care? Are you kidding, in this economy, having a good personal brand can make the difference if you are hired by an employer, or if you are freelancing, it’s even more important. Are you on Facebook, LinkedIn, Twitter and more? That isn’t all to a personal brand, but that’s a part of getting your name out.

My second idea for a BOF, I’ve blogged about before. I see developers complain about designers on blogs all the time. Wondering why they don’t design properly in the first place. Many of us work or have worked where we are the last to see the approved design, making our job more difficult when it comes to implementing the design. Some designers do the craziest things expecting us to make it happen. Can’t you do anything I design? Yes, but done correctly, and in a timely fashion, maybe not.  So whar I want to do is start a checklist for designers and a standards document that can be shared on the web like Google docs, and Adobe Buzzword. Then the developer can alter to meet his/her needs and had the designer and their boss/supervisor the checklist, and ask to be brought in before the client sees the work. That way we can make sure things are done in a way to make it easier for everyone.

For instance, not all designers understand for Usability purposes that a search box should always be in the upper right corner, or at least somewhere where the user n to look for it. Hey designers, CSS is big these days, we can use background images for many things, now if they have never looked into CSS, they wouldn’t understand. Maybe a few links to some CSS sites might help them understand. Hey, CSSZenGarden at the very least.

So, it’s a current fight of mine to do all I can to bring designers and developers together.

I’m really looking forward to CFUnited 09 it seems. Another reason is I get to see all my friends. Since I am a User group manager and a Community Expert, I know a lot of the guys, and girls from our Summit in San Jose, CA. With the lay offs at Adobe recently, I am not convinced that we are having a Summit this year. We also increased the managers and co-managers to the point where logistically meeting in person might be hard as well. I just saw many at MAX NA 2008, so that was great, but Summit and other conferences like CFUnited let me see the ones I don’t see otherwise. Adam Bell always does a Mini MAX at CFUnited, and I’ve never got there early enough to see it, so looking forward to having a Manager 2 Manager meeting at CFunited this year as well.

More to come later, and congrats to all my friends whose sessions were voted on and accepted as well.

See ya soon!

Advertisements

Design for non-designers and developers

Alright, last time on KCWebCore.org/blog I went on a bit of a tangent. I started talking about fireworks for design elements, and ended up talking about CSS. It’s hard though, because CSS is such an important part of design these days, it’s hard to talk about one without the other. For this edition, we will just focus on design elements.

Fonts:
I want to start with fonts because there are too many designers out there using weird fonts for their mock ups. This throws developers off. I got an email from one today asking if non-standard fonts were the norm these days. NO, they are not! To many print designers are designing web pages these days. Designers who have never made HTML from one of their designs. To them… STOP IT. So I might as well start from the top and talk to designers and developers alike.

Everything that is text besides the company logo, and maybe some headers should be live. So, when someone puts together a mock up of what the page will look like, they should be using one of the 11 fonts that that are common to both a PC and Mac. Another thing to consider here, and this is indeed for the developers, is that all text should be included in your mock up. Why? So you can see how to design the page for more text. It could be greek text if you don’t have real content, but the most important thing is not to have any anti-alias. For those who don’t know what anti-alias is, it’s where the program fills in the pixels to make it look like it’s smooth. In a program like Photoshop, there is a setting in the Control bar to change it from Smooth, to either Crisp or none. That will make the text more like the text in XHTML.

Colors:
Colors are something us designers don’t think anything about, but seems to be something developers find to be a foreign concept. My
suggestion is to spend some time with Kuler. Kuler lets you easily pick from their favorites, or create on your own 5 colors that go together. So, you can have your main color and accent colors for your site super fast. No fuss, no muss. Of course, you will likely base those colors off a logo. Just think in terms of what will compliment the logo. Plus, all gray doesn’t cut it. I’ve seen my share of sites that are just shades of gray. There are other colors you can use, not that an occasional gray doesn’t work, just not all the time.

Backgrounds:
We’ll start with a super simple background that looks great with fixed width sites. Take a look at MacCORE and you’ll see a site that was made to go with a fixed width and has a background image that is 2100 pixels wide, by 20 pixels tall. In the CSS, the slice is first centered, then given a repeat of Y. We’ll look at the CSS later.
This is a scaled down example of of a background color, with a white box centered. The box gets a drop shadow with zero distance, and about a 9 pixel size to make it stand out.

I’d like to take a second here and talk about other types of sites, and looks. We could have chosen an elastic or liquid layout for the page. Many developers like the look because the page expands with the browser. Sprint’s site is designed like this. It is possible to make a site look good, and be liquid at the same time, but a little harder then a fixed width site. In my opinion, it’s all in the content. If a site doesn’t have a ton of content, but more graphics, a fixed width works best. It keeps the text from re-wrapping around graphics in an odd manner.

If a site has a ton of content, liquid works best. It is nice to use when a 1024X768 size is the target. For those with large monitors, they can decide how much text in on a line at a time. The design would be much different, so we can explore that next time.

Headers:
Some times, a header is just that, a header for the page with the logo in it. The one thing you want to avoid if possible is for the header to overwhelm the page. Not that you won’t see many pages where it was a design element for the header to take lots of room, like on Pownce’s site. It works for them because the login is also in the header and it’s more important then the content to regular visitors. The initial pages information should always be visible above the page fold. That’s when the page is viewed at the target size (800X600, 1024X768) in the browser.

On our sample site, MacCORE (a local Mac user group), I wasn’t sure when I made it if we were going to put a login in the header, or on a specific page, so I know it was going to be a background image. The plus of that would mean I could use text over top of the image, have just the logo be on the page itself. That could allow for a better printed page because the logo would be the only graphic that prints. Keeping ink to a minimum.

Navigation:
This site called for a 2-column page with header and footer. Because I didn’t want to take precious room for navigation on the side, our navigation is under the header. The main objective with the navigation was to make 1 button with an up, and an over state. The client wasn’t sure what the wording would be, so it was important that the text be live text that could be changed at any time.

So I made them all the way across the page and experimented with width and text until I thought it looked good. The plan was to have the over state visible when the user was on that page to show them visually what page they were on. A easy bit of CSS makes that happen, which we’ll show later in the series.

Breadcrumbs and secondary navigation:
With a set number of menu links, there needed to be secondary navigation on this site. I used a simple gradient for this. This could have been used for breadcrumbs instead of secondary navigation.

Content area:
For the content area the client wanted something more than just a white background. So, we had to include a gradient that went to white, which is our background color. This is a very important concept in design; allowing for longer pages. So we took a gradient and went from that color to white in a distance that would allow for a short page, or longer page. Our gradient here was just 350 pixels tall and 10 pixels wide. It was just a repeat of X, and not Y. We could have made it the same width as the page, but it would have been a much larger image, and the goal is always a fast loading page.

For the side pod this is just a colored box, so no graphic was used here. It is purely a CSS element, but next time I’ll show how to make a good pod with rounded corners.

Footer:
The footer on this site is 100% CSS. No graphics here either. We decided on this just because we knew Apple needed certain legal information, and wasn’t sure what else we might need in there.

Next time:
We’ll look at some design choices for liquid layouts, and how to make pods. See ya next time.

Dee