Learn the basics of building or redesigning a website. Presented with Dr. Ray Gasser and Kathryn Magura at the ACUHO-I Annual Conference 2013

1. Information must be easily accessible to
minimize customer searching time by reducing
the number of pages (clicks) and consolidating
information. This means there should be more of
a horizontal navigational structure rather than a
vertical navigational structure. Clear and simple
navigation is the top priority; important
information like locations, contact information
and booking methods are readily available to
reduce prospective customer frustrations.
Current and urgent topics may be highlighted as
a focus-point on the main landing page. These
topics are changed based on the primary
audiences that will be using the website at the
time in order to ensure the message is received
successfully. Work with your content experts to
determine the priorities and schedules.
REDESIGNING A WEBSITE
Redesigning or starting a new website can be
intimidating. Take a deep breath and start by
playing online! Look at your favorite websites
(housing or not) to look at what you like or dislike.
Do some research on the purpose of your website
and your audience to make some decisions on the
desired user experience, overarching design, and
project timeline and benchmarks.
Now that you’re ready to start, here are some steps
to get going:
1. Choose your DOMAIN
2. Set up reliable HOSTING
3. Define the PURPOSE of your site
4. Identify your AUDIENCE for content
development
5. Determine EASY NAVIGATION
6. Make a SITE MAP & flowchart
7. Write CONTENT that is useful and informative
8. Select IMAGES that will create a lasting
impression
9. Create a DESIGN that’s attractive, simple, and
professional
10.Set up TRACKING & ANALYTICS to monitor
and strategize
HTML: HYPERTEXT MARKUP LANGUAGE
HTML is a markup language that enables the creating and publishing
of web content. It is currently the fundamental way to publish content
for web browsers.
CMS: CONTENT MANAGEMENT SYSTEM
Web designers developed CMS systems using HTML and Javascript to
simplify updating and managing websites. CMSs include Drupal,
Expression Engine, Wordpress, and more!
CMSVSHTML
PROS
• Easy
• Quick
• Consistent Branding
• Add/Delete Pages Easier
• Not highly technical
CONS
• Difficult to change design
• Expensive
• Less flexible
PROS
• Arguably better coding
• More design control
• Lower pricing
CONS
• Technical skills needed
• Start everything from scratch
Content development can be one of the most difficult areas to tackle when
redesigning your website. Messaging on the website should be seen as “push
marketing” messaging. All websites have full control over the content and there is
very little opportunity for a customer to engage with this one-way communication.
Customers know this and therefore want to find the information they can seek
quickly and easily.
Websites are designed to provide information about services, facilities, culture, and
guidance on how to live in campus housing. Always work with the content
managers to ensure accuracy and ideas on how the text can be simplified or better
organized for the end user. The information in the website news should be succinct,
current, and relevant.
Website development best practices include being succinct, relevant, accurate,
innovative, intentional, and dynamic. One of the most difficult practices is to be
“succinct”. All customers expect to find their information quickly and easily – and
this can be difficult if there is a large amount of text or too much explanation. Try to
harness your “Twitter” skills and summarize as much as possible. Try leveraging
your web analytics as well to show what the customers want.
In order for messaging to be appealing and engaging, the website could include
updated photographs, videos, location maps, and departmental connection
opportunities as well as customer reviews. Look at what you already have & get
started!
NAVIGATION
CONTENT
HIGH ORG PRIORITY
LOWCUSTOMERPRIORITY
Secondary in Navigation
Some Cross Linked
Limited Graphics &
Emphasis
Primary in Navigation
Highly Cross Linked
Prominent Graphics &
Emphasis
HIGHCUSTOMERPRIORITY
Tertiary in Navigation
Limited Cross Links
Little or No Graphics &
Emphasis
Secondary in Navigation
Some Cross Linked
Limited Graphics &
Emphasis
LOW ORG PRIORITY

