All posts by Sean Jendeski

My name is Sean Jendeski. I was born in Pittsburgh, Pennsylvania and moved to Portland, Oregon when I was 10. I have a passion for design and front-end web development. I’m a single father who constantly strives to be successful.

Interview: with Doug Yuen

A black and white picture of Doug Yuen in black and white with a profile shot of his face.Meet Douglas Yuen, Doug is originally from Waldwick, New Jersey. During his time at Cornell University, he double majored in English Literature with a concentration on creative writing, as well as Philosophy. He was interested in the subject matter, and thought that one day he would become a writer and professor of creative writing. In 2008, he got into Content Management Systems because he was thinking about quitting his job and working for himself so he could travel the world. After evaluation of some of the most popular CMSs of that time, he decided to settle on WordPress. He has owned and operated EfficientWP (Efficient Websites LLC.) for the last 6.5 years.

A screenshot of a landing page for efficientwp.com. Website design in a day.

Q: Tell me about yourself?

A: I’m a WordPress designer who’s expanding into the world of developing premium plugins. I’ve spent about 2.5 years traveling abroad, while growing my business, between 2012-2015. I’ve spoken at WordCamps 4 times (so far), have 3 publicly available plugins in WordPress.org, and co-host a WordPress podcast, WPcast.fm. Continue reading Interview: with Doug Yuen

Advertisements

WordPress News: Image Optimization

A box with a grey outline, arrows pointing inward at all four corners, with grey text, ClarkWP: Image optimization

When you decrease the file size for images before you insert them, uploads and pages will load faster. – WordPress.com

It is important to optimize your images before using them on your WordPress site. The benefits of optimization would include better quality images, faster loading times, efficient data usage, and accessibility; while making the site’s images more attractive overall. For some users with smaller images, it will be significant enough to upload an image and choose from the WordPress default sizes allocated. Images that are set to display as a thumbnail, it doesn’t compress the image. That’s why it’s always better to optimize your images before uploading them.

Optimization is achievable by using photo editing software such as Photoshop. It’s imperative that you don’t take images from your camera and upload them immediately to the web, as images that come from your camera are set for print rather than web. – Visit abrightclearweb.com for more information

Software Recommendations

You can use a slew of programs to edit your photos such as Photoshop, Lightroom, and Paint Shop Pro. Unfortunately these are paid or subscription software programs, so below is a list of free software recommendations.

Example

If you upload an image that is 1080 x 720px and set it to a thumbnail, it will still take just as long to load as if it was set to full size.

The following image was uploaded to WordPress in full size. (1080 x 720px) The file size is 924.9k which takes 168 seconds to load just this image at 56.6 kbps.
A picture of the maid of the mist, heading toward Niagara Falls.

This image was re-sized in Photoshop to the same size as allocated by the large image option in WordPress. It is 156.3 kb which takes 29 seconds to load at 56.6 kbps.
A smaller sized picture of the maid of the mist, heading toward Niagara Falls.

Image Formats

The following image formats are supported by WordPress functionality.

  • JPG – This image format works well when displaying an image with a lot of detail or a photograph.
  • GIF – Used when an image needs transparency and logos, line art, and illustrations with type. GIF however, only supports 8 and 16 bits of color.
  • PNG – Also is used when transparency in an image is needed but supports more color than a GIF file. PNG images are larger so attempt to use the GIF file format first to see if it works for your image.

More Information

What Happened to HTML5 and Accessibility

HTML5 has improved greatly over the years. One of its biggest successes was trying to make the World Wide Web more accessible by moving in a more semantic direction. It introduced several new semantic elements such as: <section>, <article>, <aside>, <hgroup>, <header>, <h1> through <h6> level headings, <footer>, and <address>. While these new elements are great, they don’t actually do anything.

They crack the door open slightly to provide value to assistive technologies that can expand upon the elements through programming. These new elements have been made standards by W3’s Consortium. While these are made standards, not everyone is required by law to follow them. The biggest problem with HTML5 and its accessibility features is the compatibility of the browsers that interpret the markup. Most development companies follow these standards but they are free to take their own direction when building a browser.

