GEOG 351: Website Design

Common Issues / FAQ

Resources

Best Practices

Navigation

Make sure menu is on every page
Home page should be an introductory page to describe site and what users will find in pages
Consider linking to menu items inline on your home page
Do not repeat/copy content, link to existing content

Layout

When designing text layout, know that readers tend to read left to right in F shape
Break up text with headings, image/media
Balance distribution media / text
Repeat patterns (readers like to
Hierarchy of importance
You are limited by the theme you have selected, and there are limited themes available to use. If you’re finding that it’s impossible to change something in your chosen theme, preview another to see if you get a better result with a different one.

Text

Font should be basic and have a strong color contrast between text and background. White background and black text is the most legible option
Left aligned text is easiest to read
To break up sections on the same page, use the “Headings” content type and title each section.
Always spell out an acronym the first time you use it

Vermont Public Radio (VPR) is a local news station.

Link text

Always embed a link into your text. URLs are awkward to read and linking within your text should tell your user exactly where the link will take them

Good link text:

Read this encyclopedia entry on the Flux Capacitor for more information.

Bad link text:

For more information on the Flux Capacitor click here (this doesn’t explain where the link will take you)
See this link for more information on the flux capacitor https://en.wikipedia.org/wiki/DeLorean_time_machine#Flux_capacitor (this link is hard to read and very awkward for anyone using a screen reader)

Color

Don’t rely on color to imply meaning. In graph, include a color code
Use color conscientiously, be aware of contrast and accessibility concerns

Red and green combinations are particularly challenging to read

Images

The purpose of alt text is to allow someone who cannot see the image to understand what is being displayed.
Alt text should be provided on images unless they are purely decorative.

It should be a brief description of what the image looks like, not a repetition of the caption.

I like this alt text decision tree to help me decide if alt text is needed.

WordPress Dashboard

Posts

Blog form of adding content
Maybe have less flexibility in design and layout
Likely to have date and name listed on top of page

Appearance

Themes

Choose and preview different themes with your existing content

Customize

In page editor (see below) where you can alter menus and home page settings

Widgets

Add a footer if desired

Plugins

Google fonts: if you’d like to change the default font from your theme

Open sans is a highly readable sans serif font

WordPress Customize Menu

Not all themes have the same menu, so some items may be different or missing. All should have Site Identity, Menus, Widgets, Homepage Settings, and Theme Options.

Site Identity

Change the name and subtitle of your site

Header media

Image at top of site, does not need alt text

Menus

Create new menu

If the menu navigation is not showing up how you want it to, create a new menu

Title your new menu, this is so you know which menu is which and won’t show up on your site
Select Top Menu
Add items, select the pages you want to appear on the menu

You can rename the page titles once you add them by clicking the down menu option and changing the Navigation Label

To save you new menu, hit publish

Widgets

If you want to add a footer, use the widgets menu to add content.

Homepage Settings

Change your homepage to a “Static post”

The default may be Your latest posts, which will be a list of any posts you’ve published

Select the page you want to be the homepage using the dropdown under Homepage

Common issues / FAQ

Too much white space, especially on the right side.

(Might not be able to fix this anymore, likely bc mobile constraints)

Convert any posts to pages (means you’ll also have to update the menu structure)
On the Wordpress dashboard, go to the “all pages” settings
Hover over a page title and click “quick edit”
Open the “template” drop down and select Full Width instead of the default

Changing the homepage to different page

Open the “customize” menu from the top toolbar
Open the “homepage settings”
Choose the option “A static page”
In the “Homepage” drop down choose the page title you’d like as your homepage
Save by clicking publish

Menu pages or order not right

Open the “customize” menu from the top toolbar
Choose the “menus” option
Click the Main Menu button
Drag to reorder pages or click the add items button to add a different page
Save by clicking publish

Image caption text too large

Highlight the caption text in wordpress editor
In the pop-up menu with text formats, click on the down arrow and convert text to superscript

Changing the font

Start at Google Fonts and pick out the font you’d like to use
Open the Wordpress dashboard and choose the “plugins” editor
Search for Google Fonts and activate
Below the “Plugins” title there are three links (all, active, inactive), click on the Active link
Under Google fonts, click on settings. Now you can change the font for different aspects of your text