Illustration of desktop computer with text below reading "Designing in the Browser: The Basic Languages"

Designing in the Browser: The Basic Languages

It can be tough to even figure out where you need to start if you're a designer who has not designed in the browser before.

Last time, I talked about how designing in the browser can greatly improve your process, and make you and your client happier with the final product. This time, I'm digging a little deeper.

When you are just getting started designing in the browser it can be tough to even figure out where you need to start. It seems that any sort of documentation is written in a foreign language and everything uses obscure acronyms. More often than not you end up 15 pages deep and you still don’t know the answer to your original question.

This post is geared towards designers who have not designed in the browser before, or who are just getting started. In this post I hope to outline and define the most basic and first languages you’ll encounter in your learning process as well as give some context about what each can do for you. Some of these things you will likely already know, but I want to make sure to cover all the basics so that any skill level has the tools to jump into designing in the browser.

In the next post I hope to address some more advanced topics like extended CSS languages and their pre-processors, as well as a few other useful languages. Another will be a follow up post about the tools you need to get started.

Basic Languages

HTML

What is it
HTML stands for hypertext markup language. At a basic level HTML is a set of tags you can use to define and organize the structure of your web page and its content. We can think of HTML as the foundation of your website. Each tag carries some semantic meaning with it and should be used for specific purposes. As the foundation of your theoretical internet house, it is important that your HTML is well-written so that when you add other pieces, the structure remains clear.

Some basic tags include the

which marks a paragraph, <h1> - <h6> which are heading, <ul> and <ol> tags define unordered and ordered lists and tags define links. There are many more HTML tags that are available to use. HTML5Doctor is a good resources that I like to use to see different types of tags and how to use them. Each tag is defined and a link to its official W3C spec is included.

Not only do tags provide structure, they often include pre-styled display rules. For example, ordered lists place a number before each list item and provide some margin and padding. Most of the time these rules can be overridden with CSS (more on this below), but sometimes there is no good way (or good reason) to avoid the provided display styles.

How do you use it?
HTML is used to create the structure of your document. You should always use the most appropriate tag. A good basic structure and foundation is the best place to start creating your website. Good HTML can increase your search engine optimization (or SEO, for short) and can improve your site’s accessibility for screen readers and other non-traditional site readers.

Learning References:

  • HTML5Doctor - Provides basic definitions for different html tags as well as a link to the W3C official documentation for that tag.
  • Codecademy HTML & CSS for Beginner - A great, in-browser teaching guide that overviews the basics of HTML & CSS. A great learning by doing tutorial.
  • Level Up Tuts HTML5 Tutorial - Short video tutorials with clear topics that focus on new tags in HTML5 and how to use them.

Style rules / CSS

What is it
CSS stands for "cascading style sheets". A stylesheet is basically a set of separate documents that contain your styles tags. In the <head> tag of your HTML document, you link to your stylesheet. This allows your HTML to know where to look for page styles. The term cascading comes into play as you link to your style sheets in a defined order of precedent.

However, people often use “CSS” and “styles” interchangeably. When someone is speaking about CSS, they don’t always mean multiple stylesheets in a predefined order, sometimes they just mean a page’s styles. Not only that, but there are many ways to implement your page’s styles.

Some designers/developers really do implement their styles according to the true definition of “CSS”, by linking to multiple style sheets in the head of their HTML document. Others link to one style sheet that holds all of their styles, which can result in the page loading up a lot of unused styles. Both of these methods use external files, which can be cached by a browser to aid in performance, and are often easier to maintain than inline styles.

If you do not want to link to external files, you can use a tag within the HTML document, or use inline styles, which involves individually adding styles to an HTML tag with the style attribute. A style tag is a bit cleaner in that it separates your styles from your HTML, however, inline styles can be used for specificity or, more often than not, HTML email templates.

One important thing to keep in mind while writing styles is CSS specificity. It can be a bit complicated to explain, but Smashing Magazine does a nice job outlining the basic rules of CSS specificity. The big takeaway is that some styles can overwrite or cancel out other styles based on a whole host of factors, and being familiar with how that works can save you a lot of frustration around “WHY ISN’T THIS GETTING THE STYLES I AM WRITING APPLIED TO IT?!?!” land.

How do you use it?
Styles are used to add layouts, color, and font rules. They are basically the room framing, paint colors, carpet, floor, drapes, windows, doors, and roof to our house. And I mean that. Styles are very powerful, because, although HTML sets up the structure of your document, it is styles that allow you to separate things into columns, add background colors to important areas of the page, and generally control how a page looks. In order to see the true power of styles, pull up one of your favorite sites and turn off styles (in firefox you can do this by selecting View > Page Style > No Style, in the menu).

