How Designing with Web Standards Make your Website Cost Less, Work Better and Reach More People


There is a book entitled “Designing with Web Standards” written by Ethan Marcotte and Jeffrey Zeldman, the co-founder of The Web Standards Project, that turned the most complex information easy for designers and developers to digest. According to this book, The Web Standards Project is a coalition that initiated and brought standards to the browsers we’re using today.

But what are these web standards? How does these work? Is it worth the time to study these? That is why I am here to share the heart of the lesson I learned while reading Designing with Web Standards.

I hope you’ll love this book. So ride with me!

* * *

Web standards are mere guidelines you want to follow if you want your website to minimize expenses, work better and reach more users. Designing using these guidelines will be like writing your website using semantic elements and valid code. It is also implemented by separating your content from styles and scripts. These guidelines will remain guidelines unless you apply them to your website and see for yourself what good will it do.

Matching a piece of puzzle
Match your content with the proper html tag that fits.

How do we write semantic and valid markup?

Authoring your markup to be semantic is like matching a piece of puzzle to the rest. It won’t be complete if it does not fit. Make sure your content matches the purpose of the html tag you are using. If your content are instructions to install a program, might as well enclose them in an ordered list. Why? A piece of content wrapped with an ordered list will generate a numbered steps. And to correctly install a certain program, the instructions must be followed consecutively.

By correctly using html tags with content, you are already starting to make your markup valid. You can also test it out using validation services like the W3C Validation Service.

How designing with web standards make your website reach more users?

Semantic and valid markup makes your content easy for people and search engines to find. Thus, your website will score much higher in search engine listings. It will also be more accessible to different kinds of browsers and devices like mobile devices, screen readers and alternative input devices. People using these gadgets will navigate your content easier and faster especially when your markup also follows a logical outline.

Free some cash!

How designing with web standards make your website cost less?

Separate your structure (HTML/XHTML) from presentation (CSS) and behavior (JavaScript or any scripting language) if you want to free some cash in your pocket. When you organize your website, it will be less expensive and easier for you and for your developers to develop your website. It frees cash to be allocated on other important things like usability testing and content development.

Separating the three will make your website lighter. You don’t only save memory but you also save money by reducing its bandwidth costs. When you decrease the weight of your markup by 50%, you also decrease your bandwidth costs by that same amount.

How designing with web standards make your website work better?

Not only will you conserve resources on lighter websites, your website will also improve its performance. It will load faster because it will take lesser time for browsing engines to parse your web pages.

On the other hand, your website will also work better because part of designing with web standards makes your website forward-compatible. Forward-compatibility is securing your website to run across multiple browsers and devices and even on future browser versions.


Designing with web standards is not the only solution to make your website cost less, work better and reach more users. However, it is a great start to create he and beneficial changes to your website.


By Eirin Gonzales
“I do my best to code clean.”


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s