Web Design Lesson 1: The Basics

Created Saturday, 08 September 2012 16:41 Last Modified Saturday, 14 December 2013 11:23
Fig. 1: Typical day in the life of a web designer. Fig. 1: Typical day in the life of a web designer. Veer Stock Photo 4024747

Designing websites is simpler than you might think. My goal in this course is that you will gain a strong grasp of the fundamentals of web design, that you will be able to create a website based on the needs of a client or boss, and that you won't be intimidated by web design. You will learn to use Dreamweaver in this class, but I will place an emphasis on understanding the principles of web design and the basics of HTML and CSS over the features and intricacies of Dreamweaver or any other software.

In our first lesson, we will go over the fundamental features that a website must have, the guts of what a website is made of, and also get you started thinking about your first project.

What Features Must Websites Have?

Most web pages need branding, navigation, and content. It is vital to your success as a web designer that you understand both the necessity and the purpose of each of these sections.

Branding

Branding is one of the most important parts of your website. Branding lets the visitor know who you are & what you do. This should include a logo, and can include a tagline. Usually your logo should link to the home page of your website, as a convenience to your visitors - many people have grown accustomed to being able to click on the logo to go back to the home page.

Conventionally, branding is located in the top left corner of the website. This is because most people in our culture usually start reading a page in the top and from the left and work their way right and down. I do not recommend placing your branding in an unconventional location while you are still learning the basics of web design.

Why is branding important? Branding is important for the same reason that you probably wouldn't get many people coming in to your store unless you had a sign telling them that a) you were a store, b) your store's name, and c) what your store sold.

Navigation is just as important as branding. Navigation gives the visitor a way to get around your site and find the content they are looking for.

It is very important not to confuse your visitor with your site's navigation. Try to give each navigational item a clear, concise name. Don't use an icon in your navigation by itself without a name unless it is universally clear what that symbol is (for example, a lot of sites will use a image of a home to signify the home page. This is perfectly acceptable as long as it is clear).

If you confuse your visitor, and your content isn't vitally important to them, they are more likely to leave than they are to try to figure out what you meant. This will mean lost sales for a business, or lost page views for a blog, or lost readers for a newspaper. If the content is vitally important to them, you will just make them angry, and you or your boss will get a lot of contact inquiries telling you that you should be fired.

When it comes to navigation, you can make a distinction between main navigation and sub navigation. Main navigation should be on every page of your website, and should contain the most important links. Sub navigation may appear when the user is in a section of your website, or has hovered over an item inside of the main navigation (a drop-down menu). For example, if you run a car company, your main navigation would probably consist of items like CARS, TRUCKS, and VANS. Your sub navigation on the cars page, or on the drop down menu that would appear once the user has hovered over the word 'CARS' in your main navigation, might include links to the different models of cars you make. It makes sense to only show this navigation when the visitor has shown an interest in cars. If you have a large website, and you try to show every link to your visitor all at once, you will give your user visitor too many choices and confuse them.

Usually you shouldn't have your main navigation change from page to page, for the same reason that a car manufacturer wouldn't move the location of the steering wheel when the driver shifts in to second gear. Typically the main navigation is located on the top or on the left of the website, so that it is easy to find. I don't recommend putting your main navigation on the right or on the bottom of your website until you have a strong grasp of the principles of web design, and are comfortable breaking with convention. You will have more options on where to put the sub-navigation.

One final note on navigation: IT SHOULD ALWAYS BE IN TEXT, NOT IMAGES!!!! Using images in navigation without text is bad for the following reasons: 1) Disabled readers may not be able to see the images, and their screen readers won't be able to tell what your image is linking to, 2) Sometimes images don't load, so your visitors will wind up having no clue what your broken image is linking to, 3) Search engine spiders can't read words that are in images, so they will have a hard time figuring out what you are linking to and your site will not rank as high in their results.

Why is navigation important? Navigation is important for the same reason that you would probably have a hard time giving directions to your house, your favorite park, or your favorite store in a city with no street signs.

Content

Content is the whole reason we look at web pages in the first place. Content refers to text, images, information, links, documents, or whatever else is on your page that isn't branding or navigation. Branding and navigation is vital to the usability of your website, but without compelling content, no one will wind up using your website in the first place.

This course should teach you how to design a website, but many designers don't have a job where they are limited to just playing around in Photoshop, Dreamweaver, or Illustrator all day long. Sometimes, you will have to help a client or your boss figure out what they need to show to their audience. Even if your client or boss knows what they want to say, sometimes it will be your job to figure out what parts of their content should be emphasized and featured in order to captivate their audience. For at least one of the assignments in this class, you will be responsible for figuring out what the content of the website needs to be.

Why is content important? Content is important because you probably don't own any interesting books that merely consist of a cover and a table of contents.

HTML: What Web Pages Are Made Of

By now, you should have an understanding of why web pages have to have branding, navigation, and content - but you may still have no idea how to build one. It's time for us to go over what web pages are made of.

HTML stands for Hypertext Markup Language. HTML is made up of elements. The most basic element is the html page itself, in the example below you can see the opening and closing html tags:

<html>
</html>

Everything that would be sandwiched between the opening and closing tags above would be considered part of the html element. Please note that the word 'element' and the word 'tags' will often be used interchangeably.

Some elements only need one tag, but they will require a terminating slash like the <img> tag below:

<title>Web Design Basics: Lesson 1</title>

Most tags can contain attributes, which provide information about the element. Attributes are always specified in the opening tag. In the example below, a <h3> has both a class and an id attribute.

<h3 class="sidebarHeader" id="specificArticle"></h3>

In addition to tags, HTML contains comments. Anything that is in a comment will be skipped over by the browser when rendering the page. Comments can only be seen if you view the page source. You can use comments to make citations and notes in the code.

<!-- this is a comment -->

Additionally, you can use comments to "comment out" code for troubleshooting. If a section of your page is not rendering properly, you can comment it out to see if that particular piece of code is the problem.

<!-- below is a comment around some bad code-->
     <!--<h5>Stupid no-good not working code.</h4>-->

After comments and the html element, the next most important elements are the head and the body. The head contains things that are important for search engines, such as the page title and the meta elements, as well as links to external documents called 'stylesheets' and 'scripts'. The body contains the content that is displayed to the user.

<html>
    <head>
          Titles, Meta Tags, Scripts, and CSS styles get inserted here. People don't see most of this stuff because the head is not visible, but the scripts and styles can affect the appearance of the content in the body, and scripts can even generate html code inside of the body. We won't mess much with scripts in this class.
    </head>
    <body>
          This is what people see. 
    </body>
</html>

In the code above, you can see that elements can contain other elements. This is called 'nesting'. The element that surrounds another element is called a 'parent' of the surrounded element. The element which is surrounded is called a 'child' of the parent. In the example above, the html element is the parent of the head and the body elements. The head and the body are child elements.

Errors will occur if you place a parent's closing tag before a child's closing tag. Think of the parent tag as the bread of a sandwhich, and the children as the meat. When you make a sandwhich, you don't cover the top piece of the bread with the meat unless your goal is to make a broken sandwhich, which is not your goal. This video will help explain how an html sandwhich is made.

Now let's go over the types of things that the head and the body can contain.

The <body> Element Of HTML

The body can contain a lot of different types of content. We're going to focus on divs, lists, list items, headings, paragraphs, spans, strongs, ems, links, and images to start, but that is just the beginning of what you can place in the body.

<div>'s

Divs are divisions of the page. They are often used as containers for other content.

<div>
    <h2>Text inside the div</h2>
    <img src="/image-inside-the-div.jpg" alt="image inside the div"/>
</div>

