Screen Casts for beginners - soon

Jason — Wed, 01 Apr 2009 19:36:18 +0000

There are a lot of good sites out there that offer tips, tricks, and how-tos for the mid to advanced level coders and designers. However, I haven’t found many great resources for people looking to start out fresh, from the beginning. This means learning HTML, and then learning CSS (or learning them together). I find that a lot of people at this level are interested in learning how to use Dreamweaver, and are more interested in the WYSIWYG editor in Dreamweaver then learning how to code by hand.

There is no substitute for hand written code. Something created in Dreamweaver’s design view will never equal the well structured code that can be done with a text editor. It doesn’t matter if you’re on Windows or a Mac, in Textmate or Notepad++ or even Dreamweaver’s code view. What matters is you learn the language and best practices.

I’m experimenting with some screencasting software. Look for new tutorials for the beginner starting hopefully next week. If you’re beyond the beginner level, my apologies, but head over and check out Chris Coyier’s CSS tricks or net tuts. We’ll work up to those levels on this site, but for a while, we’re going back to the basics, and we’re going to do it using a hands-on approach with the aid of a screencast.

/ - why that slash is good

Jason — Sun, 25 Jan 2009 00:06:44 +0000

This might be a bit basic for a lot of you, but it’s something a lot of people don’t really know about, and it kind of surprises me.

Do you know the difference between:

images/someimage.jpg ../images/someimage.jpg /images/someimage.jpg

The first two are relative to the document, the last one is relative to the root directory. This is useful when you’re coding large sites with sub sections. Normally, for a five or six page site I’ll keep all my pages in my main directory, and then use an includes folder, a css folder, and an images folder. On larger sites, I’ll use more directories. So I may have ten or more folders, each containing up to ten or more files in it. If I need to get into that images folder, I have two options (3 if you use the full url). I can use ../images/someimage.jpg which means up one directory, then into the images folder or, I can use /images/someimage.jpg. Using the second method, it doesn’t matter what directory the page is in, it goes to the images folder from the site’s home directory.

Why is this important? Most times you don’t really move pages around, but in order to cut down on the amount of repeat coding, you do use includes. So, if I’m using an include for my navigation, the home page which is in the root directory is going to be at a different depth then a page in a subfolder. If I use site relevant paths for all my pages in the navigation that I’m including, then it won’t matter what depth the file is, or which directory it is placed in.

/about/index.php will take you into the about folder whether you’re at the home page, index.php, or if you’re in the about directory already at about/contact.php or in a different directory like work/print.php.

XHTML vs. HTML

Jason — Sat, 03 Jan 2009 19:48:11 +0000

For all intensive purposes, XHTML is a more strict version of HTML with some of the benefits of XML. It’s goal is to be more cross-browser compatible. With that said, many of the websites I author, I still author in HTML, even though I follow 95% of the XHTML rules. Really, changing to XHTML would be pretty easy for me, because the only rule I don’t follow is I don’t close my tags that aren’t a pair. For example, I don’t close my break tags.

HTML XHTML

For a valid XHTML document, all tags must be lowercase. I follow this already in my HTML.

Bad


Good

All pages must have a valid doctype declared, which I do, I just declare HTML.

Strict declaration Transitional Frameset

Attributes can’t be minimized in XHTML, and I don’t minimize them in HTML

Bad

Also, all attributes must be in quotes.

Bad


Good

