Category Archives: Design

Articles on web design, especially with WordPress.

Web Accessibility: Designing & Developing for Older Users

As of April 2012, 53% of American adults ages 65 and older use the internet or email. Though these adults are still less likely than all other age groups to use the internet, the latest data represent the first time that half of seniors are going online. After several years of very little growth among this group, these gains are significant.
Pew Research Center

Within that 53% of American adults of at least 65 years of age, 70% use the Internet on a daily basis.

Since these statistics were recorded in 2012, it is believed that the numbers have risen significantly. It is important for web designers and developers to factor this information into their designs to cater to this group of regular Internet users in these ways:

Text Size

Select a larger font and allow the text to be resized up to 200% by the user without creating an issue with the function of the website.

Legible Text Style & Layout

Create a site that is easy to read by selecting a legible font, spacing your lines accordingly, and keeping your lines short.

Contrast & Color

While some color and contrast looks great to young eyes, older eyes can lose the ability to see text on a high-contrast page. At a minimum, your contrast ratio should be 4.5:1 with the involvement of images and text.

A screenshot of a very high contrast website.

Multimedia

With older adults, eyesight and/or hearing can rapidly decrease. By offering multimedia with subtitle options as well as visual and audible, your website visitor will be able to enjoy the presentation.

Text-to-Speech

Some elderly people rely upon speech synthesis software when browsing websites. To make your website accessible, you’ll want to use more text instead of  images, especially on call-to-action buttons.

CAPTCHA

Completely Automated Public Turing tests are used to decipher a live human user, as opposed to a machine spammer by requiring the user to type in the displayed text. As you can see below, the text is very difficult to read, even for those who do not suffer from vision impairments.

It is suggested to offer an audible version of CAPTCHA as a second option, but the user may have difficulties enabling the audio on their computers or have a hard time hearing it if enabled. Removing CAPTCHA from your site altogether is a much better solution, as it doesn’t deter spammers.

Screen Shot of what CAPCHA looks like.

 

 

 

 

Links

Due to visual impairments and difficulty with mouse usage, links need to be created over more than two words, as well as providing alternative text that indicates the destination of the link. Links must be underlined and have other visual indications.

Keyboard Use

Many people aren’t able to use a mouse and rely open only utilizing a keyboard. Always allow your site to be functional by the use of keyboard navigation without a mouse. Also, it is important to allow the tab function to move onto different cells within an online form.

Distractions

It is imperative to provide the ability to pause, mute, or stop movement and sound within a website to avoid distractions from the web experience. People may not always want to watch a video on a website, but would just prefer to quietly read the article around it.

Screen Shot

Use of Forms & Instructions/Time Limits

Sometimes websites have time limits to complete a form for a transaction; if the time limit is reached, the website will time out and the user will have to start from the beginning. Older people may have a difficult time understanding how to fill out forms to complete the transaction. Does your form require a time limit? If so, it needs to be increased.

Out of Date Software

Not everyone is going to have up to date web browsers and new computers, so your site needs to be as compatible as possible with older software. A warning message indicating that the visitor must download a newer version of a web browser will most likely result in frustration and website abandonment.

Screen Shot of unsupported browser error message.

For Further Information

 

 

How to Use CSS to Stylize Headings in Your WordPress Content

So the extra-large font on the post titles and teeny-tiny text on the headings of Twenty Eleven are not doing it for you? This tutorial will show you how to spice up any theme headings using CSS and discuss the pros and cons of doing so.

Styling Headings with the WordPress Customizer or Appearance Settings

Maybe just changing the font and colors will be enough for you to style the headings.

Experiment with the WordPress Customizer settings in Appearance > Customize. It’s all automatic, so there is no need to know how to code CSS.

Pros: You can customize the appearance of your theme to your exact specifications, though the specifications maybe limited or constrained.

Cons: If you switch themes the fonts will carry over, but the CSS will not. You will also lose your customization if you upgrade your current theme for security reasons. Take a look at the Frequently Asked Questions about Customizer for all the other restrictions. Continue reading How to Use CSS to Stylize Headings in Your WordPress Content

Using Post Sandbox Examples for Testing WordPress Themes

You’ve just started your new WordPress site, and you are browsing the selection of Themes WordPress has to offer. You fall in love with a Theme and start filling it with content. Then you discover a huge flaw. You hate how your pictures align, and how your headings look. With a Sandbox post you can alleviate that issue.

