How to Decode Web Design Language for Marketing Mortals

    by Hartley Brody

    Date

    January 23, 2012 at 11:20 AM

    marketing html css javascript 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

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

    h2 tag resized 600

    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?

    pop up window resized 600

    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

    blog-cta-25-must-haves

    Search Inbound Hub

    Subscribe to Marketing Articles by Email

    Subscribe by RSS

    Follow HubSpot

    Call Us: 1-888-HUBSPOT