25 of the best ’smart design’ tips in 3 minutes
Inspiration / Web Design & Development
There are tons of articles written about the benefits of writing lean, semantic code, and designing with web standards in mind. The SEO Rapper has managed to compile all of these best practices into a concise, entertaining video that takes less time to watch than it takes to get through a single article. Who knows? Some brave soul might even attempt this at the next TechKaraoke Night. Enjoy!
The Lessons/Lyrics
-
Your site design is 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 associations
- Highlight your contact info — that’s an obligation
-
Create a clean design: you can use some decoration
but try to prevent any client hesitation - Every page that they click should provide an 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 investigation, look at other organizations
but don’t duplicate or you might face a litigation -
You done? Congratulations! Start construction
Moving to production, please follow these instructions:
[Do] your photoshop functions [then] 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
-
Tag your look and feel on a separate style sheet
better results with XML and CSS
Now you making progress, a little 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
if you use bold that’s old and wrong -
When you use CSS, you page will load quicker
Your client’s 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 and 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
If you enjoyed this, consider getting FREE updates every time I post new content.
Recommended Reading
5 Fantastic Responses So Far
Have something to say?
Just fill out the form below. Comments should be respectful of other voices in this discussion, and I reserve the right to edit or delete comments at my discretion. There might be a short delay while your comments are held for moderation. If you'd like, you can keep up on the discussion through the RSS Comments feed.
← 5 minute funny: a designer’s worst nightmare 16 Life Lessons I Acquired in Art School →
July 30th, 2008 at 3:05 pm
This is really well done! Super clever and it really covers the best practices. Love it. Especially the awkward dance moves toward the end :)
Thanks for posting the transcription along with it, and thanks for the TechKaraoke link ;)
Gema’s last post… Working On My Blog
July 30th, 2008 at 3:10 pm
Sure thing, Gema! And it was an absolute pleasure meeting you last night. I’ll be keeping an eye on SuggestionBox.com knowing it’s under your superb creative vision - it looks very promising!
July 30th, 2008 at 9:04 pm
That’s pretty good. Nice job transcribing it too.
Do you know why <b> and <i> are wrong/deprecated? It makes sense to me that “strong” and “emphasis” are more descriptive, so semantically correct. What if I want to italicise, not emphasise? For example, in biology species names are always italicised; they’re not a more important part of the sentence, it’s just convention.
kristarella’s last post… MYC 2008: So You Think You Can Worship?
July 30th, 2008 at 11:55 pm
A very smart question from an equally astute lady. :) Your question intrigued me so I did a little research on the matter. <b> and <i> are conventions from print typography while <em> and <strong> are used by text-to-speech readers for the visually impaired to sound out the text. And [this is my conjecture] since web standards are all about making the web accessible to as wide an audience as possible, this could be a good reason why <em> and <strong> are favored over <b> and <i>.
That was a great question that led me to learn something new. So thank <em>you</em> for that.
August 3rd, 2008 at 4:35 am
Thanks for looking into it! It makes sense that using em and strong would be good for accessibility, but I’m left wondering if I should use <i> for things that I only want to be visually separated (like words in other languages or species names), or maybe screen readers just convert them to emphases anyway…
I guess I’ll stick with the idea in the first post on the WebmasterWorld forum, I think it makes sense.