images

Creating a More Accessible Website

Posted on by Mario

In general, website accessibility is known as an attempt of removing online barriers faced by people with disabilities. The goal is to provide everyone with equal access to online information and functionality.

This website accessibility issue has been broken down by the W3C or World Wide Web Compliance organization into 12 points and the accessibility requirements will continue to evolve. But, don’t worry, as you can improve the accessibility of your website by following the best practices below for web design, development, and content management to improve the user experience on your website for all visitors. If you are a web developer, this article will suit you best, so keep on reading and learn how to create an accessible web today!

How to Design for all Users?

Below are ways that you can apply to make your user interface design and visual design more accessible. These tips can be applied both to a new website and to an existing site.

Applying the Right Color Contrast Ratio

Color contrast helps people see the text clearly as it gives sufficient contrast between the text color and background color. Therefore, it is important for you to provide a good color contrast ratio. As a best practice, your foreground text should have sufficient contrast from the background colors. A contrast ratio of 5:1 for normal text and 3:1 for large text are good standards to follow and also meet the minimum requirements for WCAG 2.0 Level AA.

Avoiding Sliders and Animations

Some studies reveal that user experiences and visitor engagement are not good for conversions and can cause low engagement. Therefore, it is better to avoid using any rotating slides and carousels on web pages because some website visitors may require more time to view and read a slide, besides, rotating and moving content will only create frustration for visitors.

Utilizing WordPress for Accessibility

Since February 2016, WordPress has released WordPress Accessibility Coding Standards which provide a compliant based on which custom themes can be built, most major themes and frameworks on WordPress, like Genesis or Avada.  Furthermore, all new or updated code released in WordPress must conform to the WCAG 2.0 guidelines.

Form Labels and Errors

Instead of using placeholder text, make sure all forms on your website have proper form labels. For example, the form pictured below has placeholder text for username and password, but once the form field is clicked, the user can no longer see what information should be entered into the field. This kind of form will create a hindrance for users that need extra time filling out a form.

Web Page Navigation

Another thing that you should bring to your attention is the accessibility in creating a website that can be navigated using a keyboard. This is because some website users with mobility impairments can’t use a mouse to navigate your website and rely on a keyword or keyboard-like device.

In fact, the better your page’s structure and semantics are, the more navigable and understandable it is for all users. Therefore, make sure that your WordPress developer is following the best practices in page structures by using proper heading hierarchies, enabling skip links, and using accurate semantic HTML.

How to Manage Content for All Users?

Don’t forget about content, because having an accessible website requires an adjustment in how you handle all website content going forward, so here are some of the ways that you can do.

Adding Alternative Text to Images

To describe the appearance of an image on a web page, alt text is used within an HTML. Visually impaired users rely on alt text to understand an image on a website. With WordPress interface, website administrators can easily update website content and add alternative text to images. In this case, alternative text is helpful for SEO, as search engines look for alternative text to identify and properly index an image.

Video & Audio Captions

Just like having captions on images, you should also put captions and transcripts on any video or audio. By giving captions, to multi-media, the visitors can easily enjoy and access the knowledge offered in the media. Furthermore, with captions, visitors can conveniently watch videos with the sound off. Today, it is easy to find numerous free tools available for adding and editing captions to your video and audio files.

So, whether you are creating a new website or upgrading it, it is important to protect all that work by ensuring the website is secure from hackers and security breaches. In fact, you may need to have a daily backup, not only for security, but also for breaking a component related to accessibility.

In summary, major online businesses are realizing on the importance of accessibility that is able to encourage closed captions on videos for users who are deaf and hard of hearing, so are you ready to start creating a more accessible website today? Remember that it is important to create a website that can be accessed by anyone, anytime, and anywhere.

Automatic Responsive Images with Client Hints

Posted on by Mario

automatic-responsive-images-with-client-hints

There are many times where web developers have to wrestle with forcing images into responsive layouts. Due to this media queries and fluid grids are constantly employed to achieve visually flexible images. Achieving such flexible images as pointed out by Ethan Marcotte in the seminal first edition of his book is as easy as:

To make this code work effectively, you need to make sure that the image resources being served must be big enough to fill large viewports and high-resolution displays. Not only simply setting width on images, you may need to resize the images as well, or else huge image resources will be sent to everyone which is a performance disaster.

Or you can use the suite of new HTML features as another way to combat images into responsive layouts. This allows images to transform in a way that allows users get tailored resources based on their context. These features provide adaptation via allowing authors to mark-up multiple, alternate resources like so:

ywf2

This method can be tedious and complex for some people, since it always generates multiple alternate resources for every image. Cloudinary can help with the resource generation, but then the markup in our image tag will be overwhelming.

Considering JavaScript

The other method that developers usually use is by using JavaScript. JavaScript can directly measure the browsing context and when paired with on-the-fly, server-side resizing, it requests a single, perfectly-sized resource every time with little or no extra markup required. This post explains how to use JavaScript to achieve automatic responsive images.

