07
SEP
2007
1. Use Firefox
This is the most important platform you have at your fingertips. Firefox is essential for developing websites. I’m not saying you need to use it as your browser — you can use whatever browser you want for surfing
Since the birth of Firefox, there have been a few extensions developed that are a MUST HAVE if you want to speed up development and learn faster.
Must Have Extensions
Web Developer Extension by Chris Pederick
This extension has many useful tools, though most of them have been trumped by FireBug (which I will talk about next), some are still useful. Features include:
- Resize the browser window
Quickly and easily resize the browser to 800×600, 1024×768, or any other size you want. This tool helps you see how your site looks from your visitors’ point of view. Check Google Analytics and see which resolution is the most popular. Design for that one. Firebug does not have this tool. - Edit CSS/HTML without refreshing
This tool is useful for writing free-form CSS without having to refresh the page, something that is not as easy in Firebug. As you edit your CSS and HTML you will see the changes instantly. This is a major time saver. - View all Javascript loaded on the page
For those of you that have Javascript code or are trying to see someone else’s Javascript, you can view all the JS code that your browser has loaded on a single page. (Firebug shows you all the JS files, but you can’t search through all of them at once like in this extension) - View generated source
This is an excellent trool if you have portions of your pages loaded by AJAX or via Javascript. Regular view source won’t show you the HTML that is dynamically generated. (Firebug will also show you dynamically generated code. You can actually see it on the fly.)
Firebug Extension by Joe Hewitt
Often at the office we ask the question, “Remember life before Firebug?”. This extension has changed my life. Here are some of the major pros of this extension:
- Inspect the DOM (Document Object Model)
Click ‘Inspect’ and hover over elements of the DOM to see where that element is in the HTML code and what CSS styles it has. - Live CSS editing showing style inheritence
This is money. This will save you literally hours in layout design. For example, you can select a DIV and then tweak it’s margin by selecting the margin property in Firebug and pressing up and down to tweak it pixel by pixel. Page up and down to change by 10 pixels. You can also add new properties to current styles. Once you have made your changes, highlight the CSS and copy and paste it back into your actual file. - Detailed Javascript debugging
The Javascript console is slightly better here than in plain Firefox. It gives you more details and is a fine replacement for the default console. - See all files being loaded and total size of your webpage
This is so key for optimizing your website’s load time. You can see how long each individual file associated to your webpage took to load. Images, Javascript files, AJAX calls. At the bottom of the “Net” section of Firebug, you will see the total size of the page you just loaded.
2. Be Compatible
Being cross-browser compatible is very important. It’s not something I personally have fun with. I told you to develop in Firefox, but don’t forget to check your work in IE 6 and 7, Safari, and if you want to, Opera. Once again, check your Google Analytics to see what browsers your visitors are using. The most important ones are the ones that your visitors are using.
I’ve been watching the decline of IE6 in the Google Analytics of many of my sites, and it is steady. I will throw a party the day it drops below 5% and I don’t need to support it anymore.
To have an easier time being compatible, keep your approach simple. If you try to do something fancy that takes a lot of work and tweaking in one browser — it’s more likely that it won’t work properly in another browser, which takes me to my next tip: Less is More.
3. Less is More
Be tasteful. This applies to everything. Graphic design, programming, page layout. Keep it simple!
- Designing Graphics
There’s always a tendency to overdo a gradient, bevel, or drop shadow. If things just aren’t working out, it’s probably because you have too much going on. Keep it simple and the effects minimal or tasteful. - Fancy Javascript
It’s always nice to write some really cool Javascript that enhances the user interface. On the down side, it can be taxing to a user that doesn’t have the supercomputer you do. You can also run into issues across multiple browsers. Again, don’t rely too heavily on Javascript to do everything for you. If you want to do basic user interface stuff, I’d highly recommend jQuery, which I talk about in the next section. AJAX has it’s time and place.
4. Want Javascript? Use jQuery
Javascript is great for showing/hiding information to give your page more space to breathe. If you want to write Javascript in a new, very easy to write fashion, I’d highly recommend using jQuery.
jQuery
One of the major benefits of jQuery is that it has been tested across multiple browsers for you. This means that all of the methods you use in the jQuery system are guaranteed to work. The next major benefit: jQuery is extremely simple to use.
jQuery uses CSS selectors to target items and then lets you manipulate them however you want. Some quick examples:
Hide all paragraph elements in a div with the id of myDiv
$(’#myDiv p’).hide();
$(’#myDiv p’).hide(’slow’); // Add animation
$(’#myDiv p’).toggle(); // Same thing except when you click again it will show the paragraphs
Learn more about jQuery here.
For help, visit the jQueryHelp Forum
It’s only fair to mention other alternatives, such as mootools, prototype and scriptaculous.
5. AJAX has its time and place
AJAX has been all the craze of ‘Web 2.0′. Lots of people I know ask me ‘Do you know AJAX’ as if it’s a stand-alone programming language. AJAX is just a method of communicating with your server-side scripting language to retrieve new data or update data without refreshing the page.
I’ve noticed a large tendency to use AJAX for everything. This is not always a wise choice. Why?
- Page Views. By making everything AJAX, you’re losing valuable page views.
- Usability. This one is debatable, but I feel that the average web user (which you do not represent) is still getting used to this. Average users still take the page refreshing as an indication that something is happening.
AJAX definitely has it’s place and it should be used in some conditions. Again, less is more. Be tasteful and moderate your usage of Javascript and AJAX.
6. Search engines like structured code
It’s been all the rage to get to the top of search engines for your target keywords. As the developer, you have a responsibility of following code structure to make your site’s code as optimal for search engines as possible.
Here are some important structure tags:
- H1 - It’s the most important header, and that’s how search engines see it.
- H2, H3, H4, H5 - Subsequently important headers. Use these to disseminate your information properly and search engines will give the words within these headers weight.
- A - The link. Always give it a TITLE property.
<a href=”http://www.aclevercookie.com/contact” title=”Contact A Clever Cookie”>Contact A Clever Cookie</a>
- IMG - Ye olde image tag. Always give the image tag an ALT property. This will add to the keywords search engines pick up on. Also, if your image doesn’t load for some reason, users will still see a caption of sorts.
Here are other important tags for your document:
- TITLE - The title tag is what will be shown as the search engine result, so title things carefully.
- META - Always fill out your keywords and description META tags. Search engines still read these old suckers.
<meta name=”keywords” content=”blogging, web design, clever cookie”>
<meta name=”description” content=”Try to have a different and detailed description for every page that includes important keywords related to your document”>
7. DIVs not TABLEs
We all used to do it. Making layouts in TABLEs nowadays is extremely frowned upon. Only use TABLEs to display tabular data.
It takes a lot of practice, but once you get the hang of it, it becomes really easy and you actually gain more flexibility than you ever thought you had.
It’s as easy as float and width.
I wrote a very basic two column tutorial on Virb, read it here.
8. Minimize inline styles
While coding, sometimes it’s easier to just write styles into your element rather than giving it a class or property in your CSS file. You want to minimize that for one reason: supportability.
You’re going to come back to your code that you made in the past. You will sleep in the bed you made. After doing this for 10 years, I’ve learned that taking the extra time now will save you lots of time in the future. Which brings me to my next tip: Code with the future in mind.
Bad
Good
9. Code with the future in mind
Comment your code. Be neat. Be organized. Don’t be lazy. If you’re feeling in a rush, take a little break and come back to it.
In many cases, that is, if you plan to be successful, someone else will be looking at your code in the future. Sometimes, that person may be you.
When you come back to your code after a couple years and it’s not commented and it’s not formatted properly, you’re going to be upset with yourself. Avoid future self-confrontations by simply commenting code where things don’t immediately make sense.
It is also possible to have too many comments. Please don’t comment things that are blatantly obvious, because then the actual worthwhile comments get lost in the mix.
10. Know the standards, but you don’t always have to follow
Don’t use SMALL, CENTER, FONT and other deprecated tags; it makes you look bad.
I’ve been informed the SMALL tag is not deprecated — sorry. I’m sure its on it’s way out though.
Valid XHTML and CSS badges on a website are mostly a matter of showing people you can follow some rules. Maybe it makes you feel special. But, it does not imply anything about the quality of your website. Try to find one large, successful website that has valid HTML. The standards can’t keep up with growth of new techniques and technology.
Always start coding your site in valid HTML for as long as you can. There will probably be a situation where you need to bend the rules to get a feature of your design to function properly in all browsers. Don’t sweat it. In the end, that’s really all that matters.
You can use the W3’s HTML Validator to validate your mark-up if you so desire
That’s all folks!
Keep all of these tips in mind and start getting familiar with the tools I recommended. If you didn’t already know, you have just stepped up your game.
Next: 7 Clutch Free Tools For Budding Web 2.0 Developers and Designers »
Buy me a beer if you liked this post or found it helpful
September 7th, 2007 at 3:48 pm
Just great!
Thanks
September 7th, 2007 at 4:08 pm
The apostrophe also has its place. And it’s not anywhere in the sentence “AJAX has it’s time and place”.
September 7th, 2007 at 5:13 pm
Would I be right if I guessed that you yourself don’t have THAT many years behind you as a web programmer? Say, three or four years maybe?
September 7th, 2007 at 6:09 pm
Great post, but I have to say, that I wholly disagree about it being ok to break with the standards. I haven’t had to use a browser hack since 2002. Still, I guess everybody uses hacks occasionally.
And actually, the <SMALL> and <BIG> tags aren’t deprecated and are perfectly fine for use in HTML 4.01/XHTML 1.0. There’s some debate about their semantic value, and (from what I can tell) Tantek is against them and Eric Meyer is for them (but I’m not trying to put words in their mouths)… That’s pretty typical with those two anyway.
September 7th, 2007 at 6:49 pm
Chrys, thanks for the great article.
I’m just curious as to why the TITLE property is required for links by search engines.
September 7th, 2007 at 7:59 pm
@Shane: Adding the title attribute to the link is treated as a description for the link. It also appears in a tooltip when someone hovers over the link.
@Guess: Close, but I’ve been kicking since ‘97.
@Stace: Thanks
I’ll fix that… and add that to my next blog about common grammatical errors in blogs, lol.
@Alan: It’s common to want to use PNG overlays in “Web 2.0″. Something that IE6 does not support unless you use an IE specific directive in your stylesheet, which would be considered a “hack”. Just one example.
Anyway, thanks for reading. Hope someone learned something
September 7th, 2007 at 8:07 pm
[…] A Clever Cookie » 10 Tips for Budding Web Programmers and Designers Posted By: admin Published in Resources 8Sep A Clever Cookie » 10 Tips for Budding Web Programmers and Designers […]
September 7th, 2007 at 8:33 pm
I have never actually used the web developer extension as I am hooked on firebug. But I would love to try it out now after reading this article. Thanks for the wonderful read.
September 7th, 2007 at 8:55 pm
@Author:
The element is not deprecated.
September 7th, 2007 at 9:36 pm
Or - if you are TRULY lazy, you will simply purchase Sandvox.
(guilty as charged - great article by the way)
September 7th, 2007 at 10:44 pm
It’s true. The apostrophe is used sometimes in possessive cases and other times in contractions, such as at the beginning of this comment. To say “Ajax has it’s place” is incorrect because in the case of possessive pronouns, such as “its,” “yours” and “theirs” the they already declare possession without an apostrophe. “It’s” is the contraction of “it” and “is.” The apostrophe is used in other cases, but our swingin’ lil’ buddy is often misused.
September 8th, 2007 at 12:40 am
Awesome! thanks so much for the tutorial. ^^
September 8th, 2007 at 12:55 am
thanks a lot.
great list…
September 8th, 2007 at 1:31 am
jquery? come on!
September 8th, 2007 at 5:20 am
The target attribute of the A tag is not supported by the XHTML standard. I’m not sure how you’re expected to get around this, so I can see how standards need to be bent sometimes. Otherwise, you have to do things like:
foobar
September 8th, 2007 at 5:22 am
Oops, the previous comment’s link rendered, here’s the code:
<a onclick=”window.open(this.href,’_blank’);return false;” href=”http://foo/bar”>foobar</a>
September 8th, 2007 at 5:50 am
Great Article! I use firefox as my main browser but unfortunately didn’t know about those extensions.
BTW regarding the PGN problem, there’s a VERY elegant fix (no javascript or comment hacks for IE only) that you can find here:
http://www.twinhelix.com/css/iepngfix/
September 8th, 2007 at 5:59 am
Kelly o ia la caca!
September 8th, 2007 at 8:19 am
I already use Webmasters Toolbar…
September 8th, 2007 at 11:02 am
[…] Enlace: 10 Tips for Budding Web Programmers and Designers […]
September 8th, 2007 at 11:17 am
@MNZ: Yes, I know the fix is using Microsoft specific CSS, but you still need to cheat your stylesheet by using an *, which is not standard compliant.
September 8th, 2007 at 11:51 am
god job
thanks
September 8th, 2007 at 12:24 pm
[…] Web programcıları için 10 şahane öneri Link […]
September 8th, 2007 at 1:41 pm
Does anyone live-code CSS in FireFox? And I’m not talking about fixing a bug or not, I mean making it from scratch that way?
September 8th, 2007 at 2:02 pm
@anime-lover: Sometimes I live code in Web Developer, and then I always tweak it in Firebug. Live-coding CSS would save you hours of time in the long run. I think you also end up with a better design when you’re done because you can see the pixel by pixel difference in real time.
September 8th, 2007 at 7:23 pm
[…] A Clever Cookie » 10 Tips for Budding Web Programmers and Designers (tags: tips design css html webdev) […]
September 8th, 2007 at 9:17 pm
Great article, all very valid points.
September 10th, 2007 at 12:30 am
[…] A Clever Cookie » 10 Tips for Budding Web Programmers and Designers Keep all of these tips in mind and start getting familiar with the tools I recommended. If you didn’t already know, you have just stepped up your game. (tags: webdesign tips programming css design Web HTML tech tools web2.0 webdev javascript howto php plugins list Firefox advice) […]
September 10th, 2007 at 11:43 am
[…] long as it is benefit to me or you guy, I will posting it up. This is another good article titled 10 tips for budding web programmers and designers which I think it is perfectly suit to my needs. I need to read more articles like this to enhance […]
September 10th, 2007 at 11:57 am
[…] aclevercookie.com is a pretty recent blog, but it looks like they have some pretty good advice. […]
September 10th, 2007 at 12:30 pm
[…] 10 Tips for Budding Web Programmers and Designers. Cet article vous propose 10 points simples pour aborder le développement internet (Firefox et ses extensions, Ajax, javascript…) […]
September 10th, 2007 at 12:35 pm
[…] 好久没翻译解馋了，来一篇吧，《10 Tips for Budding Web Programmers and Designers》。感谢Eric同学的指点迷津。 […]
September 12th, 2007 at 12:53 pm
[…] This is the follow-up to my post entitled 10 Tips for Budding Web Programmers and Designers. […]
September 12th, 2007 at 1:35 pm
Excellent tips here! This is really what a programmer must care otherwise will be seen pulling his hairs after some time
Great work.
September 13th, 2007 at 5:14 am
I quote your work in my blog.
September 13th, 2007 at 6:54 pm
I dont agree with a some of that, but we all have our own ways. Great general tips for new people, although stop bashing tables. Only CSS nazis frown upon them, there perfectly acceptable.
September 13th, 2007 at 7:44 pm
@Tony: Tables are made for tabular data, not layouts. Sure, you can use a table to make a layout, but good luck if you have that on your resume.
September 13th, 2007 at 11:27 pm
“Check Google Analytics and see which resolution is the most popular. Design for that one.”
Not this. You simplify it entirely too much. Design for what looks best in the majority of your visitor’s browsers. That can be accomplished by several means ranging from semi-fluid designs that account for different screen widths like 1024px or 1280px to finding your most common screen widths (1280×1024 and 1280×800). Horizontal scrolls are deadly. Vertical scrolling can be mitigated by following inverted pyramid strategies for content placement and copy.
Also, using slick hacks to work around issues can and does lead to very unpredictable results with new browser releases. It is better to find a semantic method that does not break the standards set forth. According to your line of thought on it, you give justification to Microsoft’s rather self-centered way of standards support.
September 13th, 2007 at 11:39 pm
@Joe: Thanks for the insightful comment.
You’re right about the resolutions. If there are a few resolutions that are common for your visitors, it makes sense to design with that range in mind. Though, you should always use the smallest resolution that is popular among your visitors as the base.
As for the hacks — my last point was more in the sense that you shouldn’t kill yourself about failing the W3C Validator. I understand people pride themselves on portfolio pages with validation badges, but when you’re making a large scale site, it’s never going to validate.
The standards keep up with the technology, not vice versa. We’re still waiting for standards-based browsers to start supporting CSS3.
In IE6 (which hopefully will die off soon), you need to use a filter to achieve what a normal PNG does in Firefox. So, if you make an IE6 specific style, is that considered a hack?
Personally, I’d love to refuse to code for IE6 which is not standards compliant in the least bit. Unfortunately, as long as people still use the browser, you will have to bend over backwards for it.
In no way do I support Microsoft in the browser industry.
September 15th, 2007 at 7:11 pm
Just TRUE !
September 16th, 2007 at 4:13 am
Suggesting it is OK to ignore web standards is the worst advice you could give any aspiring web developer. Anyone who knows web standards, who truly understands why they are important, would never suggest its OK to ignore them. Plus it contradicts your point number 9 - “code with the future in mind”. Future proofing starts with complying to web standards.
The only good thing about ignoring web standards, is it makes it easy for us professionals to differentiate between those who care/understand/commit and those who are lazy/ignorant/foolish when it comes to web development.
It’s hardly surprising you suggested it though, given this page alone is nowhere near close to validating with 23 warnings and 1 error.
September 16th, 2007 at 4:15 am
Oh and another thing…good luck getting any respect or even a glace in your direction if your CV says you occasionally ignore web standards. Fark that makes me LOL.
September 16th, 2007 at 12:24 pm
@Michael:
I never told anyone to ignore the web standards, I told people not to beat themselves up over not validating with w3. Just as you shouldn’t beat yourself up because your CSS doesn’t validate with the w3 validator.
The standards are important to know and follow as much as you can, but in the end, what’s more important is the user experience. You shouldn’t not implement a cool feature because there’s no valid way to get around something.
Thanks.
As for my site, the plugins and basic Wordpress, as we all know, are not well coded at all. Something any so-called professional should know.
September 17th, 2007 at 11:53 pm
[…] http://www.aclevercookie.com/10-tips-for-budding-web-programmers-and-designers/ […]
September 20th, 2007 at 9:54 pm
[…] Re: Expanding your horizons I’m sure the site is down only temporarly. Try it again in a day or two . In the meantime i was just "stumbling" the web when i found this page which you might find of interest 10 Tips for Budding Web Programmers and Designers (aclevercookie.com) […]
September 21st, 2007 at 4:37 pm
“small” element is not going away anytime soon…there is a reason for it (semantically) just as there is a reason for “em” and “strong”.
It is still in the HTML5 spec.
http://www.w3.org/html/wg/html5/#small
September 24th, 2007 at 10:23 am
[…] This information is very valuable because it comes straight from the source. Very much like my post sharing my 10 years of experience on web development, his posts on increasing traffic and revenue irrefutably […]
September 24th, 2007 at 7:39 pm
Here are a few other tools I love using with FireFox:
Greasemonkey (Get scripts at userscripts.org
YSlow (developed by Yahoo! for FireBug)
MeasureIt
Color Zilla
Side note: Your link to jQuery Help forum points to jquery.com (I think you meant jqueryhelp.com).
September 24th, 2007 at 7:46 pm
@Michael -
As for not always following web standards, you are correct that it is best to adhere to them as much as possible, but sometimes you do have to stray from them, especially with some of the things clients demand. Sometimes, no matter how good or how professional you are, there are no ways around them, and such is the way of having clients. But I do agree they should be stuck to as much as possible within the scope of the project you’re on.
As for this site not validating, I wouldn’t expect any Wordpress site to have 100% valid XHTML/CSS.
September 28th, 2007 at 4:02 pm
Your tips were very good and not too extreme like some of the things you get saying stuff like, only use Opera and make everything Web Standards and never use hacks and murder Bill Gates. By the way, I’m only 14 and I’m teaching myself web design at the moment. I never realised how all the features of Firebug and WedDevToolbar could be used, so thanks for that.
September 28th, 2007 at 5:47 pm
Great article, for the most part true! I do have to rant on your bashing of table users… Your quote: We all used to do it. Making layouts in TABLEs nowadays is extremely frowned upon.
Extremely frowned upon by who? You? Your Posse? Tables are a great thing and are usually 10 times more compatible with various types and versions of browsers. I have probably 100+ sites which use tables, that outrank their CSS competition
Ease off on the tables Mr. CSS…. they’re not all that evil.
Google has absolutely nothing bad to say about Tables, nor does Yahoo or MSN. With that said, what are you worrying about?
Frank
September 29th, 2007 at 12:18 am
@Frank
Ok, I’ve heard people argue for tables left and right all day. It’s as simple as this:
Tables are for tabular data.
Is a layout tabular data? No.
Tables are for those who don’t want to learn how to make block level layouts. Sure, your clients won’t be able to tell their foot from their face when it comes to layouts, but using tables is like putting a chrome exhaust and rims on your 1992 civic. Girls won’t know the difference, but guys will laugh at you.
Regardless, take my advice as you wish — but in this niche industry of designers, tables are frowned upon.
October 31st, 2007 at 3:02 pm
The day Google will use CSS instead of tables on its main page, that day I’ll use CSS too.
November 16th, 2007 at 2:33 pm
Great resource! I’ll have to start recommending this to a couple friends who are new to the web…
November 28th, 2007 at 6:57 pm
There are many arguments for and against standards. However, if we all (developers, users, browser developers, etc.) would take the time to follow a common set of standards, then the days of browser incompatibility and css hacks could be over. All it takes is for each person that develops for the web to start coding with standards and our jobs could be much easier.
Of course, there are times when you need to stray, but the basic premise is to follow standards as much as possible.
Thanks for your ideas!
January 17th, 2008 at 10:07 am
Thanks
January 26th, 2008 at 4:13 am
I’ve read somewhere that search engines are beginning to ignore the ALT tags, for the same reason they ignore meta keywords.
But anyway, very useful stuff, thanks
—
Tech4um.com - Technology Forum for Anything and Everything Tech Related - MP3 Players, Video Games, Computers, Phones etc
March 13th, 2008 at 7:12 am
Thank you very much…
May 18th, 2008 at 11:12 am
Sorry to be pedantic. But in response to Stace’s comment.
The apostrophe also has its place. And it’s not anywhere in the sentence “AJAX has it’s time and place”.
An apostrophe is not required. You’ve got it right.