According to the WordPress.org article “Test Driving WordPress:”

A Sandbox is a term related to the sandbox you might have played in and built sand castles in as a child. It is a playground for working on concepts and exploring your imagination.
Test Driving WordPress – WordPress Codex

Essentially, a sandbox post lets you take a test drive of your theme before you put it live on your site. It is a post that shows you an example of every HTML and CSS code and how it will be displayed. Continue reading Using Post Sandbox Examples for Testing WordPress Themes

Creating a Static Front Page

Creating a Static Front Page isn’t just fun and innovative it also makes your blog look more like a professional website and less like a “blog”. Static front pages give all your readers and visitors the same welcome. Be it an announcement, how to get around or what your site offers, one thing is for sure, it is informative and it is direct. You can have your site be purely static or you can make it a hybrid blog and also include a “blog” page. Both have their own pros and cons. Continue reading Creating a Static Front Page

Site Titles and Taglines

Site titles and taglines can make or break a site. Let’s just say you have a blog page and that it shows up in search results, now what? You probably want people to pick your site from the list right?

Well it’s not as easy as just hoping it automatically finds readers who like it and waves them over to tell them a story. The image displayed below is a screenshot of the ClarkWP site title and tagline displayed when searched via the web.

tag and taglineThe title itself is simple and the tagline is descriptive and interesting. It makes readers curious about what the students are saying. In short– it works.
Continue reading Site Titles and Taglines

Favicons: WP Tavern reviews Favicon Generator

By LaRhea Phillips

Jeff Chandler wrote an article on WP Tavern discussing the use of a helpful and free favicon generator called realfavicongenerator.net. Favicons are small images, usually 16×16 pixel, that are used for various technology. PCs, Macs, iOS, android phone, desktop browser, windows task bar, etc. all use favicons to identify programs.

Continue reading Favicons: WP Tavern reviews Favicon Generator

Typography Matters

typographyYou may not think what you are writing on the web and the way it is written is important. But it is just as important to your web page and it’s graphics if not more. Typography (I’m talking about fonts, you rookie) speaks volumes and, in my opinion, is far more important than the visuals themselves sometimes. Now, I am not going to cover every definition of type from Humanist Sans to Geometric Sans. But, what I will say is typeface can inspire a feeling depending on weight, point size, and whether it has serifs or not.

Continue reading Typography Matters

Web Builders’ Guidelines for Government Websites

Many website developers may not be aware that, if they do any sort of work with or that represents the United States government or any of their agencies, there are a set of rules and regulations they must comply with. You might think to yourself, “Well, what are the odds I’ll work with the government?” but the answer might surprise you.

The government outsources many programs, and the contractors that receive those jobs may, in turn, outsource that work.

If you are doing work that ultimately is going to be used by the U.S. government you need to be aware of the following standards that they require by law.

Access for People with Disabilities (Section 508)

All federal public websites* must comply with the requirements of Section 508 of the Rehabilitation Act (29 U.S.C. 794d), which is designed to make online information and services fully available to individuals with disabilities. Organizations should review Section 508 and accompanying guidelines to ensure that their public websites meet the requirements.

To comply simply follow the P.O.U.R. Principles to ensure your website is as accessible as possible.

Access for People with Limited English Proficiency

OMB Policies for Federal Public Websites states that “your agency is already required to provide appropriate access for people with limited English proficiency by implementing Department of Justice guidance for Executive Order 13166, ‘Improving Access to Services for People with Limited English Proficiency.’ Continue reading Web Builders’ Guidelines for Government Websites

Creating and Uploading Header Art In WordPress

Before you begin this tutorial, there are some prerequisites you already should have completed. You should already have an idea or foundation for your header. Your design concept, images, and logos should already be developed. The later portion of this tutorial will simply show you how to create the banner, set it to the recommended size, and then upload it using WordPress. If you are not already prepared, here are some basic suggestions to help get you to where you need to be in order to complete this tutorial.

Continue reading Creating and Uploading Header Art In WordPress

Landing Page: Lead Generation or Click Through

  • The Home page is not the landing page.
  • Any page a visitor lands on is not the landing page.
  • The landing page is a free-standing page used for one of two purposes:
    1. Inbound Marketing – Lead Generation Landing Page or
    2. Outbound Sales – Click Through Landing Page

A Landing Page is designed with two primary goals:
Continue reading Landing Page: Lead Generation or Click Through