I was asked by a student in my WordPress class recently what defined a “professional blog,” one that met all the criteria for a well-designed, well-formed site that met web standards.
What a marvelous question!
We brainstormed all the elements that make up a web standard site, and mixed in personal preferences of the students along with lists from a wide variety of online articles that attempted to set the criteria for what defined a well-designed site.
Here is our list, related topics grouped by the students.
- Readability:
- Clean easy-to-read, original content.
- It is both a pleasure to view and read.
- Consistent topical content.
- Content is well organized, grouped by categories and tags.
- Headings within the content are used well and simply designed.
- Paragraphs are short not long.
- Black colored font (not gray or shades of gray or black).
- Black letters on white background or white letters on black background, or black letters on pastel colored backgrounds ONLY.
- Content fonts at least 11 pt. tall.
- Lists are clearly identifiable with bullets or numbers.
- Nested lists are well-designed with appropriate whitespace indention.
- Little or no unrelated content.
- Avoid too many links. You don’t have to link every word longer than 6 characters.
- Citations and blockquotes are designed to separate others’ words from the author’s.
- Identity/Branding:
- Original content.
- Clear purpose, goals, and mission.
- The design and branding is consistent across every page of the site.
- The first, second, and third impression convey the same information and message on what the site is about.
- The branding (header art) is the same on every page.
- Calls-to-action are clearly identifiable and lead to no more than 3 clicks to conversion.
- You want to get to know this person or company and do business with them.
- Multimedia:
- Images are original, in focus, and not FX’d up.
- Images are aligned within the content so the words either wrap around the images or the images stretch across the content column with words above and below.
- Images are large enough to SEE without overwhelming or competing with the content.
- Image file sizes are small for fast downloading, but appropriate to viewing without distortion.
- Images complement content and design.
- Images are original, not stock photos.
- No gratuitous or useless images. All images must be relevant.
- All images created by others feature proper citations and credit links.
- Videos and music does not autoplay.
- No more than three videos on a web page.
- Video plays on the page and does not force the visitor to go to another page.
- Design Elements:
- Familiar, easy-to-read fonts.
- No more than 3 font styles on a web page, two is better.
- No clutter. Every pixel counts.
- Design complements content.
- Consistency, in design, layout, content structure, and graphics.
- None or few ads.
- Colors are complementary, not clashing, and few, nor more than four colors to a web page.
- Minimalism, a clean, open design with whitespace and no crowding of content.
- Usability:
- Navigation is immediately recognizable and easy to use.
- Key navigation follows standardized forms and web standards.
- Sidebars are clutter-free and everything in them is important and critical to the purpose of the site.
- Visual hierarchy, navigation that shows us menus and submenus without clutter or confusion, and specific and related categories and subcategories.
- No pop-ups or interstitials.
- Loads fast.
- Content loads first, then branding, then images.
- Responsive and mobile friendly.
- Familiar layout. You know where everything is and you don’t have to hunt for links to key information.
- Designed to not make us think.
- You know where you are and who you are with at all times.
- Web Standards:
- Legal policies are in place and easy to find.
- Links open web pages. They do not force web pages to open in a new window or tab.
- Links are in properly formed HTML structure for readability, not link dumps, pasted in links.
- No autoplay anything or movement.
- All downloadable material is clearly marked as what it is (PDF, MP3, DOC, etc.), with instructions on how to download it.
- The About web page tells us what the site is about and who the author is, and why they are doing this.
- The Contact web page features an easy-to-use contact form for connecting with the author, and there is not a single email address to be seen.
- Compliance with web accessibility with clear and specific link anchor text, images with descriptions for the blind and visually impaired, and browser keyboard shortcuts for common navigation areas.
It’s a great list. Not complete, but organic. It really reflects many of the most desirable and hated elements in a web design.
Most Important Characteristics in Web Design
A few points the students fiercely debated are worth separate discussion from the list.
Room for the reader: There must be room for the reader. While harder to identify, the students agreed that anything that got between the reader and the website content had to go. That meant ads, interstitials (pop-ups), busy designs, too many colors, too many fonts, etc. Clutter and interference.
Harder to identify were the tiny things that get between a reader and the content, as well as the goals of the site. Many thought it was the lack of whitespace, resting places for the eyes and the reader’s thoughts compared to crowded content and designs. Others thought it was the details that mattered, the little things that lack consistency or become cluttered such as poorly pasted content from word processors, misspellings, grammar errors, not cleaning out comment spam, inconsistent use of headings, using bold for headings instead of the headings tag, forcing font styles and colors, too many bolds, too many italics, little things that add up to a message that says the reader isn’t paying attention to details and doesn’t care enough to keep their site clean and proud.
“Pride.” That word kept coming up as we dove deeper and deeper into what made a web design worthy. “It looks like they care enough to do their best,” a student explained. “If they care, we care. When we care, we feel a relationship with the blogger. When they care, we know they are thinking about us.”
Boring: The students realized that boring was better. All the glam, glitz, special fonts, bright colors, animated gifs, all the busy so many inexperienced web designers add to their site aren’t worth it. Keep it clean and simple, easy to read and easy to use.
People want information. They want entertainment. They want to read, watch, or listen. They don’t want to have their senses assaulted. To quote another student, “So keep the design boring, dude, and the content exciting.”
Your blog exercise is to review this list, and possibly find your own lists on the web that clarify a well-designed site.
How does your site measure up?
If you are too close to your site, too vested in the design and layout, ask some friends to be honest. Or ask people you don’t know well to give you feedback. Show them the list and ask them to check off which elements apply and which don’t. Get feedback on how you are doing.
Every single one of these design elements and content considerations are choices. There are no requirements. But if a bunch of college students studying web development, design, and blogging are thinking these things, and other experts are offering this advice, shouldn’t you take it a bit seriously?
Make a list of the things you need to change on your site to make room for your readers and to keep it a bit boring.
You can find more Blog Exercises on Lorelle on WordPress. This is an ongoing challenge to help you flex your blogging muscles. You may join us at any time, but I recommend you take a moment to visit past blog exercises to help invigorate your site.