Instead of using name, XHTML uses id (also notice I closed the image tag with the /.

bad good

As you can see XHTML is pretty easy, not too much different from our HTML we already write. For me the transition would just require a change of habit, and really just the addition of some closing “/”s and the changing of my doctype in my site template I always start with. If it means easier compatibility then I might as well start using XHTML now.

ID that Body - Clean CSS Navigation

Jason — Mon, 08 Dec 2008 17:49:06 +0000

Just like cop dramas, the first step to a good navigation is the same as it is in solving a crime. You have to ID the body.

If you assign an ID on the body tag then you have a simple way to target items on any particular page. If you want the paragraph text on your contact page to be 16px tall then you have a simple way of targeting that text, assuming you ID the body on that page with contact:

#contact p {font-size: 16px;}

However, you get to understand the true power of IDing the body tag with using it for navigation. Assign each link in your navigation a class, then create a style for when the body’s ID and the link’s class match.

Your Navigation:


home
about
contact

Your CSS:

ul#nav { background: #000; list-style: none; font-family: Tahoma, Verdana, Arial, Sans-Serif; } ul#nav li { float: left; margin: 0 15px; } ul#nav li a, ul#nav li a:visited { text-decoration: none; color: #fff; } ul#nav li a:hover { color: #666; } /* here is the magic, when the body ID and the link Class are the same, this style is applied. */ #home .home, #about .about, #contact .contact { color: #ccc; }

This is pretty straight forward, but it works really well. The best application is when you use a dynamic language like PHP to include the menu on every page, so you have only one or two files to update in the event something changes with the navigation (the included file and/or the CSS file).

Designing for your Target Audience - 24ways.org

Jason — Mon, 01 Dec 2008 14:00:11 +0000

Head over to 24ways.org for this years pre-Christmas web goodness. I’ve read a lot of positive and negative about the design. Wether you like it or not, this is a great example of designing for your target audience. Many web designers/developers will be visiting this site, so you can bet on visitors having new, and what I consider “good” browsers. The screenshot here is from IE6.

Most of the time, my target audience for the web sites I make include IE6. As much as I hate it, it’s a fact I’ve learned to live with. Though you don’t have to serve up an exact duplicate of your site to IE6 users, you have to come up with something useable. Conditional stylesheets help out a lot, even if you use it to simply hide your stylesheet from IE6. So, while 24ways.org can get a way with something more innovative - I cannot.

The Art and Science of CSS

Jason — Tue, 25 Nov 2008 19:25:47 +0000

For another week, if you follow Sitepoint on Twitter you can download The Art and Science of CSS for free. I glanced through the first chapter or so this morning and it looks like it has some good stuff in it. The bits that I looked at covered some text-replacement methods that works even when users have images turned off (something I haven’t looked at or really given much thought to in the past). So I’m going to dig a little deeper into it. It probably won’t be earth shattering for those versed in CSS, but if you’re starting out I’d recommend checking it out.

Sitepoint is often a good resource, but the 99designs thing they’ve got going has left a bad taste in my mouth. It really is just spec work, and spec work is bad for many reasons. The work is often just unskilled type treatments, done for hundreds of dollars below market value. Any real designer should frown on the idea of selling their service for less than it’s worth, it’s insulting. Most of the designs have little conceptual thought, and lack big picture thinking. Everyone loses with 99designs, except for 99designs itself which takes a cut off of the ignorance of the other two parties involved. If you’re so desperate for $200 that you’ll give away a $800 - $1200 logo then need to rethink your career path. Seriously, look at the big picture. Corporate America - 40 hours of work a week should provide a decent living. Now, would you work for 1/4 of that? Do you really want to work 160 hours in that week (which is barely possible) to maintain the same level of living?

Web Design Jobs - 7+ places to find work

Jason — Wed, 19 Nov 2008 19:14:55 +0000

This really isn’t about CSS, just something I’ve noticed a lot lately, and the trend keeps growing.

Over the past year or two, this job board thing has gotten out of hand. You used to be able to go to Monster, or Careerbuilder, and find your dream job. Now, however, the dream job doesn’t get posted on those large sites. Instead, the great jobs get posted on one of many job boards, so you have to watch all of them because you never know which one will have your dream job. It’s like anyone with a decent readership wants a job board, and why not, because it’s a pretty easy way to make some money ($100 a listing, $200 a listing, $300 a listing). That adds up.

Authentic Jobs has the right idea. They offer a money back guarantee to listers, and they (or he) has a network of high traffic sites that display the Authentic Jobs feeds. I believe there is probably a referrers fee paid to the site that leads to someone finding a job. Chances are, one of the websites you visit regularly displays the Authentic Jobs feed. Listing price - $250 full time, $75 freelance.

With Smashing Jobs you get a pretty good list of available jobs (Crispin Porter and Bogusky post here - Burger King, VW, maybe you’ve heard of them). Smashing Mag is one of the top blogs, so the job listings get really good exposure. Listing price - $200 full time, $100 freelance.

Not web industry specific, but it is a great place to find work. This job board is specific to what I’d consider creative companies. Ad agencies, design studios, web shops, etc.

This is a short list, and you won’t find many big name employers here. Maybe a good place to look if you’re interested in picking up some freelance work. My only concern would be the person looking to hire your services are looking to do so at a discounted rate. Listing price - $75 for 30 days fulltime, $50 freelance.

Like the creative hotlist, this isn’t web specific. Because of that, you’ll probably find a lot of more general advertising and design jobs posting here. Listing price - $269 for 60 days.

37signals makes some great little products, or so I’ve heard (I’ve never used them). Their job listings are a little weak - unless you’re a RoR guy. If that’s the case - you should probably start looking there. Listing price - $300 for a month.

Like the Creative Hotlist and Talent Zoo, you’ll find a larger variety of companies listing here. You’re pretty much guaranteed you’ll find only agencies here, not many in-house gigs. Listing price - $265 for a full 90 days.

Want more? How about these

Listing price - $99 for 30 days.

Listing price - $75 for 30 days.

I’m sure I missed a couple, so feel free to let me know.

Using CSS Sprites

Jason — Sun, 16 Nov 2008 19:46:35 +0000

What are Sprites in CSS?

Simply put when you use “sprites” in CSS it’s a way of using one background image, and then changing it’s position.

Why use Sprites?

It all boils down to load time and efficiency. If you use a sprite for a background for an image, then you cut down on the total file size, and the number of http requests. If you’ve ever seen an Apache server log, you’ll see what I’m talking about. When a client requests a page from a server, the server sends the requested page, and makes requests of its own, on itself. The server requests all the images, each one is a separate http request, and each one gets served separately. A single page could have many http requests.

So, let’s take a look at using a Sprite for a navigation. Here is the Sprite (you can get it, and all the other files needed by downloading the demo files. You can also view the demo.

So let’s look at the code.

The pages look like any other page, the navigation is simply an unordered list, each list item is floated left. We put an ID on the body tag, and a class on the navigation to show the active state, especially if we were looking to put our navigation in an include (which I do). For this little tutorial I’m using HTML pages instead of PHP so you can just open the page in your browser, no server required.


    home
    
    page 2
    
    page 3
    
    page 4
    
    page 5
    
    page 6

So now let’s look at the CSS, which may be the tricky part (though not really). I normally write all my CSS on one line, and you’ll find it that way in the demo, but for readability here, I’ll write it block-style.

#mainNav { list-style: none; padding: 0; margin: 0; } #mainNav li { float: left; font-size: 20px; font-family: Verdana, Arial, Sans-Serif; letter-spacing: -1px; line-height: 30px; text-align: center; } #mainNav li a, #mainNav li a:visited { color: #fff; text-decoration: none; background: url(’../images/spriteBG.jpg’) 0 top; width: 130px; height: 30px; display: block; } #mainNav li a:hover { color: #fff; background: url(’../images/spriteBG.jpg’) 260px top; } #home li a.home, #page2 li a.page2, #page3 li a.page3, #page4 li a.page4, #page5 li a.page5, #page6 li a.page6 { color: #600; background: url(’../images/spriteBG.jpg’) 130px top; }

The styles look pretty normal for a navigation. But, look at the background. For a link, or a visited link, the position of the background is set for the top and 0. When you hover the button, the background shifts the x position to 260px. And when the link is active (the last style), the background is shifted over 130px.

That’s about it. If you get really creative you can animate your backgrounds with jquery.

Geocoding with jquery, php, and google maps

Jason — Thu, 13 Nov 2008 21:09:31 +0000

Simple Demo

I haven’t played much with the Google Map API, but I’m in need of using it for a project for a construction/commercial leasing company. So, I started playing around with it this morning and found a couple of excellent tutorials. The attached files are a little rough, but this just playing around. The final product is going to simply have variables passed to it from the database - so that means the user will just see a map with a marker.

The first one from Nettuts.com. The second from a site that I can’t seem to find again. (If you see this, and you recognize your code - let me know)

Anyway, like I said, the code isn’t necessarily the prettiest, but I just started working on it today. I’ll be passing the variables from a database to map property locations, but this takes inputs, for testing while setting it up.

I couldn’t decide on whether to convert the address to latitude and longitude and save them in the database, or just get the lat & long when the details page is opened for a piece of property. I went with the latter, because I heard Google won’t allow more than a couple hundred connections from your API per hour, then they’ll shut you down for the day. When they’re adding a bunch of properties (like during the initial set-up) this could be a problem. Though I guess I could just have them get the lat and long and manually enter it. Anyway, from what I’ve seen, the conversion of address to latitude and longitude is dead on.

Get your own API at Google. I have my API to use the domain name of localhost right now for local testing, I’ll just get one for the actual domain name when the site goes live.

CSS Typography - the basics

Jason — Tue, 04 Nov 2008 01:26:27 +0000

Typography is great, it can really make or break a project. Unfortunately, with websites you lose the ability to use a lot of font that can have a lot of impact. Only you can decide what works and what doesn’t for your project, but here are a few suggestions

Line-height

Line height in CSS is the equivalent to leading in desktop publishing or graphics programs like InDesign or Illustrator. My personal preference is having a line-height equal to 1 and a half times the height of the font. I used to do it the hard way, set my height to something like 12px or 1.2em and then set my line-height to 18px or 1.8em. But if you change the font-size you have to change the line-height too. So, instead, set the line-height to a percentage. For most paragraph text, I set the line-height to 150%.

p {font-size: 12px; line-height: 150%; font-family: Tahoma, Verdana, Arial, Sans-Serif;}

Letter Spacing

Letter Spacing can be a pretty easy way to make your headlines a little better looking. Letter spacing is like the equivalent to kerning.

It’s my experience that using a letter-spacing of -1 looks really good for Verdana headlines of 14px or more.

h1 {font-size: 16px; font-color: #f00; font-family: Verdana, Arial, Sans-Serif; letter-spacing: -1px;}

Letter spacing can also be used to increase the distance between letters for typographical elements, instead of using a negative number, use a positive one.

Font Choices

There are a pretty good number of font choices that are considered safe, of course Vista came out and introduced a bunch of fonts like Cambria and crap I don’t know about because I haven’t used Vista. But font-families help provide something for everyone. You declare your fonts in the order of preference. You probably already know how this works. Unfortunately I haven’t compiled a list of substitute fonts yet, but once I get a naked install of Vista (one without any type of creative suite that would add fonts) I want to create a list.

All I can really tell you is reading on a monitor isn’t like reading on a sheet of paper. On paper, serif fonts work because letters take up equal space, but on a screen, it’s easier to read sans-serif fonts because the little tails can cause eye strain. Basically, for print you hear sans-serif for headlines, serif for body. On the web, you’ll hear sans-serif for body, serif for headline. Of course these are suggestions, nothing is written in stone (you’ll see verdana - with -1px letter-spacing for my headlines here). I also think serif body fonts work well on grungy style web-sites. Sans-serif fonts look too clean sometimes for grunge.

Of course there is more, line font-weight, font-style, etc. Maybe I’ll come back and append this post when I get some more time.

How to CSS

Screen Casts for beginners - soon

/ - why that slash is good

XHTML vs. HTML

ID that Body - Clean CSS Navigation

Designing for your Target Audience - 24ways.org

The Art and Science of CSS

Web Design Jobs - 7+ places to find work

Want more? How about these

Using CSS Sprites

Geocoding with jquery, php, and google maps

CSS Typography - the basics

Line-height

Letter Spacing

Font Choices

More