The Innovative Marketer's Blog

3 Things About Your Website That Web Guy Won't Tell You

Posted by Kevin Jorgensen

After a lead generation assessment, one of the first things a new client will often have us to do is a website re-design. Sometimes the redesign is minor; sometimes it’s a complete overhaul. When a client has an old website 1.0, online brochure kind of website, they often have had “the web guy” acting as translator between them and the site (which is one of the reasons the site sat there as an online brochure… but I digress). Website redesign for inbound marketing

That kind of relationship with your website is a little like talking to someone on a string telephone. You know someone's on the other end but you're not building a relationship. This blog can get you comfortable with modern website basics so you can feel in control of what’s going on with your website and see it less as a mystery and more as the lead generating machine it can be.

HTML: Website Structure

Website html source code resized 600

Right click on this blog page, mouse down to view source (if you’re using IE) or view page source (if you’re using Firefox). You’ll see something like the image above. It’s confusing Greek (unless you happen to speak Greek!). A mess of < and > signs and strange, meaningless words with a few you may understand mixed in. Just as in an English sentence, the way the HTML is written is important. The jargon for how HTML or CSS or Javascript (or any other computer language) is written is called syntax. If you look carefully through the syntax in the image, you’ll be find the text of this blog post part of the way down, but it’ll be surrounded by all that other yuck. That yuck is HyperText Markup Language or HTML.

HTML is what takes plain text – just the content – and gives structure to it so that a paragraph has whitespace before and after it or a list is a bullet list or data goes in a table.

HTML defines things like this section is tabular data or this text is a bullet list or this word links to a webpage. With properly formatted HTML, all of the content comes together into a nicely structured, finished web page. But while HTML gives your content structure, it does not specify the style of the content, the aesthetics on the web page. By using HTML to define “this is a link” or “this is my sidebar,” you’re not actually specifying how those things should look, you’re simply identifying that they are a sidebar or they are a table or they are a list. If it were not the case, then the sidebar on all websites would look the same – and that’s clearly not so.

Learn More About HTML: The good news is that on any modern content management system (CMS), you won’t need to actually write the HTML to build your website – it’s generated automatically – so you don’t need web guy to post a blog article or write a new content page. However, there are instances where knowing a little HTML can be useful – such as when you post a video clip from YouTube. So while you may want to avoid getting a degree in HTML (leave it to the professionals!), you can still learn the basics and become comfortable with HTML by playing around on W3Schools.

CSS: Website Appearance

HTML defines the structure, but what about the appearance? The appearance of your website’s content is defined using Cascading Style Sheets, or CSS for short. (while it is true that you can define styles in HTML, that practice is part of the old website 1.0 culture. The modern, correct way to create a maintainable website is to use CSS for defining style) Using CSS, you can easily change the appearance of your website and makes changes that are site-wide. For example, on the CMS for imrcorp.com, all blog article titles are automatically defined as 'H3' headers using a tag. The tag refers to a style defined in the CSS. If we decided we wanted to make our titles appear in a larger typeface, we could change the “font-size” property for all H3 tags in the CSS, and the change would automatically occur everywhere the H3 tag was used.

CSS for a lead generating website resized 600

While it may not be obvious, the separation of site structure (HTML) from site appearance (CSS) is important. By separating the definition of structure from the definition of appearance, you can easily make aesthetic changes to your website – even entire site redesigns – without having to go through every single page and changing the underlying HTML (that’s the old website 1.0 way it was done and why web guy had to sit between you and your website).

Learn More About CSS: If you want to make aesthetic changes to your website, you need to learn some basic CSS. It’s very straightforward and much simpler than programming. W3Schools, as mentioned above, can help you get started learning basic CSS.

CSS is usually defined in a separate file from the HTML of a given web page, so you’ll need to get access to your site’s CSS – usually called a “stylesheet” – if you want to make changes. Always remember to keep a backup copy of your site’s original CSS in case you accidentally goof something up and ruin your website! With great power, comes great responsibility.

Javascript: Website Behavior

With HTML and CSS, you can build out the structure of your page and define how that structure should look aesthetically. But what about action? Increasingly visitors want to interact with your content. We can all think of annoying interactions like pop up messages but there are plenty of site interactions that are useful too, such as:

  • Roll-over cascading menus
  • Search boxes
  • Pop-up help

The behavior of a website is often defined using another programming language called Javascript. Sometimes websites have Javascript on them without you even realizing; most web analytics use Javascript to track how long visitors stay on your site, where they’re coming from, etc. In this blog, I described how to use Javascript to add custom search to your Hubspot CMS website. In that instance, all you had to do was copy the Javascript I wrote and make a few minor modifications to get the code working for your site.

Javascript is a real programming language, it’s much more complicated and powerful than HTML or CSS. As such, you may want to leave Javascript programming to a professional, however, if you want to learn, the web is full of teach-yourself resources.

Learn More About Javascript: Codecademy is a great site for Javascript newbies.

So now you understand the three basic building blocks for your website and also every other website:

  • HTML – for the site structure
  • CSS – for the site appearance or style
  • Javascript – for the site behavior

When you’re talking about a website redesign, you can get a sense of the scope of the project by knowing how much of each of these three elements will be included in the work.

Call to Action!

Topics: Inbound Marketing, Content Marketing, B2B Sales and Marketing, Design