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!


















Check out other CSS 3 posts made to see how we made the page in the screen shot.

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.

Monday, January 21, 2013

New Year!!!

Happy New Year!  I am taking a little break from the blog but will be back soon with more. Just installed Adobe CS6 and am exploring that for more great info and tutorials.

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