2. HELP
@DrRayGasser
@Kmagura
@AmyLJorgensen
ACCESSIBILITY
Websites should be accessible to the broadest
audience possible. Factors to consider: screen
readers for visual impairments, navigation via
keyboard only, dial-up or low bandwidth
connections, browsers that don’t have javascript or
flash enabled, and mobile devices.
How to check if your site is accessible:
• Turn off images in your browser (make sure
image place holders are turned on)
• Turn off support for JavaScript
• Tab through the page, navigate without a mouse
• Try to change the standard font colors and
styles in your browser
• Try to increase the font size by using the
browser (view > text size > increase)
• Turn off support for stylesheets, does your site
still makes sense?
MORE INFO:
http://wave.webaim.org/
http://web.mit.edu/atic/www/accessibility/guidelines.html
Legal Guidelines: http://www.w3.org/TR/WCAG20/
USABILITYGUIDELINES
Our customers are using multiple devises
to look at information. Millennials switch
their attention between media platforms
like laptops, smartphones, tablets, and
television 27 times per hour on average –
and other generations do this 17 times per
hour! Make sure your website can be
viewed on many different platforms.
We have two main choices for making a
mobile friendly website:
1. Mobile Site: it is essentially a copy of
your website.
2. Responsive Design: The device does
the work and automatically adjusts
according to a device’s screen size.
WHY RESPONSIVE DESIGN IS BETTER
1. ONE website for every screen
2. Shorter site development cycle
3. Performs well in search results
4. Gives choice for the viewers
So now that you’ve started the brainstorming
process, how can you leverage your navigation to
increase consumer satisfaction? Web analytics,
such as Google Analytics, provide clear feedback
from your consumers – and plainly tell you what
they think is most important. Plus they can be free!
Google Analytics are one of the most popular free
analytics tools. Below are some resources to get
you started.
USING WEB ANALYTICS
Beginner Guide to Google Analytics http://goo.gl/mkxpt
Start Google Analytics http://goo.gl/uQSAZ
Set up Goal Tracking http://goo.gl/l9rdS
Set up & Configure Site Search http://goo.gl/alSUk
Interface Navigation http://goo.gl/CSsjQ
Google Analytics Annotations http://goo.gl/8hygo
3 Metrics Beginners Should Watch http://goo.gl/88ZBJ
Creating Custom Campaigns http://goo.gl/gFl80
Insightful GA Dashboards http://goo.gl/Xj1vC
Using Custom Alerts http://goo.gl/neDEx
What to do if Traffic Drops http://goo.gl/Tk9k5
DESIGN FOR MOBILE VIEWING
The following information and checklist is provided to help guide your team
ensure consistency throughout the website to enhance the user experience.
QUICK WRITING TIPS
Quality & Timeless Content
Avoid content that may become easily outdated. The names of individual staff
members change frequently. Job titles and generic mailbox addresses (e.g.
help@school.edu) should be used instead of referencing an individual’s name. Timely
information that will expire soon may have a better home in social media than on the
website.
Length
Remember that less is more when writing for the web. The goal should be to produce
content that is easy to read with concise sentences.
Tone
Use a professional tone. Websites are expected to be the digital storefront of our
organization. We are responsible for protecting our brand and representing the
organization in a professional way. Informal and lighthearted language is better suited
for social media platforms.
Grammar and spelling on the page
Because the content appears on the web immediately, it is important to make sure
that there are no issues with spelling or grammar. Have a colleague read through
your text before posting it.
Keywords
Keywords are identified target phrases that will resonate with the online audience.
Think about the words users would type to find your pages, and make sure that your
site includes those words. Keywords can be used within: URLs, page titles, page
headings H1-H2, general paragraph content, image filenames, body text, image Alt
attributes, bold & italic text. Free Google Keyword Tool: http://goo.gl/AvMcE
TECHNICAL TIPS
URL Structure
Simple and organized URLs make it easier for search engines to read web pages and
also make pages more enticing for others to reference. URLs should be dynamically
written with relevant words that help define what the page is about. Hyphens (-)
should be used over underscores(_).
Page Title Tag <title>
A title tag defines the page topic for users and will be the first line of a search engine
result. Titles should be short, informative, and unique.
Heading Tags <h1> <h2> <h3>
Heading tags are a visual cue to users that the text is important and helps organize
the content hierarchical structure. Avoid duplicating heading (e.g., "More Details") or
label text (e.g., "First Name") unless the structure provides adequate differentiation
between them.
Anchor Text (links)
Anchor text is the clickable text on a link that tells users, search engines, and screen
readers about the linked page. Anchor text should be short and informative. Links
should be formatted to be easy to find and navigate.
Images & Videos
Images should be included to provide value and visual interest to pages. They should
be organized in one media file directory and include alt” text that is brief and
descriptive.
DON’T FORGET
Did you remember…
• Social Media Integration?
• Print, Email, & Share Buttons?
• Linking your locations in Google Places?
• Talking with your content & management
managers?
• Creating a schedule to update/check content?