Sometimes, it helps to know what to call the parts of your website. This can come in handy when talking to those who are working with you on the site. Here’s a diagram:
Archive for layout
Don’t add too much content to any one page. A user should only have to use two or three scrolls to get to the bottom of most website pages.
There are two reasons for this:
- Users don’t “read” web-sites— they scan content for relevant information.
- Users on mobile devices find long pages difficult to manage and give up quickly.
“Chunking” content makes it easier to scan. Make your paragraphs short— 3 sentences. These paragraphs may not be the “coherent idea” type that you learned in high school English, but they will make it easier for your users to scan.
Use bold and italic text to highlight things you want your users to pay attention to, but never use underlined text, which will look like links to another web page.
When it seems reasonable, use bullet points or numbered lists to organize your content. These, along with bold & italic text give quick, visual clues that aid in scanning.
Still trying to figure out responsive websites, and if you should bother with it?
This infographic from Verve tries to answer your questions, offer some compelling statistics, and teach you the key features of responsive design all organizations should know about. Check it out!
It’s well known in newspaper journalism that articles “above the fold” – that is on the top half of the newspaper page – are seen and read more often. The same is true on websites: content that is “above the scroll” – that is, visible with no scrolling – is seen and read more than content further down the page. In fact, the further down your page, the less likely content will be seen.
As you think about content for your church website, trying to make it relevant for potential visitors and a welcome mat for your congregation, the single most important piece of information to have above the scroll is the time of your worship service (or services).
Obviously, you should always be displaying the correct time for the next weekend’s worship.
WordPress makes it easy to manage content on a website without knowing code. But if you know HTML/CSS, it isn’t the best idea to do a lot of inline code that overrides the theme. Occasionally, a bit of margin here or there is fine, but we discourage extensively using inline HTML/CSS to override the theme.
Here’s why:
- Depending on how this HTML/CSS is used, it holds the potential to slow your page delivery down, hurting your search engine optimization. First your theme’s CSS loads, telling it to give every paragraph a 10 pixel margin on the left, then your inline HTML loads, with a command in every paragraph for a 15 pixel margin on the left. This additional code takes a tiny fraction of a second, but if you start multiplying that extensively on every page, it can certainly start to add up.
- If you are planning to update the look of your site with a new theme (actually, I should say when, since it will almost certainly happen at some point in the future), it’s highly probable that someone will then have to go in and undo all of that in-line HTML/CSS to make the new theme display properly. Rule of thumb: try not to create future work for future web managers.
- The focus of our ACWP program is helping people without a lot of tech skills be able to manage their own sites. We’ve learned the hard way that it is infinitely preferable to not create hurdles for lower-tech folks to manage content. If you do a lot of in-line HTML/CSS, you may be the only person who can make changes without creating problems in display. We always want to be planning ahead for a “hit by the bus” scenario – if you are suddenly unable to make changes to the site (for instance, through illness or travel), we want to have done the small things ahead of time that will enable others to make changes without making a mess.
(Note: We’ve had two separate clients where someone with HTML/CSS knowledge created a lot of in-line overwriting of the WP theme, and when that person needed to stop working on the website, the organization had to call us to “fix it” so that all that in-line code didn’t keep messing up what the new web manager was trying to do through the visual editor.)
Even people without code knowledge can inadvertently create these problems. Most frequently, we see this when web managers get carried away with changing font colors. Every time you change the font color, it creates inline HTML. Instead of using inline font colors to emphasize text, try these suggestions.
Best practice: as much as practically possible, you want to rely on the WordPress theme to control the display and look of your site.
Want to help your website look more professional? Pay attention to the “rule of thirds”.
The Rule of Thirds is a design principle stretching back to ancient times. It’s related to the Golden Ratio of Pythagoras and Euclid. Architects and artists (including Leonardo da Vinci) have used it for centuries. Your mobile phone camera invites you to use the Rule of Thirds by overlaying a grid in your viewfinder.
The Rule of Thirds divides your visible area – whether you’re dealing with a website screen (not the entire page!) or an individual photo or image – into a grid of nine equally spaced squares or rectangles. The columns are all the same size and the rows are all the same size. This might give you nine squares, if your original image is a square – but most often it gives you rectangles.
Place important elements on your page or in your image along these lines or their intersection points, to create a greater sense of balance and interest.
Here’s an example:
Notice the natural tendency to center the important element creates a less “interesting” image than placing the rock formation on the left-third line.
While the basic layout of your website can’t be altered without changing your WordPress theme, you can apply the Rule of Thirds as you put content on the page. For example, an image with text wrapping around it should only be about one third of the width of the content area. (Because the Visual Editor in WordPress is not a true WYSIWYG editor, remember that you will need to “play” with the size of an image, checking how large it looks in the content area by looking at the page that visitors see on your site.)
Of course, occasionally rules are broken – for instance, you might have an image that is very narrow and will stretch across the entire content area. But paying attention to the Rule of Thirds will go a long way toward helping your site look more professional.
Links for helping you to apply the Rule of Thirds:
If you wanted to promote an event in front of other people, would you stand on your chair and yell? Would you waive unattractive homemade signs in their face? No? Then stop doing the digital equivalent on your website!
Not all the text that you put on your website is created equal. Often, there will be something that you need to emphasize – something that you need to have stand out so that people will pay attention to it.
Sometimes website content managers who are trying to emphasize text do things like typing whole sentences or paragraphs in all caps, or making their font-color fire engine red (when that clearly doesn’t fit in the color scheme of the website). These attempts to emphasize text– where the content manager is presumably intending to create excitement, or at least encourage participation – can create the impression that the writer (and by extension their organization) is either desperate or deranged.
In emphasizing text, your goal is to create some hierarchies of importance that will assist the reader in making meaning out of your text. This is even more important on websites, because most users are not actually reading – they are scanning for relevant information. When you effectively emphasize text, you are communicating: “This is more important than that” – without overwhelming your user.
Here are some tips for more effectively emphasizing text:
- All caps is the online equivalent of yelling. It’s not that you should never yell – just take care to use it when it might be effective, and know that yelling sparingly will create a better response—no one likes to be yelled at. “RESPOND NOW!” is probably more effective than: “PUT YOUR PLEDGE CARD IN THE ENCLOSED ENVELOPE AND BRING IT ON SUNDAY!”
- It is often helpful to type a single word in all caps as a way of emphasizing it, but think about what you’re actually emphasizing. “The SECOND Annual Fundraiser” is less effective than “The Second Annual FUNDRAISER”.
- Use bolded and italic text in the same way– sparingly and thoughtfully.
- Never use underline to emphasize text on the website! It will be mistaken for a hyperlink. (See how I bolded just the word never in that previous sentence?)
- Using font colors that are odd, or not a part of your website’s color scheme generally draw more attention to themselves than the actual text you are trying to emphasize. You end up distracting from the text, and it looks unprofessional – like using too many different PowerPoint animations, just because you can.
- If you are using a WordPress website, let your theme control the font colors – try using Header 3 or Header 4 from the Format drop-down in the content editor. All that text you put in “special” colors on each page will have to be undone the next time you change your theme! In most cases, using bold and italic maybe all you need to effectively emphasize text.
- It might be helpful to give some thought to your “typographic hierarchy”, which is just a way of saying use your font styles to visually convey meaning–and use that typographic hierarchy consistently within your website. For instance, all the bolded info on your page should have the same degree of relative importance. And under each area with a bolded heading, italics further emphasizes text. Here’s an article for further reading.
- Sometimes it’s not your font styles that conveys meaning and emphasis, but your layout. Centering on event title on its own line can emphasize that event, whether or not the font is bolded or in italics. Content that is laid out in columns side-by-side conveys that the information is of equal importance.
Share your other content emphasis tips in the comments below!