Evangelists, like me, of web page design standards know that the adage "Less Is More" rocks when it comes to Hyper Text Markup Language, Cascading Style Sheets, and other markup and programming languages. Best practices of web page design will always lead to using the fewest tags and the least tortured CSS style rules. On the web a small coding footprint is what you should be after.

Ever hear anyone refer to "Tag Soup?" It means web pages that are bloated with needless source code. I’m talking about things like tables nested needlessly inside other tables or miles of proprietary junk code (thank you Front Page). It all adds up to pages that are impossible to edit and take forever to download.

If it’s impossible to edit that means you can’t rapidly change your site, and if you can’t do that, you’re in trouble.

Call it "Less Is More" or "Tag Soup," – I call it The Code To Content Ratio. I want my pages to have lots of meaningful content with as little HTML and CSS code as possible.

By content I’m referring, first and foremost, to text (A Writer’s Medium) and then to imagery, multimedia, and other assets. A favorable code to content proportion is beneficial for everyone – humans, browsers, and search engine robots.

Is there a scientific way of knowing you have the right blend – the correct ratio of code to content? Not that I know of. But if you do things the right way and validate (error check) your work, you’ll find that the ratio will improve over time. At the same time, so too will your web page designing skills.

Here’s an example of what I mean. I will illustrate the way links are usually set up on a web page, then show how they should be set up.

Using A Table To Format Navigation

Here I’m using a table that has 4 rows, each row having just one cell (column). I have a link in each of the four cells.

This is a very common way people use tables but it should be frowned upon. Tables are not meant for layout.

Code View

<table width="50%" cellspacing="10">
<tr valign="top">
<td><a href="#">Link 1</a></td>
</tr>
<tr>
<td><a href="#">Link 2</a></td>
</tr>
<tr>
<td><a href="#">Link 3</a></td>
</tr>
<tr>
<td><a href="#">Link 4</a></td>
</tr>
</table>

Browser View

Using A List To Format Navigation

Now that you’ve seen the wrong way to do it let’s look at the best way to set your links up for navigation. Below I use list markup. Each list item contains one link. After all, isn’t that what a navigation interface is – a list of links?

Code View

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

Browser View

• Link 1
• Link 2
• Link 3
• Link 4

Isn’t that so much more efficient than using tables? Don’t like the bullets? Want the list to be positioned horizontally? Use CSS

MEMO: To all graphic artists, illustrators, animators and other multi-media artists.

Here is my bad news. The web is a writer’s medium. If you disagree (and I almost hope you do) make sure to leave a comment below!!

Okay, you may have already, reluctantly, come to that conclusion. You may have realized what I have realized for a long time. Creating imagery for the web isn’t really the greatest thing that ever happened in your life.

The fact that the web is now largely populated with social networks, blogs, forums, and other collaborative environments where text content is king can hardly be breaking news, confirming that this really is a writer’s medium. For people like me, it’s a paradise with an unlimited supply of paper and ink. For a designer, it’s a most challenging canvas.

Pardon My interruption But There’s Something I Need To Tell You!!

Do you want to learn WordPress? At least get started learning the world’s most useful and popular Content Management System. It’s no wonder why WordPress is working behind the scenes of over 25 million web sites, creating pages and managing content.

On July 28 at 7PM I’m doing a “What WordPress Can Do For You” webinar. It’ll be fun, informative, convenient and pretty cheap. Details And Registration.

Check out the video which shows you a tiny sample of what I will be discussing and the interview I did for the upcoming webinar.

Take Twitter for example. (Please follow me so I can re-tweet your good tweets). All that micro content is text. The images are an after thought, a tack on. Facebook is much the same.

I don’t mean to pay short shrift (ever hear of long shrift?) to those elements that do, at minimum, the heavy lifting of holding a user’s attention – layout, typography, art direction, color story, imagery and embedded rich media. I’m just here to report the facts as I know them.

How am I so sure in my pronouncement? Get under the hood of any web page by looking at its source code. Do you see images or flash movies? ? Of course not. All that’s there are tags, text, and maybe some scripting language (which is still only text). Even style itself is something brought in from an external file.

