I recently discovered on the IEBlog that the developers for IE8 were able to render the Acid2 smiley face test by the Web Standards Project correctly. Or so they say. All I have to say is that I hope they concentrated on making IE8 standards compatible in all aspects instead of just what it takes to make the smiley face look correctly.
So I’m sure most of you use facebook already, but if you don’t you probably have your reasons for not. In the case you do use facebook, and you haven’t joined the “Designing with Web Standards” group. Do that now. Ok, welcome back. Now to the point. This Monday (November 26, 2007) is Blue Beanie Day:
Monday, November 26, 2007 is the day thousands of Standardistas (people who support web standards) will wear a Blue Beanie to show their support for accessible, semantic web content.
It’s easy to show your support for web design done right. Don a Blue Beanie and snap a photo. Then on November 26, switch your profile picture in Facebook and post your photo to the Blue Beanie Day group at Flickr: http://www.flickr.com/groups/bluebeanieday2007/ .
This is a great way to show your support for web standards, and also to help others learn about the benefits of standards and accessibility.
For everyone out there using Firefox I’m sure you are very happy with it, and why not it is a great standards compliant web browser. One of the wonderful things about it though is that you can install add-ons to the browser. One add-on in particular has done wonders for my web development.
It is a must have for web developers everywhere. There are many different tools that you can use to hover over an element to see its id’s and classes but Firebug takes it so much further than that. Letting you see and edit all HTML, CSS, and JavaScript.
One of the features I really enjoy is when selecting a certain HTML element all the styles from one or more style sheets appears in the right side box.
In Summary
I could go on for a while about this tool I will just let it speak for itself. If you don’t use it, start. If you don’t use Firefox, you shouldn’t be in any aspect of web development anyways.
Direct Download
Firefox add-ons page
Oh yeah. I am in no way being paid by Firefox or the creators of Firebug or anyone else to write this post. (I wish I were.) I simply feel that this add-on is very helpful, open source, and free. Enjoy!
Just about every web-site, blog, or online application I have ever been to in my life has had some type of navigation. The only problem is that sometimes the navigation bar has been built with tables or divs that take a lot of extra code and don’t expand well when the user enlarges the text.
One of first techniques I learned when I started writing my own CSS was using an unordered list for all navigation. For vertical or horizontal navigation a list is your solution. The code is very light weight, semantic, and flexible. Here are some examples of lists being used for navigation:
A lot of you might have previously thought that lists could only be vertical. Initially they are, but with one CSS property we can flatten out that list to make a nav-bar instead of a nav-column.
To start off make an unordered list with the the text linked to their destination.
<ul id=”nav_bar”>
<li><a href=#>Link Text1</a></li>
<li><a href=#>Link Text2</a></li>
<li><a href=#>Link Text3</a></li>
<li><a href=#>Link Text4</a></li>
</ul>
Note that I put the <a href></a> inside of the <li></li> html tags.
Give the unordered list an id of “nav_bar”. So many times people will wrap their navigation in div tags to help position the list, but you can apply all the same CSS properties to the actual unordered list so the need for the div is unnecessary.
Here is what you should have so far. I highlighted the background so you could see the entire UL.
In your CSS file or wherever you are placing your styles add an id for nav_bar. There you can position, add margin or padding, or whatever you feel like.
Above I mentioned that there was one CSS property that would flatten that vertical list out. On the line below the nav_bar id add this style:
#nav_bar li {
display:inline;
list-style:none;
}
This style accompanied by both properties does two things. The first is to display each line item inline instead of vertically. The second is to get rid of the bullet point to the left of each line item.
See Second Example
Now to give each link more of a button feel we can add some extra padding/margin to each anchor element, which in turn also makes the clickable area bigger and easier to hit. The code:
#nav_bar a {
background:yellow;
padding:10px;
margin:10px;
}
And for further differentiation adding the pseudo style :hover to the element you can change, say, that background color to tell the user which link they are hovering over by placing this below the previous style.
#nav_bar a:hover {
background:green;
}
The page should now look like this.
You might notice that the link buttons have grown outside of the ul. (The yellow is outside of the grey.)
The simple fix for this is to add a float property (right or left) to both “#nav_bar” and “#nav_bar a”. This makes it so that the links push out the walls of the ul aka #nav_bar when they are resized. Making the whole navigation bar very versatile when dealing with different text sizes.
Well there you have it. The final product. all there is left to do is play with the colors, margins, padding, and background images. In a later post I will get to adding background images to make tabs/rounded corners and such.
I know some people that want to get a site up for some class projects or to begin learning CSS/(X)HTML. They ask me questions about how to start. Quite often they want a simple two column fixed width layout with the sidebar on the left hand side. So I thought I would put up the template for them or anyone else to download. Here is the download:
Or you can just view the source code with inline css on this page.
So many times I see my friends using tables to get this simple layout, and they end up having trouble getting everything to work correctly. Using semantic divs and naming methods is a great way to put up the wire frame for your site and be able to spend more time designing a beautiful page. Enjoy!
With personal branding such a big aspect of the web, designers often like to create an image of their name and logo instead of using plain text. Here are some examples:
Twitter
AListApart
Smashing Magazine
The reason for this type of branding is that the very beautiful font types, and the photoshopping styles that these sites use won’t show up on someone’s display when they visit your site. The reason for this is that there is a small lists of web-safe fonts. These fonts are very basic, and don’t really allow for vibrant and beautiful design.
The problem with using an image for your text and logo is that this renders your site name unsearchable by search engines such as google, ask, or yahoo. Developing your site to be search engine friendly should be one of the most important aspects that goes into your site planning.
There have been several ways of fixing this problem over the past few years. The book CSS Mastery by Andy Budd discusses a couple ways of going about this, but with every solution there are bugs. The documented solutions were as such:
Fahrner Image Replacement
Phark
Gilder / Levin method
(Scalable) Inman Flash Replacement
Some of the techniques used in these fixes were using the display:none;, text-indent:-5000px;, and using flash to replace certain text on the page. What surprised me was that no one used a simple z-index css property. This property sets the stacking order of elements on a page, and in my opinion is a great way for image replacement.
On your page put the image first. Then in-between H1 tags put your site name as an absolute link. For containment purposes wrap these two elements in a div with an id of brand so elements added around the image and H1 elements won’t conflict with the style’s.
html:
<div id=”brand”>
<a href=”#”><img src=”your_image_file_path” id=”logo” alt=”your_description”></a>
<h1 id=”hidden_name”>
<a href=”site_url”>shamrocks.com</a>
</h1>
</div>
Have a look at Demo 1
Now is when you start to use the CSS to make this whole technique work. In your style-sheet, or in this case the internal style’s, make an id tag for the hidden_field element. Then simply give it a negative fifty pixel top margin.
CSS:
#hidden_field {
margin: -50px;
}
Now it should look like this.
The third and final step is where the simple but powerful CSS comes into play. Add a z-index attribute to the hidden_name id and give it a value of negative one. This will set its stacking order below all other elements on the page. Now this alone won’t do the trick. For the z-index attribute to work the element it is attached to has to be positioned, in this case I gave my element a relative position. You can also used absolute, fixed, or static. Thats it! Just a little bit more CSS to get rid of that ugly border around our image, and were done!
CSS:
#hidden_field {
position: relative;
z-index: -1;
margin: -50px;
}
#brand img {
border: none;
}
The catch with this trick is that if someone browsing your page has images turned off, but CSS turned on the site name will not be displayed. The reason is because the browser puts a blank place holder where the picture was. I’m guessing this is to help keep the structure of the page. For usability purposes putting an absolute link to your home-page in the footer or navigation will be sufficient. Also on windows mobile the negative margin does not work so the site name will just display below the picture.
This image replacement technique may have its faults, it is very light on code. Making load time very short.
This is a very simple but powerful technique for image replacement that will help you out in the long run with SEO and usability.
On a side note "shamrocks.com" is in no way affiliated with me. I simply came up with it off the top of my head to use for a site and logo.
If you’re already in San Fran, stop by the Palace Hotel for An Event Apart web conference. Join Eric Meyer, Jeffrey Zeldman along with eight other guest speakers including Jina Bolton from Apple’s web team and Aaron Gustafson from A List Apart.
This is a great place to get handle on developing with web standards, and designing beautiful professional sites.
The conference is starting Oct. 4 - 5 so hurry up and register now for $795, and also check out the schdule of events.
Come join in the fun at South By South West Web Awards this year. Here you can find all the best new site out on the internet. You can enter your own great site for a chance to get some exsposure, and other SXSW prizes.
Some of the returning competition will be Gaming, Mobile, and Activism categories.
CSS Eleven was created to get the W3C’s CSS work group motivated for change. It took one year to go from CSS 1 to CSS 2. CSS 3 still isn’t here after 10 years. Something must be done, and now has been. CSS Eleven is a rock star cast of Designers and Developers that have been preaching the benefits of web-standards, and a need for an updated CSS platform to shape the web for tomorrow.
CSS Eleven (site not up yet)
Web Directions South - CSS Eleven image of Andy Clarke’s slide.
Current Members:
Cameron Adams
Jina Bolton
Mark Boulton
Dan Cederholm
Andy Clarke
Jeff Croft
Aaron Gustafson
John Hicks
Roger Johansson
Richard Rutter
Jonathan Snook
Being a Junior in college, I have gone through most of the web classes that are required for a bachelors in Web Development. Including Intro, Advanced, and Intensive web. The closest we came to standards compliance was our professor doing a short lesson about Jakob Nielson and Ben Shneiderman. While these are two very smart and opinionated men, I still knew nothing about cross browser compatibility.
Part of the problem is that I feel the courses could be set up better. Everyone thinks that Dreamweaver (DW) is a Godsend because of the WYSIWYG aspect of it. Instructors see DW as more of a beginners tool because of its ease. I believe that this type of thinking is crippling students taking these classes.
When I started Intro to Web my freshman year I had very little HTML knowledge. I didn’t even know that CSS existed. It took me a while to catch onto what CSS was used for. Once I got more comfortable with using it in DW I really started liking it. I noticed that using DW, much of my work didn’t look the same in different browsers. This was unacceptable, so I started trying to edit the CSS files directly and using different techniques that I found from searching the internet for hours. Many of these little “hacks” were not supported by DW. So I decided to just do away with it because I could see what my websites looked like while I was making them, but I didn’t understand what was going on in the back end. After uninstalling DW I was forced to go looking for ways of learning the code, and syntax, so I could develop better sites. There are millions of resources out there to use. My saving grace was W3Schools. Using this site as a reference for code I caught on quickly. Also reading different blogs such as, A List Apart - For people who make websites, taught me many different things about best practices when building websites. One of the first lessons I came across was using tables for tabular data, and not for page layouts, which many people still use. (I will discuss table based layouts in a later post)
In conclusion the main point of this article is:
Give a web designer a WYSIWYG editor, and they will design for a day…
Teach a web designer the code, and they will design for life.
On October 5th I will be attending a FHSU Advisory Council meeting to discuss what can be updated about our classes, so that our students are more advanced. I am representing the student voice from Web majors, and I’m sure you can guess what I will be voicing my opinion about.
Please leave your questions and comments below.