Web Design and Development

I found a great article over at A List Apart that might help us spread the word of Web Standards and how people should be approaching CSS when switching from being a tables based coder. The article 12 Lessons for Those Afraid of CSS and Standards, written by Ben Henickis, is not just for developers who are just switching to CSS but to all developers who might not know the best way to approach it and its headaches.

I never coded pure table based layouts, when I began I was probably one of the few people in my local area of web developers that learned CSS first and tables second to make sure when in the real world I would know what is going on. It has taken me the last three years to actually code my CSS layouts the way Ben speaks of in his article and I think there are probably about 75% of CSS developers who aren’t coding to the most streamlined semantic web standards.

I’m going to go over the most notable points from Ben’s article, which I can relate with the most and want others to know that their not the only ones going through the trials and tribulations.

It’s not going to look exactly the same everywhere unless you’re willing to face some grief… and possibly not even then
There are an awful lot of differences between rendering engines, and the W3C specs sanction those differences. You can adjust, tweak, hack, and waive, but if you want to preserve your social life, you will learn to let go of the small differences—and convince the stakeholders in your projects to do the same.

I had to go ahead and quote that whole lesson. This is one of those things that old school developers are going to try and use against us standardista’s. They’ll always say “Its much easier and faster to produce just using tables”. I tend to think these people aren’t working as a developer because it is their passion but more like they were one of the many in the 90’s who didn’t study to become a developer but somehow ended up being a producer to pay the bills. Yes, most of the greatest pioneers and others started this way but they gained a passion for what they do.

Your just going to have to deal with browsers rendering different, I think of it as what what makes our job difficult and interesting. I spend many nights trying to figure out these little problems and if it were so easy to make something work then I probably wouldn’t feel as proud of myself when I am through with a site. There comes a point though when you need to realise that 1 pixel isn’t going to make a big difference.

You will be forced to choose between the ideal and the practicable
From time to time, though, you can expect to encounter situations where you will be forced to choose between the lesser of two evils, or perhaps even situations where you will be given no choice at all. Sites that are incapable of passing accessibility or validity tests will result, and you will be forced to accept those outcomes even when your contrarian assertions are absolutely correct.

This is exactly what I was discussing in my previous article Real World Freelance (Front-end Development). In an ideal world we would be able to meet our standards but in the real world with budgets, timelines, and what is in the scope of work between those two, your going to have to settle with what you feel is best for the site and its users. If the client says there is not budget or everything that you sell them on, they say go ahead, more power to you but this is very rare at least from my side of the table.

Perfection is not when there’s nothing to add, but when there’s nothing to take away
When producing markup for a standards-friendly site, it’s all too easy to stick to the table-based way of doing things and create an over-abundance of container elements. While at first it may seem like common sense to force the markup into the design, doing so misses the point of standards-friendly production.

This is probably the biggest one in becoming a great CSS developer. I feel this takes a lot of time to be able to develop the skills necessary to actually follow this rule. Like I said before there are many developers out there creating fully functional CSS based layouts. To someone who isn’t a practitioner of Semantics and streamlined code, they could look at a lot of the CSS sites out there and think someone is a great coder because they don’t use tables. Well I think by now, anyone who has been on the web researching coding techniques could tell you, its not about not using tables anymore. If you still use tables, theres something wrong and you haven’t opened up your browser and did some studying in the last 2 years. Its about writing clean Semantic code. Many beginners fill up their code with divs and more nested divs to pull of effects that could of been streamlined by half or more of the tags if they thought about who they were going to structure their code. Doing so its no better then a table based layout.

This brings us to the next to key lessons in Bens Article:

Descendant selectors are the beginning and end of genuinely powerful CSS rules

This is by far the most important way to make sure you can pull off the last lesson and create a total semantic site. About a year ago or more I would create all these divs with horrible class and ID names that were focusing more on the location or specific color of an object. some examples would be leftContentBox, middleColumnText, #maintxtsubbrown. By doing this it limited the use of those styles in other areas of the site and also creating a much more heavy CSS file to accommodate those other needed styles. Using semantic naming conventions and descendant selectors can dramataically increase the value of your id’s and classes while reducing the CSS file. Now you will find examples like this in my CSS

#primaryContent p.first,#primaryContent h2.first, #primaryContent blockquote.first

