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