Now there are challenges with this approach:

  1. Setting up JavaScript infrastructure which might be complex
  2. Inserting JavaScript between users and our page’s core content which might be tricky to do effectively.
  3. Browser vendors use the speculative pre-parser to shed off as many image loads as possible before a page’s HTML has even finished parsing. And for JavaScript to load measured image resources, it must wait for page layout to be complete before it can measure the page.

Due to this, we have two choices whether we wish to use JavaScript to load responsive images. Either :

  1. Let the pre-parser do its work and set JavaScript to double-load all of our images, or,
  2. Disrupt the pre-parser by authoring invalid src-less <img>s so that our JavaScript can start loading our pages’ images last, instead of first.

Client Hints To The Rescue

With the client hints, you don’t have to sweat yourself with all the options we considered above. In fact, you don’t need to use JavaScript anymore. The good news is that there is a fix! No, not throwing JavaScript at the challenge, but by asking the web server for a helping hand. Enter Client Hints, an initiative spearheaded by Google that is already available in browsers (Chrome and Opera) and that is super-simple to use. Let’s see how Client Hints can reduce both image size and verbosity of the responsive images markup.

Automatic DPR

In usual browsers you’ll see an image, the URL of which delivers different resources to different users, depending on their context. While in browsers that support Client Hints, 1x devices will receive 1x resources, 2x screens will receive 2x resources. This way is possible since a little tag is placed in the <head> of this page which looks like this:

<meta http-equiv=”Accept-CH” content=”DPR”>

You can use the code above to send an extra HTTP header named DPR, thus advertising devicePixelRatio. Those DPR HTTP headers are Client Hints. So, when you send DPR hints with a little meta magic and dpr_auto appended to the URL, Cloudinary is able to deliver different resources to different users depending on their display density.

Automatic Width

To fit different display densities, you can use code : dpr_auto scales images. Cloudinary provides w_auto which scales images to fit variable layout widths. You can take a look at the example below:

<meta http-equiv=”Accept-CH” content=”DPR, Width”>

 […snip…]

<img sizes=”100vw”

    src=”http://res.cloudinary.com/demo/w_auto/on_the_phone_csmn8h.jpg”

    alt=”Obama on the phone with Castro.” />

Here are some explanations about it:

  • The meta tag instructs the browser to send another Client hint: Width in addition to DPR.
  • The img tag includes a sizes attribute which informs the browser about the layout width of the image.
  • The browser then broadcasts the width to the server via the Width hint.

Advanced W-Auto Usage

Let’s take a look deeper about Cloudinary’s w_auto parameter. W_auto can use two optional parameters like this:

http://res.cloudinary.com/demo/w_auto:100:400/bike.jpg

:100 shows Cloudinary how big the difference between alternate resources should be. By defining a rounding step between them, this parameter allows you to limit the number of possible responses. For instance, if the target width is 323 pixels, Cloudinary will round up to the nearest hundred and return a 400 pixel-wide resource. However, if you place the parameter to :1, resources will be scaled to match the layout width exactly which is generally not a good idea.

:400 refers to the fallback width. This parameter will be used to serve an image resource with that width, if a browser doesn’t need send a width hint. For instance, browsers that don’t support Client hints, and this fallback parameter too is absent, w_auto will deliver images at their original size, since it will be impossible to load higher pixels, such as 12 megapixels to a site.

3 Common Mistakes on Web Design World that Can Ruin Your Website

Posted on by Mario

common web design mistakes that can kill your website-01

In online world, a website is everything to your business. In fact, it can be the face of your business, so, creating a respectable and beautiful design is a must. A beautiful web design with gorgeous templates and endless online tools will be your web power to attract more people comes in to your site. But, still there are some errors happen in designing a web. If you are web designers wanting to avoid these common mistakes, then we caught you in time! Since, you can learn several common mistakes in web design through the points below.

Clutter Is Killing Your Buzz

Some designers think that having many functions button is the best design while actually “ less is more: is a truism because it is true as overwhelming your site with so many stuffs will make your visitor’s attention get quickly distracted. Therefore, to avoid being too clutter, you need to provide more “white space” – a portion of your site that is entirely clear of content. The purpose in using white space is to focus the visitor’s attentions at what’s really important, for examples are the checkout button or portfolio images. White space is technically an empty space which will be fulfilled with the purpose of making your site better.

Your Site Is Harder to Navigate Through Than Uncharted Land

Having a sloppy navigation button is a big no-no, as it is really important to have a simple and intuitive navigation flow. This is because, if your visitors feel difficult to discover how to browse through it, they will lose their mind and this will cause you to lose your traffic. To prevent this risk, devote some time to planning your site structure from the very beginning, even before you begin designing, you need to consider several things, such as, how many pages, what should be the page order, how visitors move from one place to another, and etc.

Images So Bad They Look like They’re Censored

Another way to have a great web design is by avoiding any pixelated photos, as people will think that the internet went back to 1998; when the image is accidentally cropped to show the top of your head rather than your face, then it is impossible to see the connection between your website’s purpose and the images you use – that’s when we have a problem.

Site images should be there for setting the right mood and illustrating something about your brand or about your company. So, get rid all of the images that you think do not perform these purposes. Moreover, you need to make sure to apply only high-quality files on your site.