These were all used to create styles for the first element inside of the primaryContent div. This allows me to have the class first on lets say my #secondaryContent div which has a container that comes first that needs a specific style, such as

#secondaryContent div.contentBox.first.

That might not be the best example but I’m sure you can see the benefits of keeping the value in your classes and id’s to be reused through out the pages of your site and not just specific areas of a single page. If you want a great book to show you the light on these best practices I recommend CSS Mastery by Andy Budd

Coherent and sensible source order is the best of Good Things
If you deliver work that reads properly when styles are removed, your thoughtfulness will repay you many times over.

Basically if you write clean semantic XHTML and use proper streamlined CSS techniques your site will become more portable making it easier to update or complete a total redesign without having to change the structure of the code in the future. Not only for you, but the many future developers that may have to work inside of it.

When becoming a CSS developer there will be many headaches and aggravations with going over these lessons. All you can do is stick to it and follow your passion to become the best standards developer that you can, not for you but for the users of your sites. The people that you create these sites for may never understand how important these lessons are to follow, but the future of the web depends on us to fully understand and practice them. Maybe it doesn’t seem to be much of a difference to the clients or people outside of the web department in your firm between a non-semantic div bloated layout and a semantically streamlined well written and tested site,.They will learn hopefully, when later their wondering why their site isn’t search engine friendly, inaccessible, spending so much time recoding when implementing new technology, and when they have to do all of the code structure over again when they want to do a simple redesign.

The other day I talked about the cool JQuery widget Thickbox. Today I would like to give praise and thanks to the creator of jCarousel, a jQuery plug in for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

The same project that I was utilizing the Thickbox technique, also called for a little section on the home page that would have album covers that the user could scroll right or left and click on the album for more information, a lot like this done for another project in flash. In the middle of the page you will see the area where you can scroll left to right and click on an album. Well I didn’t create that and wasn’t exactly sure how to go about it. Since I already was utilizing the jQuery library, I figured I would see if there was anything out there that mimics this functionality.

I found it in the form of jCarousel written by Jan Sorgalla. I got it working perfectly using the AJAX method to pull in the files from a text file on my server and write the list items. It also uses the Thickbox technique when a user clicks on an image to show a larger version. I didn’t want this though, I wanted to be able to click on an album and open an HTML page with the image of the album, a list of tracks, and other details. This wan’t possible with the way that jCarousel was written out of the box but I knew it had to be possible since Thickbox allows you to do this. I looked on the site and blog on the topic but didn’t see any answers to this.

I noticed that Jan stated in one of his comments that there was a discussion board about it and he said to go over to the JQuery to find more support. I went there and signed up for the mailing list and somehow found this Nabble forum. I went there and posted my problem and in a matter of hours he replied and asked for a bit more detail and so I did and by this morning he posted the solution. I never even thought that this would get answered let alone get the working solution within a day, and for that I owe Jan tons of thanks for helping me out and letting me get past this problem and finish the site.

if anyone is curious about how to switch it to make it possible to load an html file instead of the image once clicked this is what you do.

In the example_dynamic_ajax.txt where the plugin grabs the files for the images with ajax the images are listed as so

http://example.com/blah.jpg;Flower1|

you switch that to be

http://example.com/blah.jpg;Flower1;http://example.com/path/to/file|

Then change the getItemHTML() function to:

function getItemHTML(data)
{
var split = data.split(";");
var url = jQuery.trim(split[0]);
var title = jQuery.trim(split[1]);
var file = jQuery.trim(split[2]);
return '<img src="' + url + '" width="' + 75 + '" height="' + 75 + '" alt="' + title + '" />';
};

One of the biggest lessons that anyone studying to become or just beginning to work as a freelance front-end developer is the fact that no matter what your standards and passion are for the web, you can’t always expect that your product (the website) will launch the same way that you finished your part of the development, or will you always be able to produce the product with your standards and/or best practices. I think this could go with many aspects of the web development process and feel free to include any other experiences you guys have had in comments.

During my time as a student at the Internet Professional Program at Washtenaw Community College I had the chance to have some great teachers get me the start towards the right way to think as a web standards perfectionist developer. In our code everything had to be perfectly streamlined, totally accessible, and render the same in every browser. This turned me into a perfectionist in the real world environment and what has set me on my way to a successful career. It even seems to annoy my associates and my girlfriend because I wont finish something until I find that one pixel that is messing up in Opera or some other browser.

