Aspects of a Writer Project: The Writing Life Plan

Design and Accessibility

General design principles

Expert designers will show there are exceptions to my design tips here, but these principles will help amateur web designers.

Less is more

Don't overwhelm visitors with clutter. Keep it sleek and clean.

Colors

Pick a palette of four colors. Make two of those colors bold accent colors (red, blue, green, pink, purple, etc), and make the other two neutral (black, grey, beige). Use these four colors in a consistent way. Your bold colors can be used with large text and decorative elements like headings. Standard text and background colors should be high contrast and neutral. I highly recommend using black text on a white background because it is guaranteed to be easy to read.

Fonts

Select one or two fonts and use them consistently. If it is a decorative font, use it exclusively for large headings. Keep body text simple with something tried and true like Ariel or Times New Roman. If your web template allows it, make the font sizes one or two sizes bigger than the default to make the webpage easier to read.

Making rich and accessible web pages

Text

Try to have upwards of 400 words of text per page. This signals to the bots that there is something of substance on the page. Within this text include your key words and phrases 3-5 times.

Photos and Alt. Text

Try to include at least one non-decorative photo per page and always include alt text for that image. Alt text is what screen readers will read to disabled users (more on that shortly), and they deserve to know what’s in the image. The method for adding alt text will vary with the website editor you are using. Usually when you are in editing mode, you can right click an image and find the alt text option under the settings in the drop-down menu.

There is debate on what exactly should go into alt text. A guiding principle is to plainly state the key information communicated in an image without adding your interpretation. Harvard University’s web page “Write good Alt Text to describe images” has useful details on best practices.

When it comes to describing people, particularly in regard to identities like race and gender, disabled people have a diversity of opinions that are usually contextually specific. I recommend reading “‘It’s complicated’: Negotiating Accessibility and (Mis)Representation in Image Descriptions of Race, Gender, and Disability” by Bennet et al. to get a nuanced understanding of the situation. (If you Google this article title, a free PDF version will likely come up.)

Using myself as a case in point, I would opt to describe my headshot as, “Portrait of author, Paige Welsh, a thin, light-skinned White woman with straight hair in her 20s” because this information would be available to sighted people, and it is relevant to the perspective I bring to my writing. Consider this scenario: a blind user is seeking people for a panel, and they want a diverse group of people speaking about their experiences. It could be helpful for them to know how the people they are soliciting are percieved by sighted people.

Clean, Accessible Layouts

Keep the layout simple and logical. Much of this comes down to how you use the tags and elements, the parts of the website as described by HTML code, on your webpage.

It’s important to keep in mind that many people, particularly those with vision impairments, use screen readers to access web content. That means they use a piece of software to describe and read your web page aloud.

I recommend at least once attempting to use a screen reader yourself to get a sense of how this technology reads web pages. I like to use the SilkTide google chrome extension, to hear how a screen reader describes the page. You can also watch this excellent video, Screen Reader Demo for Digital Accessibility, produced by UCSF Documents & Media Photography and Mark Sutton demonstrating good and bad screen reader experiences on web pages.

Using webpage elements like headers, tables, and lists as they were intended makes the experience much more pleasant for disabled users. A well-organized web page is also better UX for anyone reading your content, and the Google bots will reward that in their rankings.

If you are using a predesigned webpage from Wix or WordPress, most of these templates have already done most of the relevant coding and changing them is beyond the technical expertise of the average user. Not all pre-designed templates are accessible. Some websites like WordPress have an icon that indicates a template meets certain accessibility standards. I highly recommend you select an accessible template to prioritize the experience of disabled users and to boost your SEO ranking.

Once you are working within that template, you do have say in the order and layout of content. For example, use the heading and paragraph elements to express text rather than incorporate text into a jpeg or png banner image. Sometimes this is difficult if you are including a diagram, but for decorative elements, it is usually unnecessary to include text in an image. If you are going to use or create a diagram, seriously consider how you would translate that information into a format suited for a screen reader.

Use your headers in a logical order as well. Keep your Heading 2s nested within sections marked by Heading 1s and so on. If you have something to say with text, keep it to the text. I also strongly recommend copy and pasting text unformatted into your web editor, and only doing your formatting within the website. To understand why, you can read the more technical, but not strictly necessary, explanation at the end of this page.

Building links

The internet is built on connections. The Google bots will interpret a page that is linked to by many other web pages as desirable. Within your little niche of the internet, you can build links by connecting your social media accounts and personal webpage. Go ahead and put a link to your social media pages on your website and put a link to your website on your social media pages.

Link building is also the reason a lot of marketers now encourage people and businesses to maintain a blog. Each of those blog pages links back to your home page and is another opportunity to repeat those key phrases. If this feels kind of gross and nihilistic from a writing perspective, you’re absolutely correct! Much of what you read on the internet was built around marketing rather than a desire to speak on that particular subject. The term “content” speaks to the internet inclination to generate filler text and images around keywords so users land a website where they might buy something. This is the landscape you are writing within.

Still, your blog can be a legitimate place to update people on your life and ponder the mysteries of the universe. If you’re bummed that your original website title, “Dreams and Sand” is a bad fit for the homepage, you can give it to your attached blog.

Intermediate web design tips and explanations

Most out-of-the-box web sites also include a rich text editor. You experience this as the box you type your blog posts or web content into. Within the rich text editor this is usually a button that looks like “text” or. This button gives you limited access to writing with HTML code.

For example, let’s say you write “Sam Ramos, Writer,” in the rich text editor and format it to be Heading 1. The text suddenly looks bigger and bolder.  When you click to the “<>” or “text” view, “Sam Ramos, Writer” is the same size as the rest of the text, but now it is bracketed by “<h1>Sam Ramos, Writer</h1>.” This the HTML mark up.

A well organized and accessible page will have a tidy, organized HTML mark up. Sometimes, copy and pasting from Microsoft Word or another source, adds cluttered HTML mark up. Try it yourself. Write some text, format it in word, and then copy and paste it into your text editor. Click to the HTML view. Likely you have a bunch of extraneous <div> and formatting markers.

To keep things tidy, copy and paste text as “plain text.” In a PC, you can right click, and in the menu “Paste as plain text” appears below the “Paste” option. Go with the plain text, and then format your text exclusively in your web page editor. If you are feeling confident, you can also experiment with tidying up on the HTML end. Go ahead and delete all that formatting glut so all that’s left are simple and logical heading, list, link, and image elements.

Concluding thoughts and a bare bones checklist

That was a lot to take in, especially if you don’t regularly use the internet. If you’re scratching your head, here are the easiest and most impactful actionable items you can do. Consider this a bare bones check list.
Licensed under Creative Commons BY-NC-SA 4.0

Return to "The Public Writing Self"​​​​​​​

Go to Table of Contents page

This page has paths: