7 UX Tips for Developers

The success of your website or app depends on creating the best user experience possible. Not all developers have a designer available to help with the design.

7 UX Tips for Developers

You can use the following 7 UX tips to create a better experience for your users:

Prioritize features

When you create a new website or app, you need to decide what features to add, leave out and improve. Prioritizing makes it easier to create a website or app with the right amount of features and helps you to focus on getting it built.

Speed things up

Make sure your website or app is fast and responsive. A page or app that takes to long to load will loose users. Make it as fast as possible to ensure an enjoyable user experience.

Design before you code

Sketch your designs with pen and paper or other prototyping tools. Show your designs to users or even team members. Get their feedback before you write any code. It is easier to change a design before you start writing code. Here’s how you do a UX Design Process:

Track data

Use Google Analytics or other analytic software to help you learn more about your users and how they use your app or website. The more you know, the better decisions you can make when improving your app or website.

Make your UI simple and easy to use

Easy said than done. How do you make the UI better? Keep it clean and consistent. Use readable fonts. Choose larger font sizes and avoid fancy fonts like script or handwriting fonts. Make your navigation simple. Use standard icons and words that people recognize.

Remove or prevent extraneous features

Be ruthless when considering new features. Ask does this feature solve a need? Will majority of our users want it? If you have older features that no one uses, reconsider whether or not you should keep them.

Show informative error messages

Write error messages that tell the user what happened and what to do next. Good error messages can help make your website or app easier to use. Bad error messages only frustrate and irritate users.

When people can’t figure out how to use a website or app, they leave or delete the app. If you want to prevent people from abandoning your app or website, use these tips to make it better.

What tips would you add?

Tools for Building an One Page Website

You need to build an one page website. How do you go about building one? Do you use specific tools? You can chose to build a landing page with a pre-built template that you customize or build your own from scratch. The best way to learn a new set of tools or a framework is to build your own. I choose to build a new website with Bootstrap and LESS.
Tools For Building One Page Website

What type of website?

One page portfolio for a Developer. I sketched out on paper a basic design.
Developer Portfolio Template Sketch

When building a new website, you have to make a lot of design decisions. For this project, I am focusing on choosing colors, fonts and images.

How do you choose the colors?

For inspiration, I looked books that I own. I selected one with a color scheme that I liked. Next, I used a Material Design Generator to create a color palette. For this project, I used coolors.co and selected a color palette similar to the book cover.
Coolors Color Palette

What fonts are you going to use?

You want to pick fonts that work well with your website’s content. You can use these tools to help pick fonts that look good together. fontpair.co or 20 Inspirational Free Resources for Better Typeface Pairing Or if you want to experiment, use fonts.google.com to find a font you like and look at the recommended pairings.

For this project, I decided to use: Julius Sans One and Crimson Text. I found it on https://femmebot.github.io/google-type/.

Where do you get images from?

Do you take your own photos or get them from a stock photography website? Whenever you can, you want to customize your website with your own custom photography. Not all projects give you the time to create your own photos. When you can’t create your own photos, you can use stock photography from different web collections. I like to get stock images from pixabay for my projects. I picked out a hero image and several support images for this project.
Binary Background

What was the result?

It didn’t work out. The color scheme and hero image seemed too busy, red and angry. So, I decide to look for a better hero photo. The one I chose wasn’t working. I tried a couple of different photos. I found one that I liked better, but it didn’t fit the existing color palette. The next step was to change the color scheme slightly. I picked out two colors in the photo that looked good with the other colors in the color palette. I changed the CSS to see how the new colors worked. They looked much better. The newer version of the website works better than the original.
One Page Programmer Final

As web developers, we make decisions that affect the design and functioning of a website. Not all decisions work. Sometimes, you have to make changes that affect the design for the better. You may even have to change your approach in order to make a website or app an reality. Have you ever had to make minor changes that improved your original design?

Notes on Building Accessible Websites

Everyone should be able to go to a website and do what they want with a minimal amount of effort. What makes a website accessible? An accessible website should be perceivable, operable, understandable and robust. A website is perceivable when you provide text for any non-text content like images, videos, podcasts or other sound files and provide alternatives for time-based media. An operable website makes all functionality available via keyboard and provides users enough time. Your website is understandable when you create content that is readable and understandable. It becomes robust when your create it using techniques that maximizes future compatibility.
Notes On Building Accessible Websites

How do you achieve this?