"But," you might say, "web pages are a highly visual medium loaded with static images, animation and rich media content." Maybe, but look beneath the surface, look at what’s going on behind the scenes – see beyond what the user sees – and there you’ll find your answer in the source code. It is a text based medium.

All the imagery, styling information, and embedded multi-media content are nothing but references or links to files and not the thing itself.

Just what you see as the essence of a web page – the text and tags – are the things that search engines, assistive technologies – and dare I say, human beings – are really after.

Agree or disagree?

No matter what some people might think, there is more to putting together a website than finding a good website, vps hosting or uploading files. If you want your site to stand out from the thousands of others and leave a mark in the mind of any visitor – for positive reasons – the information below should be considered.

1. No Music Players

   

   No matter how tempting it might be, anybody that wants to have effective web design should resist placing a music player on the site. Some people browse the Internet as they ride the public transportation system or attend class. If loud music should start playing and they were not aware that it would happen, they may end up upset and embarrassed. They will leave the site and it is unlikely they will return. Because you want to have a site that people will come back to again and again no matter where they are, this should be kept in mind.

2. Complimenting Colors

   A website that captures people generally demonstrates a complimentary and eye catching color scheme. The colors used together should make sense and not give anybody difficulty as they try to read. For example, yellow text on a red background is unreadable, as is the combination of black and blue. On the other side of the scale, black and white is considered boring and will not impress the people that matter most. Finding a happy medium is something that should be attempted. In the end it will spell success.



Pardon My interruption But There’s Something I Need To Tell You!!

Do you want to learn WordPress? At least get started learning the world’s most useful and popular Content Management System. It’s no wonder why WordPress is working behind the scenes of over 25 million web sites, creating pages and managing content.

On July 28 at 7PM I’m doing a “What WordPress Can Do For You” webinar. It’ll be fun, informative, convenient and pretty cheap. Details And Registration.

Check out the video which shows you a tiny sample of what I will be discussing and the interview I did for the upcoming webinar.

3. Easy To Navigate Layout

   

   People visit websites in order to find the information they want quickly; they should not have to read a manual to know where they have to go. Even if the information on the site is completely factual and entertaining, guests will not know this for themselves because the layout could send them in circles. Some web designers feel they should be artistic when they put together layouts; while creativity is fine, it should not be to the point that a person that looks at it has no idea of what to do.

4. Frequent Updates

   Even if the tips above are followed, it does little good if the website is rarely updated. This is especially crucial if you are running a business site and want to continue getting inquiries and orders. It is important to make sure that you’ve got a reliable site hosting to ensure that all your updates are taken in place without any problems This can mean once a week or a few times a month, depending on the time that you can secure to do it. If people cannot tell when the site was last updated, or it has not been updated in a few years, they will think the site is dead and will move on to something else.

Chloe Henderson is a 23 year old media practitioner who engages herself in the world of social networking, gadgets and reading. She is also doing some freelance writing on several web hosting companies and is currently with webhostgear.com and loves to write anything that would interest her, sharing it to the world wide web.

In the weeks, months, and probably years to come, I will be writing about HTML5, the revised Hyper Text Markup Language being developed by the World Wide Web Consortium (W3C).

Before I get to showing you how to know what parts of HTML5 are presently supported by your (or any other) browser, I’d like to point out a few things.

If you know XHTML – or the earlier HTML 4.01 – you are hardly out of luck. The two cornerstones of web design standards –

• error checking your markup and
• writing well formed documents

– still, and will always, apply and will be as important as ever.

HTML5 will be much bigger in scope than anything you have seen before. Essentially, there are two huge parts of HTML5:

