Friday, September 29, 2017

Started a New Blog Called Designerly!

Very excited to announce my new blog, Designerly. The content will focus on design methods, process, inspiration, ideas, and industry problems.

The first article focuses on why UX Matters, high-level methods, and who is directly affected by UX deliverables.

If you have questions, comments, or content ideas -- please share in the comments!

Thursday, May 18, 2017

Think Accessibility: Personalize Your Site to Send the Right Message to Visitors with 5 Easy Tips

57 Million Americans have a disability (Internet Accessibility, 2017), and 54% of American adults with a disability use the web
(Pew Internet Project).

1. Great Design NEEDS Great Code

A great design can make users ooh and ahh, if they can access it. Check out Google Web Standards or W3schools.org for tips on how to write good clean code.

Tips to Create a Good Alt Attribute for Website Images

Tips:

Anchor Text (tips: 1) The text should describe the image if the image contains information 2) The text should explain where the link goes if the image is inside an <a> element 3) Use alt="" if the image is only for decoration)
Alt Attribute is used when an image is not present or for screen readers (for accessibility purposes screen readers, like JAWS, read text on a page to people with sight impediments). The alt attribute can also help with search engine optimization. It is important that this tag describes the image it is attached to.
As a requirement of HTML standards, every image _must _ have an alt attribute.
Succinct - less than two sentences
Do not use "image of" or "graphic of"
Do not repeat text that is outside of the image, if the image conveys text - this should be included in the alt attribute even if it is longer than two sentences.

Resources:

Sample Code:

Better:

Write a Search Engine Friendly Meta-Description

(e.g. listed in browser and on search engines - 160-300 characters)

A meta description is approximately 135-300 character snippet that describes the content of a single page of a website or application. It is an HTML tag added in the header of each page and is used by search engines and readers as an excerpt for search results.

Example:

Tips:

Use an "action" voice with a single call to action
For Products include merchandise information (e.g. Manufacturer, SKU, price)
Include rich snippets https://yoast.com/tag/rich-snippets/https://developers.google.com/search/docs/guides/mark-up-content
If keyword research has been done (for SEO) the main keyword or phrase should be included.
It should be unique (not repeated on multiple pages)

What is a Meta Title?

(e.g. listed in browser and on search engines)

A meta title is used to name a page within a website. It is coded as a meta tag in the head of HTML. The title within search results uses the Meta Title Tag, it is also used as the page tab name in browsers, as the title when shared on social media, and the default bookmark name if a user saves it.

Tips:

If keyword research has been done for the page/site integrate at least one relevant keyword
Ideally the Title Tag will include ALL keywords the page should rank for
Write for humans - the title should NOT just be a list of words
50-60 characters including spaces
Most important keywords come first
Do not duplicate
Accurately describe the page
The first headline (<h1>) should NOT be the same as the title tag
Separate ideas, categories, keywords, or even the brand name with pipes (keyword | category | brand)

Example: