My Blog

X01 - Creating an Interactive PDF

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 https://www.uwsp.edu/acadaff/Pages/handbook.aspx 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 https://www.uwsp.edu/gep/Pages/default.aspx 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.

Learning Hyperlinks
Learning Hyperlinks

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. > 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. including spaces — Web browsers interpret spaces as special characters, so, don’t use them in your file or folder names. long, wierd names — You will not be the only one working with the files for a given website, so using short, descriptive names is a good practice. varying your cases — Commonly all lowercase is used for file naming, but not always. Some people use what is called camelCase and some use all UPPERCASE. It is important, however, to keep your naming method constant.

flying rooster
Flying Rooster

X02 HTML Basics — we begin

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.
html or h1 or p
Tags come in pairs, a start and an end tag.
title /title
Elements are the parts made from using tags.
title Flying Rooster Company /title
Elements are nested.
head title Flying Rooster Company /title /head
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.

X02 Part 2

HTML Basics About Writing Code Text Editors
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 TextMate Brackets for our first foray into web page coding.
Elements + Attributes
You remember elements are the parts of HTML defined by tags. Other key concepts are:
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: bgcolor=”#FF0000”
In this example the body element is being assigned the attribute bgcolor for background color. The background color has a value that equals red.
• 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.

X03 - Working with Content

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

CSS Styles
CSS Styles

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!

X03 Styling with CSS

In your ‘styles.css’ copy the first rules set from the css-screenshot...also written below
body {
background-color: darkslategray;
}
h1 {
font-family: sans-serif;
text-transform: uppercase;
color: rgb(49, 138, 140);
}
Now we have to tell the browser to link these style instructions to our HTML pages. Open your index page.
Inside the head section type this:
link rel=”stylesheet” type=”text/css” href=”styles.css”
Look over this line of HTML code to figure out why it does not work. (Hint: check the href) Make the correction and reSave the document.
Back in your styles.css add another rules set for the paragraphs as follows:
p {
font-family: sans-serif;
font-size: 100%;
font-weight: 100;
line-height: 150%;
color: rgb(129, 228, 228);
}
Now add a rules set for the h2 heading element that mimics the h1 element style.
You can apply the same style declarations to more than one selector by adding it right after the first selesctor, separated by a comma.
h1, h2 {
font-family: sans-serif;
text-transform: uppercase;
color: rgb(49, 138, 140);
}

X04 - CSS Links

1. MAKE A NEW ROOT FOLDER
a. Name it ‘connections’ using all lowercase and no spaces
b. Add a copy of your boilerplate.html file into the folder.
c. Make a new folder inside the root for your ‘images’.
d. Copy the images from the X04 download into this folder.
e. Make a new folder inside the root for your ‘css’.
2. BUILD AN INDEX PAGE, 3 OTHER PAGES & A STYLES SHEET INDEX:
Use your boilerplate to build a new index page. Add this title: Connections: your past, your present and your future. Add a link to the style sheet we will build:
link rel="stylesheet" type="text/css" href="styles.css"
Add four (4) text links to the top of the page: Home, Past, Present, Future
3 PAGES:
Make 3 new pages and name them 'past.html', 'present.html' and 'future.html'. On the index, make the text links link to these pages. Copy/Paste the text links to the top of the 3 other pages.
On the index, Copy/Paste these headings and paragraphs of text into the body:
Page Heading h1: Connections Between your Past, Present and Future
Sub heading 1 h2: Know your Past, Know Where Your Roots Are
Paragraph 1 p:

Links
Links

In order to know yourself, you need to get to know your past. This means finding out, if you don't already know, where your people are from. Your identity and your way of walking in the world is shaped by the people in our past and built on their connections to the land—your Homeland. Certain places that make you feel comfortable or resonnate with you on a deep level, will almost always be reminiscent of what is your Homeand, through your lineage.
Sub heading 2 h2: Celebrate your Present, Dance to the Music
Paragraph 2 p:
'Be Here Now' is a well known Buddhist phrase that means to be fully present, to stay in the moment, wherever you are. While it is seemingly impossible to achieve this for more than a few fleeting seconds, most of us see the benefit of practicing this state of mind. If we can release ourselves from either obsessing over past actions or worrying about the unknown future, we can take part in the now. Wherever you are you can find a reason to complain or you can choose to celebrate what is for now and accept, learn, laugh and dance to the music.
Sub heading 3 h2: Be Open to Future Opportunities and Possibilities
Paragraph 3 p:
You may or may not love the circumstances you find yourself in on any given day. You may not like the politics of the day or the stat of your relationships. The truth is that change is the only constant in life, so you can expect that change will happen, and you can actively work for change in your life, in your relationships and in your community. This begins, of course, with a willingness on our part to face and accept what is happening in the present. Our capacity to accept truth and the courage to see clearly in the present is, coincidentally, increased greatly when we posess a sense of who we are and where we came from. In this way our past is connected to our present and to our future. The future of our lives and the planet depends in a powerful way, on our ability to know the past—what has shaped events, and what has been hidden from common knowledge—and see what is happening in the current time.