For the last three years I have been working as a freelance/contract front-end web developer. I mostly do jobs for local web firms that are swamped with work and need someone that they can count on to knock out a couple templates from the designers Photoshop files. In turn they will implement all the content integration. I have been lucky to get in good with these companies and don’t have the hassle of dealing with trying to find clients themselves. They choose me because they know I am a perfectionist and have a passion to create my templates using the most up to date web standards and semantic code. Well I’m not sure if the people of the firm outside of the web department know this, they just know that I produce quality work in a timely fashion.

About 80% of the time things don’t really work out the way that you would like, with the templates that you created. I’m not saying its web firms that contract you out. Many of the firms I deal with have people in the web departments with the same passion and knowledge as I do, if not more. It’s also not your fault, its just the way the business goes. A lot of times the budgets and deadlines are tight and of course you would like to always produce templates or websites that have the features of a great portfolio piece, but the companies are on such a deadline they just need your templates so they can quickly implement the content and get it live. By doing this they probably miss some of the comments in your files, explaining why you did things a certain way or to utilize certain techniques and styles on the remaining pages. You would love to include all of the functionality and techniques that make a fully accessible and web standards compliant site, but the company contracting you out aren’t going to pay you for the extra time it may take unless the site requires it inside of the scope of work.

Being able to include all the techniques that make a great web standards site isn’t my biggest concern. I usually can produce a pretty decent site or templates in the deadline I am given and even spend extra hours then what I invoice for because I am a perfectionist and want the site to be something that I can show people. The biggest disappointment is when you hand over your work and the finished product comes out totally different. A lot of this will happened when an engineering team gets a hold of your templates and start plugging it in to the back-end. A lot of times these engineers don’t really know much about web standards and clean coding and just care solely on the functionality of specific features of the site and not the aesthetics or quality of code that creates it.

I recently had one of my most exciting templates I got to create get torn apart from another contracted out engineering team. I spent about three weeks of my life after working an 8 hour day, working 2-4 hours a night on a site where I had to create about 9 templates. The design was really great and was pretty complex to pull off with a totally 100% CSS layout. After I got done with the templates of course the client had a lot of changes that were of course changes to the design and nothing to do with the code. This should have been done in the design process but of course like always the client is going to have lots of changes, once they see the site on the web. After about a week of changes from the client, they had me tear it apart into a bunch of SSL’s, which took another night or two. This was a long month for me as I was also working on the Ann Taylor redesign(not launched) all day at another firm that I was contracted to work at.

I couldn’t wait to see how this site was turning out from the back-end side and kept in contact with people from the firm (they weren’t the ones doing the back-end). They gave me the IP to the development site and I checked it out and I saw that the layout was all jacked up and certain design features that I spent hours trying to replicate were gone. I looked at the code and saw they had totally just turned this site into a table based layout and a crappy nested bloated one at that. I was totally devastated. This was probably the worst case scenario that could have happened. It makes you feel like that whole month was wasted and the company that contracted you out wasted their money (they were highly devastated also). I know I got paid but like the rest of you, I’m sure this is your passion and more then just the money.

That was the best example I have but there are others such as the web teams redoing your navigation menu, (which you spent hours to do) because of the way they pull in the content dynamically or they use tables to pull things off, which could of been CSS because their under a tight time line to integrate the content, or even some type of CMS that breaks your templates down and adds tons of code bloat and weird tags. Sometimes I think that maybe it’s something I did or my code isn’t that good and wasn’t rendering properly for them. I get past that and realize that my code is good, I’m just too hard on myself and this is just how it is in the business. In a perfect world everything would look the same as you leave it but it’s not.

One area of work where you might not be able to follow the standards you believe and practice would be when you work for a large firm and they have a set way and standard that they produce sites. I found this out working as a contract web developer at one of the largest firms in my area. They have their standards and have proven applications and don’t want to jump to fully web standards sites since they have been developing their way and it has worked for so long. I would also say that their main focus is on the functionality of the application and the engineers developing the product and not the front-end. The sites I worked on are of course going to be my most notable sites but also my least web standards and sloppy coded sites. You have to take it for what it is, at one end I had to work inside of table based layouts and use inline styles but I learned a lot more about what it is to work inside of large scale E-Commerce applications and how to work with a team of engineers, architects, graphic designers and project managers.

