Talking to your web designer can be a daunting task for many marketers. Many times, you walk away completely clueless about what just happened or you've had to ask so many questions that everyone ends up getting frustrated.
Sometimes you simply try your best to follow along, but then you aren’t completely satisfied with the resulting product. It’s time to put an end to all the madness! Below you’ll learn the three basics building blocks of all websites so you can be well on your way to understanding the technical aspects of your website. Armed with this knowledge, you’ll be able to finally understand and communicate with your website designer so future website projects turn out just like you want them to.
1. HTML: Website Structure
Right click on the page you’re currently reading, and click “View Source Code” or “View (Page) Source.” You’ll probably see a jumbled mess of < and > signs and strange words that you don’t understand. If you scan carefully, you’ll be able to read the text of this blog post part of the way down, but it’ll be broken up with strange tags. Those tags are HTML.
HTML stands for “Hyper Text Markup Language,” which might sound daunting at first, but essentially it’s just a system for giving meaning to the content on your website. HTML is used to structure the content in a web page.
It defines things like “this section is the sidebar” or “this text is a list” or “this word is a link.” With HTML, all of that jumbled text comes together into a nicely structured, finished web page. But while HTML gives your content structure, it does not specify how that content should actually appear on the web page. That is a tricky thing for a lot of people to wrap their heads around. But by saying “this is a link” or “this is my sidebar,” you’re not actually specifying how those things should look. After all, websites are infinitely customizable – the links on your website might look totally different than the links on another website.
Learn More About HTML: On any modern content management system (CMS), you won’t need to actually write the HTML to build your website – it’s generated automatically. But you’ll usually have the ability to add bits of custom HTML. For example, when you embed a YouTube video in a blog post, you’re working with raw HTML code. So while you may want to avoid jumping into the HTML of your website (leave it to the professionals!), you can still learn by playing around on W3Schools . That site has a great tutorial that’ll walk you through the basics and give you the opportunity to edit code right on their site so you can practice writing real HTML.
2. CSS: Website Appearance
The appearance of your website’s content is set using CSS, or “Cascading Style Sheets.” Using CSS, you can easily change the appearance of your website and makes changes that are site-wide. For example, on the HubSpot CMS , all blog article titles are automatically wrapped in H2 header tags (that’s HTML). If we decided we wanted to make our titles appear in a larger font, we could change the “font-size” property for all H2 tags in our site’s CSS, and the change would be site-wide automatically.
Sometimes as marketers, we’ll slap together a quick HTML hack (using inline styles) to force a page to look a certain way, but this is frowned upon in the web design community and generally a bad practice for your website. It creates a mess of code that’s hard to update and maintain, which isn’t good for your website in the long term.
Learn More About CSS: If you want to make aesthetic changes to your website, you should try learning some basic CSS. It’s very easy to get started, and it’s 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.
3. Javascript: Website Behavior
With HTML and CSS, you can build out the structure of your page and define how that structure should look aesthetically. For a lot of websites, this is all you’ll need. But what if you want your site to actually do something, like pop up a message window when a visitor has been on your site for a certain amount of time or to confirm that a visitor actually wants to exit out of the page?
The behavior of a website is generally defined using Javascript. Your website probably has Javascript on it without you even realizing; most web analytics use Javascript to track how long visitors stay on your site, where they’re coming from, and all sorts of other things.
Javascript is a full-on programming language, so it’ll take some time to learn and is probably best left to professional web developers. However, there are tons of great resources if you want to dive in and learn some Javascript.
Learn More About Javascript: If you’re really eager to actually learn Javascript, codecademy is a great site for total beginners, which teaches you how to write code in Javascript.
In review, HTML is for structure and defines how your site is laid out; CSS is for appearance and defines how that layout will look to a visitor; and Javascript defines the behavior of your website. At advanced levels, these three languages can be very complex and should generally be left to professional web designers. However, a passing understanding will help you sort through the alphabet soup of buzzwords you’re likely to hear if you decide to work with a web designer.
Image credit: Dmitry Baranovskiy
Wilhouse 12:16 PM on January 23, 2012
Great post. Website owners and managers would do well to read what you have to say about this. To often do I hear about people that hire coders to change around simple design or content changes that if they just had a little know how could be easily changed with no cost to themselves. The codecademy is a great place for them to start or even a local community college and take 2-3 course in web page design.
Vin Gaeta 12:49 PM on January 23, 2012
Awesome post. Having a client read this could be extremely beneficial. By having a basic knowledge of how their website functions, they can then make changes down the road on their own. It also lets them grasp some more technical issues that may arise.
karleen 3:21 PM on January 23, 2012
Thank you. I am starting a dictionary of these terms for reference in the future. Unfortunately the owner of websites just cannot keep up with the anachronisms of the designer crowd. It is daunting
KB 11:04 PM on January 23, 2012
Great post. Many thanks. Whilst I did know most of what you've covered. You have so succintly and very clearly explained all the fundamentals,including where to go to learn more. It's demystified understanding of web design.
Thanks KB
Karl Dawson 4:48 AM on January 24, 2012
As a web designer myself, I'm here to learn your industry's buzzwords in a similar fashion and these cross-discipline posts are to be applauded, thanks.
If anyone would like to follow a structured learning program then I can recommend Treehouse online videos - each one is no longer than 10 minutes and really help you understand, or at least appreciate, coding with a multiple-choice test at the end of each module or badge. Not enough on their own to go off and do it for real professionally, but educational, fun and eye-opening nonetheless.
I'd add one more point to the article - different browsers interpret some elements of HTML, CSS and JavaScript differently and pixel-perfect matching of the design across all browsers is not a realistic expectation unless you want to pay extra time and hence money for it (and even then some of the contingency could hamper website performance).
All the best, Karl
Alex-Web deisgn Ireland 12:18 PM on January 24, 2012
Interesting post. Good to be reading something genuine with all the content scraping in blogging these days. I happen to be both a web designer and a digital marketer.
Editor, SPS 12:46 PM on January 24, 2012
Love your blog. This article was especially helpful. We host a small news aggregation site for Chicagoland and have been using your resources often. Thank you and check us out some time at www.siliconprairiesocial.com
Janey Smith 2:50 PM on January 24, 2012
Thanks for the info, good tips for the novice, not always easy to be up to date:)
Jeremy Abel 5:10 PM on February 01, 2012
This is an excellent post that I'm bookmarking right now!
I must admit that while HTML and CSS are a bit overwhelming at first, they're becoming a new language that today's marketers can benefit from knowing. If you can fix a grammatical error or adjust the alignment of a caption on your site without having to get in touch with your IT or web design team, that's a little more value you add to your role as the marketer in the company!
Jennifer 5:30 PM on February 01, 2012
Excellent post! I remember when our company was re-designing our website and how frustrating it could be when we couldn't communicate. Fortunately, we have since hired a great internal staff member who has helped me learn a lot but this post really filled in a lot of gaps. Definitely saving it for future reference.
Tracy Morton 4:26 PM on February 02, 2012
Very good article. Although I am reasonably familiar with website coding after doing my BSc this is an excellent refresher for me and will be a great help to anyone who needs some jargon-free explanations. Well done and keep up the great work guys!
Corrie Mieszczak 4:05 PM on February 03, 2012
I wish I had read this before my first web redesign project. (I bet our programmer wishes I had read it, too!). Thanks for putting this out there for those of us who need help understanding the more technical side of things!