X05 - HTML/CSS: images, captions & background images

Captions
Captions

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.
IN PHOTOSHOP 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.
ADD SMALL IMAGES TO INDEX
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.
REVISE CSS — MARGINS
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.
After copying your connections folder to your desktop, copy the image 'colorbar-1px.png' from the X06 download, to your images folder.
Open Brackets.
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. So the code looks like this:
body {
background-image: url(../images/colorbar-1px.png);
}

Background Image CSS
Background Image CSS

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
{ https://creativemarket.com/blog/learn-the-trick-to-creating-seamless-patterns-in-illustrator }
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 - The 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. Let’s change the background color of the body element.
body {
background-color: lightblue;
}

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.
h1 This is a main heading /h1
p This is a paragraph /p
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

Box Model Properties
Box Model Properties

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;
Border
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;
Margin
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.” Now add...
* {
margin: 0;
}
This turns off all margin defaults.
See how the space disappeared? Even the space that was on the left and right side of our h1 and p elements is gone. That is because that space was actually default margin placed on the body element. The white space between the h1 and the p was default margin placed on those elements.
This reset technique can be used on any webpage to reset any default margin on the page. You can, and will want to add padding: 0; to the reset as well. This way you can control all the spacing manually on your site giving you precise control over your layout.
Now that we’ve zeroed out all default margin, let’s go ahead and add some back in.
h1 {
margin: 25px;
}
Adding 25 pixels of margin to all four sides of our h1, added equal space to the outside of that box. Like border or padding, we can add margin to individual sides. Let’s do it. Add 25 pixels of margin to the left and right side of your paragraph.
p {
margin-left: 50px;
margin-right: 50px;
}
The analogy I have devised to think about these box properties relates to actual boxes.
padding is like the packing peanuts inside the box,
border is like the kind of cardboard (heavy-duty, corrugated, thin, etc.), and
margin equates to spacers or bumpers attached to the outside of a box.
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).
Let’s add an h2 element to try this out ...type in your index.html:
h2 This is a secondary heading. /h2
In your CSS
h2 {
background-color: pink;
padding: 15px;
margin-top: 25px;
width: 500px;
height: 200px;
{
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.
In your CSS add to the h1 text-align: center;
Save and Refresh...
Now add to the h2 text-align: right;

X07 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
We will continue working with our 'spaces' root folder. Copy your root folder to your Desktop. Open Brackets. Open Folder and select the 'spaces' folder on your desktop.
Make a New HTML page for more on CSS (name it 'moreoncss.html') and a new page for type (named 'typeonscreen.html). Type in the basic boilerplate for the HTML pages.
Then type in or Copy/Paste the text for our lesson is on the screenshots taken in Brackets.

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.
ADD CONTENT
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 /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.
BUILD NAVIGATION LIST
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.
Here is the list to code in and where it should go:
In order to make our list into navigation we need to add the code that makes the text into links, like this: Leave the href as an open space for now. You should be able to code in the first one and then copy/past the start tags for the rest. Brackets will help you with the close tags.
ANCHORED LINKS

Unordered List
Unordered List

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
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:
h1 {
font-family: Trebuchet, sans-serif;
font-size: 3em;
color: skyblue;
}
h2 {
font-family: Trebuchet, sans-serif;
font-size: 1.5em;
text-align: center;
background-color: slateblue;
padding: 15px;
margin-top: 15px;
width: 400px;
height: 30px;
}
h3 {
font-family: Trebuchet, sans-serif;
font-size: 1em;
color: slateblue;
margin-top: 10px;
}
p {
font-family: Trebuchet, sans-serif;
font-size: 1em;
border-top: 1px dashed slateblue;
margin-top: 10px;
margin-bottom: 10px;
}
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. Add the following:
img {
max-width: 100%;
}
This tells the browser to resize the image to the screen size.

X09 - Touch Points, Hit Points & 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:
ul {
font-family: Trebuchet, sans-serif;
font-size: 1em;
padding-top: 5px;
text-decoration: none;
list-style: none;
}
The bullets are now gone from our 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; Your CSS should look like this:
ul {
list-style: none;
background-color: orange;
}
li {
background-color: lawngreen;
}
a {
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.
Here’s the new CSS for my link:
a {
background-color: aqua;
display: block;
padding: 20px;
}
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 CSS looks like this:
ul {
list-style: none;
background-color: orange;
padding-left: 0;
}
Centering the Link Text
To make this look a little better, let’s begin styling the text.
First, let's center the text inside the link by adding the property text-align: to my link CSS and the value center;
We can center any text inside a block-level element this way.
a {
text-align: center;
}

X09 The Hamburger / CSS Classes — 'place'

REVIEWING OUR PROCESS
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.

Hamburger
Hamburger

NAVIGATION PLACEMENT
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.
All right, let’s add our own hamburger button. Find “hamburger.png” in the X09 folder and copy it to your images folder. Go to your index file and before the xop-logo, add an img tag and make it a link using the a href=" " /a element. Here’s the HTML:
a href=" " img src="images/hamburger.png" /a
When the user clicks our hamburger button, we want it to reveal the navigation. We already learned how to use anchored links, so we'll use this method again.
Revise our Navigation System
First thing we are going to move our unordered list to the very bottom of the HTML page. Highlight the unordered list from ul through /ul then hit Edit > Cut, and then go down to the line right before the closing /body tag and Edit > Paste the unordered list.
Now we need to setup our anchor link. Remember that to set an anchor we need to give our navigation an id attribute.
Let’s name our list 'mobilenav'... so add id="mobilenav" to the opening ul tag.
The HTML on my navigation ul looks like this:
ul id="mobilenav"
li a href="#Do">What We Do /a /li
li a href="#Done">What We've Done /a /li
li a href="#Think">What We're Thinking /a /li
li a href="#Who">Who We Are /a /li
li a href="#Contact">Contact Us /a /li
/ul
The second part we have to do is to set the href or address in our hamburger button link. It should look like this:
a href="#mobilenav" img src="images/hamburger1.png" /a
Differentiating Navigation Links From Other Links
Our last piece of work on this navigation change is to make the hamburger button styled differently than the other links. The easiest way to do this is by using more specific CSS selectors to target all links inside of an unordered list.
Let's change our CSS link selector from a { to ul a {. By adding the ul it tells the browser that it is to look for the first element —the unordered list— first, and then to look for the next element —the a— nested inside the first. Here’s my new link CSS:
ul a {
background-color: rgb(173, 235, 235);
display: block;
padding: 25px;
margin-bottom: 5px;
text-decoration: none;
text-align: center;
}
CSS classes
First, let's review what we know about CSS.
We use CSS to style the look or the presentation of our HTML content.
CSS can be applied by linking the HTML file to an external style sheet, adding the styles directly in the head of the HTML document, or (rarely) used inline right next to specific content.
The syntax or structure of CSS looks like this:
selector { property: value; }
There are many different properties for the different selectors.
You can gang or group selectors if they share the same stylistic qualities.
Selectors can be made more specific by nesting one inside another. A special kind of selector is called an 'id selector' and uses a '#' to denote it. Just like an individual identity, an id is thought of as unique. It can only be assigned to one thing (on a particular HTML page).
Now, we will look at how we can use CSS classes to style some of our text better.
In the same way that Character and Paragraph Styles work in InDesign, CSS styles can be assigned to whole paragraphs p or to parts of content in paragraphs. We can create class selectors to style specific parts of a paragraph.
Id selectors use the # and class selectors use a period. Let's just try it out on our existing text!
In your CSS file add a new class selector to style the information about date, day, and time. We can name it 'when' and in the CSS it will look like this:
.when {
font-style: italic;
color: darkblue;
}
You can style yours differently, of course. Now let's make one for the venue or where the event happens. We can call it 'where.' Lastly, let's make a class selector that differentiates the title and the kind of event. Here's the CSS
.when {
font-style: italic;
color: darkblue;
}
.where {
font-style: italic;
color: green;
}
.event {
font-family: "Franklin Gothic Book", sans-serif;
font-style: italic;
}

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.
BEFORE WE DIVE IN...
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 header /header
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 /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. Here's how it should look:
header
a href="#mobilenav" img src="images/hamburger1.png" /a
img src="images/xop-logo.png"
/header
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.

Structure
Structure

Specificity
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.
Additional Footer Content
Another common piece of footer content is a copyright statement and symbol. Let's add one to our footer. After the unordered list, hit Enter to make room.
Add p to begin our copyright paragraph.
Type: Copyright, add a space and then to get the copyright symbol we have to use a special bit of code.
Type: © to create the © symbol; add a space and then
Type: 2017 and then close the paragraph: /p.
The Nav Element
HTML offers us a pair of tags to help us organize and identify the major navigation on our page. By wrapping our links in a pair of nav /nav tags it allows us to use as a nested selector and helps us scan the code to more easily identify and edit our site navigation.
The Section Element section /section
Another organizational piece of HTML is the section element. A section defines an area of content that is separate or distinct from the rest of the content.
Let's add some sections. First, add one section for the overview at the beginning of the page, then we'll add one for the larger area that contains the events. Now, let's add some content to our page and make it another h2 tag for 'our sponsors'. Open the Word doc, 'Sponsor Copy' and copy and paste this copy into a third section.
Once you have the content in the page, you'll need to create a class for the list of sponsors in your CSS.
Include the following properties in your class:
font-family: "Franklin Gothic Book", sans-serif;
font-size: .8em;
line-height: 125%;
list-style: none;
text-align: center;
Reference the class on your HTML like this:
p class="sponsor"
CREATE Portage County
Stevens Point Sculpture Park
ADD IMAGE CONTENT
Replace your placeholder images with the images supplied,
You will have to first work with these in Photoshop to Optimize them for web and size them appropriately.
Name each image for the event and save in the best image format. Save these into your images folder.
Go into your HTML and adjust the code to call the appropriate image.
REVIEW: ID and Class Attributes / Selectors.
The most specific we can get is to use the element as the selector coupled with it’s id attribute. Remember when we added the id attribute to our h2s? We discussed adding this for anchored navigation but it has a second use, which is even more powerful.
Giving an element and id attribute (id=), means you are giving it a name, but not just any name… an absolutely unique name. You should not ever repeat an id. Think of them like social security numbers, every person has one of their own. Classes can be reused on multiple elements, but id’s are all unique and should not be reused for any reason.
Because the id is unique, then if you use the element and it’s id in the CSS, there can be no other element that has that in common and you can style just that single element if you so choose. A good example of an element that might need to be uniquely styled would be the logo of our website. It seems to be sitting awfully close to our hamburger button. It might be better to give it just a little bit of breathing room by setting it to have some margin on the left.
Now, we wouldn’t want to do this to all images, so using img as a CSS selector doesn’t seem appropriate. We could use a class, but there is only one logo image so that doesn’t seem appropriate either. Instead, we will use an id – because id’s are for elements that only appear once one the page.

X11 - App Website Work

BEGIN POPULATING YOUR HOMEPAGE
PLACEHOLDER VISUALS
Put your placeholder images used in you digital wireframes into your images folder in your website root folder.
BEGINNING TEXT

GroceryPS Site
Grocery PS Site

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.
CUSTOM FONTS
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

TRUTH ABOUT Fonts
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.
Copyright
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.

Playing with Fonts
Playing with Fonts

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.
Now, let's find suitable web fonts to use.
Navigate to Google Fonts.
Scroll the page and you’ll see tons of fonts to choose from.
You can filter the kind of face you want using the check boxes on the side.
Each typeface is displayed in its own area offering additional content on rollover and many options for previewing the font styles, the specimen and characters. You can even try typing in new text.
By clicking the red plus sign, you add it to your collection and it will appear in the 'drawer' at the bottom of the page.
Let’s choose Josefin Slab and Open Sans. When you open the collection drawer it shows you the text to add for linking to the stylesheet. Let's add that to the head of your test html doc, now.
Find and try out a new heading and a new paragraph font.
It's fine to play around and test out different typefaces, though remember to use an appropriate bodytext face for your website text.

X12 Favicon

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. favicon.cc, favicon-generator.org, faviconer.com, 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

USING COMMENTS
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 & GRID */

CSS Commenting
CSS Commenting

I happen to like to use ALL CAPS, but that's not required. You can use any typographic case your heart desires... UC, lc or U&lc.
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 & Grid, Typography, Images, Links
BOX-SIZING PROPERTY
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.).
The box-sizing property addresses this issue.
In the following CSS an asterisk (*) is used as a selector, which basically means:
"Hey, you, browser... apply this to all elements on the HTML page this stylesheet is attached to."
* {
box-sizing: border-box;
}
The value 'border-box' includes the values of padding and border in the size of the box.
COLUMN GRIDS — CONTROL YOUR LAYOUT
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.
DEFINING THE COLUMN STYLES — IN YOUR 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.
EACH CONTENT AREA — IN YOUR HTML
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.
FLOATING + PADDING
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.