Phyllux TechLearn · free
Name the job of the page
Every page does a job. The job might be to answer a question, to collect a name, to show a photo. If the page tries to do five jobs, it does none of them well.
Win: Write one job sentence, a matching title, quiet space, remove one decoration.
One job
Open a page you control. Ask: what is this page for? Write one sentence. "This page collects email addresses for the newsletter." "This page explains our hours." "This page shows the photo gallery from the event."
If your sentence has the word "and," the page has two jobs. Split it into two pages.
Look at everything on the page. Does each piece serve the job? If the job is to collect email addresses, does the page need a paragraph about company history? Probably not. Cut it or move it to a different page.
A page with one job is fast to read. The visitor knows what to do. They do it and leave, satisfied.
Type
Text is the backbone. Most pages are mostly text. Make it easy to read.
Use a common typeface. Arial, Verdana, Georgia, Times New Roman. These are on every computer. They are plain. Plain is good. Decorative typefaces are hard to read in paragraphs.
Set the size to at least 16 pixels. Browser default is usually 16. Do not make it smaller. Many people need larger. Let them zoom. Press Ctrl and + to zoom in. Press Ctrl and 0 to reset. Your page should still work at 200 percent zoom.
Use enough contrast. Black text on white background is easy. Dark gray on light gray is harder. Yellow on white is nearly invisible. Pale blue on white fails.
Test contrast: squint at the page. If the text blurs into the background, the contrast is too low. Fix it. Make the text darker or the background lighter.
Line length matters. A line of text that runs across a wide screen is hard to read. Eyes get lost moving from the end of one line to the start of the next. Keep lines between 50 and 75 characters. Put text in a column, not edge to edge.
Use headings. A wall of text is intimidating. Break it into sections. Give each section a heading. Headings let people skim and find what they need.
Quiet space
Space is not wasted. Space lets the page breathe. Space separates one thing from another. Space gives eyes a place to rest.
Put space between paragraphs. The default is usually enough. Do not mash paragraphs together.
Put space around headings. A heading needs more space above it than below it. This groups the heading with the paragraph it introduces.
Put space around images. An image crammed against text looks claustrophobic. Give it room.
Margins matter. Do not run text to the edge of the screen. Leave space on the left and right. Twenty or thirty pixels is a start. More is often better.
White space does not have to be white. It can be any color. The point is emptiness. A place with nothing in it.
Look at your page. Find a crowded spot. Add space. The page calms down.
What to remove
Pages accumulate. You add a banner. You add a sidebar. You add a popup. You add social media icons. The page becomes a junk drawer.
Remove anything that does not serve the job. If the job is to explain your hours, you do not need a photo slideshow.
Remove auto playing videos. They startle people. They waste bandwidth. They are rude.
Remove popups that appear the moment someone arrives. The person just got here. They have not read anything yet. Let them read.
Remove animations that loop forever. A spinning icon or a bouncing arrow is distracting. If you must animate, let it happen once and stop.
Remove social media icons unless sharing is the job of the page. Most people do not click them. They take up space.
Remove stock photos that add nothing. A photo of a person in a business suit shaking hands does not help someone find your hours. If the photo does not communicate something specific, cut it.
Remove extra fonts. One typeface for headings, one for body text. Two is enough. Five is chaos.
Remove colors that do not mean anything. If every heading is a different color for decoration, the color means nothing. Pick one color for headings. Stick with it.
Walk through the page. Point at each element. Ask: does this serve the job? If the answer is no, delete it.
Reading order
People read top to bottom, left to right in English. Your page should follow that order.
Put the most important thing first. If the job is to collect an email address, put the email form at the top. Do not make people scroll past three paragraphs to find it.
Put related things together. If you have a form with five fields, group them. Do not scatter them across the page with paragraphs in between.
Use headings in order. The page title is an H1. Major sections are H2. Subsections under those are H3. Do not skip levels. Do not use H4 before H2 just because you like the size.
Test reading order by tabbing through the page. Press Tab. The browser highlights the first interactive element. Press Tab again. It moves to the next. Does it move in a logical order? If it jumps around randomly, the HTML order is wrong. Fix the HTML.
Honest pictures
A picture can clarify or deceive. Use pictures that show the truth.
If you run a restaurant, show a photo of your actual food, not a stock photo of someone else's perfect burger. People will arrive expecting what they saw. If the reality does not match, they feel tricked.
If you show a photo of a person, make sure the person is real and connected to your organization. Stock photos of models pretending to be employees are dishonest.
If you show a chart, label it clearly. Show the scale. Do not crop the axis to exaggerate a trend. Do not use 3D effects that distort the data.
Alt text describes the image for people who cannot see it. Write what the image shows, not "image of" or "photo of." If the image is decorative and adds no information, mark it decorative in the HTML so screen readers skip it.
Forms that say what happens next
A form asks for information. The person filling it out wants to know: what will you do with this?
Label every field. Put the label above or beside the field, not inside it. If the label is inside as placeholder text, it disappears when the person starts typing. They forget what the field was for.
Mark required fields. Put an asterisk or the word "required" next to the label. Do not make people guess.
Explain what happens when they submit. "We will email you within two days." "You will see a confirmation page." "This subscribes you to the newsletter." Do not leave them wondering.
If something goes wrong, say what and how to fix it. "Email address is required" is clear. "Error 47" is not. "Password must be at least eight characters" is helpful. "Invalid password" is not.
Put the submit button at the end, after all the fields. Label it with a verb. "Subscribe," "Send message," "Save changes." Do not label it "Submit" or "OK." Those words do not say what happens.
After they submit, confirm it worked. Show a message: "Thank you. We received your message." Do not leave them staring at the same form, wondering if it worked.
You wrote the job in one sentence. You set the type size to 16 pixels. You added space around the heading. You removed the auto playing video. You put the form at the top. You used a photo of your actual product. You labeled the required field. You won.
Extra cuts
The same four answers agreed on one job and quiet space. These are the extra cuts worth keeping.
If the sentence that names the job contains the word and, you probably have two pages. Split them before you decorate either one.
A line of text that runs from the left edge of a wide screen to the right edge is hard to follow. Keep the text in a column your eye can cross in one breath.
After someone sends a form, say what happened. Thank you, we have it, is enough. A form that sits there unchanged makes people send it twice.
A local model pass
Novelmate Studio suggested reading the page aloud and zooming the browser until the type is large. Both checks stay. A label it invented for that reading does not. When the job is done, stop adding sections.