Curiosita Labs

Thoughts on programming, web development and design.

Circuit Board

Category: Programming Page 6 of 27

Programming

Build Code With Accessibility

By

On September 30, 2019

In Accessibility, Programming, UX, Web Development

What is accessibility in web development? It means building websites that as many people as possible can use. Accessibility benefits everyone not only people with special needs. Have you tried to use your phone in outside in the side or with one hand? You may have given up or waited until later to do what you needed. If you have special needs, using an app or website can be a challenge. Accessibility means developing websites that people can use regardless of their physical and cognitive abilities. Or how they access your website.

How do you build software with accessibility in mind?

In her talk at Dot Net Conference 2019, Rachel Appel explained how developers can build accessible websites without greatly changing how they code. People have variety of needs. When you develop, you need to make your code usable for people with a wide range of visual, cognitive, hearing and motor abilities.

Visual

People with visual issues include low vision, blindness and color contrast. Some people may use a screen narrator to help them navigate your website. For people using a screen narrator, use skip links. Skip links allow them to skip over the navigation and go directly to the content.

For making sure that your site is readable by as many people as possible, you can use Color Oracle, a free color blindness simulator. It is available for MacOS, Linux and Windows. You can also use Accessible Colors or WebAim’s Color Contrast Checker to ensure check your color choices.

Cognitive

People with cognitive difficulties includes learning and age-related issues. You want to keep things simple and clear. Write using short sentences, active voice and simple words. Use headings and labels to help people easily find information. See Mozilla’s Cognitive Accessibility for more tips.

Hearing

People have a wide range of hearing abilities. With videos or audio, you want to include transcripts and close captioning. In your software, don’t rely on sounds alone for feedback.

Motor

People with motor issues can have tremors, difficulty moving a mouse and more. Avoid pop-ups if you can. When you can’t, make sure that they can be closed easily. Use alt tags on all images that are not decorative.

By developing for a wide range of people, you make sure that your website is usable no matter how or where they access the web.

Read more

4 Ways to Make Your Web Design Simple

By

On September 15, 2019

In Design, Programming, Web Development

What is simplicity? According to Merriam-Webster Dictionary, simplicity is the state of being simple, uncomplicated or uncompounded. A simple web design is uncomplicated. Minimalist design style is related to simple. It has only the necessary elements for functionality. A minimalist design can be simple, but a simple design is not minimalist.

4 Ways to make your web design simple

Image by Ambady Sasi from Pixabay

Is your website complicated or complex?

What makes it complex?

  • Too much content
  • Unnecessary design elements
  • It’s slow to load and hard to use

Why do you want your design to be simple?

A simple website is easy to navigate and use. It has the right number of design elements. A simple website loads faster and helps guide your customer to do what they want. It has content that is readable and scannable.

What can you do to make it simple?

Look at your content and ask is it necessary?
If not, remove it. If its, consider rewriting it. Use bullet points, shorter paragraphs and headings to break the text up. You don’t want to overwhelm people with a sea of text.

Review your site for extra design elements
Do you have colors, illustrations and photos that serve as decorations? If so, consider removing anything that is unnecessary.

Check for ease of use

  • Is your navigation bar complicated? Too many options can make it hard to use.
  • Do they need to go to multiple pages before getting all of the information that they need? Too many pages can make a simple design hard to use.
  • Are your forms easy to use? Complicated forms can make your visitors leave your website.

Look for items that slow your site down
Your photos, CSS, CMS and additional code can slow your website down. People won’t use your site if it is really slow. Use tools to compress and optimize your photos and CSS. Make sure your CMS is updated to the latest version. If you use any third party or custom code to extend your website, check if they are causing speed issues. See if you can get rid of the slow ones.

Simplicity is not a design style. Keeping your web design simple is hard. Websites change and evolve over time. You have to continually work to keep the design simple.

Making a Dark Mode For Your Website

By

On August 15, 2019

In CSS, Design, Programming, Web Development

Do you use dark themes or dark mode in your text editor? You can offer website visitors a choice of dark or light modes. Some people prefer using the dark mode because it is easier on their eyes.

What do you need to create a dark mode?