1. An expansion of the elements. There will be new tags such as…
   • header
   • hgroup
   • section
   • article
   • aside
   • nav
   • sidebar
   • footer

   This will surely beat the present craziness of using zillions of div tags that do not describe the content being marked up.

   Here’s a complete list of the new HTML5 Elements.

   There are a lot more form controls coming too. Soon there will be new kinds of drop down menus, sliders,date and time pickers and all sorts of new ways to interact with pages and input data.

   In addition, many tags are going to be retired (deprecated as they say). Here are a few that you won’t be using in the future:

   • applet
   • frame and frameset
   • strike
   • u

   To give you a decent idea of what the new elements are, and which elements are no longer to be used, see the HTML 5 Tag Reference list. Clicking on a tag name takes you to a page to learn more about the tag element.



Pardon My Interruption But There’s Something I Need To Tell You!!

Do you want to learn WordPress? At least get started learning the world’s most useful and popular Content Management System. It’s no wonder why WordPress is working behind the scenes of over 25 million web sites, creating pages and managing content.

On July 28 at 7PM I’m doing a “What WordPress Can Do For You” webinar. It’ll be fun, informative, convenient and pretty cheap. Details And Registration.

Check out the video which shows you a tiny sample of what I will be discussing and the interview I did for the upcoming webinar.

2. Inclusion of Application Programming Interfaces

   The second part of HTML5 will be a programmer’s dream come true HTML5 will have a big set of APIs (Application Programming Interfaces). What does this mean? It means that browsers of the near future are going to work like programming platforms. That’s a totally new idea to what people have understood HTML to be. For example, HTML5 will have native (built-in) APIs for video and audio. This will make it unnecessary to have plugins like a Flash player render multimedia content.

   But there is so much more to the upcoming HTML5 APIs. Here is a very partial list of what is probably coming:

   • Video and Audio API
     - allows developers to create native HTML multimedia players
   • Inline Editing API
     - edits web pages through the browser
   • Drag and Drop API
   • Canvas API
     – allows you to draw 2D Graphics

   If you are dying, like me, to learn more about this API business, see HTML 5 Landscape Overview.

Because the APIs deal with programming (which is not my realm of expertise), my focus will be on Item 1 above – the new and improved tags. It’s not just that there will be more tags, but familiar tags will be used in unfamiliar ways. (I’ll have more to say on all of this in future posts).

HTML5 is NOT your Mother’s HTML!! All of the coming changes will usher in Web 3.0 and provide experiences which will change what we do not know.

How Well Does Firefox Deal With HTML5?

To check how well a browser supports HTML5, I used the HTML5 Test site because it’s easy to use.

Each browser is given a score. The closer the score is to 450, the closer the browser is to HTML5 compliance. {Keep in mind that HTML5 is under development and what eventually will become a W3C Recommendation – a standard as many people call it – will change between now and then.)

What you’ll notice is that browser manufacturers (and web designers) are not waiting for the W3C to give its final blessing on HTML5 before they use it. They are getting ready now for the day "5" is official.

Before my recent upgrade to Firefox v5, the earlier Firefox scored poorly on how well it supported HTML5. But with the Firefox 5 newly installed, I was amazed to see the difference. The newer browser scored 272 points out of a possible 450.

Other Browsers

Here are the scores of the most current versions of popular browsers.

Mac Browsers

Window Browsers

NOTE

1. That’s no mistake. IE 8 scores much below the industry. Nothing weird about that as IE is always 2 years behind everyone else.
2. Look at how much better the newer version of Firefox supports HTML5. Upgrade your browser right now and you’ll be ready for the present and future!!

Browser Support Chart On Steroids

If the HTML5 Test site is NEI (Not Enough Information) check out Browser Scope. A countless number of user agents (browsers) are examined to see how well they do with HTML5 in ten different categories.

WARNING: If you are going to start using HTML5, be very careful how you use it. Make sure to check how well legacy browsers support HTML5. You’ll find a huge drop off from the current browsers (none of which fully support HTML5 as of now).

Last time around in Part One I pointed you to a good number of WordPress themes that require payment of a small fee to use them. This time it’s all about the free themes that designers should be looking at for your portfolio and gallery sites built using WordPress.

Perhaps the biggest thing I’ve learned throughout all this is that there are a TON of tools and options out there, but one of the biggest things I’ve learned is that if you don’t have a basic understanding of HTML and CSS, all the tools in the world won’t help you create a site with the “look” you’re hoping to achieve. Online tutorials or even taking a class (like Bud’s! He’s a great teacher) will absolutely help you with this. It’s for this reason that I’m still working on my final web site (which will be, of course, through wordpress), but in the meantime, I put up a web site through carbonmade.com, which hosts portfolio web sites for artiest/designers/creative folk. It’s a great tool to use in between those stages of tinkering with wordpress and finishing up your project.

If you are thinking a of learning WordPress – or maybe you’ve started and need a few pointers – join my WordPress Webinar that’s geared for beginners on July 28 at 7PM.

• Suburbia
  A very clean and well-designed free theme geared towards a portfolio layout.
• AuitoFocus
  Simple and unique. Very nice for photographers and bloggers. (Bud ‘s note: I totally endorse this one as it is a Child Theme to Thematic which is how this web site was made.). Download AutoFocus.
• Bizz folio
  Definitely geared towards a business/portfolio aesthetic (obviously). Very nice features for a free theme. Download Bizz folio.
• IMBALANCE
  Again, it’s clean and simple, but it’s also a bit cool-looking. Download IMBALANCE
• Fullscreen
  Uses a unique photo portfolio effect on the homepage. Great if you have a lot of images.
• IMBALANCE
  Again, it’s clean and simple, but it’s also a bit cool-looking. Download IMBALANCE

Also, some of these templates (free or paid) support Google Fonts. It’s in the beta stage, but it’s a nice tool for designers to be able to choose different fonts than we’ve typically been limited to in the past.

Hallie Schiff, is a Graphic Designer for Hallie Schiff Design and a contributing author to The Joy Of Code Blog.

Hallie Schiff Design
hallie.schiff@gmail.com

Until downloadable webfonts become a mainstream practice (who can say when that will be!), it is important for web designers to know which fonts are likely to be installed on most users’ systems. Knowing this is also part of best practices in web site development.

A great resource which keeps track in real time of what fonts are installed on various operating systems is Code Style. Knowing which fonts are out there should help you get beyond the same old boring fonts we’ve all been using for years. Me included.

If you are thinking a of learning WordPress – or maybe you’ve started and need a few pointers – join my WordPress Webinar that’s geared for beginners on July 28 at 7PM.

The Code Style site is loaded with interesting and useful information about fonts. I cherry picked a few articles from their survey results.

• Most commonly installed fonts on Macs.
  As you might expect, Helvetica is installed on 100% of all Macs.
• Most commonly installed fonts on Windows.
  Not even Arial is on 100% of all Windows boxes.
• Most commonly installed serif fonts on all platforms.
• Most commonly installed sans-serif fonts on all platforms.

I’m a freelance print designer looking to create a website and portfolio. I’ve done a lot of research on what options are the easiest and best solutions for us newbies looking to put up a website. In all of my searching for a fabulously designed, fully-customizable, easy to code option, the one tool that came up the most was WordPress. It’s awesome. Plain and simple.

The set-up is easy, and the back-end is equally foolproof. You can download a theme, install it, and be up and running in no time. There are some themes you can download that are offered on wordpress.org. In my experience, they are usually somewhat boring, limited, and downright ugly. (Sorry, but I’m a major design snob.) However, there are countless other third-party sites that design and sell (or offer for free!) well designed themes. I’ve found some amazing themes in the past which I had to tell you about.

I’ll start with the Premium Themes. In my next post I’ll give you my recommendations for the Free Themes.

Premium Themes

These themes require the payment of a small license fee. Premium Themes are normally more robust, interesting, flexible, and better supported than the Free Themes (which I’ll talk about in my next post).

• Folioway
  A good, simple, and clean theme with a Google map on the contact page, unlimited colors and sidebars, plus a great portfolio.
• PrePress WordPress Theme
  Very clean and graphic design oriented. Minimal, but well-done.
• Smart Portfolio
  This is a simplistic webpage design. It’s good for freelancers and individual designers/contractors.
• DDStudios
  Very design-forward and good for social networking integration.