Divs are pretty 'non-semantic', which means they don't tell a search engine spider what type of content they are looking at. There is a big push in html5 to minimize the use of the <div> element, and replace it with more semantic elements like <nav> and <article> that tell search engine spiders and browsers what type of content is inside. Unfortunately, Internet Explorer 8 and below can't render these newer elements without additional javascript. We're going to keep things simple for now and just use <div> tags instead of the html5 tags, but you should be aware that html5 tags exist, and that after Internet Explorer 8 is finally dead, there will be little excuse not to use them.

Lists (and List Items)

There are a few different types of lists in html: unordered lists, or <ul>'s, ordered lists, or <ol>'s, and definition lists, or <dl>'s. We won't be worrying about <dl>'s for now, but if you want to know what they are, you can read about them here. The <ul>'s and <ol>'s contain list items, or <li>'s. For example:

<ul>
    <li>First item in an unordered list.</li>
    <li>Second item in an unordered list.</li>
</ul>
<ol>
    <li>First item in an ordered list.</li>
    <li>Second item in an ordered list.</li>
</ol>

You should only use <ol>'s if the order of the list items is absolutely important, such as in the steps to a recipe or in directions for constructing a bookshelf. In all other cases you should use a <ul>.

When setting up the navigation for your website, it is recommended that you use a <ul>. This is because navigation is essentially a list of links to other html pages. Any content that is can be classfied as a list should use the proper list element to display that content.

A sidenote: a list item be a parent element to another list! Nesting lists inside of list items is how drop down menus are usually made!

