The Code To Content Ratio


Leonardo da Vinci's 'Vitruvian Man', showing the golden ratio in body dimensions

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.


 

Read More »
Posted in Uncategorized | Leave a comment

The Web Is A Writer’s Medium

Illustration Of  A Quill

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.

WordPress Webinar Logo

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.


 

Read More »
Posted in Nature Of The Web, Uncategorized, Web Design Standards | Tagged | 2 Comments

Useful Tips For Effective Web Design

Illustration Of Chloe Henderson

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 Music

    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. Read More »
Posted in Fonts, web design | Tagged | 4 Comments

Are You And Your Web Browser Ready For HTML5?

HTML5

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.

  2. WordPress Webinar Logo

    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. 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.


 

Read More »
Posted in HTML5, Uncategorized, Web 3.0, Web Hosting, Webinars, WordPress | Tagged , | Leave a comment

WordPress Free Themes For Designers (Part 2 of 2)

Hallie Schiff Portrait

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.


 

Read More »
Posted in Uncategorized, WordPress, WordPress Themes | Leave a comment

A Blog About The Web
And Web Design

I live on the technical side of web design so I tend to see things in black and white. As a promoter and practitioner of web design standards I love reaping the bounty of doing design the right way. I love the goodness of good web pages.

Each post attempts to deliver a topic of interest to web designers, developers, producers, creators and everyone else who's curious like me about how web sites are - or should be - made.

Things I write - and will write about in the Joy of Code Blog:

  • developing and building a small to mid-sized web site
  • search engine optimization
  • web standards
  • HTML5 and CSS3
  • web authoring tools like Dreamweaver
  • content and blogging systems like WordPress (which I use for this site)
  • online development tools
  • navigation interfaces
  • the user experience
  • information design

But sometimes I'll surprise you and go off-topic as I just don't always sing that same old web design song.

Want to learn web design? See my online HTML, CSS and WordPress classes.

Each post is short and leads to information, resources, services, tutorials and other good stuff all designed to help you make web sites.

Why do I do this? I'm one of those people who has to share what I've learned with my students - past, present and future - and everyone else.

Who am I? I'm the Friendly Web Design Instructor, Bud Kraus, creator of online web design classes.

This is a lot like my old Joy Gems Newsletter but it's now a blog and you can add your two cents here -- and I hope you will!!