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
MooTools vs. jQuery
Posted by admin | Filed under Code, JavaScript, Uncategorized, jQuery
Which library is better?
There has been much hype over the different JavaScript libraries such as Dojo, jQuery, MooTools, Prototype and Yahoo. I’d like to focus on MooTools and jQuery as those are the two libraries I have been personally debating as of recently.
As you may already know, I am fairly new to the world of JavaScript and just recently started using jQuery. Just a couple weeks ago, I wrote my first reactions/review of jQuery and here I am today comparing it head to head with MooTools.
After much analyzing here is what I’ve come up with.
jQuery is really easy to use and learn. After just a day of playing with it, I learned all kinds of things and quickly caught onto the structure of its syntax. The syntax for jQuery is very simple, easy to understand, quite short and the chain-ability is really sweet. On top of all of that, the documentation and tutorials are phenomenal.
After researching and experimenting with MooTools, I must say that the first thing I noticed is the slightly bulky and less friendly syntax. However, MooTools seems to be great for Object-Oriented Programming and it is very smooth with it’s animations - almost a Flash-like feel. I thoroughly enjoyed their demo page when I first visited the MooTools website.
The MooTools documentation is pretty good as well, but their website did lack in tutorials. That must be largely because MooTools is marketing itself toward the intermediate and advanced JavaScript developer. But what about the beginners or the not quite intermediate developers that are eager to learn? A few tutorials wouldn’t hurt, especially, since there seems to be much complaint about the MooTools community and lack of support for the simple-easy questions that someone learning might ask.
After running a SpeedTest found on MooTools website, I found that there is very insignificant difference in the speed of MooTools vs. jQuery and it varies quite a bit from browser to browser and platform to platform. If one takes all of the results into account, overall, MooTools is a bit faster than jQuery. But what is a few milliseconds? Does that really matter?
So where is the hold up and which should you choose?
This got me contemplating on which library would really be the better way to go. I think that is totally up the the individual’s preference and the project at hand. If a few milliseconds and smoother animation really matter to you, then MooTools is the way to go.
Personally, I’m loving the ease and friendliness of jQuery and do not care too much for the slight difference in smoothness of the animation. However, if a project comes along and MooTools seems to be a better fit, then that is what I will use; but by default, I’m staying loyal to jQuery.
It is good to know or at least have a good grasp of both of these libraries, and even some of the other ones, as you never know what you might encounter with a future project or employer. By knowing or at least being familiar with several of these libraries, you’ll be in a better position to judge and decide which is more fitting for individual projects and you.
In quick summary:
jQuery:
Concise syntax
Great documentation and tutorials
Easy to learn, even for beginners
Nice plugin architecture
MooTools:
Better for OOP
Smooth animations
More advanced - harder for beginners
Overall faster
∂ meow
Tags: Code, JavaScript, jQuery, MooTools
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
Katmilk Design Nearly Complete
Posted by admin | Filed under Code, Design, Fun
I’m pleased to announce that the design of katmilk is nearly complete!
This weekend, I finally sat down and started to really crank in out. I had the design all ready to go for some time now, but just kept putting it off and focusing on other things. Well, after much nagging from friends and loved ones - it’s finally done. Just need to tweak a few things, and it will soon be up an running.
I’m excited about showing it off, as I have tried new techniques and approaches with my CSS. I will elaborate more on those once it’s all up, that way you may view my code and better understand what I am blabbing about.
“Delay always breeds danger and to protract a great design is often to ruin it.” - Miguel de Cervantes Saavedra
∂ meow
Making a Move to Firefox 3
Posted by admin | Filed under Design, Uncategorized
Firefox 3 has finally made it to it’s final beta stage - Beta 5 - and it’s looking and running better than ever.
I just downloaded the new Firefox just a couple days ago to test it out and slowly make the switch from Firefox 2; however, I was very upset when none of my add-ons worked. Naturally, I searched for a way to fix that and make them work and came out with this marvelous add-on that makes all the other add-ons compatible with Firefox 3. The add-on, Nightly Tester Tools, is available on the mozilla add-ons page. I must add that I came across this marvelous piece of equipment through a post on LifeHacker where they do a little rant about Firefox 3 and it’s perks.
After reading LifeHacker’s Firefox 3 article, and a couple of other articles from other bloggers prior to that, I must say it seems like everyone is thrashing Firefox 2 as if it was the worst browser ever. I agree that Firefox 3 is 10 times better; however, I would not thrash Firefox 2 so much. After all, if Firefox 2 was so horrible, then why have they (the people that are now thrashing it) used it in the first place? It must have been, because it wasn’t all that bad after all!
The new Firefox definitely has many awesome features that are just freaking amazing - it is hard not to fall in love with it instantly. The thing that did it for me, literally love at first sight, was the new interface.
It is hard to miss the elegant new dress that Firefox 3 had put on. I 
the darker shade, and the large back button. Love the fact, that the drop down for the back button is off to the side instead of being a part of it - I rarely use it, but it bugged me whenever it would drop down in Firefox 2. On top of that, it has a smart address bar and the pages seem to load much faster.
Overall, it is much sleeker, faster, smarter, elegant and of course - amazing - after all, it’s Firefox.
Take a look and try it for yourself - be amazed!
Read the Beta 5 release notes here.
Download Firefox 3 Beta 5 here.
Tags: Firefox 3
