Drop Down Menu

Tuesday, November 26, 2013

No more boring fonts for your site!

Accommodating possible font options for every user has been a daunting task in years past.  True creativity in web design has suffered to make sites more usable.  The code for hosted fonts has been available but with a cost attached.  That is changing with HTML 5 and CSS 3, hosting fonts is becoming main stream.  Let’s dig into using specific fonts for our web designs.

Tasks involved:
  1. Acquire the font you wish to use on your site.  You can do a search to find an endless list of possible choices.  I downloaded a font I liked from http://www.fontsquirrel.com/ .
  2. Unzip the download, and remember to include the font file when you upload your site.
  3. Add a style linking to the font.
  4. Apply the font to the html page.

You should be able to handle the font download so let’s dig into the code to make the font work on your site.

link to the font: Add this in the style tags.

@font-face
{
font-family: HennyPenny;
src: url('HennyPenny-Regular.otf'),  url(' HennyPenny-Regular.eot'); /* IE9 */
}

CSS to apply the font: Works with other tags as well.

p {
font-family: HennyPenny;
font-size: 12px;
}


I added the font to the page created for earlier HTML 5 posts, check out the fancy font!



















Tuesday, November 19, 2013

HTML 5 Semantics = cleaner code!

In the past if you wanted to style generic tags like the paragraph tag you could use p for the selector and add properties that would affect every paragraph tag on the page or in the document.  Or you could have just created class selectors to apply to different paragraph tags.  All viable options but a  lot of extra coding is required and great organization is needed to apply the right class to where you needed it used.

Now with semantics you can format every paragraph in a specific section by using pseudo selectors.   If you need a review on how to use HTML 5 semantics please review previous posts explaining

Using our example of a paragraph tag let’s look at how we can now format text according to semantic element:

New Way
Old Way
CSS EXAMPLE:
header p {
font-family: helvetica, arial, sans-serif;
font-size; 2em;
color:#000000;
}

section p {
font-family: helvetica, arial, sans-serif;
font-size; 1em;
color:#336699;
}

HTML EXAMPLE:
<header>
<p> My company rocks content. </p>
</header>
<section>
<p> My company rocks content. </p>
</section>


CSS EXAMPLE:
Applies to every paragraph on the page
p {
font-family: helvetica, arial, sans-serif;
font-size; 1em;
color:#000000;
}

OR for formatting paragraphs differently

.class {
font-family: helvetica, arial, sans-serif;
font-size; 2em;
color:#000000;
}

.class2 {
font-family: helvetica, arial, sans-serif;
font-size; 1em;
color:#336699;
}


HTML CLASS EXAMPLE:
<p class=”class”> content for first class goes here </p>
<p class=”class2”> content for second class goes here </p>



Of course the less code I have to write the better! You can use this method for other semantic tags and with tags other than paragraph. More tips coming soon.

Tuesday, November 12, 2013

Formatting HTML 5 Semantic tags with CSS 3

Last week we got a taste of HTML 5 semantics, this week we will look at how to style them using CSS 3.  Really both html and css will work in tandem even more than they have in the past.  In addition the old html formatting tags are depreciating and will soon be obsolete.  So learning CSS is a must. 


Let’s build this diagramed layout. So you can see how to use the semantic tags.  First we need to look at the CSS.









header {
background-color:#EFCE16;
width: 100%;
height:90px;
clear:both;
}
We are specifying background color and width in percent so the screen will be adjustable.  There is a height added for the purpose of making it show in this example, but you can make it a percent or experiment more with that, the last style clears any possibility of this element to float.
nav {
background-color:#918F87;
width: 100%;
height:25px;
clear:both;
}
Just like the header we have background color, flexible width, height for showing the element in this example and we are clearing any floats.
section {
background-color:#EFE3A7;
width: 70%;
height:200px;
float:left;
}
The section is the main column so in addition to defining a themed background color and a float we need to make sure the width is smaller to accommodate a column on the left.
aside {
background-color: #1294C1;
width: 30%;
height:200px;
float: right;
}
Using aside for the right column means we need the width to add accommodate the design.  That means if section is 70% then aside can’t be larger than 30% or it will drop below its intended resting spot.  Of course since section floats left aside must float right.  Of course we have a coordinating height and added a background color.
article {
background-color:#0B6994;
width: 60%;
position: absolute;
left: 20px;
top:180px;
height:30px;
}
Since the article is dropped in absolute positioning was used, with top and left values defined.  This can be experimented with further to help it drop in just the right place.  Like other elements background color, height and width were added to the style.
footer {
background-color:#EFCE16;
width: 100%;
height:50px;
clear:both;
}
For this layout footer can be set up like the header.

So how could this code look on an actual html page?

<!DOCTYPE html>
<html>
<head><title> test </title>
<style type=”text/css”>
header {
background-color:#EFCE16;
width: 100%;
height:90px;
clear:both;
}