You get started by adding accessibility to your website with HTML, CSS and files names.

  • Add alt tags to images. Not all images need the alt tag. If your image is for decoration only, you can skip the alt tag.
  • Use headings frequently. Headings help break up the text and make it easy to understand. Remember, to use one H1 tag per page
  • Use color contrast. The right color combinations can make text either easy or hard to read. Try Lea Verou’s color contrast tool.
  • Make your file names meaningful. Your camera gives your images names with long sets of letters and numbers. Rename them to describe the image. Meaningful names can help with SEO and finding an image if you need to updated it later.
  • Add a label to every form element.

How do you know how accessible your website is?

You can use the following tools to determine your websites accessibility and take steps to fix issues.

Wave

Wave is an accessibility evaluation tool. It can help you to make your content more accessible. It shows you errors in red, warnings in yellow and accessible content features in green.

Wave On Burlington Footwear

ChromeVox

A screen reader for the Chrome browser. Use ChromeVox to learn how a visually impaired person has to use your website.

Your Keyboard

Use your keyboard to navigate through your website without using your mouse. If you need to use your mouse, then you have some items that need fixing.

Do you use Chrome for Your Development?

Ire Aderinokun, UI Designer and Front End Developer, talks about the Chrome Accessibility tools that she uses to test for accessibility issues.

While you develop your next website, use these tools and tips to ensure that you build a site that is perceivable, operable, understandable and robust. By using a variety of tools, you can help to make the user experience better for all of your users.

Want to learn more about accessibility? The A11Y Project is working to make web accessibility easier for web developers to implement.

Designing Your Process (For Fun and Profit)

What is design? Design solves problems. If you aren’t solving a problem, than your design is making it pretty. Whether it is a website, an app or service, your design must do something. Pretty is not the goal of design.

How do you go from pretty to design?

  • Understand your clients needs. Whether its an app, service or website, work with them to learn what they want.
  • Know who the audience you are designing for. Who are they? What problem to they need solved? Why would they use your solution?
  • Define the problem. What is the problem that you want to solve?
  • Solve the problem. Develop the solution to your problem.

In order to do this, you need to develop a process that help you get from idea to solution. Chris Ford at WordCamp Orange County 2016, talks about Designing Your Process.

You can also find the presentation slides on Slide Deck.

By developing a design process, you can see where you are going, choose the right tools and deal with unexpected surprises and failures when they occur. What have you included in your design process?

How Do I Manage Multiple WordPress Websites?

When you have a single WordPress website, managing it is easy. You log in update plugins, WordPress or your theme. Once you start making more WordPress websites whether for yourself or clients, you’ll need a more effective way of managing them.

Manage Multiple Sites

With WordPress, you have a number of solutions to choice from that help you manage multiple WordPress websites from one location. No more logging in and out and switching between websites. Here is a quick overview of three of the best WordPress Management solutions.

MainWP

A WordPress Management plugin that allows to manage multiple WordPress sites from one location. You can manage your day to day WordPress tasks from posts to updates. MainWP is a free plugin with many features.

You can:

  • Manage Plugins and Themes
  • Manage Unlimited WordPress sites
  • Manage Users
  • Host on Your Own Server
  • Manage content, upgrades and backups

What do you get with the paid version?

  • Article Uploader
  • Advance Uptime Monitor
  • Bulk Settings Manager

Infinite WP

A self-hosted, multiple WordPress management platform that simplifies your WordPress management tasks. You can backup and update multiple WordPress sites from one location without having to login to each site.

  • Written in PHP; not native to WordPress
  • Free
  • Self-hosted
  • Master Login
  • One Click Update
  • Back Up and Restore
  • Doesn’t matter what server you install it on

What do you get in the paid version?

  • Scheduled Backups
  • Manage Users
  • Publish Posts and Pages
  • Security Plugins like WordFence and iThemes Security
  • WP Maintenance
  • Cloud Backup
  • Staging

CMS Commander

A powerful dashboard that allow you to manage all of your WordPress websites in one solution. CMS Commander also provides tools for bulk posts articles and pages to your blogs simultaneously, create a new WordPress site with all the settings that you need to get started and more.

  • Free to try
  • One Dashboard to Control All WordPress Websites
  • Full Overview of Traffic and Statistics
  • Copy Entire WordPress Sites for a New Project
  • Complete Control to Manage Posts, Comments and Users
  • Easy to Update All WordPress Sites
  • Automatic Backups of All Your Sites

Summary

Managing multiple WordPress websites individually is both time-consuming and unproductive. By using a WordPress management tool, you can be more productive by streamlining your maintenance tasks and save time. Each tool has different features, benefits and pricing. Pick the one that fits your needs.