Accessibility and Compatibility

HTML5 has great accessibility features but there are still some issues. Because HTML5 is constantly evolving, it makes it difficult in the development stages. Here are some of the current issues:

  • Competing video formats are making HTML5 based video playback almost impossible to implement
  • Inconsistencies between web browsers
  • The heading structure is not useful in assistive devices
  • Interpretation and support among technology products

One of the top browsers that has kept current with the evolution of HTML5 is Mozilla’s Firefox. This screen shot shows which major browsers support HTML5 accessibility attribute features:

A screen shot of web browser that support HTML5 attributes

The ARIA

Every developer and designer should ensure their website covers as many disabilities as possible to provide users with a rich accessible experience. That’s where ARIA (Accessible Rich Internet Applications) or WAI-ARIA comes into play. ARIA defines the roles, names, descriptions, values, and states of objects to help assistive technologies, such as screen readers to better understand the information laid out on the page.

ARIA When and How

ARIA has a wide range of accessibility elements. For that reason we will only be covering a few examples in this section. The elements that will be explained are better known as the “Landmark Roles.”

The document Role

The document role helps assistive technologies switch from normal browsing mode into a mode more suitable for interacting with web documents. Most webpages are considered a document because you often read them, while a document role still supports users to have interactions. This is often inserted into the body element.

<body role="document">...</body>

The banner Role

The banner role should only be used once within the html markup. It is usually used within the top of the page in the <header> or any element that contains the prime heading or in-page title of the site.

<header role="banner">...</header>

The complementary Role

The complementary role is generally used in the <aside> or sidebar section of the HTML document. The complementary role element lets assistive technologies know that whatever is inside this area, it is complementary to the main content.

<aside role="complementary">...</aside>

The contentinfo Role

The contentinfo role is used within the area that contains copyrights and links to privacy statement information. It is generally used in the <footer> element of your markup.

<footer role="complementary">...</footer>

The form Role

The form role is used by a screen reader to let users know that they can fill out a form. On some screen readers, users have quick keys to direct them to this sections of the page quickly. There is a lot more that goes into forms and it is recommended that you read the help documentation provided by W3.

<form role="form">...</form>

The main Role

The main role in ARIA is better explained as the most important element for screen readers and users alike. It is essentially used a link to “Skip to the main content”. It helps users know that this is what they are essentially looking for on a page.

<section role="main">...</section>

The navigation Role

The navigation role element is used in the navigation or <nav> element. The most important thing for any website is to be able to clearly navigate it. The navigation role tells screen readers that this is your navigational links.

<nav role="navigation">...</nav>

The search Role

The search role tells assistive technologies that users can search the website through this section. It is often used in a text input field labeled with role search.

<input type="text" name="search" role="search">

For More Information

WordPress Words: Administrator

“Administrator is a user role in WordPress. When a user installs WordPress, it creates a new user with the username and password defined during the installation. That first user is assigned the user role of administrator. They can perform all actions on a WordPress website and have full capabilities.”

What is: Administrator

Example: A WordPress Administrator is automatically setup when installation of the WordPress platform is complete. The Administrator account manages all features and users on a specified site.

About the Word

The role of Administrator on a WordPress website is to manage all users’ roles and responsibilities and features on a single WordPress site. Not to be confused with a Super Administrator, which has the capability to manage everything over multiple websites instead of one. The Administrator is the only one who has the ability to upgrade the WordPress installation. However, you can add other users to help manage content such as moderators, editors, and publishers to help build your site and maintain it. It is possible to have multiple Administrators on a single website but typically there is only one.

A screen shot on a windows operating system of the admin panel.

Only Administrators that operate a single site have the capabilities listed below. If you are however, the Super Administrator for multiple sites, these features will be available.

  • update_core
  • update_plugins
  • update_themes
  • install_plugins
  • install_themes
  • delete_themes
  • delete_plugins
  • edit_plugins
  • edit_themes
  • edit_files
  • edit_users
  • create_users
  • delete_users
  • unfiltered_html

For more information on the roles, capabilities, and beginner tutorials, check out the links below.

For More Information