• ANAN – For Photography Creative Portfolio
  One of the best-designed WordPress themes I’ve seen offered. Beautiful typography and photo integration, as well as Twitter and Flickr site integration.
• CONTRAST
  This is one of my favorite themes! It allows you to place a video as your page background! It has very funky navigation and great customization settings. Plus, the contact page is a full size Google map! (Click on the live preview and you’ll see what I mean.)
• SideWinder
  Unique, photo-centric and portfolio driven (it’s your homepage). Plus, it’s incredibly customizable. It allows you to use practically any font you want (webfonts or otherwise), which is an amazing plus for print designers accustomed to choosing their design’s typography.
• Minimalista
  A great theme for photographers….unlimited color choices. It allows you to place a full photo page background with cool transitions.

Next time around, I’ll talk about Free Themes that I think you should consider for your WordPress projects.

Hallie Schiff, is a Graphic Designer for Hallie Schiff Design and a contributing author to The Joy Of Code Blog.

Hallie Schiff Design
hallie.schiff@gmail.com

For reasons not even known to me I got interested in Web 3.0. Mind you, I haven’t even heard of 3.0 but I figured since I now sort of understand what Web 2.0 is, a 3 must becoming.

My hunch was right but before I did much checking I thought I would try and figure out what Web 3.0 is likely to be.

1. Logical Find

In the web to come I want answers to my questions. I see computers assembling, perhaps in a crude way, real answers to real questions from various sources and not just serving up links that might contain answers to my questions.

If I ask, “How many planets are there in the universe” or “How many times have the New York Yankees won over 90 games in a season” or “I have a $5,000 and I want to go To Prague. What’s the best way to spend my money?” I want answers to questions which require, dare I say, “thought.” I’m tired of a regurgitated list of pages that might answer a query.

I suppose I’m drawing on the promise of Ask Jeeves. This time it’s time for Jeeves to give us meaningful answers. What we need now is not Jeeves but Watson. And if you saw Jeopardy a few months back you know this technology is coming to a computer near you. And probably sooner than you think.

2. Video Forms

In Web 2.0 video came of age, But I am still surprised that we haven’t had live Springsteen, McCartney or Lady Gaga concerts where we pay a fee to watch a live online global performance. Can you imagine? Live concerts shared on a global scale. Why haven’t we seen this yet?

For Web 3.0 video large companies will have online TV stations. While watching a video you will be able to order a product or service with an embedded form right into the video. I have no idea how this will work yet or if Adobe and others are working on such video players which would allow for direct user input of data. But it should be pretty cool if they were and it would give the web developers an option from using html contact form inputs such as text boxes, radio buttons and check boxes.

3. Privacy? What’s That?

The trade-off between free services and the surrendering of personal information will get even more pervasive in 3.0. It the browser becomes a Personal Assistant and Learns more about our likes and dislikes and is able to answer questions like “I’m in the mood for Tex Mex where should I go?” that stored information on your computer will be able to be taooed, knowingly or otherwise by any party who wants to know our preferences. Sure, a lot of that is already here but in 3.0 you can bet that advertisers, browser makers, Google and the like are going to know even more about us. Some people won’t like that and the rest won’t even know or care.

Where Did I Get My Insights For This Post?

No, i hardly spent anytime doing any research so I suppose a lot of this is either good guess work or way off the mark. But I did run into this very interesting video that tides a lot of things together.

Web 3.0 from Kate Ray on Vimeo.

How Will We Get From 2.0 to 3.0?

A broad range of new browsers is around the corner. Browsers that will be smart, fast, small and ubiquitous if you can stand being on the grid anymore than you already are.

No doubt HTML5 and CSS3 will play major roles in the online world of the future. And both of those are things I will be blogging a lot about as they move closer to approval by the World Wide Web Consortium (W3C).

Today I start an intermittent series on great WordPress plugins. Some of these plugins will be mainstream and used by millions. Others will be more obscure but fun, useful or indispensable none-the-less.

A plugin works a lot like an app for an iPod or similar device. It allows you to extend a system’s core (default) functionality. Most WordPress plugins are free. All have decent documentation on how to install and use them. Some have good troubleshooting advice and still others have support from the plugin author.