If I had got hired on maybe I could have helped them see the light, and showed them how important it is to bridge the gap between a quality web standards front-end application and a back-end that supports this, which many of the employees already did but if one person in team believes in certain standards they can’t force it upon the others unless the company demand that as their standard of work. You can only try and make the higher ups see the benefits and hope they try and make a change.

In conclusion, you can’t expect that every piece of work you do is going to be held to your standards or the standards of the people you want to represent yourself to. This is unless you code the whole site yourself, or if is your company and you make sure the client knows the scope of work and budget that it takes to provide what is necessary to hand them over the highest quality site. if your a perfectionist like me you are most likely going to end up with a product, which you have some regrets or disappointments with the outcome. Until everyone on all sides from the client to the presidents of the web firms realize that the future of the web counts on us to follow web standards this is just something we are going to have to settle with, and try our best to make others realize there is a need to change.

Any one thats been around on the web for the last year or two has had to of noticed all the sites implementing the Lightbox technique all over the web. Lightbox allows you to create functionality to overlay images with some cool effects without the use of flash.

There are some others out there such as Greybox to overlay HTML content. Thickbox utilizes both Lightbox and Greybox functionality, but allows you to overlay all of the following extensions .jpg .jpeg .png .gif .html .htm .cfm .php .asp .aspx .jsp .jst .rb .txt.

Thickbox was created by Codey Lindley who is doing some great things with the JQuery Javascript library. If you check out the cool examples on Codey’s site you will see the powers of this effect.

I decided I wanted to try this since a recent project called for me to have a cool new type of popup for displaying an album cover which list the tracks and links to mp3’s. I know I may be a bit late on recommending this but I don’t really play around with these things until I have a need to do so on a project, its not like its rocket science and I’m missing something if I don’t. With all of these libraries out there its so much easier to find scripts to do the effects you want.

I highly recommend this and all of the other cool tricks you can do with the light weight JQuery Library. I had to be different then the norm and not use the script.aculo.us or Prototype libraries.

Lately I have been really interested in all of these web conferences all over the place talking about the latest trends and technology out there in my field of work. They seem like great events, which the leading “top dogs” of the industry speak, but its just one thing there expensive as hell!!!

I would love to go to something like An Event Apart. This conference has some of the most influential speakers of the web industry and will be in Chicago in August, it’s the first one I have seen so close to me over here in Michigan.

• Steve Krug
• Dan Cederholm
• Molly Holzschlag
• Andrew Kirkpatrick
• Cameron Moll
• Ethan Marcotte
• Jason Santa Maria
• Eric Meyer
• Jeffrey Zeldman

That is one great line up, but I will never be able to go and participate. The event is going to cost about $800. For someone like me, a young freelance web developer that hasn’t yet made it there in my career to be able to just blow $1k dollars to hear people speak. Its just not feasible. I know this is cheap compared to other conferences such as the Web 2.0 conference that cost something like $5k dollars WOW or a other conferences for other industries.

I think this contradicts everything that most of the speakers preach in their practices. They want everyone to hear the word of how great web standards are and they try to get as many people as possible to help create a better web.

Why limit this to only companies that can afford to send their employees or the other normal elite Developers that show up at every conference? Why not open it up to all of the developers and small businesses which are passionate about the web and follow what these people teach us in their books and blogs?

It seems to me that these presenters just go from conference to conference, most likely making tons of money off each one. Then we have to sit there and read in their blog about how good the conference was and all the things that were presented. We get the podcasts and get to listen to the important stuff anyways. Most of the time its stuff that I have already read about, but it would be cool for someone like me to be able to take part of these events, for the simple fact that I really do admire the presenters. They are what I hope to be one day, someone that makes a difference and has a passion for everything that is the internet.

Sure you could say the conference needs to be able to pay these presenters and keep the conference going and pay for the facilities but I doubt that it needs to cost $1k - 5k for each attendee. I may be wrong but it just annoys me that someone with as much passion and drive for the web that I have doesn’t get the chance to participate in such great events because someone puts a huge price tag on ideas they want everyone in the world of development to follow.

Basically these conferences are nothing more then to put money in the presenter’s pockets and to get corporations to start realizing they need to follow web standards to make the internet a better place. When in turn they will go back slap in some nifty little Ajax script and some cool new CSS effects inside of their crappy coded, non semantic, inaccessible and unusable website.