Lately I haven’t been going on digg as much, but today I was checking it and found this great article on 53 CSS techniques you can’t live without. Its a great resource for any project your working on if you need some ideas on certain techniques. Check it out!
With all the talk and hype about Apple’s new iPhone, Cameron Moll wrote an article describing his thoughts on what the iPhone will do for the mobile web. What better person to tell us what they think then the person leading the field in mobile web development and in the process of writing a book on it.
I would get the phone if it were going to be made for Verizon but of course its for Cingular so no chance in me getting it anytime soon. I just don’t like so much of this hype about the end of desktop computers and all.
UPDATE:
Jeff Croft post some great reasons why Apple is blowing all the other Cell Phone manufacturers out of the water and that they won’t be able to catch up. He predicts that the iPhone isn’t being released for six months because it is going to be running OS X Leopard. After reading this article I would say his points are correct and no one will be able to top Apple or come close.
Check out the latest article in the last edition of this year at Alistapart. Marc van den Dobbelsteen shows us how to create layouts for any resolution that we want using some simple lightweight unobtrusive Javascript to switch a class on the body tag. Most of the time Developers create liquid layouts to display perfect for resolutions between 800 and 1024 pixels, but now that the mobile web is pushing its way to the forefront we now have to create alternatives for every possible resolution on a given platform, the user to gets a usable experience.
In the Javascript all it is doing is saying if it is between A resolution and B resolution apply X class to the body tag. Then in the CSS using you have separate classes for the different resolutions. You can just put in your CSS something like .pda #mainContent (styles) or .wide #mainContent (styles).
Sure you have to set up more CSS but the end result is a great usable experience for any user on any given platform.
Once again another great article by Roger Johansson about the 6 things that suck in the web for 2006. Its a short article. but the debate in the comments is what makes it a great read. The main debate is the overuse of Javascript Libraries and the use of them by people who don’t know Javascript thoroughly.
Of course its Jeff Croft leading the debate like always. I seem to see him debating a lot in peoples blogs and though I don’t always agree with his point of view he sure makes any blog article a well rounded conversation between its users.
I do think the use of Libraries are getting to much the norm and people aren’t spending the time to learn Javascript thoroughly, including myself. Even though they say in the comments that it does take some knowledge of Javascript to pull it off I think these plugins that are out there make it pretty simple, its customizing them which takes more knowledge. I agree a lot with what Jeff posts about it being great for developers who know what their doing.
I also agree with the use of AJAX and the use of saying AJAX! People talk of it as if its the end all be all. Yeah its great, but talk about over saturation and the fact that 70% of the small websites out there that people like me develop won’t really have the need for it. Sure if your creating a web application its a must. Lets slow down before every client we come across says their site needs AJAX like Flash.
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.