If you have WP running on a server just go to the Plugins section in your Admin menu to seamlessly download and install any plugin. Otherwise you can get any plugin at the Plugin Directory section of the WordPress Mother Ship.

Here are some of the plugins that I love and I think you will too. Some of these are absolute musts. I don’t know why they are not part of the WP core.

Akismet

This plugin comes with WordPress out of the box, but you need an API key to turn it on. The key costs $5 a month and is worth it.

Once your site is up and running, you will get a fair amount of spammy comments. Spammy comments are comments from people who just want links from your site to theirs because inbound links are so valuable. Akismet will trap those worthless comments so you won’t have to read and trash them yourself. Don’t be scared about the API Key. It’s just a one time copy and paste operation.

Ozh’ Admin Drop Down Menu

Fortunately, this was my first plugin.

If you don’t like the left side vertical admin navigation bar, then use this plugin. It will give you a horizontal nav bar. You can customize its appearance via Settings > Admin Menu.

Backup Plugins

There are a lot of them but whichever you choose, make sure that your database plus your theme, plugins, and media library get backed up. These two plugins below do just that. I have yet to see one plugin that does it all, but it probably exists.

WordPress Database Backup

This plugin will back up your MySQL database file which is the most important file in your WP site. It’s where all the content you create (and the comments left by others) is stored. You configure the plugin from Tools > Backup. Best thing is to have a copy of your database sent every day to an email address that you set up just for the purpose of storing your DB backups.

WordPress Backup (by BTE)

This plugin will backup your theme, plugins, and media uploads. To configure the settings go to Settings > WordPress Backup. The backups are stored in zip files on your server.

Subscribe2

Every time you publish a post (or even a page), this plugin will send an email to your subscriber list. Use your own list and have new subscribers enter their email address directly from your posts (or pages).

Almost anything you can think of can be set in the subscriber settings that are in several places in the Admin menu bar. From the messages sent via email to managing your subscriber list, a lot can be done with this indispensable plugin.

Exclude Pages From Navigation

If you don’t want a page to show up as a link in your nav bar, this is the plugin to use. All you need to do is to set the Exclude Page option accordingly for any given page. You’ll want to use this plugin when creating orphan pages (pages not connected to the site hierarchy).

This is only the start of the WordPress plugins that I’ll be recommending for you in future Joy Of Code Blog posts. If you have a plugin that you love – or one we should avoid – tell us in the comment box below.

I’m told that I speak and write in plain English. I think I’m pretty good at making complicated things easier to understand. So much of what we run across these days is needlessly complicated.

Recently I came across a series of plain English videos on YouTube. I was stunned at how direct, simple, and quick they were in explaining topics that are a little difficult to grasp for a lot of people – including me.

Here are a few of them that I think you will love!! Note the illustrated animations which strike the right chord with the message of each video.

I have to thank Lee LeFever of commoncraft.com for producing these videos that have been viewed by millions.

Twitter in Plain English

So, what are you doing?

It took me a while to get the hang of Twitter. I thought it was just a load of junk talk. To be sure, there’s plenty of that on Twitter, but there are also plenty of ways to turn Twitter into a useful business tool. Not long ago I was ranting about something concerning lynda.com and within minutes someone from that company was responding to my rant.

Oh yeah, follow me and you won’t get junk talk, I promise.

Blogs In Plain English

Do you know – or did you forget – where the word “blog” comes from? It’s short for "weblog."

I used to think blogging was just a way to keep a diary that no one would ever read even though it was on the web. Now I know better and understand its widespread use. It is proof that publishing power has shifted to the authors!!

Wikis in Plain English

A wiki is a web site that lets people collaboratively create and edit online docs. Usually a wiki has a topic that attracts a specific audience. The Wikis you no doubt are familiar with are Wikipedia, and the one that turned the world on its side , WikiLeaks.

You can start your own wiki at:

• Wetpaint Wiki
• Wiki Spaces
• PB Works

There are other great videos like these on YouTube. Do you have a good one you can share with everyone here?