Graphic Design Production II

X01-Creating an Interactive PDF

You already know how to create a PDF for Print. Actually, you know quite a lot about creating PDF's. Let’s review these skills before we push on into new territory.

PART 1 About PDF

The destination for your PDF and who you are creating it for are two of the main considerations that govern why you use different settings for your PDF.

Formats for Print / Screen
Save the InDesign document provided in the following formats:
1. High Quality Print, Single pages, No Bleed or Crop Marks
2. High Quality Print, Single pages, WITH Bleed or Crop Marks
3. Smallest File Size, Page Spreads, No Bleed or Crop Marks
4. Printer’s Spreads: Print Booklet > to Postscript file Marks & Bleeds > Open in Distiller > Create PDF.

PART 2 Adding Interactivity

Before we make our own links in a document, we can get a feel for some of the options. Let’s look at some examples of existing interactive PDFs.

1. Go to this URL ( to find the UW-Stevens Point Handbook. Check out how the interactivity works with Hyperlinks that link to pages within the rest of the PDF. Obviously the document was not developed to be high design, but we are looking at the function of the interactivity. Who is the audience? Should it have more thought put into the design?

2. Now let’s go here ( to look at another interactive PDF. Go to the gray Nav bar on the left side of the page and twirl open ‘Resources’ to find the GEP Booklet. Scroll down to the table of contents and explore the interactive PDF. Who is the audience for this publication? How would you characterize the positive qualities of the design? What could be better? Adding HyperLinks to a Document

3. Let’s explore this document that already has interactivity to see how it works. Open the file provided for the exercise in InDesign. Change the program Workspace View to Interactive for PDF. Follow along with the instructor.

4. Open your Print Production Workbook file in InDesign. Go to your TOC and Add Hyperlinks to 5 of the pages. Add a ‘Back to Contents’ button. Save your document with Interactive designation. Then Export as PDF High Quality Print, Lower Image Resolution to 150 / Medium, Enable Hyperlinks

X02-Organizing + Naming for Web / HTML Basics

In this series of exercises we’ll go through some key organizational practices you need to know when working in web, explore the web’s structure and learn the basic rules of working with HTML. You will set up your own root folder structure for our website exercise, write some code and build simple web pages.

PART 1 Organization is Essential

To get your websites to work properly, you need to follow rules for organizing files. The files fall into a few different categories, viewable content (text and imagery), the presentation of the content (design and layout), and the interactivity or animation of the content. Each of these is controlled by a core language, HTML, CSS, or JS. Web pages (HTML) contain the code that talks to the web browser and the unstyled written text for the site. The style sheets (CSS) hold the instructions for styling the content, the page layout and other effects. Script (JS) enables user input, interactions and some animations to take place. For simple websites, the web pages, content and instructions all live together in a folder or directory. This main website folder referred to as the root folder, Inside the root folder there are also other folders for the different kinds of content and instructions. Here’s a simplified example of a root folder for the fictional company Flying Rooster:

On your desktop:
Make a new Folder and name it ‘flyingrooster’. Inside the root folder make three (3) other folders called ‘images’ ‘css’ and ‘js’ We will come back to this when we build our web pages.

Naming Conventions for Web Files:
Code demands that you write it in a very particular way. A single character out of place can result in a whole web page displaying incorrectly or not at all. You need to know that the naming conventions for web pages and files are also prescribed and are not optional. Specified methods must be followed and names assigned so web browsers can ‘read’ the files.

Files, documents and folders have special names:
The root folder is called that, or the root directory, but it is not usually named that. We call the first page of a website, the home page. This page uses a special naming convention. It is either named ‘index’ or sometimes ‘default’ or ‘home.’ Browsers read these names as a signal to open this page first.

Rules for naming:
When naming files or folders for the web, just say ‘no’ to: special characters — Because the coded instructions for web browsers use special characters, you need to avoid using these when naming your files.

PART 2 HTML Basics

Languages are alive! How do we know that? They change. Like any language, HTML, has gone through changes and continues to be adapted to new needs of the society and our technology.

Super brief history:
HTML was developed by an awesome dude named Tim Berners-Lee, along with some colleagues at CERN, an international scientific organization based in Geneva, Switzerland. Around this time (1989–1991) they also developed the Hyper Text Transfer Protocol (HTTP) and the Universal Resource Locator (URL). Syntax — the rules of HTML structure:
All languages have rules that govern how the parts are ordered. This is the syntax. The absolute most basic parts of HTML are the ‘elements’ and ‘tags.’

Tags are recognized by their use of angle brackets.

Tags come in pairs, a start and an end tag.

Elements are the parts made from using tags.

Elements are nested.

Page Structure:
In order for web pages to communicate with and be able to be displayed in browsers, they need to have specific HTML elements and in a specific order. All web pages have prescribed parts, nested elements and are divided into head and body areas.

A set of basic elements for a web page might look like this:

Because of the shared structure in web pages, a template, also called a boilerplate, is used to jumpstart the process of coding.
The first piece of code on the page is the document declaration or the ‘doctype’ telling the browser what code language it is.

HTML Basics About Writing Code:
Text Editors are a kind of program used for writing code. Most automatically number the lines of code and allow for you to choose a color scheme to ‘color code’ the different parts of the language. Many options are available for Text editors. You can use Notepad on Windows or TextEdit on iOS (though TextEdit is a pain), or even Adobe Dreamweaver as it has a Code View that works pretty well. We are going to use Brackets for our first foray into web page coding.

Elements + Attributes:
You remember elements are the parts of HTML defined by tags; Elements have attributes, Attributes provide additional information about the element, Attributes are always specified in the start tag, Attributes come in name/value pairs and the structure looks like this: name=”value”.

An example of an attribute would be:

• the value #FF0000 is a hexadecimal definition for red.
• the hexadecimal system is based on the color space of the computer screen, RGB.
• Web colors can also be specified by using the r, g, b values or by using text.

Links: anchors away! / relatives / absolutely
So much of the web is “...Click on this to go here.” Hyperlinks are the fundamental interactive parts that enliven web pages and serve a site’s navigational functions.
Links are made by using the anchor element. The anchor element uses an ‘a’ to stand for ‘anchor’ along with the letters ‘href’ meaning ‘hypertext reference’ to designate the place the link goes.

Absolute Links:
The link outside of the root folder of the web site. The name for this kind of link is an absolute link. Relative Links:
A link that references a page within the website (inside the same root folder) is called a relative link. This kind of link does not need to use the same URL information like ‘http://www ’ and it would be written like this:
example: ”about.html”

Keeping your files organized will help you succeed in building web sites that function.

Organizing + File Management:
As in Web design, keeping your files organized for the class is crucial. Let’s continue building your folder structure for this class.

Meta tags:
To the html start tag, add the attribute... lang (for language) and the value... en-US (for english-US). The example is below.
meta tags — give important info about the website to browsers, meta tags do not have end tags, meta tags include specific attributes and values. We’ll add meta tags with the following attributes + values to our page. a. charset =”UTF-8”
b. name=”description” content=”A description of the content on the site”
c. name=”keywords” content=”word, word, word, word”
d. name=”author” content=”Your Name”
e. name=”viewport” content=”width=device-width, initial-scale=1”

Working with Images / Making Images Links:
PATH — Unlike our written text content, which is contained in the html page, images are referenced in HTML by describing their location. Images in a website live in a ‘images’ folder. The path to get to an image must be spelled out for the browser. The signal to tell the browser to “go into another folder” is by including a forward slash in the path name.
ALT TEXT — It is mega-important to clearly describe your images in words. This enables screen readers to speak out loud what the images are. For individuals with vision impairment this is essential for understanding the website’s content. DIMENSIONS — Your images should also be defined dimensionally. We will use width and height in pixels.
IMAGE AS LINK — In order to make your image a hyperlink all you need to do is wrap anchor tags around your image element and then specify the destination. Select a destination (somewhere on the web) and create the link. Add text to take away the border.

Making Images Links:
Images for web have specific file formats depending on the kind of image. The formats all have adjustments that you can make when saving them in order to achieve the highest quality with the smallest file size. This process is called Optimization. You will want to optimize all of your web images before you use them in a website.
The most common file formats developed for the web are:
.jpg / .gif / .png / .svg
Photographs are most often saved as .jpg or .jpeg and sometimes .png. Vector images are saved either as .gif or as .png or .svg

X03-Working with Content

Digital images are saved in different formats depending on the kind of image they are and their intended use. It may be super obvious to say photographs are visually different from flat color graphics, yet this distinction means they are each treated in specific ways and that file formats have been developed to work best with each kind of image.

The color space on screens is RGB (Red,Green, Blue). The Hexadecimal color system, which is rooted in the RGB color space, was developed when computer monitors were pretty limited in the range of colors they could represent. Web designers often designate colors using the values for each of the colors R, G, B (or the Hex # or will sometimes use the color names). Transparency can be designated along with the r, g , b values by setting the alpha value. Then you would set the r, g, b, and a (for alpha) values.

Styling with CSS:
You might be tired of looking at all that default Times New Roman and want to change your font and maybe make your type a different color. We are going to do this and a lot more with the help of CSS (Cascading Style Sheets).

Syntax for CSS:
CSS like HTML, has a syntax to it’s language that needs to be learned. Let’s take a look. In writing CSS, you define rules for the HTML elements. These are called rule sets.

Declaration blocks contain one or more (usually more) declarations that express the properties you want to style and how you want it to look. These blocks are surrounded by curly brackets a.k.a. braces.

Each declaration includes a CSS property and a value, separated by a colon. A CSS declaration always ends with a semicolon.
Before we try writing some CSS you need to know that the visual display of the lines of code will appear in a specific format that is not just in a horizontal line like we see on this page. The format makes it way easier to scan for selectors and declarations. OK, let’s write CSS!

X04-CSS Links

Start a new page and Save it as 'styles.css'. Add rules sets for the headings and paragraphs as seen in the connections-stylesheet screenshot: Now we will create rule sets for the text links. Remember that links have four states:
a:link — the normal, unvisited link
a:visited — the link after a user has visited
a:hover — the link as the user mouses over it
a:active — the link as it is clicked

Each of these states is a selector that can be styled. Write the code for these in your styles sheet. Include the properties for color and background-color. Choose any colors you would like. Make these change for each state.

X05-HTML/CSS - Images,Captions and Background Images

Adding captions to images:
We are going to continue using our 'connections' site from last week's exercises (X04). Copy your 'connections' root folder to your desktop. Now, add the images you found to represent your own past, present and future to your images folder. Make sure your images are named to reflect the content. (If needed you can use the provided placeholder images.)

FIRST: Choose 'Open Folder' and navigate to the 'connections' folder on your desktop. Open your future.html page.

ADD CAPTION: You should have the future-placeholder.jpg on the page already. If not, type in the 'img' tag and identify the image for your future and follow the guide above.

Save your HTML file. //// Refresh and preview in your browser.

YOUR OWN IMAGES: Resize your images to 800 px by 600px. Replace the placeholder images with your own images for future, present and past.

ADD TEXT: Copy the new text from the following page (or from the screen shot provided) and add it to your future.html page. Add the new title and meta description, and revise the main heading. For the written text make the subheading part of the paragraph, yet separated by bolding and a line break. Add this below your image on your future page.

Do the same process for your present.html and past.html pages using the appropriate images, and adding your own captions. Add title, description, text for the other two pages.

STYLE WITH CSS: In your css file, create a style for your caption.

Using images to create unity:
By repeating elements you can reassure users they are in the same site. Images—either icons or photographs—can act as visual references to other sections or pages of a site.

Open your images for past, present and future. Set your Crop Tool for W x H x Resolution for 100px by 100px and 96 as resolution. For each image select an engaging area and make a crop. Flatten Image if needed. Export your cropped images as . jpg images (named with 'crop' or 'square')... and put these new cropped images into your connections images folder.

Place each of the square images into your index page before the appropriate text. Add alt text and make each of the images link to the appropriate page.

On your css, change your h2 element style so it is not so large and so it has no margin on the bottom and on the top. Add margin-top: 0; to your paragraph tag.

X06-HTML/CSS - Background Images

Using Images in the Background:
Just like changing the background color of an HTML element, we can also use CSS to set an image as the background of an element. There are a few different ways you can do this. One way is to set an unobtrusive pattern in the background of the body so that there is some subtle color and/or texture behind the content on the entire page. Let’s try it.
First, we need an image to use for our background. In the best case scenario you build a small(ish) image designed to tile or repeat over and over again. Another name for this is a seamless pattern. Seamless patterns are great because one small image that repeats loads much faster than a large background image and it automatically adjusts to fill whatever size screen being used.

Set the background with CSS:
Open your styles.css page and locate the style for your body element. In order to indicate an image we need to tell the browser to find the address of that image, and in this case, the address is inside the images folder which is inside our root folder. Since we are already inside the css folder, we need to tell the browser to back out of this folder, then go into the images folder. The signal to the browser is by using two periods in front of the slash.

More Seamless Patterns:
Its fun to make patterns. There is a fine art to making viable and effective seamless background patterns. Some illustrators / designers make them for sharing, some for profit. Later you are going to try it yourself in Illustrator. First, however, we are going to look at and use a free online resource called Subtle Patterns. Go to the site and explore the many options by browsing the thumbnails. Preview how the patterns look as backgrounds and choose one you want to work with.

Make your own Background Image:
If you have never made a seamless pattern in Illustrator, or if you have, but want to refresh you knowledge, or just watch an awesome 7-minute video demo... got to the Creative Market ( and scroll down to watch Bonnie Christine's how-to video from Skillshare. In this video, Bonnie takes us through making a pattern and saving it to use in Illustrator. In Illustrator create a pattern following the instructions you saw in the video. To build and use your own repeating background image for web pages, you will need to make sure the contrast is low between the pattern and the background color. Export your image tile as a .png file.

X07-Box Model

Now that we have a grasp of how HTML and CSS work hand in hand to determine the look and basic interactivity of elements, it's time to begin controlling our layout. We'll do this by learning what's called 'the Box Model.' Web browsers see everything — every HTML element that is — as a box. These boxes have certain physical characteristics including width, height, space around it, space inside of it, contents, and sometimes a frame or border. By creating the boxes and specifying their characteristics, we can control how the content on our web pages is displayed.

Understanding the Box Model:
Let’s move back to our HTML document and add some content. Add an h1 and a p to your HTML, Save and Refresh.

Let’s add a color and a background color to the h1 with CSS.
In your CSS file to your h1 element add: background-color: yellow;
and to your p element add:background-color: orange;
Save and Refresh in your browser.

Block-Level / In-Line Elements:
You might remember back in an earlier lesson we talked about block-level vs. inline elements and their behaviors. See how the yellow spans nearly the whole width of the browser? That is because an h1 is a block-level element. By adding the color in the background, we can now see that the element does actually span the width of the browser window. The browser sees it as a box that has content inside—the text.
Note >> We've been seeing this as Brackets sets a blue line around the block-level elements whenever our cursor is in them.
Box Model Properties — padding, border, margin:
The block-level boxes run the full width of our screen. The properties we can change are like other characteristics we can style with CSS.

Padding is the CSS property that controls the space inside the box around the content. Let's add some to our h1. padding: 25px;
Padding, like font-size, can use various units. For now, we'll use pixels. We can add padding uniformly or to a specific side around the content. Let's try this with our p tag. padding-top: 50px;padding-bottom: 50px;

Is a line that can be thick, thin, solid, dashed, dotted, etc. It is the CSS property used to style the outer perimeter or edge of an element. So, if our content is in the center of the box, and padding is wrapped around the content, the border is then wrapped around the padding. The border property uses three values for line width, line type, and for line color.
Let’s try adding a border to our h1 ...And add a border to our p. border: 5px solid black; border: 10px dotted brown;

Is the space between the boxes. Every element has a margin applied by default. Margin is what is creating the space between our h1 and our p in our page. Let’s see how we can change it.

CSS Margin Reset:
Before we set a new margin, we'll turn off any existing default browser margin using a magic trick in our CSS. At the top of your styles.css file, before any other elements, type an asterisk * This is a special selector that means “every element in the page.”
This turns off all margin defaults.

Width and Height:
The last two properties that we can change on our box is the width and the height. It’s important to know that it is actually best not to mess with these unless you have to. Browsers automatically set these based on the content and other box properties that are already defined. This generally works really well. However, sometimes you want to set specific values for a box (block-level element).

Text Alignment:
We have already discussed controlling the space inside and outside of the box using padding and margin. We can also control how the content is situated inside the box.
Default alignment for all elements in HTML is left.
It makes sense that browser use this as a default because we know that left aligned text is easiest to read. That's why novels, textbooks, and almost all other longer form text is always left aligned. Sometimes we might want to align text to the right or center for a certain design effect. Seeing where the content such as text lives inside a box helps us do that. The CSS declaration we use to do this is text-align: and the acceptable values are; left, right, and center.

Spacing, Sizing, Type on Screen:
• Review of Box Model spacing elements — padding, border, margin
• CSS the three methods for using CSS — external, internal, inline
• Ganging CSS selectors
• Working with Type on Screen
Review of HTML Elements for Type — h1 through h6
Introducing Unordered Lists — ul and li
Text Formatting — specifying format options for text
Font Styling — setting the font-family and other variables
Font Size — understanding font size methods

Remember to Archive Your Files and Clean up your Station Remember to archive your root folder and exercise files on your MyFiles (or OneDrive) and Delete your folders and files from both your Download and your Desktop.

X08-Navigation + Unordered List

In this exercise we will begin to work with some design issues related to a mobile or small device screen environment. We will learn about building and styling a mobile optimized navigation system using unordered lists, and creating anchored links.

Now we will build some content -—both image and text— to our page. Remember that content we want to be seen needs to be in-between the body tags.
FIRST — Copy the images 'xop-logo.png' and 'placeholder.png' from the XO8 download into your images folder.
SECOND — In your index page, add code that tells the browser to find and display the images. Put the logo at the top. You will add the placeholder before each event in the text (below).
THIRD —Open the Word document from the X08 download. Copy and paste the text from the Word document into your index page. Follow the instructions in blue to structure the text with HTML.
FOURTH — We will wrap the content in a div tag.

Now we'll add an unordered list that will become our navigation on the page. We'll put it just below our image. Normally it would make the most sense to use the h2s as the major links for our navigation, but since there are so many events we are going to use our h3s as links too.

Anchored Links:
An anchor link “anchors” a navigational link to another element in the same page. In order to make the anchor tags work we have to add to the HTML tags that are the anchors and add to the HTML tags that are the links. To establish a connection between the two requires that we learn a new HTML attribute, the id= attribute. This particular attribute is used to identify (id) the HTML element being anchored to. Each id is given a unique name which is placed inside the double quotation marks. You can use any word you want, though descriptive words work best.

Go ahead and add the id= attribute to our first h3 tag. Put the attribute inside the opening tag, just like all our other attributes. Let’s use “Open” as the name for the first h3. Okay, that is the first part. We have just dropped the anchor. Now we have to connect the link. To do this we have to go back up to the link we made in the nav and enter the address in our href= attribute.

For an anchored link the address is very simple. You use a # (hashtag, pound sign, or another wierd name is the octothorpe symbol) and then 'call it' by name. The # indicates an id= attribute and the name specifies which one.

Locate the “Opening Reception” link in the unordered list navigation we created earlier. Delete the space between the double quote marks and type #Open Save and Refresh

Ok, now let’s see if it works in our browser. Click on “Opening Reception” in your unordered list navigation. If things are working correctly, your page should have snapped the “Honoring People and Place / Opening Reception” section to the top of the window.
Now add the rest of the anchored links to the list and the id attributes to the rest of the h3s.
Now let's style the text. Add the following properties and values to the text elements in your CSS:

Making Adjustments
Live Preview your index page in Chrome. There are a number of issues we can address. Let's identify them and then tweak the styling.
• Look at the sizes of the elements. Do the scale relationships between the headings and the paragraph text seem about right?
• Look at the spacing between the lines of paragraph text. Make adjustments to aid readability.

Remember our box model... we can adjust padding and margin.
• Look at the spacing between elements.
What needs more —or less— space to achieve a better, more cohesive design? Make those changes.

Responsive Design Mode:
In order to work properly on our mobile first design, we’ll need to change our browser settings so we can easily preview our site using the correct dimensions for a small mobile device. In Chrome go to View > Developer > Developer Tools. There are lot's of settings to choose from. Experiment to view the different options.

Dealing with Images:
There are many techniques out there for handling images, some more technologically advanced than others. We can use our CSS to tell all images in our page that the largest they can ever be is 100% of the available width. Essentially, we tell images that they are free to be full size if they fit, and if they don’t, they will automatically scale themselves. It doesn’t matter the screen size or if it is ever changing, the image will take on an elastic personality.

You may have noticed issues with our logo image.
Let's adjust this in our CSS.
We need to talk to the images directly, so we need to use img { as our CSS selector. The property we’ll use in this case is max-width:. This is what lets the image know how much of the available space it can take up. If we want to allow it to take up 100% of the screen, we can type: 100%; as the value.

X09-Touch Points, Hit Points and Pain Points

Mobile First Approach to Web Design:
Most users are accessing the web from a variety of devices. The premise of 'mobile first' strategy is to design for the smallest screen size that a user is likely to use first. A bright individual named Luke Wroblewski thought this up in 2009 and another bright person named Karen McGrane expanded the ideas in 2012. This approach teaches us to be thinking about content and functionality of the user interface on a mobile, or small screen first.
Using a finger or thumb to navigate instead of a mouse presents challenges mainly because a finger is far bigger and much less precise than the mouse cursor. User frustration, confusion and errors in navigation are often called 'pain points.' It’s the designer's job to make our sites as functional and usable as possible. We do this by discovering where there are problems (user testing) and eliminating (or at least minimizing) the pain for the user with better design.

Styling our Navigation:
Our unstyled text links are small and close together. This makes it difficult for a user to hit the correct link. So, our first order of business is to make these links easy to use by even big and clumsy thumbs. We need to address several issues first.

Removing the Bullets:
Unordered lists use bullets to indicate each of the list items. This is great in some cases, but for navigation this just gets in the way. We'll use CSS to remove them. Open your styles.css file. Bullets are connected to the parent element, so go to the ul { selector. The property we need to use to remove them is list-style: The value to remove the bullets is none; Remember to close the css block with }

Your CSS should now look something like this:

The bullets are now gone from out list.

Creating Larger Buttons (Hit Points):
When dealing with links, the spot a user needs to click, tap or touch to activate the link is called the hit point or hit target. In text links, the hit point is only the text—a pretty small target. The user needs to click directly on the text to use the link. When using fingers to navigate a touch device, users typically need a much bigger hit target to be accurate.

To more clearly see the structure of our navigation we will add background colors to each of the elements.
to the ul add background-color: orange;
to the li add background-color: lawngreen;
to the a add background-color: aqua;

To increase the hit target on a text link, we need to do two things. First we need to 'promote' our link from an inline element to a block-level element. This will expand our aqua area, (our hit target) to the full width of the screen. It will also allow us to put padding on our link.
We’ll use a { for our selector to address the link directly To promote the link from inline to block, we’ll use the property display: The value we would use in this case is block; To add padding, we use the property padding: Let’s try 20px; for our value to start.

If you hover over the aqua portion of our navigation, you’ll see that the hit targets are now much bigger and they do indeed span the entirety of the aqua area. This is a good start, but we now have two new problems to solve. The first is that the links touch one another so we cannot tell where one link stops and the next starts, and the second is that we need to get rid of the orange unordered list stripe that is appearing on the left side of our navigation.

Creating Separation Between Links:
If we remember our box model, we know that the best way to move objects apart, is to use margin. Margin will allow us to separate our links with an invisible barrier. Since we only will need to have the margin between the links which stack vertically, we only need to add the margin to the bottom of each of our links.

• Add margin-bottom: 5px; to your link CSS
That works to create visual separation and actual separation between our links.
We can also now see that the unordered list (our orange background) does expand the full width of our screen proving that the unordered list is a block-level element.

Removing the Leftover UL:
Now to take care of the extra orange leftover on the left side of our navigation. We’ve determined this orange belongs to our unordered list element.
To remove this we need to know that this extra space is being created by a default padding on the left side of our ul. We simply need to set the padding-left of our ul to 0.

The Hamburger / CSS Classes

Before we launch into new content let's review what we've done so far on this site. We did this:
• made a root folder (place) on our desktop
• made subfolders (images) and (css) inside our root folder
• copied images into our images subfolder
• created an html page (index.html) in the root folder
• created an external style sheet (styles.css) and put it in our css folder
• in our home page (index.html) coded the basic boilerplate for our HTML
• linked our index to the external style sheet (using link rel="stylesheet" ...>)
• placed images (xop-logo.png and placeholder.png) (using img src=" ">)
• added text content and marked it up (using HTML tags h1>, h2>, h3>, p>)
• in our stylesheet defined styles for our text (using CSS selectors h1, h2, h3, p)
• created an unordered list for navigation (using the ul> and li> tags)
• made anchored links for the navigation (using the a href="#...">/a>
• in our stylesheet defined styles for the navigation (using CSS selectors ul, li, a)
• activated the Developer Tools views in Chrome to design mobile first
• adjusted the styling on our text content
• made our images scalable (using CSS selector img, and max-width: 100%)

Specifically, for our navigation, We;
> removed bullets with list-style: none;
> made links block elements with display: block;
> added padding to the list with padding: 20px;
> added color to the link space background-color: aqua;
> separated the links spatially with margin-bottom: 5px;
> removed the underlines with text-decoration: none;
> removed leftover space with padding-left: 0;
> centered the link text with text-align: center;
You may have gone further adding styles for your link states (link, visited, hover, active), changing the dimensions, colors, font and other things of the text and links.

Now let's continue to make our mobile site more usable. A website designed for the desktop generally has the navigation at the very top. On a mobile site real estate is at a premium so having the navigation at the top— in the form we have it now—presents a problem because it takes up all of the screen effectively hiding site content. There are several design options used to address this situation.

The Hamburger Button One conventional method to indicate navigation is to use an icon made of three lines which is refered to as the hamburger button. The set of navigation links is usually hidden from view until it’s accessed by the user. There are lot's of ways to hide and show navigation, but almost all of them require knowing the programming language called javascript. Later on we’ll learn a little about this language, but today we'll accomplish this using only HTML and CSS.

X10-HTML Developing Page Structure

As usual, copy your 'place' folder to your desktop from your MyFiles. When you open Brackets, make sure to connect to this folder by choosing File > Open Folder.

SInce we are focusing on building this web site for mobile first, today we are going to use Safari as a tool to see our site in this mode. Open Safari and go to the top menu > Develop > choose 'Enter Responsive Design Mode.' Select iPhone6 as the view mode. This is how we will view our site through this week.

Header and Footer Elements:
Today we will learn about and work with some new HTML tags. These add organizational structure and help with clarifying content. The terms 'header' and 'footer' are probably familiar to you already. Let's study them and then apply them to our page.

**IMPORTANT** The 'header' element is NOT the same as the 'head' element.

Header Element:
The header lives at top of a web page and usually includes a logo, the navigation, and sometimes other things like a tagline or a search function. We already have a couple of these, a hamburger button and a logo, so let’s work with that.

Open your HTML index page.
Wrap the hamburger button and logo in a set of header tags. Make sure to indent the logo and the hamburger button in your code so it’s easy tell that those elements are nested inside your new header element.
By setting up the header like this it makes the code easier to scan. Another plus is that we have a new element to use when considering specificity for nested elements. I can have the CSS talk directly to the hamburger button image link, by using the header a { as my selector. So only the links inside the header tag will respond to that CSS command leaving other links on my page alone.

Specificity is an important concept that refers to the order that CSS styles are applied. When we are using more than one HTML element name in a selector for our CSS this becomes crucial.

Nested Elements:

In the last exercise we found out that we could refer to elements inside other elements. We applied specificity when we nested the 'a' inside the 'ul' to create our ul a { selector.
In effect we were saying... “You links that live inside an unordered list, be like this.” We used a more specific description of our links to target just the links we wanted to style.

Footer Element:
In web design footers refer to the content that appears consistently at the bottom of every page of a website. The content can vary, but it’s common to see site navigation, contact information, links to social media as well as all sort of other bits of company information. Similar to the header, the footer content rarely changes between the pages in any given website. Having this content grouped together in a footer element is just smart. Let’s go ahead and wrap our unordered list in a pair of footer tags

Review | ID and Class Attributes

When we use the element or HTML tag, along with an id attribute, we can target an element very specifically. A while ago when we added the id attribute to our h3s, we used this process to make them anchored links. Most recently we used the id attribute to specify our mobilenav. Giving an element and id attribute (id=), means you are giving it a name. Most importantly, a name for an id is an absolutely unique name. Once the id name is used on a page, it should not ever be repeated. You can think of the id like a license plate or a VIN number, because every car has one that is unique to itself.

While, the id attribute should only be used for one thing on a page, the class attribute, on the other hand, can be reused for multiple elements. We created and applied classes for several different parts of our text (.when for the days, dates and times; .where for the locations; .event for the kinds of events) so we could style these in a similar way.

In this exercise we’ll learn some simple techniques for controlling our page layout with CSS commands. We’ll wrap text around images and we'll learn how to create a very basic multi-column layout.

The Float Property:
The most basic positioning method we can use is called floating. This command allows any element to be positioned inside its enclosing element to either the right or the left. Floating an element changes it's default behavior and allows other elements that are below the floated element in the HTML to also “float” up and sit next to it – creating a wrap effect around the floated element.

Floating Images for a Text Wrap Effect:
Floating came about as a way to deal with images and text together. It is a way to include an image inside of text, or have the text to wrap around the image.
The basic CSS declaration to float an image left or right, tells the image to "go be on the right side or left side" aligned inside of its enclosing element. It also tells any text below it fill available space to the left or right of the image.

X11-App Website Work

If you have not already done so, follow your Wireframe sketches to make digital wireframes for your homepage screens and create gray or other color boxes to be placeholders for the images you want to use. Use the screen sizes for mobile devices and larger desktop / laptop screens to guide the size of your dimensions for these.

Put your placeholder images used in you digital wireframes into your images folder in your website root folder.

Use your content inventory and information architecture to guide what textyou want placed on your homepage. Harvest this text from your files or type your new text. Decide on what copy (text) will be used as the headings (h1, h2, h3, h4) and what will be paragraph text.
Do the mark up (add the HTML tags) on your text in Brackets.

Often when designing a website you will want to use specific fonts. We will explore different methods for incorporating fonts into our webpages.

X12-Custom Fonts/Favicon

Font vs Typeface:
The term 'font' is used in digital typography, though it truly refers to a specific typeface. The term 'typeface' includes all the sizes, styles, and weights of that face, where 'font' actually describes a subset of the typeface.

Type Designers:
Fun fact: designing typefaces is a real job. It is a legitimate speciality area in the world of graphic design. Creating a single typeface takes an extraordinary amount of time and a keen sense of detail. Type designers spend their time drawing, adjusting, digitizing, scrutinizing, tweaking and packaging all those little glyphs/characters and their many different combinations into various typefaces.

The final typeface package is really a piece of software. And, like any software, it has copyright laws to protect it. A type designer needs to be paid for their work just like any other professional. Though designers who dabble in type design for fun will offer their works for free, professionals create a much higher quality product and therefore ask for payment.

Readily Available ≠ Free:
The typefaces that come preinstalled on your computer are not free. They are there because of licensing agreements between software and hardware companies and the font foundries or companies that own and sell fonts. Apple and Microsoft are two of the biggest players that have agreements with font companies. They pay to use those fonts on the system. The cost of those fonts is included in the cost of your computer.

As already stated, typefaces or fonts are protected by copyright. This means that that only the font creator has any rights over how the final font is used, sold, edited, etc. A font is essentially a piece of software, but also an original work, like a painting, novel, or scientific invention.
Copyright law protects creators, and anyone who infringes on those rights can be punished. By using a font that you do not have permission to use is a direct infringement on copyright and you risk incurring punishment. The punishments for copyright infringement can be serious. Penalties include fines and/or jail time.

Font-family Property and Font Fallbacks:
We can specify our font-family: property as one of several generic categories:
serif, sans-serif, monospaced, cursive, fantasy.  We are able to do this because we are simply asking that the user's computer display a sans-serif (or whatever category) font already installed on their computer.

The succession of Font Fallbacks:
If we use font-family: 'Times New Roman';... this tells the browser to display Times New Roman if it exists on the computer. We can request our own fallbacks by adding another font request following our first like this:

  font-family: 'Times New Roman', Georgia, serif;

This tells the browser to look for Times New Roman on the system first, if it does not find that, it is to look for Georgia, and if that can't be found, it would use a generic serif and display that.

Custom Fonts:
Websites have been, in the past, dependent on the fonts installed on the user’s computer. In the last decade or so, the ability to specify exact fonts has evolved. There are two general methods: hosted and self-hosted.

Hosted — This means that the font doesn’t live on our root folder, but instead that font lives somewhere else on the internet. Font companies or services (like Google fonts) provide designers with access to fonts by providing a way to link to them on their server. Copyright issues are managed and monitored by the hosting company. There are hosted fonts that are paid and those that are free.

Paid — Some font foundries or type designers offer paid options for using their fonts online. These are subscription-based models that allow you pay monthly to have access to a certain font or set of fonts. You pay for the rights to use the font on your site and for to be exempt from worry about copyright violations.

Free — These are similar to paid hosted fonts in that another company actually takes care of hosting the font files and provides access to those fonts. The major difference here is that you don’t actually have to pay for the service. 
Pros: No worries about managing your own font hosting, typically slightly easier to setup than self-hosted fonts
Cons: Privacy issues (your site can be tracked by these companies), Need to manage subscriptions and accounts for paid services, often limited to a certain number of fonts or sites for paid services

Some Services:
Google Fonts (Free)
Adobe Edge Webfonts (Free)
Adobe Typekit (Paid)
Cloud Typography (Paid)

Self-Hosted — This means that you are actually uploading your own font files (in a folder, just like your images) for browsers to download and display in your webpages. There are both paid and free models for this as well.
Pros: Full control of your content, You own (rather than rent the fonts), Good variety, No tracking of font use by third parties (privacy issues)
Cons: You are responsible for policing copyright, Your are responsible for managing hosting, Costs (you are paying for the hosting of the font files)

Some Services:
Font Squirrel (Free)
Fontspring (Paid)
Using Google Fonts (Hosted): Google Fonts is a great resource for free hosted web-fonts. It contains a huge and growing number of fonts to choose from and their service makes it really easy for designers to link to them using just a simple attached stylesheet.


Short for "favorite icon" a favicon is that tiny little image or graphic associated with a website you see when you bookmark the page. Web browsers use favicons in the address bar, on tabs, and in the book mark lists to identify sites visually. It is really an extension of the brand.
Favicons used to be typically 16 x 16 pixels square, though now they can be up to 48px square. They are saved with the name:  favicon.ico and are stored in the root folder of your website.

Creating a Favicon:
Favicons can be created using online services or any image editing software that allows the saving of .ico files. (Photoshop needs an extension). The image you use should be a graphic with very little detail and designed to match your site's identity. It will take some work to strike the right balance of detail and communication.

Experiment with an online service to create your very own favicon.,,, Dynamic Drive, to name a few.Follow the instructions provided by the site and then download the favicon.ico image to your computer.

X13-Commenting Your Code / Box Sizing + Column Grid

All comments are written with opening and closing characters and are used to demarcate a category or an area of similar things. Earlier we looked at using comments in our HTML to identify areas in the code. Today we are going to add comments to our CSS to help us organize our growing lists of styles.
In HTML Comments are written with an angle bracket and an exclamation point. Comments in CSS are written starting with a forward slash followed by an asterisk and a space. To close the comment, the characters are reversed. It looks like this:

/* LAYOUT and GRID */
DO THIS >>> There can be many categories, but for now, let's add the following five (5) comment areas to our styles.css: General, Layout and Grid, Typography, Images, Links

We have learned about the box model and have used it in several webpages already. The so-called boxes are the divs, sections, headers, etc. which are simply containers for page content that can then be styled with padding, border, margin. You may have already noticed that when you add padding or border to your parent element (div, nav, section, header, etc.) that the size of the element grows. That's because border or padding values are added to the dimensions of the 'box' (div, nav, section, header, etc.).

We have been able to use the float property to adjust how elements display on a page. This is good for simple 2-column layouts. However, once we get into more columns more control is required. Many, if not most, responsive websites use a multi-column grid structure to exercise greater control over the positioning of the page elements. A 12-column grid is fairly common. By adopting this approach, we can ensure that our pages look right in all viewports.

The 12-Column Grid:
So, a 1-column layout uses all 12 units, a 2-column layout would use 6 + 6 units, a 3-column layout would use 4 + 4 + 4 units, 4-column layout would use 3 + 3 + 3 + 3, etc.

Designer/developers have calculated how to best work with these columns. If we begin with a one column layout = 100%, the percentages for each of the 12 single columns will equal 8.33%, 2 columns then equal 16.66%, 3 columns equal 25%, and so on. We will use these percentages as values in our CSS.

We need to make CSS classes for each of the 12 columns. We will use class="col-number" where the specified number defines how many columns the parent element or div is to span. DO THIS >>> Reference the included screenshots of CSS as a guide and add the classes listed.

To control the layout each content area will be defined as a row of columns. Each of these rows needs to be wrapped in a parent element. We'll use a div to contain each content area. Since we are using a 12-column system, inside each content area or div the columns should always add up to 12.
Last time we added sections (or maybe you used divs) to contain the different areas of content for About, Features, Reviews, and Extras. Now we will make the first three content areas become a 3-column layout. DO THIS >>> Reference the included screenshots of HTML and add the divs for rows and columns.

We want our columns to float left, and have some padding. Let's use 10px. Inside each row in our layout the columns are floating to the left. By using floats we take the elements out of a 'normal' block state in order for them to sit next to another element. This means they are taken out of what is called the flow of the page. When this happens, other elements don't recognize them and so appear to overlay them. Ah, but we can fix this.


Project 1:
For project 1, we had to creat an app and develop key selling points and come up with a target audience. We then designed wireframes as well as some promotional material. Below you will find my Sell Sheet and User Jorney.

Click HERE to visit the App Website

Here is the wireframe for part 1 of project 1. This was the inital layout of the app screens.
Here is the wireframe for the user journey. Mapping out the user experience while using the app.
User Journey

Sell Sheet