The Omni Advantage

The Omni Advantage is simple – we provide the services our clients want, nothing more and nothing less. Not every market is the same, not every medical practice, bariatric surgeon, plastic surgeon, otolaryngologist, etc. is the same. Why should online marketing companies only offer you one package without understanding your needs and desires?

Newsletter Signup

Get the latest Medical Marketing News & Tips from Omni Medical Marketing

Enter your e-mail address above and hit enter to be added to our newsletter. We never give out your e-mail address or any other information.
Call us to learn more today(720) 549-9222

Medical Website Development Best Practices: Don’t Blend Your Code

Today’s Medical Website Development best practice may seem complicated, but the important thing to remember is that it could save you money and time down the road.  As website development continues to evolve, the development of websites has made maintenance and updates much simpler.  If a website is properly developed from day one, even a complete overhaul of the Medical Website Design and appearance of a site can be drastically changed, while still maintaining the original framework and content.   By changing the style sheet, your website can have a completely different layout and feel, without actually changing any of the internal pages and structure.  A website that does a great job illustrating this fact is www.csszengarden.com.  By simply clicking on other designs, you can see dramatic changes to the site without actually changing any of the actual content.

While the details can be slightly complex, the premise is simple.  Making stylistic changes to your site can be done in one place and yet affect every page of the site.  This hasn’t always been true.  Using the most advanced website development methodologies can make changes to your site much simpler and less time-consuming, and this translates to lower costs.

As is always the case, limiting the amount of code necessary and following best practices also translates to better Medical Website SEO.  Google, Bing, and Yahoo don’t want to sort through line after line of HTML code any more than the average person.  Having all of your content, design, and behavior code neatly organized and separate will also limit the amount of code that the search engines have to dig through to get to your content.

Modern medical websites are made of three basic components:

  • Content
  • Design
  • Behavior

Modern medical websites are created using three basic kinds of code:

  • HTML
  • CSS
  • Javascript

Each kind of code should be used in a limited fashion, and as strictly as possible:

  • Content is controlled (“marked up”) with HTML.
  • Design is controlled with CSS.
  • Behavior is controlled with Javascript.

Best Practices demand that we keep these three types of code separate. Mixing your code together makes future updates much more difficult. When I say “difficult”, I mean time-consuming and expensive. You’ll see what I mean in a just a moment…but first, take a look at these two paragraphs:

<p style=”color: green”>This is a paragraph with green text.</p>
<p class=”cta”>This is also a paragraph with green text.</p>

The first paragraph (<p>) is a mixture of HTML and CSS – a blend of content and style. The instructions for making the text green is right there in the HTML. It’s a simple and easy way to get things done, so a lot of designers do this.

The second paragraph (<p>) doesn’t contain instructions for making the text green. Instead, the paragraph has been given the class “cta” (stands for Call To Action). The instructions for making the Call To Action green are in a separate file: the stylesheet. This requires putting code into separate files, so a lot of designers don’t do this.

There’s a very significant difference between these two paragraphs. While they both contain green text, only paragraph 2 is future-proof. Consider: three years from now, you may want to change the color of your Calls To Action from green to blue. How is that done? Take a look:

<p style=”color: blue”>This is a paragraph with blue text.</p>
<p class=”cta”>This is also a paragraph with blue text.</p>

At first glance, there doesn’t seem to be any difference…right? Let’s think this through together. The first paragraph required a change – in the HTML – from style=”color: green” to style=”color: blue”. The second paragraph’s HTML stayed the same, but required a change in the stylesheet (CSS) to do the same thing. So why is one technique so much better than the other? Simple: your website has more than one page. Your Calls To Action appear all over the place, right? Changing them all from green to blue can be either incredibly simple or incredibly time-consuming. Instead of dealing with two paragraphs, we’re really dealing with dozens, or hundreds, or even thousands:

<p style=”color: green”>This is a paragraph with green text.</p>
<p style=”color: green”>This is a paragraph with green text.</p>
<p style=”color: green”>This is a paragraph with green text.</p>
<p style=”color: green”>This is a paragraph with green text.</p>
<p style=”color: green”>This is a paragraph with green text.</p>
<p style=”color: green”>This is a paragraph with green text.</p>

Changing these six paragraphs from green to blue requires six separate changes. If you have dozens or hundreds of changes to make, you must change green to blue individually, dozens or hundreds of times. Now see the Best Practice:

<p class=”cta”>This is a paragraph with blue text.</p>
<p class=”cta”>This is a paragraph with blue text.</p>
<p class=”cta”>This is a paragraph with blue text.</p>
<p class=”cta”>This is a paragraph with blue text.</p>
<p class=”cta”>This is a paragraph with blue text.</p>
<p class=”cta”>This is a paragraph with blue text.</p>

Changing these six paragraphs from green to blue requires only one change, in the stylesheet. They’re all Calls To Action, and they’re controlled by a single line of CSS. Changing the color can be done in moments…along with the font, size, style, etc. That’s what I mean by “future-proof”: you can change dozens, thousands, or even millions of paragraphs on your website all at once. Making even a simple change like this reduces what would normally take hours or days into a one-step process.

A well-made website is as future-proof as possible, making changes quick and easy instead of frustrating and expensive. Future-proof your website by keeping your code separate. Don’t mix your HTML with your CSS.