Web Accessability

As I have read more and more about this ADA, American Disabilities Act, which have lawsuits around because this site and/or that site don’t follow protocol is something that is very upsetting. What next will they put in as a rule for individuals like me; going into the Web Design field? There are more individuals diagnosed with disabilities here and there and this will make them fall under this “lawsuit” if we do not follow the guidelines they set forth.

Does that mean that Hospital sites are going to be sued because they didn’t put their entire site information into a language that someone with a learning disability could comprehend? Does this also mean that sites that offer information about the law be considered the same deal, with someone that has a learning disability can’t understand the langauge?

Learning disability affects a lot of individuals in a lot of ways:

  • Dysgraphia
  • Dyscalculia
  • Dyslexia
  • Dyspraxia
  • Non-verbal Learning Disorder
  • Auditory Processing Disorder

While we are supposed to use the POUR Accessibility Principles:

  • P = Perceivable
  • O = Operable
  • U = Understandable
  • R = Robust

Who defines what should be considered understandable when it’s an individual basis that defines it?

Here is a site to get more information about different disabilities:

Here is a site that discusses more in-depth about POUR:

Here is also a site that discusses the ADA aspect of the correct usage one should do when designing a website:

Here are some benefits though if you are in Compliance of the law:

Everyone can read it
Viewable by any Internet browser
Viewable by any computerized system
Viewable by foriegn language-enabled computers
Viewable by different types of hardware and software media (cell phones, handheld computers, Web Tv, etc.
Avoid lawsuits from non-compliance
Search engines adore your pages
Faster page loading times
Greater odds of visitor return
Easier to update, repair, and change in the future

Lorelle VanFossen Benefits of Compliance with Web Standards

Looks like the list of companies that were sued were huge multi-million dollar companies, here are a few:

Netflix
Amazon
Soutwest Airlines
Ramada
WebTV
Target

Lorelle VanFossen Basic Facts and Resources You need To Know About Web Accessibility

Now what would happen to individuals that want to use a site like freeforums.com to make a website or forum, would those individuals be sued? Since they are low on the totem pole, do they get overlooked?

Advertisements

How to Change a Child Theme with InstantWordPress

First thing you want to do is get the InstantWordPress program and put it onto your portable hard-drive, 8-GB (Gigabytes) to a Terabyte.
Once you do that you will need to start it up and run the program to download it to your specific location.

Now open the program and you will see this image:

Instand Word Press Menu with Options in blue buttons

Now you will see a Local WordPress URL:, next that a box with an address, and a box with Copy WordPress URL Clipboard. Put the word login after the / and go to Firefox and put it in the address bar and you will see a login screen for WordPress. Type ADMIN for user-id and type Password for the password.

Once you are on the site and you can see your WordPress blog, go to Appearance and update the WordPress theme Twenty Eleven. After that updates you will want to put in the Child Theme by putting it in the Theme Folder of the Instant WordPress Menu and going to the site and you will see the Theme under Appearance>Themes.

Once you have done that, now it’s time to go to the Editor in the Administration Panel,
Changing the code in Editor for the Child Theme
List of folders with dates, time and type of document
David Tenant picture with words to right

I Changed the:

  • Name
  • Autor Name
  • Font
  • Size of Font
  • If it’s a Serif or Sans-Serif

It’s now:

  • Comic Sans and Serif
  • Font Color Green
  • Font Size to 25px

How to upload your WordPress site is to first go to your blog and go to your Administration Panel and go to Tools>Export>Export and keep the the All Content circle filled and click on the Download Export File. Export Options
The picture below is the example of the file you will need to import into the Instant WordPress site.
XML Document to Export
Here is how you would Import the file into the Instant WordPress siteImport Options with choices .
You would go to Tools>Import>Express , then you will need to search for were the .XML document is and click Upload File and Import.

Here is what I ended up with as my end result.
Site with postings and headers of those postings in green font

Continue reading

Text Signature in Photoshop for Semi-Intermediate User

You will need to know a bit about Photoshop for doing this tutorial. This is a method I have used from time to time and it can be pretty cool if used with the right font and photo. First you want to start off with a signature size of 500×200 and 300 ppi.500x200signaturebox

Search for a good think font to use, I went with Mangal that is in Photoshop. The box next to it is Character. To get the menu you go to View and then click on Character in the drop down menu.

  • font size was 36 pt
  • leading 30
  • tracking 75
  • vertical scale 80%
  • horizontal scale 125%
  • used all capsThe word D, E, L on a transparent background

Once this is done, you will need to find a picture to go into a new layer and cover it. I am going to create one for this tutorial out of brushes and stamps.This will give you an idea of how it will look.  You will want to go to Image and then Apply Image to get all the layers into 1 layer for this. This will not combine all the other layers, so you are able to go back and make changes easily this way. Orange, Green, Yellow, and Red Grass and Leaves Background

Now that you have the background you want, now it’s time to make the text signature. With the text you provided in the earlier step, you will need to bring that on top of the Apply Image you just made. Copy (CTRL+J) this layer, just in case you make a mistake and UN-check the Eye so you don’t see it. Go to Type and pick from the drop down menu, Rasterize Type Layer. This will allow you to do the necessary steps next.
Black Letters, D, E, L, on a Green, Yellow, Red, and Orange BackgroundThis step you will need to use the wand tool to select each of the letters and then go to the background apply image layer and delete the letters out of it (Also UN-check the eyes for the layers underneath and the layer with the rasterized text).
Transparent D, E, L, in a Green, Orange, Red, and Yellow Background

Take the UN-rasterized text layer, which should be the top layer and check mark the black box next to it to bring the eye back. Now copy (CTRL+J)  the layer above and bring it above the UN-rasterized text layer, which now this should be the top layer. Now click on the layer and go to Filter>Blur>Gaussian Blur and move the layer to where you think it looks right for your design. Now right click  on the UN-rasterized text layer and choose,
Blending Options to add a stroke. What to do in the stroke panel (Play around with it though to add your own twist to the design you want to make):

  • Change color to orange
  • Blend mode to darken
  • 4 for size of stroke
  • Center in position
  • 100% opacity

D, E, L, lettering with stroke on a background of green, red, yellow and orange. Next to it is a panel for stroke feature in Photoshop The file step is to add a stroke to the entire signature. To do this, just follow the steps you did for adding a stroke to the text layer after you apply an image. I went with a dark brown border and the stroke I went with two. Play around with it till you find what looks best for your design.
Light Orange Stroke on letters D, E, L on a orange, green, yellow and red background with a brown stroke

There you have it, your text signature! Hope you enjoyed this tutorial and look for my next one, which is coming soon. I went ahead and made some extra enhancements. Letters, D, E, and L in a bright colorful background of orange, green, red, yellow and pink with leaves and needles of grass

More Tutorials

Beginner Background Only Signature Guide

Using a .Png/Render in a Signature – Intermediate to Advanced Users

Using a .Png/Render in a Signature – Intermediate to Advanced Users

You will need to know a great deal about Photoshop for this tutorial. First thing you want to do is use a render/.png of your choice. I will go ahead and use this .png/render for this tutorial. aion-sigtutorials

Now your next step is to open up a new file in Photoshop. I will use 500×200 and 300 ppi. Open up your .png picture your going to use, and when that tab open’s up click Select>Select All and then go to Edit>Copy and go to your signature which is marked “Untitled” and place it in the signature. Move it around and use part of it anywhere in the signature. After you have done this, make a copy of your layer (Ctrl+J) and then you can now resize the image using SHFT key and your mouse to have it be the designated size you would like.

Feather like object in a tansparent 500x200 backgroundFeather like object with a woman holding a magic ball in a transparent background

Now you will need to use the drop tool to gather two contrasting colors within your render/.png file so that you can do the background. Once you have decided then you will put a layer underneath your render layers. Apply a filter to that layer by going to Filter>Render>Cloud.

Feather like object with woman holding magic ball with a purple and pink backgroundNow it will be time to add some brushes in a new layer right above your background layer, use any you think is necessary to the style you are seeking.

Feather, Women holding magic ball, purple and pink background with dotsCopy your background layer and move it above all the other layers.

Purple and Pink cloudy background

Put the copied background layer on Color Burn at a 50% Opacity.

feather like object with a girl holding a magic ball with a background at 50% opacityNow you want to use a round brush with no hardness at 200 px. Use black and white for the colors and go around the signature to find all the dark places and light places and put those colors with the brush on them to specify the dark and light areas of the signature.  Once you have done that, put it as a Soft Light at 75% Opacity.

Black and white color over a picture of a feather like object with a woman holding a magic ballfeather like object with a female holding a magic ball with a purple and pink background

Make a new layer and go to IMAGE>APPLY IMAGE and it will put all the layers you have made thus far into one single layer.  You will now need to go to IMAGE>Auto Tone, IMAGE>Auto Contrast, and IMAGE>Auto Color.

Feather like object with a female holding a magic ball with a purple and pink backgroundUsing the same layer go to IMAGE>Adjustments>Curves and play around with the dark and white settings tell you feel it compliments your signature style.

Feather like object with female holding a magic ball with purple and pink backgroundCouple more steps and you will have your signature. Start a new layer, go to IMAGE>Apply Image and go to Filter>Blur>Gaussian Blur and use 8 to 10 for the settings and put that on as a Clipping Mask on Overlay. Put the Opacity at around 20% to 30%. Start a new layer and go to IMAGE>Apply Image and go to FILTER>Other>High Pass and use 8 for the setting and put that on as a Hard Light at around 20% Opacity.

Feather like object with female holding magic ball with purple and pink background

Presto! You now have your signature. It is up to you now to decide if this is enough or you would like to add text or make the color more intense. I however am going to add text and make the color a little more intense to show what you can do with it. I will use for the text, “NAME HERE“; for example. It will be up to you, the individual, to decide within yourself the end result of your signature by going by your gut instinct. I will also add a border to the signature.

Feather like object with femaile holding magic ball with purple background and text saying name here

More Tutorials

Beginner Background Only Signature Guide

Text Signature in Photoshop for Semi – Intermediate User

Sandbox….

This is the H1 Heading

Above this paragraph should be the H1 heading for your web page. If it is not visible, the design settings for the H1 tag is set to display:none which many WordPress Themes use to hide the blog title text and replace it with a graphic. Do not use H1 within your blog post area.

If the design in the H1 heading looks like your blog title or blog post title, then that is the style set for that HTML tag and you should not use it within your blog post area.

Inside of this test data section are most of the basic HTML and XHTML and CSS styles that you might use within your WordPress Theme. You need to know what that will look like as part of structuring your styles.

This is the H2 Heading

Above this paragraph should be the H2 heading for your web page. WordPress Themes use the h2 heading for various purposes. Logically, it should be either the post title or the first heading in the post content.

However, it is used all over WordPress Themes including the subtitle, tag line, post title, comment area, sidebar area, and even in the footer. Be specific when styling each h2 headings to ensure you are not styling all of them.

This is the H3 Heading

Is this the same heading as is in your post title or is this the section headings found within your sidebar? Or is it different? This is the post content heading for the HTML tag h3, as is the one below, H4, for section headings within your post to divide up topics. If there is an H3 or H4 tag in your sidebar, you will need to identify the parent HTML and CSS container for the sidebar and style those appropriate in your blog’s stylesheet.

For more information in searching for your styles in your WordPress blog, see CSS: Studying Your CSS Styles.

Also notice how the links in that paragraph are styled so you can style links within your post content area. Links have three styles. There is the link color, link hover color, and visited link color. Be sure and design for each style.

This is the H4 Heading

In this section under the H4 heading, we’re going to look at what the post content, the meat and potatoes of your site looks like. In general, you will have multiple paragraphs, so we will add another paragraph so you can adjust the spacing in between them to the look you want.

Paragraphs are not just for typing your blog babble, they can also hold frame and hold other information within your content area to help make the point you want to make in your writing. For instance, you will commonly have three types of lists.

  • General Lists using the <ul> tag
  • Ordered Lists using the <ol> tag
  • Definition Lists using the <dl> tag
    • Definition Lists use two other tags to generate the list:
      • <dt> sets up the word or phrase to be “defined”, usually set in bold, and
      • <dd> sets up the definition, which is usually in a normal or slightly smaller font and indented under the definition.
  • And that’s the end of the lists

And we’ve just tested a paragraph before and after a general list along with a nested list to help you see what at least three levels of the list will look like. Make sure that each level of the list is styled to match your specific needs. You might want to use the default disc or circle, or you might want to add graphic bullets to your list, too.

This is the H5 Heading

While the H5 heading is not always used, maybe you might find a need for it if your H1 and H2 and H3 headings are used. You might need one to two levels of subheadings in your post content, so this one gives you another option.

We also need to look at the other two lists and then add some images and other styles to flesh out your WordPress Theme sandbox.

  1. You need to do this first.
  2. You need to do this second.
    • You could do this in between.
    • Or give this a try, too.
  3. But this is the third and last thing to do.

This should give you an idea of how a nested number list would look on your site. Now, let’s look at a definition list.

WordPress Themes
A WordPress Theme is not a “skin”. Though many young people call it one. The reality is that a WordPress Theme contains many files that come together in various ways to generate a WordPress web page. A “skin” simply changes the look, and rarely the results.
WordPress Plugins
WordPress Plugins add flexibility, features, and capabilities to your WordPress site. There are hundreds to choose from. Some add power and control like monitoring and busting comment spam and enhancing your administration features. Others add fun things like random elements and polling and rating systems.

And here is another paragraph to show the relationship between the various parts and pieces.

This is the H3 Heading

Daisy, photograph Copyright Brent VanFossenIf the H3 heading is your in-post section heading, then you need to see how it works within the post itself. If it isn’t, simply change the H3 to whatever heading number you are using.

Daisy, photograph Copyright Brent VanFossenWe need to look at how images, another major feature of most WordPress sites, are used within the site. Images tend to sit on the left, right, or middle of your post, depending upon how you are using them. For an image sitting on the left or right, you need to add appropriate padding around the image on the text side to push the text away from the image so the text won’t push up against the edges of the image.

Daisy, photograph Copyright Brent VanFossenA centered image is a little different. It is centered in the middle and the text is pushed above and below it.

How to add the CSS styles for images is discussed in the Codex article, Using Images.

Testing Font Looks – H3 Heading

You will need to test the looks of the different font styles, too. This is bold and THIS IS BOLD. This is italic and THIS IS ITALIC. This is bold and italic and THIS IS BOLD AND ITALIC. This is code and THIS IS CODE. And now let’s look at what the PRE tag, also known as the preformatted tag, looks like:

This is the pre tag.
It should be formatted as written
    so if you add spaces to the front of the line
  it will show the spaces and the <code> as written

This should be back to the normal paragraph style and we hope you have been paying attention to the margins and padding around each element, including the paragraph, so you can position things appropriately to the rest of the content.

Your CSS Here – H5 Heading

Let’s look at the blockquote, one of the most common tags used in most blogs. It is designed to “frame” a quote from another blog, website, or reference that you are “quoting” from. For the most part, there are three examples of usage:

This is a simple quote. It is either preceded or followed by a link within the text to the credited source. A blockquote must be designed to stand out from the rest of the text content, but it does not have to “really” stand out, just separate itself from the content so we know it’s not your words.

A second style to the blockquote is one that includes a citation. Under HTML guidelines, this citation should be wrapped in the <cite> tag and then that tag can be styled to be in italics, bold, or whatever look you want in your design.Take care with the style of the <cite> tag as some WordPress Themes use it in the comments area. I recommend you style it specifically with blockquote cite {style declarations} in your stylesheet.

This is an example of a blockquote which also contains a link to Blog Design and Layout articles on the , the online manual for WordPress Users, to help you see what links will look link within a blockquote.
Lorelle on WordPress, your guide to all things WordPress and blogging

The citation includes a link and text to help you see what a link and text will look like within the cite tag.

There are many tags that can be found within a blockquote, just as can be found within any container within your web page design, but a last example includes an unordered list. Many bloggers love to quote examples from lists, so this is a good tag series to test.

Within this web design sandbox test page, we’ve tested:

  • Headings
  • Text styles like bold and italic
  • Ordered (numbered) and unordered (bullets) lists
  • Links
  • Code and PRE tags
  • Blockquotes
  • And much more…

Which should show you what a list looks like within a blockquote.

Each website is unique with it’s own look and feel for the various parts and pieces. This cut and paste section looks only at what you might have within your content section. So if you will have boxes for lists or little aside information, you will need to add them so you can see how they will look in the overall page layout.

Some elements in a WordPress Theme are controlled by the style sheet, while others are controlled by the Template files. Try to work on as much as you can from the style sheet first, then you can mess with the template files.

Remember, any changes you make to the style sheet and template files will be not available if you change themes. If you want them carried over, you will need to copy and paste them into the new Theme folder.

As a last element in the content area and throughout your site, check the hypertext links. These are the links to external websites and/or internal pages within your site. They come in three flavors: active, visited, and hover. Make sure you work on the styles for each of these.

Bullish on Blogs

Featured

Guest Blog MTREIDYThis article is the guest blog of Michael T Reidy

Michael is a classmate of mine in CTEC-160 WordPress with at Clark College, Vancouver, WA. Michael volunteered to contribute this article for me as a class assignment. You can follow him at MTREIDY

  1. In the first article of this series I discussed Why WordPress?
    Step One: Choosing a Blog Platform
  2. In the value of Multi-Author vs Individual Blogs, I shared
    Step Two: Choosing a Single or Multi-Author Model
  3. In this final article in the series Bullish on Blogs, I share Step Three: Optimization – Blog Trends, Analytics and SEO

2014 Blog Trends

Blogs remain the most important media channel, according to Hubspots, rated business critical more often than #2 social media and #3 search engine optimization.

Content Marketing to dominate, according to Forbes, The Top 7 Content Marketing Trends that will Dominate 2014, Blogs and Guest Blogs are #1 and #2, Content Marketing (blogs) spawning new SAAS, Software As A Service, opportunities and SMMS, Social Media Management Systems.

Inbound Marketing will increase supplanting outbound marketing and sales, according to Hubspots, Inbound Marketing report for 2013. 60% of business already deploys inbound marketing, which WordPress accomplishes through links, see SEO links below.

Analytics

  • Google Analytics for WordPress has been downloaded nearly 5 million times and is one of the most popular tools for monitoring and analyzing blog traffic, bounce rate and unique vistors, etc. It can help target a specific blog audience by revealing how and where visitors are coming from if they found your site directly or through search engine or social media and what web browser and keywords they used in their search. This can help you target your keywords and content.
  • Hubspots CMO Mike Volpe defines Marketing vs Web Analyitcs,

    “Web analytics measure things a webmaster cares about, like page load times, page views per visit, and time on site. Marketing analytics, on the other hand, measure business metrics like traffic, leads, and sales, and which events (both on and off your website) influence whether leads become customers. Marketing analytics includes data not only from your website, but also from other sources like email, social media, and even offline events. Marketing analytics are also usually people-centric, featuring the prospect, lead, or customer as the unit of focus, whereas web analytics usually regard the page view as the unit of focus in its reports”

Forbes: 3 Pillars of Search Engine Optimization (SEO)

1. Content Structure

  • Keyword Search (tags – prefer Long Tailed Keywords) Extremely important as a navigational aid to supplement category and menu search. Tags must be placed thoroughly in every article with special emphasis on longer phrase keyword search of 4 to 5 words, called long tailed keywords, not just one or two keyword tags. Long tail keywords improve content structure and SEO search results.
  • Content Optimization (Conversion Goals) landing pages that convert and rank well in search. Content should be optimized to the blogs primary function, everything else is a distraction and dilutes the brand message.
  • User Experience (UX Design, User Finds – easy to locate and complete task) minimize bounce rate. User Experience is not just usability or good design, bad UX increases bounce rate (initial exit) and exit rate (how many hops and how long before exit).
  • Site Design (clean, themes) Site design improves user retention and the blogs readability. Bad design equals no attraction, no audience.
  • Updated (freshness) Well developed strategy for continual update of content includes not frequent updates, but rework of content that improves overall SEO ranking.

2. Links

Comments Inbound Links,Created between pages on a blog such as the More feature to list an abbreviated summary followed by read more reference link to the full article or in marketing a hypertext link direction from an ad to a landing pages funneled by another link to a checkout.

Back Links, aka Trackbacks from an external source (must be manually created) or Pingbacks from another WordPress site that happen automatically when one blog creates a hyperlink with another. Credible trackbacks from reputable sources improve SEO rank.

Landing Pages  Thoroughly discussed in a separate post, landing pages are static web pages designed exclusively to capyure inbound marketing leads by means of a form or to funnel inbound sales from an ad to a checkout by means of a click through call-to-action.

3. Social Media

Social Media is on the rise and the #2 Media Channel behind Blogs and ahead of SEO. Fortune 500 are adopting Social Media faster than blogs because they look for social media to provide inbound marketing leads and ecommerce conversion (click through sales) One of the major reasons for social media’s popularity is that SM is currently the #1 blogging platform. 67% of social media users say they blog on SM. It is currently the #1 channel of social networking, a role that blogs also provide when properly connected to social media plugins and communities.