<ul>
    <li>First list item (it's a parent!).
          <ul>
               <li>First list item inside of an unordered list, which is inside of a list item, which is inside of an unordered list!!!</li>
               <li>Second list item.</li>
          </ul>
    </li>
    <li>Second List item.</li>
</ul>

Headings

It is a good idea to use headings to break up your text into sections. There are six levels of heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Please get into the habit of only using one <h1> tag per page. The <h1> should be the equivalent of the title of your page, because search engines use heading tags to try to figure out what your page is about, and give more weight to <h1> tags, but may disregard multiple <h1>'s. Using a heading tag is simple:

<h4>This is really all there is to it.</h4>

Paragraphs

Any text that is a paragraph should be surrounded by <p> tags. Using <p> tags is extremely simple:

<p>This is how to use a paragraph tag. Pretty boring, huh?.<p>

</span>'s

The </span> tag is good for small pieces of text, things like captions or incomplete sentences that aren't headings. Using a span is simple:

<span>This is really all there is to it.</span>

Please note that you can use spans inside of other elements, like headings, list items, and paragraphs. For example:

<p><span style="color: green; font-weight: bold;">This is text inside of a span,</span> and this is text outside of the span.</p>

It can be good to use spans to style content that you want to look different than the other text in the paragraph, list item, or heading. For example, the code above would render in the browser like this:

This is text inside of a span, and this is text outside of the span.

Fig. 2: At this point, both I and you probably need a break. Enjoy a picture of a ridiculously cute kitty. Fig. 2: A ridiculously cute kitten's attention is captured by a span of text that is bold and green, different from the rest of the text in the paragraph. Veer Stock Photo 1692450

<strong> & <em>

The <strong> and <em> tags are search engine friendly ways to emphasize (or strongly emphasize) content. Some search engines will give higher weight to text on your page that is inside of these tags. Typically <em> will be styled with italic text, and <strong> will be styled with bold text. They are used similarly to span tags, but you should only use them inside of a containing text element like a <p> or <li>.

<p>Why care? <strong>Because important text should be emphasized!</strong></p>

Links

Links are stored inside of anchor tags, or <a>'s. Elements in html can have attributes, and <a> tags have a number of attributes that we can use. The 'href' attribute will be the address of the page that is being linked to. The 'target' attribute can tell the browser whether to open the link in the current window or a new one. There are many other attributes, but for now we'll just worry about these two. The '_blank' in the code example below tells the browser that the link should open in a new window:

<li><a href="http://www.mnc4.com" target="_blank">Example of a link to my website</a></li>

Images

Images, or <img>'s, have a number of attributes that we have to pay attention. The 'src' attribute should be the address of the image we want to show on our web page. If the address of the 'src' is wrong, the image link is broken.

The 'alt' attribute should be a description of the image, this description is used by those with visual impairments to understand what is going on in the image. The alt attribute is also used by search engines: Google is a great company, but they have yet to program a search engine spider with eyes. As such, the search engine spider will rely on the alt attribute to understand what is going on in the image.

Additionally, <img>'s have width and height attributes, and a few more. In a perfect world, every image would have a width and height, but to be honest these are often skipped when designers are on deadline, tired, lazy, or a combination of the three. Please notice that the image element only uses one tag - at the end of the <img> tag, there is a terminating slash before the closing bracket.

<li><img src="http://www.americanexpedition.us/templates/styles/images/mustang_head.jpg" alt="Illustration of a mustang's head" height="296px" width="273px" /></li>

Id's and Classes: The Attributes Which Link The Body & The Head.

All of the tags we have just gone over in the body section can have both id and class attributes. For example:

<div id="articleHeadingContainer">
    <h2 id="articleHeading" class="heading">Text inside the div</h2>
    <img class="articleImage" src="/image-inside-the-div.jpg" alt="image inside the div"/>
</div>

Id's and classes are important because they can be used to apply CSS rules, as well as be used by javascripts.

There is a major difference between id's and classes. Each id attribute should be used no more than once per page. So, if you have an element with an id="cuteCatPhoto", there should be no more elements on that page with the id="cuteCatPhoto". However, classes can be re-used. So, if you have an element with class="pageHeading", you can have more elements with the same class.

To explain how id's and classes can be applied, imagine that you have the following group of people: Tom, a male Bulgarian carpenter; Nicole, a female Bulgarian gymnast; and Joe, a male American gymnast. If we were going to this group in to code, we would examine the list of their characteristics and conclude that the thing making them unique was their name, so we would use that as their id. They share other characteristics, so it would be best to use those as classes, because we can re-use the class for more than one person. It might be best to represent them like this (please note: person is not a valid html tag):

<person class="male Bulgarian carpenter" id="Tom">Tom</person>
<person class="female Bulgarian gymnast" id="Nicole">Nicole</person>
<person class="male American gymnast" id="Joe">Joe</person>

In summary, the difference between classes and id's is important because we could use the id's to write specific CSS rules targeting each person, and those rules would apply only to them - but the rules we would write for classes could be shared among the people who share characteristics. This would mean we would only have to write one CSS rule targeting the Bulgarians, even though there are 2 Bulgarians. This means we write less code, and writing less code is one of the ultimate goals of programming. Writing less code means we have more time to spend with our friends, families, and pets and less time we need to spend in front of a computer. So - Id's are powerful because they are specific, but classes are powerful because they can be re-used and shared.

So, that's the look at the body. Now, let's move on to the other major html element, the head.

The <head> Element Of HTML

The <head> of an html document contains the <title>element, <meta> elements (mostly used by search engines, and occasionally by browsers), scripts, styles, and a few other things that we are not going to worry about in this class. In contrast with the body, none of the content in the head should be visible to the user, although scripts and styles can alter the presentation and content of the body.

We are going to spend most of our time in this class learning about styles, but it's a good idea for you to have a brief overview of the other elements that can be present in the head.

The <title> Element

The <title> element is one of the most important pieces of content search engines use in indexing websites. In order to be effective, the title should be brief and descriptive (most search engines only display the first 70 characters of the title in their listings).

<title>Web Design Basics: Lesson 1</title>

The <meta> Elements

<meta> elements have 'name' and 'content' attributes. There are many types of <meta> elements, which are distinguished by the name attribute. In a typical html document, you may see several meta tags, like this:

<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="keywords" content="American Expedition, wildlife gifts, inspirational gifts, wildlife decor.">
<meta name="description" content="American Expedition is a brand of functional, illustrated wildlife gifts and decor.">

The main <meta> tag you should know about is the description. Your <meta> description should reflect the content of your web page. Search engines use the description in their results as a summary of what your web page is about. They are also given more weight than other elements of your page during the indexing process.

Google does not actually use the <meta> keywords tag when indexing content anymore, because too many people were abusing it. Some other search engines do use it, though, so it may be good to type a list of words relating to your content.

Don't worry too much about the <meta> viewport tag above yet. It is basically just there as an example of the many other viewport tags available.

<script> Element

Scripts can alter the presentation of the content in the body, respond to events, track website pageviews, generate html content based on a user's interaction, and many other things. There are two ways we can use scripts in our html documents. The first way is with inline scripts:

<script type="text/javascript">//some javascript</script>

Inline scripts are sometimes necessary, but in general, it is better to include your scripts in your html document via a link. There are various performance benefits to putting scripts in external documents, and you can link to this external script from multiple documents, meaning you don't have to type of paste your script on every page of your website. You can link to your script by giving the opening script tag a 'src' attribute, and leaving the space between the opening and closing script tags blank.

<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>

<style> Element and External CSS Stylesheets

CSS styles are rules which change the appearance of html elements. Like scripts, styles can be applied inline:

<style type="text/css">
/*css rules go here*/
</style>

However, it is better to link to stylesheets for the same reason it is better to link to your scripts: there are some performance benefits, and you can share your styles with other web pages. Also, if you update the styles in your stylesheet, those changes will be shared with every page that stylesheet is linked to - there will be no need to make a change on every page. Linking to a stylesheet is different than linking to a script, because the style tag has no 'src' attribute. Instead, you must use a link tag:

<link rel="stylesheet"  media="screen" href="/script.css" type="text/css" />

The 'rel' attribute tells the browser that the link is a stylesheet, the 'media' attribute tells the browser that the stylesheet should be applied to screen (as opposed to print or some other media), the href is the address of the stylesheet, and the type tells the browser that this is a css text file.

We'll be working a lot with CSS in this course, because it is the primary means of designing content for the web. In the next section, we'll take a look at the basic principles of CSS.

Intro to CSS: The CSS Zen Garden

CSS stands for Cascading Style Sheets. I could tell you about how powerful CSS is, but I believe it is better to show you the CSS Zen Garden. Browse the examples there, and think about this: no HTML is changing from design to design, the only change is the CSS file.

Your First Assignment

Your first assignment in this class will be to create your own version of the CSS Zen Garden. We will go over the basics of CSS, how it works, and how to edit it with Dreamweaver over the next few classes. But for now, I want you to relax, take out a piece of paper and some pencils, and start thinking about what you will want your finished project to look like.

I would like you to draw at least 15 thumbnail sketches of how you would present the content of the CSS Zen Garden, and from those sketches, pick at least 3 to turn into full page sketches with some detail. These don't have to be great drawings - you can use primitive shapes like circles or squares as placeholders for your eventual graphics. You can use scribbles to represent text. The important thing is to think about alternative layouts. Don't be lazy and draw small variations of the same thing. The more varied your designs are, the more chance you will come up with something interesting to elaborate on later.

In your sketches, I want you to think about how you will present the branding (it should be clear that the user is visiting the CSS Zen Garden), the navigation (the links to the other stylesheets), and, of course, the content. I want you to pick a theme or overall idea that you will use to decorate the content of the CSS Zen Garden: you can choose butterflies, rocket ships, happy little trees, or whatever you want as long as it isn't obviously obnoxious or offensive. I want you to think about how you are going to use type in your design (beginners often don't think about this enough, but I usually start laying out my designs with type. If I get the typography right, the piece usually works). I also want you to think about how you are going to use color.

We will have small group discussions about your sketches at the beginning of class on Thursday, before we start talking about how to take your designs from scribbles to screen with CSS. Make sure you have something to discuss on Thursday, be prepared to explain your design choices, and be prepared to give feedback to other students.

Web Analytics