The only tools you need are HTML, CSS and JavaScript. You can use a button to allow your visitors to select between modes or use media queries that check their operating system for their preference.

Toggle example

Ananay Negoi uses CSS Variables and a button to toggle between light and dark mode. She demonstrates how to build the Dark-Light mode switch.

Level 5 Media Query

Level 5 Media Query checks your operating system for your preference for a light or dark mode. You can use this query to automatically set the mode for each visitor.

Designing for dark mode

When you create a dark mode for your website, it involves more than switching the colors to darker ones. You need to consider how color, fonts, images affect the readability and usability of your website. Your website reflects your brand. You want to think about how a dark mode can affect your brand. Andy Clarke walks you through the steps he took when he created a dark mode version of his website.

Dark Mode Resources

If you want to implement a dark mode design of your website, refer to these resources on how to do it.

Animation Principles for Enhancing UX

By

On July 31, 2019

In Design, Programming, UX, Web Development

With new tools like CSS Animation, JavaScript Libraries and modern browsers, we can easily add animation to our websites. Animation helps you to provide context, give feedback, convey status and delight your users. You can affect color, location, scale, shape, focus and opacity of objects. By learning the principles of animation, you can create deliberate animation that improves the user experience.

Photo by Aline Ponce from Pixabay

12 Principles of Animation

Disney animators, Ollie Johnston and Frank Thomas, first introduced the 12 Principles of Animation in their book, The Illusion of Life: Disney Animation. They examine the process of animation from Disney’s leading animations and provide you with 12 basic animation principles.

What do the 12 principles provide?

  • Realism
  • Context
  • Causality
  • Focus
  • Delight

They also help to create hierarchy and relationships between objects. These principles help you to provide feedback to the user, indicate status and give instructions. One of the first uses of animation on computer screens was the flashing cursor. It tells you that you can start typing and that the computer is working and not frozen. This simple animation conveys information faster than words can.

How to Use Animation Responsibly

When you are deciding to add animation to your user interface, consider the following:

  • Does it add value?
  • Are your behaviors consistent?
  • Is the user interface still functional without it?
  • Is the animation optimized?
  • Do you need it?

Using Animation to Enhance User Experience

At WordCamp Atlanta 2019, Michelle Schulp gave a talk Squash and Stretch and Good UX- Using Animation To Enhance User Experience. She gave a quick overview of the 12 Principles of Animation. Michelle explains the uses of animation and how to use animation responsibly.

More resources on animation

Get Data Using JavaScript Fetch API

By

On June 30, 2019

In JavaScript, Programming, Web Development

I was looking for a simple to get data from an API. When I found this tutorial using JavaScript Fetch and the Random User API. You use Fetch to send a simple GET request to the Random User API and provides you with JSON data of 10 random people.

Get Data Using JS Fetch API

Photo by Shopify Partners from Burst

Why manually type in code?

In Learn Ruby: The Hard Way, Zed A. Shaw, explains that you must type in the exercises by hand. It helps you to learn how to read, write and see code. By using copy and paste, you don’t learn how the code works.

How do I used this tutorial

This site is simple. I started with a simple HTML site. Then, I made some adjustments after I got the GET request working.

1. Added style to the website
I started with a simple HTML website that didn’t have much style to it. First, I added CSS code to style the images. Then, I added a header and footer to the site. I decided to stick with a black and white color scheme.

2. Changed how the API displays the data
When I first created the site, the API returns the user’s name in all lower case letters. I wanted the name to follow the format of first letter upper case and the rest lowercase for both first and last name. I modified the JavaScript to capitalize the first letter.

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

The API returns the email address as text only. I wrote an additional function to change email to be an actually email link.

function createEmailAddress(string) {
    return "<a href=mailto:" + string + ">" + string + "</>";
}

3. Changed the size of the photos
In the tutorial, the photos are on the small size. I wanted them to be bigger. To learn how to do that, I went to the Random User API documentation and read how to get bigger photos. It was a simple change.

Random User API

See more about learning JSON by building a simple website.

Page 6 of 27

Previous

Next

Powered by WordPress & Theme by Anders Norén