modern website development

37
Modern Web Site Development Erick Beck Division of Marketing & Communications

Upload: tamuwww

Post on 24-Jan-2015

35 views

Category:

Internet


0 download

DESCRIPTION

A retrospective look at the evolution of web development and a look at modern web development practices. Presentation given to the TEEX communicator group.

TRANSCRIPT

Page 1: Modern Website Development

Modern Web Site Development

Erick BeckDivision of Marketing & Communications

Page 2: Modern Website Development

Agenda

• Defining Success• Content Organization• Putting it into Practice• Best Practices & Common Elements• Q&A

Page 3: Modern Website Development

Defining Success

Page 4: Modern Website Development

The world’s first web page consisted of nothing but text and links. Graphics were not available.

Source: newscientist.com

Page 5: Modern Website Development

The first commercial website didn’t exist until August 1993.

Source: oreilly.com

Page 6: Modern Website Development

Source: wired.com

The first banner add followed the next year.

Page 7: Modern Website Development

The first Texas A&M site wasn’t online until 1997.

Source: tamu.edu

Page 8: Modern Website Development

Source: cbs.com

Radio to Television

Page 9: Modern Website Development

Source: clydi.com

Print to Web

Page 10: Modern Website Development

Do people “browse the web” anymore?

Source: tamu.edu

Page 11: Modern Website Development

Today’s user is task driven. They come to our sites for a reason – to find a particular piece of information. For some sites that might be the latest gossip on who the latest celebrity-of-the-day is dating. For the university site it might be the cost of tuition. For yours it might be some bit if engineering news.

The success of our sites is defined by how well we manage that user’s experience. Our ultimate goal is to create a site that is easy to navigate so that the user can easily find the information that they are looking for.

Page 12: Modern Website Development

Content Organizationor,

So how do we do this?

Page 13: Modern Website Development

Define the overall objective of the site• Write it down• Don’t deviate from it• Make your content supportive of the end goal• Don’t be overwhelmed and let the amount of

content steer you away from the primary purpose

Page 14: Modern Website Development

Identify Your Primary Audience• Write it down• Don’t deviate from it• Don’t just pay lip service to it - create content that

your users want• Provide users with what they want, not what you

want to provide

Page 15: Modern Website Development

Content is (still) King• The ultimate goal is to transfer some bit of

information; that is content.• Content is the reason people come to your site, give

them what they are looking for• Don’t guess, don’t publish what you think is

important, do research to find what your users want.

Page 16: Modern Website Development

Source: XKCD.com

Page 17: Modern Website Development

Putting it into Practice

Page 18: Modern Website Development
Page 19: Modern Website Development

Write content in language that your users understand, not in your own departmental jargon.

If your navigation doesn’t get your user to where they want to go it isn’t effective. Organizing the site to where it makes sense to them, and not simply based on your org chart. People know what they service they are looking for but don’t necessarily know who provides it. Don’t make them guess.

Page 20: Modern Website Development

Users are dissatisfied with the navigation and organization of our sites. They cannot easily navigate to find the content that they want.

TechQual Survey conducted on TAMU campus in 2013

Page 21: Modern Website Development

User Behavior

Users are impatient. They do not read blocks of text, they scan for key elements.

• Keep text sort and to the point• Break text into sections with titles and

graphics to make it easy to scan• Break paragraphs into more digestible blocks

of text like bullet lists

Page 22: Modern Website Development

Source: useit.com

Page 23: Modern Website Development

• The original nature of the web was that information was supposed to be interconnected across sites, like a spider web.

• We have changed that model to where sites are independent from one another, isolated from one another, and do not work to complement one another.

• Tear down those walls. Cooperate. Use data feeds and other technologies to show content from other sources on your pages.

A True Web

Page 24: Modern Website Development

Best Practices & Common Elements

Page 25: Modern Website Development

Typography

• Choice of font – primarily sans-serif• Size of text – keep it large• Use of white space, including line

spacing – more whitespace creates greater readability

Page 26: Modern Website Development

Source: getsocialbrevard.org

Social Media

Page 27: Modern Website Development

Social Media

Source: socialsteve.wordpres.com

Page 28: Modern Website Development

Social Media

Page 29: Modern Website Development

Social Media

Page 30: Modern Website Development

Accessibility

Simply put, web accessibility means equal access for all. An accessible website is one that can be navigated and understood by everyone, regardless of disability.

Source: itaccessibility.tamu.edu

What is web accessibility?

Page 31: Modern Website Development

Accessibility

1. It is the right thing to do2. It is the smart thing to do• Makes your pages more useful to everyone, like curb

cuts or building ramps• The biggest “disabled user” in the world is Google.

Making your sites accessible makes your search returns more useful

3. It is the law

Why should I worry about accessibility?

Page 32: Modern Website Development

Accessibility

• Avoid the use of non-underlined maroon links• Be sure all images have a text equivalent• Make sure all videos have a caption or transcript

• Resources for in-depth coverage:– http://itaccessibility.tamu.edu– Training through Employee & Organizational Development

(http://training.tamu.edu)

How do I make my sites accessible?

Page 33: Modern Website Development

Branding

• Approved Logos• Brand Colors• Typography• Site elements

Page 34: Modern Website Development

Mobile Friendly

Not having a mobile-friendly website is no longer an option in today’s world. The number of mobile devices has caught up to the number of desktop computers, and it is quickly becoming the device of choice for viewing web pages.

Source: Morgan Stanley

Page 35: Modern Website Development

Mobile Friendly

• Not having a mobile-friendly website is no longer an option in today’s world. The number of mobile devices has caught up to the number of desktop computers, and it is quickly becoming the device of choice for viewing web pages.

• Creating a mobile friendly web page should be taken for granted. Just as we test our sites in various browsers, we must now test them on the whole range of mobile devices as well.

• Campus resources:– GoMobile! (http://gomobile.tamu.edu)

Page 36: Modern Website Development

Resources

We invite you to participate in the campus web development community:

• University Webmaster’s Bloghttp://webmaster.tamu.edu

• uWeb mailing [email protected]

Page 37: Modern Website Development

Q&A