Learning References:

  • CSSTutorial.net - A basic, step by step guide about css.
  • Level Up Tuts CSS and CSS3 Tutorials - Short show-how videos that will show you how to get started adding styles to your HTML.
  • Codecademy HTML & CSS for Beginner - A great, in-browser teaching guide that overviews the basics of HTML & CSS. A great learning by doing tutorial.
  • CSS-Tricks - Great blog that has many css code snippets, tutorials, and articles about how to get the most out of your CSS while following best practices.
  • CSS Specificity - Things You Should Know: Overview by Vitaly Friedman about the basics of CSS Specificity and how it will affect your work.
  • Codrops CSS Reference - A great reference to some great css properties, psuedo-classes and more with explanations and real world examples of each reference.

JavaScript & jQuery

What is it
If HTML is the foundation, and CSS is the framing, paint, etc, then JavaScript is the electrical and plumbing of our Internet house. JavaScript is defined as “an object-oriented computer programming language commonly used to create interactive effects within web browsers” which kind of sounds like a mouthful, but basically you use it to make your site interactive on the client side. Some examples of what JavaScript can do might include opening and closing your main navigation menu, expanding a hidden search bar, or making your page have a lazy load effect. These are just basic examples, but JavaScript can do a lot for you, and there are a lot of pre-existing libraries that you can use.

Which leads me into jQuery, which is a JavaScript library that many people use in place of JavaScript. I only mention it because it can get confusing when people start talking about JavaScript, and then talk about jQuery, because really, they are the same language. jQuery has simply taken much of what JavaScript can do and made it easier to write the basic functions that you’ll reuse over and over again.

Some may disagree, but I would recommend learning jQuery over JavaScript, if you want to add some interaction to your in-browser designs. jQuery is easier to learn and write, and, as a designer, it will likely have more than enough tools for everything you need when designing in the browser.

If you are interested in the difference between JavaScript and its frameworks like jQuery and others, you can read up on the comparisons by Neha Tayal on Luce & Morker, byBryan Wilde on the Udemy blog, and by Alex Holt on Smashing Magazine.

How do you use it?
Use jQuery to add interaction to your in-browser designs. Use it to show a client how a menu might open and close, or how a content area expands. It will help your in-browser designs feel and act more like the real thing.

Unlike HTML and CSS, you don’t need to learn JavaScript to get started in the browser. I recommend beginning with HTML, then adding in CSS. Once you start to really get the hang of those two, you can experiment with adding a little jQuery or JavaScript into your site to improve your client’s experience.

Learning References:

  • Codecademy JavaScript - Another great step-by-step tutorial by codecademy that gets you writing JavaScript.
  • JavaScript.com - which has a nice basic inline tutorial as well as a list of in depth JavaScript resources.
  • Learn.jQuery - A guide to learning about jQuery and how to use it by the creators of jQuery.

Wrap-up

This has been the equivalent of dipping your little toe in the giant pool of web development, but I hope it will help you get over the initial anxiety of where to start when you are designing in the browser.

As I mentioned, HTML and CSS are pretty essential to designing in the browser, and jQuery/JavaScript is a nice-to-know-exists-so-I-can-look-up-how-to-do-it language, at least for my purposes. I recommend focusing on HTML first, and then adding in some styles. Work from there and do a little at a time.

I’ve tried to provide a few good references for each language above, as well as a few all around great links below, but honestly, google is going to become your best friend as you are learning. You are not the first to travel along this path and I almost guarantee that someone has run into the same problem you are struggling with. If you really can’t find the answer then ask on twitter or even just directly message me! I’ve generally found that the community is very passionate and always willing to help newcomers.

Other Great Learning References:

  • Stack Overflow - Ask a question or find a question REALLY similar to what you were just about to ask and see the answers. The questions cover a bunch of topics, and this is usually where I end up when I have a problem.
  • Codecademy - I listed it before above, but Codecademy really does have a lot of great tutorials, is free, and allows you to learn by doing.
  • Level Up Tuts - Level up tuts is free, but recently started offering a paid premium service w/ “more features”. I used these tutorials non-stop when I was learning to design in the browser. They have HTML, HTML5, CSS, CSS3, JS tutorials to just scratch the surface. I thought their tutorials were short, sweet, and to the point. I wasn’t bored by too much blah blah’ing, and I felt I improved my skill level each episode.
  • Treehouse (paid) - Though these tutorials cost money, they have a lot of great content presented with step by step video tutorials. Plus there is a free trial, so you could sign up and cram a whole bunch of learning into your free 14 days. The basic plan is only $25/month, so it isn’t exactly budget bursting.
  • Lynda.com (paid) - Again, this has a lot of great video tutorials that come with files and step by step instructions that help you learn by doing. Lynda has a similar pricing structure as Treehouse, but with only a 10 day free trial. There is a lot of great content here though.