website design in 1 hour (handout)

2
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! CMS VS HTML 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 LOW CUSTOMER PRIORITY Secondary in Navigation Some Cross Linked Limited Graphics & Emphasis Primary in Navigation Highly Cross Linked Prominent Graphics & Emphasis HIGH CUSTOMER PRIORITY Tertiary in Navigation Limited Cross Links Little or No Graphics & Emphasis Secondary in Navigation Some Cross Linked Limited Graphics & Emphasis LOW ORG PRIORITY

Upload: amy-l-jorgensen

Post on 07-Nov-2014

544 views

Category:

Self Improvement


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Website Design in 1 hour (handout)

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!

CM

S V

S H

TM

L

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

LO

W C

US

TO

ME

R P

RIO

RIT

Y

Secondary in Navigation

Some Cross Linked

Limited Graphics &

Emphasis

Primary in Navigation

Highly Cross Linked

Prominent Graphics &

Emphasis

HIG

H C

US

TO

ME

R P

RIO

RIT

Y

Tertiary in Navigation

Limited Cross Links

Little or No Graphics &

Emphasis

Secondary in Navigation

Some Cross Linked

Limited Graphics &

Emphasis

LOW ORG PRIORITY

Page 2: Website Design in 1 hour (handout)

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/

US

AB

ILIT

Y G

UID

EL

INE

S

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.

[email protected]) 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?