nav {
background-color:#918F87;
width: 100%;
height:25px;
clear:both;
}

section {
background-color:#EFE3A7;
width: 70%;
height:200px;
float:left;
}

article {
background-color:#0B6994;
width: 60%;
position: absolute;
left: 20px;
top:180px;
height:30px;
}

aside {
background-color: #1294C1;
width: 30%;
height:200px;
float: right;
}

footer {
background-color:#EFCE16;
width: 100%;
height:50px;
clear:both;
}

</style>
</head>

<body>
<header> Page header goes here. </header>
<nav> HOME | ABOUT US | CONTACT US </nav>
<section> Page content goes here.</section>
<aside> Right column content goes here. </aside>
<article> Special attention getter goes here. </article>
<footer>Copyright, legal, text links. </footer>
</body>

</html>

Check out how this code looks in a browser with two potentially different screen widths:



This is just a small taste of how HTML 5 and CSS 3 can work together.  More exploring and posts coming soon! If you missed the overview of semantics check out last weeks post!

Tuesday, November 5, 2013

HTML 5 Semantics

What are HTML 5 Semantics?

Semantic tags are tags with a special purpose.  Non-semantic tags like <div>  and <span> are generic in use since you could apply them pretty much anywhere in your code and style them  for use. There are tags that we are already familiar with that fall into the semantics category like <form>, <table>  and <img> but there are new tags with a very specific purpose that will make organizing a layout much easier to do.

Some of the new tags seem obvious  but others might need a little more explanation, so let’s talk about the most common semantic tags a little further.

<header> used to hold a banner, business logo or tagline sitting at the top of the page.  Don’t confuse this tag with head which is a structural tag and does a completely different job.


<nav> this tag should be easy, it holds navigation.

<footer> the bottom of most pages could have text links, copyright information, and maybe legal disclaimers.  This tag is meant to contain these elements.

<section> contains elements that are part of the site theme and in the main flow of content.

<article> used for blocks of copy that might pop out more taking on a contrasting color or element.

<aside> used for content that runs in a column next to the main content area.

Now that we have a taste of semantics for HTML 5 we need to dive into how we can use them, and that will take a little CSS 3 which we will tackle next week.

Tuesday, February 12, 2013

Targeting your market


I was working on prep for a class I teach and realized how much we talk about targeting the right audience and I have never mentioned that here.  So I decided to put together a few tips on designing for your audience.

First off you need to determine who your audience is.

Your business or service might be so cut and dry you know exactly who your customer is, that’s great. Some of us have a wide range of potential customers and  industries we can target which makes targeting a little more difficult.

A few things we can ask ourselves to determine who we are talking to:
  1. What is the age range of our customer? There are so many ways to break out the age range; youth, adult, senior as one example.  If you have a product geared toward a specific decade then you might want to break it out further for that group.  Once you determine your target age range you can focus on trends that appeal to that group. For example youth would be attracted to cartoonish or brighter colors, where as seniors would enjoy a little more muted colors and imagery of folks a little closer to their age group.
  2.  What might the possible educational level be? Educational level meaning high school graduate, tech school training, undergrad degree, graduate degree, and higher.  Knowing this information will help to determine appealing content that might appeal to various education levels.  For example youth will would require simple phrases since they typically don’t have a wide vocabulary yet, where as someone with a graduate degree would be more drawn to a more diverse wording.
  3.  Is our audience technically savvy or at least internet savvy? Technically savvy markets will be surfing the web and using a computer on a daily basis for work.  Of course there are ranges of savvy comfort levels but for the most part they can troubleshoot simple technical challenges and know when to ask an expert for help.  Less savvy users might have a little technology fear because they don’t use it for work.  To apply this for a web site design I would know that savvy visitors will know where to find common site navigation and how to submit a form. So direction can be minimal and content can get to the point. Less savvy visitors would need some hand holding, my home page might give an overview of where to find things on each page and possibly even how to navigate the site.  Forms would have details on how to fill  out and submit instead of anticipating they already know.
Yes, targeting a market is much larger than I discussed but hopefully this will help you start thinking about who your advertising or site is talking to and how you might need to accommodate them to get better results.

Tuesday, November 20, 2012

Adobe Acrobat for Creative & Business – Forms Part III


So far we have discussed how to add and format form fields, we added text fields, multi-line text fields, a radio button and a drop down box. There are other fields that can be added and managed much like these fields.  You can add check boxes, list boxes, bar codes and buttons.  In the past buttons were fairly two dimensional in how they worked but now you can add interactivity to that button to make the form do so much more.

To add a button click Add New Field found under the form tools on the right, click Button from the sub-menu and click on the pdf where the button should go.



Name the button, and since this will be a submit button we will click the Required box.  Now click All Properties to launch the palette.  You can edit colors, fonts, and button states.

