CSS Animations and MooTools
Posted by admin | Filed under CSS, JavaScript, Uncategorized
Today on Ajaxian I stumbled across an interesting post in regards to CSS animations via MooTools. WebKit’s CSS animations are pretty cool, but not compatible with all browsers. This little script seems to work pretty nicely with most of the browsers. Well, it works wonderfully in Safari, but is a bit buggy in Firefox. It just does a bit of a jump in Firefox, but overall - runs great. You can view Chris’s example here and view the JavaScript here.
I found it really interesting when I read over the article and instantly thought - can I do that with jQuery? We’ll have to see…
∂ meow
Tags: CSS, JavaScript, MooTools
The New Era of Web Designers and Developers
Posted by admin | Filed under CSS, Code, Design
I’ve been meaning to make a post about tables and the good and evil use of them for some time now, and a talk with Mike G. (my love bug) the other day inspired me to get writing.
After a discussion over something, I think it was jQuery, but I’m not sure, he brought up a good point. He mentioned how there is a new era emerging with web designers and developers that have never dealt with tables before and he thought it was funny how all of these new designers/developers will have to pick-up/fix-up all these shitty table based websites. I laughed with him for a bit, until I realized - that is exactly what I have been doing for the last year. At that point, I got a bit annoyed.
And so, “the new era of web designers/developers” that have NEVER dealt with tables before is not just emerging, but it’s already here. Yes, that’s right, it’s not just around the corner as it may seem, it’s right here - starting with me.
Now, do not get this confused with web trends and web standards, etc. I am not talking about seasoned designers/developers that have adopted the table-less design, but rather specifically about those that have NEVER even seen tables in use for website layout.
Let me take you back a bit and give you a little of my background before I continue on this rant of the new era within the web world.
When I decided to pursue and education/career in the graphic and web design world, I have never before opened or used Photoshop, Illustrator or any of the other programs we all use daily. On top of that, I did not know a lick of HTML and had no clue what CSS was. To say the least, I dove head first into the deep end of the pool not realizing how deep it really is and how much of learning I would have to do. Thanks to my drive and motivation and a HUGE learning curve, I managed to learn it all in just a few short months. Now - I am not a seasoned expert, but I can say I am a professional web standards advocate.
I remember walking into my first xHTML/CSS class, not knowing what either one of those languages really do or how they work and just after the first week, walked out with a 100% on my first hand coded (on a piece of paper) xHTML quiz. The CSS came the following week, and a couple weeks later came a fully functioning 3 column xHTML/CSS website that I managed to do all on my own. I was so proud of myself! But enough of that, let’s move on with the point of this post.
What is the point of this post? I already got sidetracked and forgot.
Yes, I have a super short attention span and on top of that, I suffer from, as my boyfriend calls it, “premature optimization.” Actually, I was just recently diagnosed with the “premature optimization” syndrome. I’ve been dealing with it for years, and finally learned the proper name for it. I hear it is quite common.
And so, let’s swing back.
Yes, the new era of web designers/developers that have NEVER dealt with tables before is already here. It’s not just around the corner, like I said, it’s right here - starting with me.
Over the last year, I’ve worked on several different sites all of which were build using tables. It has definitely been a great learning experience as well as a very painful one. It’s been painful and frustrating as I have never worked with table based design before and I was totally lost in the code. The best part came when I first tried to organize and clean up the tables in an attempt to make it easier for me to find my place. Unfortunately, in many cases, that was a horrible idea as that resulted in shifting of the layout on the actual site. At that point, I thought to myself - if they don’t care enough to spend a couple of months on re-building the site to optimize and clean up then why should I?
Using table for layout is absolutely the messiest thing I’ve ever seen! Not only is it messy, but the decision makers behind the companies with table-based websites have no clue how horrible their code really is and on top of that, most of them are not even willing to consider a re-build of the website. It is our duty as web designers/developers to educate and steer towards the better and the best; however, how does one do that when table-based website owners don’t even want to hear us out? To them, the sites work just fine the way they are and bring in enough business to satisfy.
I think the main reason behind that logic is just a simple fear of change and perceived loss of time if a reworking of the website was to take place.
Tables can be great when managed and organized properly for their intended use - as tables to display tabular data. When used for layout, the code just gets super messy, confusing and elaborate - I’m constantly getting lost and can never find anything. I use TextMate as my text editor, and thanks to it’s “find” search option, I can find my way around those messy tables.
When one thinks of a table in terms of information it means simply means some sort of organization of random information in a comprehensive manner. As my favorite look-up website describes it, tables in general are:
- An orderly arrangement of data, especially one in which the data are arranged in columns and rows in an essentially rectangular form.
- An abbreviated list, as of contents; a synopsis.
Roger Johansson, from 456 Berea Street, wrote a marvelous article about the proper use of tables a while - while back. It is a great read, just like any other article he writes. If you’ve never visited his site, I suggest you take a peak every now and then.
Getting back to the messy tables. I once interviewed/trained for two half-days for a company whose website was just an absolute mess of tables within tables and more tables inside of that. The reason I was open to working with them is the fact that they were really open to a re-design/re-build when we talked about it during my interview. However, after two half-days of trying them out, things proved to be completely different (I sort of expected it).
The best part, the part that made me walk out the door and not look back, was when I was asked to use the visual view in Dreamweaver to update the website. Yup - you read right, no joke! The person training me asked me to actually leave the code view and edit the site in the visual view of Dreamweaver. He was actually testing me, to see if I knew how to use it and used that as a leverage for placing me. I can’t remember the last time I used the visual view in Dreamweaver. I’m not a huge Dreamweaver fan to start with, I mean - it’s a great piece of software, but I just prefer my simple text editor. Nonetheless, I was extremely shocked and quite offended, and decided that it just wasn’t worth my time. It felt like backtracking a few years.
The even more shocking thing was that the person training me was an old era developer without any willingness to improve and change. He was one of those fully satisfied where I’m at developers and I just could not believe it. He was familiar with HTML/CSS and web standards, but didn’t care for that at all. I was so frustrated after finding that out. Why wasn’t he willing to grow, educate himself and the people he was working for? How could he call himself a web developer when he spends his days hacking sites together?
And so, as times change and technology evolves it is up to the individual to stay on top of the cutting edge technology and techniques within their respected field. Web standards have been around for a long time, but only as of late, have the table-less designs really started to shine through. With all the efforts to standardize the web today, there are still many websites being built using tables. There’s many reasons as to why that is so, but one thought creeps in; could it be the old era web designers/developers are not willing to change, educate themselves or stay up to date?
I wonder - are the old era designers/developers better and right because of their experience, wisdom and authority, or does the eagerness and willingness to learn of the new era web designers/developers make them who are right? How long will it be till the table based layouts become obsolete and if we have designer/developers not willing to grow - will that time ever come?
∂ meow
Tags: CSS, html, tables, web standards
Design Coding - Poetic Prophet
Posted by admin | Filed under CSS, Code, Design, Fun, Uncategorized, Video
Roughly a month ago, Chuck; aka the Poetic Prophet/SEO Rapper, posted a hysterical and yet absolutely marvelous video about web design.
This post is just an ode to Poetic Prophet for promoting web standards. In case you haven’t seen it, below is the video and even lyrics, so you may sing along. Hope you enjoy it as much as I did when I first watched it a couple weeks ago.
Lyrics:
Your site design - the first thing people see,
it should be reflective of you and the industry.
Easy to look at with a nice navigation,
when they can’t find what they want it causes frustration.
A clear call to action to increase the temptation,
use appealing graphics they create motivation.
If you have animation - please use with moderation,
cause search engines can’t index the information.
Display the logos of all your associations,
highlight your contact info that’s an obligation.
Create a clean design - you can use some decoration,
but to try to prevent any client hesitation.
Every page that they click should provide and explanation,
should be easy to understand like having a conversation.
Create a site style you can use your imagination,
but make sure you use correct color combinations.
Do some investigations, look at other organizations,
but don’t duplicate or you might face a litigation.
You done, congratulations - start construction,
move into production - follow these instructions.
Your Photoshop functions - slice that design,
do your layout with divs make sure that it’s aligned.
Please don’t use tables even though they work fine,
when it come to indexing they give searches a hard time.
Make it easy for the spiders to crawl what you provide,
remove font type, font color and font size.
No background colors, keep your coding real neat,
and tag your look and feel on a separate stylesheet.
Better results with xml and css
now you making progress, a lil closer to success.
Describe your doctype so the browser can relate,
make sure you do it great or it won’t validate.
Check in all browsers, I do it directly,
gotta make sure that it renders correctly.
Some use IE, some others use Flock,
some use AOL, I use Firefox.
Title everything including links and images,
don’t use italics, use emphasis.
Don’t use bold, please use strong,
cause if you use bold that’s old and wrong.
You use CSS, you’re page will load quicker,
your client satisfied - like they eating on a snicker.
They stuck on your page like you made it with a sticker,
and then they convert - now, that’s the real kicker.
Make you a lil richer, your site a lil slicker,
design and code right - man, I hope you get the picture.
What I’m telling you is true - man, it should be a scripture,
if it’s built right you’ll be the pick of the litter.
Everyone will want to follow you like twitter,
competition will get bitter - you’ll shine like glitter.
If you trying to grow - your company will get bigger,
design and code right - man, can you get with it?
∂ meow
Tags: design coding, poetic prophet, seo rapper, Video
CSS Naked Day
Posted by admin | Filed under CSS, Code, Design, Fun
It’s here - April 9th - the Third Annual CSS Naked Day!
So, what is CSS Naked day and why does my blog look so naked?
CSS Naked Day is a tribute to the beauty of CSS and a propaganda for web standards. For one day, the participants simply remove the stylesheet of the website or blog - the result is a naked HTML site.
For more information and participation visit: Dustin Diaz Naked Day website.
∂meow
Tags: CSS, dustin diaz, naked day