Let’s go straight to the Options Tab.  The first options is Layout, it allows us to make the button a text button or an icon which would allow us to use an image for the button.  Click the field to view possible options.


Select From:
  • Label Only: is the default button with the name of that button on it.
  • Icon Only: is the image we upload for an icon used for the button with no additional label added.

Or we can choose from combinations of both icon and label with: icon top, label bottom; label top, icon bottom; icon left, label right; label left, icon right; label over icon.  Choose the set up that best fits for this button.

Button Look
Next you can customize button behaviors by clicking the drop down and making a selection.


Button Behavior options:
  • None: Keeps the appearance of the button the same.
  • Push: Specifies appearances for the Up, Down, and Rollover states of the mouse. Select an option under State, and then specify a label or icon option:
    • Up: Determines what the button looks like when the mouse button isn’t clicked.
    • Down: Determines what the button looks like when the mouse is clicked on the button, but before it’s released.
    • Rollover: Determines what the button looks like when the pointer is held over the button.
  • Outline: Highlights the button border.
  • Invert: Reverses the dark and light shades of the button.

If you are using an icon you can upload different icons for different button states under Icon and Label.  Clicking on Up, Down, or Rollover (if available for behavior you chose) then click Choose Icon on the right to select an image from your computer to use for an icon.

For label only or labels with the icon type the name that should appear on the button in the Label field.  Now the look of the button is set.  Let’s make it do something.

Button Actions
Click on the Actions Tab, the first thing we can do is select a Trigger with options of Mouse Up, Mouse Down, Mouse Enter, Mouse Exit, On Blur, On Focus



Select Mouse Down because we want the action to take place when the button is clicked.  From the select Action Menu you will set up what happens when the button is clicked. Choose from a variety of options including sending someone to a link, making a sounds, running a script showing a hidden layer or what we want to do submit a form.  Click the Add button.



The last step is setting up where the information entered into the form will be sent to.  At the top Enter a URL for this link type in where the form entries would go.  We have two choices we can enter an email for all the form data to be sent to or we can set up server information to dump the form info into.

Click Close at the bottom of the pallet and let’s view our completed form.


Check out the radio buttons, text boxes, drop down and submit button.  All as we set it up and ready for information to be entered into.  Notice the fields that were marked as required have a red outline.  Our form is ready for use!

If you missed the first two parts check out basics & text fields and additional fields previously posted.

Remember you can't do any of this without the full version of Adobe Acrobat, get your version now.  Adobe Acrobat 8.0 Standard Windows

Wednesday, November 14, 2012

Adobe Acrobat for Creative & Business – Forms Part II

Last week we got started with forms by adding a basic text input field, this week we are going to look at more form features and finish adding input fields to our example pdf.

We can add a multi-line text field the same way we added a single line text field, click Add New Field, then selecting Text Field and click on the pdf where we want it added.



Click All Properties to launch the palette. Just like the single form field you can edit a variety of things like the font and color.  To make this a multi-line form click the Options tab and click the Multi-line check box. Click the Close button to look at our form.




Multi-line is applied to the message box, however it is still small, and would hard to type much info in, so we need to make the box bigger.  Click on it to select, then click on one of the little dots on the side or bottom and drag it out to your desired size.


Now, let’s add more fields to the form.  In the Tools Menu on the right click Add New Field, then select Radio Buttons.  Click in the pdf file to place the radio button. 


To use a radio button group there needs to be more than one radio button placed.  Click Add Another Button at the bottom of the palette window and click in the pdf to placed another, continue doing this until all the radio buttons for this group are added.  It automatically assigned  a name and grouping for our buttons, each is unique so we don’t need to change it but we can by typing new names in each box.

Finally let’s add a drop down menu by clicking Add New Field in the Forms tools palette on the right, then click Drop Down from the sub-menu.  Click on the pdf where the new drop down box should go.



Like other input fields you can change the name and click the Required Field check box to not allow form processing until a selection is made from this field.  

Click on All Properties to add items to the drop down list.



Like the other entry fields you can edit the color, font and look of the test in Appearance.  To add items to the list click the Options tab.  Notice towards the top Items, Export Value and Item List

Type the name as you want it to appear on the actual form in the Item field.  If the information is going to be exported to a database the Export Field should have a value that matches the database configuration, for example I put TX for Texas.  This field can be left blank if not applicable.  


Click the Add button next to the Item field and you will see the name added to the Item List.  Repeat entering the name into the Item field and clicking the Add button until all items for the drop down are added.

Once all items are added move down to the item list, you can click on each item and move it up or down with the buttons to the right, this order will be the order items will display on the actual pdf form.  You can also delete items with that button.  

Remember clicking an item in the list and then clicking close (at the bottom of the palette) will make that item the default value for the drop down.

Check out our form!  We did radio buttons, text boxes including a multi-line box and a drop down.  I am going to finish dropping in form fields to get ready for next weeks buttons post!

Adobe Acrobat 8.0 Standard Windows